/* ==========================================================================
   THE CLIMATE TRAILWAY: layout only. Brand colors, type, the page
   header, pills, the page frame (the margins), and the footer come from
   core/atlas.css. Everything is left-aligned and reading text stops at
   about 44rem.

   How the page is put together:
     - The trail is one vertical line down the left. Every stop and place
       sits on it, so the reader can always tell where they are.
     - Places (the Trailhead, the top of the trail, the Climate Lodge, and
       the Bulletin Board) are colored square markers with a plain heading
       beside them. The line takes each place's color.
     - Stops and parts are cards beside the line. They open and close
       (details/summary); a stop's marker fills in while it's open. Rest
       stops have round markers.
     - Past the Lodge the line turns dotted: through the Field Guide (a
       booklet with a dashed edge) to the Bulletin Board (a cork board).
     - Every kind of content has a word label or an icon, so color is
       never the only signal.
   ========================================================================== */

:root {
    --park: var(--green-color);        /* the park's own green: the Trailhead */
    --park-tint: var(--green-tint-1);
    /* The reader's trail. Green until a trail is picked; then trail.js
       sets all five from the picked color (core/atlas.css tokens). */
    --trail: var(--green-color);       /* the trail line and its stops */
    --trail-text: var(--green-text);   /* the trail's color, as readable text */
    --trail-tint: var(--green-tint-1);
    --trail-ink: var(--green-text);    /* the trail's text on its own tint */
    --trail-on: #fff;                  /* text on the trail's color */
    --lodge: #0F7393;                  /* the Lodge: 4.5:1 or better on white */
    --lodge-tint: #E1F1F7;
    --board: #4A3422;                  /* the Bulletin Board: wood brown */
    --board-tint: #F5EEE6;
    --note: #7A5C22;                   /* rest stop questions and notes */
    --note-tint: #F6EFE1;
    --rule: var(--border-color);
    --display: 'ADLaM Display', 'Varela Round', sans-serif;
    --read: 44rem;                     /* longest line of reading text */
}


/* ==========================================================================
   The whole page
   ========================================================================== */

.trail-page {
    padding-bottom: 3rem;
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* Even line breaks: no single word left alone on a last line, and
   headings that wrap in balanced lines. */
.trail-page p,
.trail-page li,
.page-header p,
.odesc,
.sum-line,
dd {
    text-wrap: pretty;
}

.trail-page h2,
.trail-page h3,
.place-title,
.room-title {
    text-wrap: balance;
}

a {
    color: var(--lodge);
    font-weight: 700;
    text-underline-offset: 2px;
}

a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--lodge);
    outline-offset: 2px;
}

/* Words only screen readers get. */
.vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Jumps leave room for the progress bar at the top of the screen. */
html {
    scroll-padding-top: 5rem;
}

#exhibitOpen,
.place,
.is-guide {
    scroll-margin-top: 1rem;
}

/* Its own site: core/atlas.css hides the scroll bar; the Trail is long,
   so it shows one. */
html,
body {
    scrollbar-width: auto;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: block;
    width: 12px;
}

html::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 6px;
}

/* Until trail.js has drawn the page, only the title and the line under it
   show; the empty frames below would flash for a moment otherwise. If the
   trail can't run, they stay hidden and the note under the title explains. */
html.loading main,
html.loading #todo,
html.loading #note,
html.loading #progress,
html.loading .site-foot {
    display: none;
}


/* ==========================================================================
   The page header
   ========================================================================== */

/* The line under the title reads as a subheader. */
.page-header .lede {
    max-width: var(--read);
    margin: 0 0 0.6rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--park);
}

/* "a Kinfeather project": a small tag under the title. */
.page-header .by {
    margin: -0.2rem 0 1rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.page-header .by a {
    color: var(--text-secondary);
    text-decoration: none;
}

.page-header .by a:hover {
    text-decoration: underline;
}

/* "Preview": a small tag beside that line, linking to the feedback line
   above the footer. */
.page-header .by .preview-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.6rem;
    border: 1.5px solid var(--park);
    border-radius: 999px;
    color: var(--park);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 0.05rem;
}

/* The six colors, as a quiet band under the lede, in list order. */
.page-header .colors {
    display: flex;
    gap: 6px;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.page-header .colors li {
    flex: 1;
    height: 10px;
    border-radius: 3px;
}

.c-red { background: var(--red-color); }
.c-orange { background: var(--orange-color); }
.c-yellow { background: var(--yellow-color); }
.c-green { background: var(--green-color); }
.c-blue { background: var(--blue-color); }
.c-indigo { background: var(--indigo-color); }

/* When the trail can't run: one plain note under the title. */
.no-run {
    max-width: var(--read);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    background: #FFF2CC;
    font-weight: 700;
}

/* One line on the whole journey. */
.todo {
    max-width: var(--read);
    margin: 0 0 0.75rem;
}

.page-header .intro {
    max-width: var(--read);
    margin: 0.35rem 0 0;
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--text-primary);
}

/* "Want to finish later?" and its panel (see "Save your spot"). */
.pace {
    max-width: var(--read);
    margin-top: 1.4rem;
}

.page-header .pace p {
    margin: 0 0 0.5rem;
}

.pace-q {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
}

#saveTop {
    max-width: var(--read);
    margin-top: 0.8rem;
    padding: 1rem 1.1rem;
    border: 2px solid var(--rule);
    border-radius: 14px;
    background: var(--bg-primary);
}

#saveTop .save {
    margin: 0;
}


/* ==========================================================================
   The trail line and its markers
   ========================================================================== */

/* Every place's marker sits centered on its title, whatever the title's
   size: the title's box starts 6px down, and the marker is 2.6rem. */
.line {
    --marker-top: calc(6px + (1.05 * clamp(1.8rem, 6vw, 2.2rem) - 2.6rem) / 2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.stop {
    position: relative;
    padding-left: 3.4rem;
    display: flow-root;           /* keeps the line unbroken past inner margins */
}

/* The trail itself: a solid line down the left. */
.stop::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--trail);
}

/* Numbered markers: outlined at rest, filled while open. */
.marker {
    position: absolute;
    z-index: 1;
    left: 0.35rem;
    top: 0.5rem;
    width: 2rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border: 4px solid var(--trail);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--trail-text);
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.stop.is-open > .marker {
    background: var(--trail);
    color: var(--trail-on);
}

/* Rest and Reflect: the same colors, a round marker. */
.stop.rest > .marker {
    border-radius: 50%;
    width: 2.3rem;
    height: 2.3rem;
    left: 0.2rem;
    top: 0.6rem;
}

.stop.trail > .marker {
    top: 0.9rem;
}

.stop.trail.rest > .marker {
    top: 1rem;
}

/* Dotted paths, drawn as a row of dots rather than a dotted border: some
   phones draw a very long dotted border unevenly. Each sets --dots. */
.place.is-lodge::before,
.place.is-board::before,
.stop.is-guide::before,
.stop.is-guide::after {
    background: radial-gradient(circle at 50% 50%, var(--dots) 2.3px, transparent 2.7px) 0 0 / 5px 10px repeat-y;
}


/* ==========================================================================
   Places: the Trailhead, the top of the trail, the Climate Lodge, and the
   Bulletin Board. One --place color sets each one's marker and line.
   ========================================================================== */

.place::before {
    background: var(--place);
}

.place > .marker {
    top: var(--marker-top);
    left: 0.05rem;
    width: 2.6rem;
    height: 2.6rem;
    border-color: var(--place);
    border-radius: 9px;
    background: var(--place);
    color: #fff;
}

.place > .marker svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* A place's heading: its title and a short line, in plain text. */
.place-sign {
    margin-top: 0.35rem;
    color: var(--text-primary);
}

.place-sign .text {
    padding: 0 0 0.4rem;
}

.place-sign p {
    margin: 0;
}

.place-title {
    margin: 0.15rem 0 4px;
    font-family: var(--display);
    font-size: clamp(1.8rem, 6vw, 2.2rem);
    font-weight: 400;
    line-height: 1.05;
}

.place-sign .place-sub {
    margin-top: 4px;
    color: var(--text-secondary);
}

/* A hint under the short line, on its own line, like the Pavilion's. */
.place-sign .place-hint {
    margin: 10px 0 0;
}

.place-board {
    padding: 0.4rem 0 0;
    margin-bottom: 2.2rem;
}

.place-board > p {
    max-width: var(--read);
}

/* A heading on a place's board, then its hint: 4px apart; the hint and
   what it introduces: 16px. */
.board-h {
    margin: 0.9rem 0 4px;
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
}

.step-hint {
    max-width: var(--read);
    margin: 0 0 16px;
    color: var(--text-secondary);
}

/* The Trailhead: the line starts below its marker. */
.place.is-trailhead {
    --place: var(--park);
    padding-bottom: 0.4rem;
}

.place.is-trailhead::before {
    top: 3rem;
}

/* A place that is also a numbered stop (the Pavilion is stop 5): its
   number, small, under its name. */
.place-eyebrow {
    margin-top: 2px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--place);
}

/* Back at the Visitor Center: the loop arrives on the park's green. */
.place.is-finish {
    --place: var(--park);
}

/* The return's three parts: the planning desk, the Bulletin Board, and
   the Field Guide. Each is a white card on the Visitor Center's board. */
.finish-part {
    margin: 1.4rem 0 0;
    padding: 1.1rem 1.1rem 1rem;
    border-radius: 10px;
    background: var(--bg-primary);
    box-shadow: 0 1px 3px rgba(74, 52, 34, 0.15);
}

.finish-part .board-h {
    margin-top: 0;
}

.near-head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.near-head .board-h {
    margin: 0;
}

.near-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 9px;
    background: var(--board);
    color: #fff;
}

.near-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.take-icon {
    background: var(--note);
}

.near-line {
    margin: 0;
    font-weight: 700;
    color: var(--board);
}

.near-local {
    margin-top: 1rem;
}

.own-label {
    display: block;
    margin-top: 1rem;
}

.take-ways p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.8rem;
    margin: 0 0 0.6rem;
}

/* The top of the trail: the trail's own marker and name. */
.place.is-trail {
    --place: var(--trail);
    padding-bottom: 0.6rem;
}

.place.is-trail > .marker {
    color: var(--trail-on);
}

/* Inside the Lodge, the line turns dotted: exploring, but not the park's
   own path. */
.place.is-lodge {
    --place: var(--lodge);
}

.place.is-lodge::before {
    --dots: var(--lodge);
}

/* The Bulletin Board ends the trail: a short dotted path arrives from
   the Field Guide and stops at its marker. */
.place.is-board {
    --place: var(--board);
    padding-top: 4.5rem;
}

.place.is-board::before {
    --dots: var(--board);
    bottom: auto;
    height: 4.6rem;
}

.place.is-board > .marker {
    top: calc(4.5rem + var(--marker-top));
}


/* ==========================================================================
   Stops and parts: cards beside the line, the title alone while closed
   ========================================================================== */

details {
    border-bottom: 1px solid var(--rule);
}

summary {
    list-style: none;
    cursor: pointer;
    display: block;
    padding: 0.75rem 0;
}

summary::-webkit-details-marker {
    display: none;
}

/* The title, then Open / Close right after its last word, so the link
   never sits alone on a line of its own. */
.sum {
    display: block;
}

.sum h3 {
    display: inline;
}

summary h3 {
    margin: 0;
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.25;
}

/* A short line under a part's title, so a closed part still says what's
   inside. */
.sum-line {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

/* Open / Close: linked text right after the title. */
.toggle {
    margin-left: 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lodge);
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
}

summary:hover .toggle {
    text-decoration-thickness: 2px;
}

details[open] .open-label,
details:not([open]) .close-label {
    display: none;
}

.body {
    min-width: 0;
    padding-bottom: 1.1rem;
}

.body p {
    max-width: var(--read);
    margin: 0 0 1.1rem;
}

.stop.trail,
.stop.room {
    padding-bottom: 1rem;
}

#trailStops > .stop:last-child {
    padding-bottom: 2.4rem;
}

/* Parts of an exhibit, the Field Guide, and the Lodge's opening sign:
   unnumbered, off the line. */
.stop.room {
    padding-left: 0;
}

.stop.room::before {
    display: none;
}

.stop.trail > details,
.stop.room > details {
    border: 2px solid var(--rule);
    border-radius: 14px;
    background: var(--bg-primary);
}

.stop.trail.is-open > details {
    border-color: var(--trail);
}

.stop.room.is-open > details {
    border-color: var(--lodge);
}

.stop.trail > details > summary,
.stop.room > details > summary {
    min-height: 64px;
    padding: 1rem 1.1rem;
}

.stop.trail.is-open > details > summary {
    background: var(--trail-tint);
    border-radius: 12px 12px 0 0;
}

/* "Close" on an open stop sits on the trail's tint. */
.stop.trail.is-open > details > summary .toggle {
    color: var(--trail-ink);
}

.stop.trail .body,
.stop.room .body {
    padding: 0.4rem 1.1rem 1.3rem;
}

/* A list of parts on a white panel. */
.rooms {
    margin: 0.2rem 0 0.8rem;
    padding: 0 1rem;
    list-style: none;
    background: var(--bg-primary);
    border-radius: 10px;
}

/* "Next stop" / "Next" at the end of each stop and part. */
.body .ahead {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--border-strong);
    color: var(--text-secondary);
}

.ahead svg {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.2rem;
    color: var(--text-primary);
}

.ahead b {
    color: var(--text-primary);
}


/* ==========================================================================
   The Trailhead: getting your bearings, the park map and its key, the
   trail picker
   ========================================================================== */

/* "This trail is open to everyone," at the top of the board. */
.open-all {
    margin: 0 0 0.2rem;
}

.story-intro {
    max-width: var(--read);
    margin: 0 0 0.4rem;
}

.story {
    padding-top: 0.4rem;
}

/* A small "read more" opener. */
.mini {
    border: none;
    margin-top: 0.3rem;
}

.mini > summary {
    display: inline-flex;
    padding: 0.2rem 0;
    font-weight: 700;
    color: var(--lodge);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The park map: a picture of the trail, above its key. Wide on computers,
   tall on phones. Colors come from the same tokens as the page, so the
   trail turns your trail's color. */
.park-map {
    --map-trailhead: var(--park);
    --map-center: var(--park);
    --map-lodge: var(--lodge);
    margin: 0.4rem 0 0.2rem;
}

.park-map svg {
    display: block;
    width: 100%;
    height: auto;
    background: #F3F8EE;
    border: 1px solid var(--green-tint-2);
    border-radius: 10px;
}

.park-map .map-tall { display: none; }

.map-name {
    font: 700 14px 'Varela Round', sans-serif;
    fill: var(--text-primary);
    stroke: #F3F8EE;
    stroke-width: 4px;
    paint-order: stroke;
}

.map-sub { font: 700 11.5px 'Varela Round', sans-serif; fill: var(--park); stroke: #F3F8EE; stroke-width: 4px; paint-order: stroke; }
.map-badge { font: 700 13px 'Varela Round', sans-serif; fill: var(--lodge); }
/* The Visitor Center's yard: a light clearing where the loop begins and ends. */
.map-yard { fill: #EAE3D2; stroke: #D3C7A9; stroke-width: 1.5px; }
.map-num { font: 700 14px 'Varela Round', sans-serif; }
.map-n { font: 700 13px 'Varela Round', sans-serif; fill: var(--text-secondary); }
.map-lake { fill: #CFE7F0; stroke: #8FC1D4; stroke-width: 1.5px; }
.map-lake-name { font: italic 13px 'Varela Round', sans-serif; fill: #3D6F82; }
.map-north { fill: #fff; stroke: var(--text-secondary); stroke-width: 1.5px; }

/* The map's key: the Visitor Center, the Trailhead, the trail stops, and
   the Pavilion, each icon in its place's color, the name on its own line
   and a few words below. */
.route {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 1rem 0 1.2rem;
    padding: 0;
    list-style: none;
}

.route li {
    display: flex;
}

.route-place {
    flex: 1;
    display: grid;
    gap: 0.35rem;
    align-content: start;
    min-height: 44px;
    padding: 2px;
    font-size: 0.92rem;
    line-height: 1.35;
}

.route-name,
.route-text {
    display: block;
}

.route-text {
    color: var(--text-secondary);
}

.route-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--route);
    color: #fff;
}

.route-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.route-trailhead { --route: var(--park); }
.route-center    { --route: var(--park); }
.route-lodge     { --route: var(--lodge); }

/* Trail Blazes: six short dashes, one in each trail's color. */
.route-blazes {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    place-items: center stretch !important;
    align-content: center;
    gap: 3px;
    padding: 6px;
    background: #F3F8EE !important;
    border: 1px solid var(--green-tint-2);
}

.route-blazes i {
    display: block;
    justify-self: stretch;
    width: 100%;
    height: 5px;
    border-radius: 3px;
}

/* The Return Trail: a dashed wood-brown line. */
.route-back-line {
    background: #F3F8EE !important;
    border: 1px solid var(--green-tint-2);
    background-image: linear-gradient(90deg, var(--board) 0 60%, transparent 60% 100%) !important;
    background-size: 12px 5px !important;
    background-repeat: repeat-x !important;
    background-position: 0 50% !important;
}

/* "Trail Stops" is drawn like a stop on the map: a white box with a
   colored border and its number. */
.route-trail .route-icon {
    justify-self: start;
    width: 2.1rem;
    height: 2.4rem;
    margin-left: 0.15rem;
    border: 4px solid var(--trail);
    background: var(--bg-primary);
    color: var(--trail-text);
    font-weight: 700;
    font-size: 1rem;
}

/* The Field Guide is received, not a place: a dashed outline. */
.route-guide .route-icon {
    border: 2px dashed var(--note);
    background: var(--note-tint);
    color: var(--note);
}

/* Pickers: the trail picker here, and the exhibit picker in the Lodge. */
.pick-body {
    margin: 2rem 0 0.3rem;
}

.pick-body .board-h {
    margin-top: 0;
}

.options {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.opt {
    width: 100%;
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 0.6rem 0.7rem;
    border: 2px solid transparent;
    border-radius: 12px;
    background: none;
    font: inherit;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.opt:hover {
    background: var(--bg-secondary);
}

.opt[aria-pressed="true"] {
    background: var(--trail-tint);
    border-color: var(--trail);
}

.oname {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
}

.tcolor {
    font-weight: 400;
    color: var(--text-secondary);
}

.odesc {
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* A trail's color, as a small upright bar. */
.blaze {
    width: 1.1rem;
    height: 1.6rem;
    margin-top: 0.15rem;
    border-radius: 3px;
}

/* The trail picker: one list on a white panel framed like the park map. */
#trailOpts {
    margin: 1px;
    padding: 0.4rem;
    border: 0.75rem solid #F3F8EE;
    border-radius: 16px;
    background: var(--bg-primary);
    box-shadow: 0 0 0 1px var(--green-tint-2);
}

/* "Find your trail": optional questions between the hint and the six
   trails. Closed, it's one underlined line; open, a light panel. */
.finder {
    margin: -0.4rem 0 1rem;
}

.finder-body {
    max-width: var(--read);
    margin-top: 0.6rem;
    padding: 1rem 1.1rem 0.4rem;
    border-radius: 12px;
    background: #F3F8EE;
    box-shadow: 0 0 0 1px var(--green-tint-2);
}

.finder-intro {
    margin: 0 0 0.8rem;
    color: var(--text-secondary);
}

.finder-q {
    margin: 0 0 1rem;
    padding: 0;
    border: none;
}

.finder-q legend {
    margin-bottom: 0.4rem;
    padding: 0;
    font-weight: 700;
}

/* Each answer: a checkbox and its words, with room to tap. */
.finder-a {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: 0.5rem;
    align-items: start;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    cursor: pointer;
}

.finder-a:hover {
    background: var(--bg-primary);
}

.finder-a input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.2rem 0 0;
    accent-color: var(--green-text);
}

.finder-out:not(:empty) {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: var(--bg-primary);
}

.finder-out p {
    margin: 0 0 0.6rem;
}

.finder-result {
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 500;
}

.finder-go-list {
    display: grid;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    padding: 0;
    list-style: none;
}

/* A shortcut to one trail: the same color bar and name as the picker. */
.finder-go {
    width: 100%;
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 0.6rem 0.7rem;
    border: 2px solid var(--border-strong);
    border-radius: 12px;
    background: var(--bg-primary);
    font: inherit;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.finder-go:hover {
    border-color: var(--green-text);
    background: var(--bg-secondary);
}

.finder-go-label {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--green-text);
}

.finder-after {
    font-weight: 700;
    color: var(--text-primary);
}

/* "Your trail": a tag on the picked row, with a check. */
.your-tag {
    display: none;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--trail-ink);
    vertical-align: 0.1rem;
}

.your-tag svg {
    width: 0.95rem;
    height: 0.95rem;
}

.opt[aria-pressed="true"] .your-tag {
    display: inline-flex;
}


/* ==========================================================================
   The Climate Lodge: a building of its own, framed like the park map and
   the Field Guide. Its exhibit cards are its rooms; the open exhibit is a
   room with its own sign.
   ========================================================================== */

.lodge-card {
    margin: 0.6rem 0;
    padding: 1rem 1.1rem 1.2rem;
    border: 2px solid #B9DCE8;
    border-radius: 12px;
    background: #EEF7FA;
}

.lodge-card .place-board {
    margin: 0;
    padding: 0;
}

.lodge-card .board-h {
    margin-top: 0.4rem;
}

/* The exhibit picker: one card per room, side by side. */
.floor {
    margin-top: 0.4rem;
}

.exhibits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.exhibits li {
    display: flex;
}

.exhibits .opt {
    position: relative;
    height: 100%;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    align-content: start;
    padding: 0.9rem 0.8rem 1rem;
    border: 2px solid #B9DCE8;
    border-radius: 10px;
    background: var(--bg-primary);
}

.exhibits .opt:hover {
    background: #F5FAFC;
}

/* A room you've been in: a soft fill, with its check. */
.exhibits .opt.is-visited {
    background: var(--lodge-tint);
}

/* The room you're in: the Lodge's own color, marked "You are here." */
.exhibits .opt[aria-pressed="true"] {
    border-color: var(--lodge);
    background: var(--lodge);
    color: #fff;
}

.exhibits .opt[aria-pressed="true"] .oname,
.exhibits .opt[aria-pressed="true"] .odesc,
.exhibits .opt[aria-pressed="true"] .opt-icon {
    color: #fff;
}

.exhibits .oname {
    color: var(--lodge);
    hyphens: auto;
    overflow-wrap: break-word;
}

.exhibits .odesc {
    display: block;
}

/* Each exhibit's topic icon, above its name. */
.opt-icon {
    display: grid;
    justify-items: start;
    align-items: center;
    margin-top: 0.1rem;
    color: var(--lodge);
}

.opt-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.here {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--text-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

/* "Visited," with a check, on a line of its own under the description. */
.visited {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0A5068;
}

.visited svg {
    width: 1.15rem;
    height: 1.15rem;
    padding: 0.15rem;
    border-radius: 50%;
    background: var(--lodge);
    color: #fff;
}

/* The open exhibit: its sign, a one-line promise, then its parts. */
.exhibit-open {
    margin-top: 2rem;
}

.room-sign {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.2rem 0.9rem;
    padding: 0.8rem 1rem;
    border-radius: 12px 12px 0 0;
    background: var(--lodge);
    color: #fff;
}

.room-sign p {
    margin: 0;
}

.room-sign .place-sub {
    margin-top: 4px;
}

.room-title {
    font-family: var(--display);
    font-size: clamp(1.7rem, 6vw, 2.1rem);
    line-height: 1.1;
}

.room-sign .place-icon {
    width: 2.6rem;
    height: 2.6rem;
    color: #fff;
}

.room-body {
    padding: 0.8rem 1rem 0.2rem;
    border: 2px solid var(--lodge);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: var(--bg-primary);
}

.room-body > p {
    max-width: var(--read);
}

.promise {
    font-weight: 700;
    font-size: 1.05rem;
}

/* An exhibit's parts already sit on white, so the panel needs no edge. */
.room-body .rooms {
    padding: 0;
}


/* ==========================================================================
   The Field Guide: something received, not a place. A booklet with a
   dashed edge, on a dotted path between the Lodge and the Bulletin Board.
   ========================================================================== */

/* The path changes color at a marker, never in open space: Lodge-blue
   dots run down to the Field Guide's marker (::after), and its own brown
   dots start there (::before). */
.stop.is-guide {
    --guide-marker: calc(3rem + var(--marker-top));
    padding-top: 3rem;
}

.stop.is-guide::before {
    --dots: var(--board);
    top: var(--guide-marker);
}

.stop.is-guide::after {
    --dots: var(--lodge);
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 0;
    width: 5px;
    height: var(--guide-marker);
}

.stop.is-guide > .marker {
    top: var(--guide-marker);
    left: 0.05rem;
    width: 2.6rem;
    height: 2.6rem;
    border: 3px dashed var(--note);
    border-radius: 9px;
    background: var(--note-tint);
    color: var(--note);
}

.stop.is-guide > .marker svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* Its title and line stand alone above the booklet. */
.guide-sign {
    margin-top: 0;
}

.guide-sign .text {
    padding: 0;
}

.guide-card {
    margin: 16px 0 0.6rem;
    border: 2px dashed var(--note);
    border-radius: 12px;
    background: var(--note-tint);
}

.guide-body {
    padding: 1rem 1.1rem 0.6rem;
}

.guide-body > p {
    max-width: var(--read);
}

/* Print, with a way back to the Lodge below it. */
.print-row {
    margin: 0.6rem 0 0.4rem;
}

.guide-body > .print-row:first-child {
    margin-top: 0;
}

.print-row .reach {
    display: block;
    margin-top: 0.35rem;
}

/* Near the top: one line on safety. */
.guide-safety {
    max-width: var(--read);
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Which topics go in the Field Guide. */
.door {
    margin: 0.4rem 0 1.6rem;
    padding: 1.3rem 1.2rem;
    border: 2px dashed var(--note);
    border-radius: 14px;
    background: var(--note-tint);
}

.door-q {
    margin: 0 0 0.9rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #5C4418;
}

.door-list {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.door-pick {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0 0.9rem;
    border-radius: 10px;
    background: var(--bg-primary);
    font-size: 1.05rem;
    cursor: pointer;
}

.door-pick input {
    width: 1.35rem;
    height: 1.35rem;
    accent-color: var(--note);
}

.door-pick svg {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--lodge);
}

/* "Back to the Climate Lodge," at the bottom of the topic box. */
.back-row {
    margin: 1rem 0 0;
    color: var(--text-secondary);
}

.back-row .reach {
    display: block;
    margin-top: 0.1rem;
}

/* The trail's pages, then each topic's, each under a heading with its own
   mark. The parts sit straight on the booklet's page. */
.guide-topic + .guide-topic {
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 2px dotted #C9B48A;
}

.guide-h {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.6rem 0 0.9rem;
    font-size: 1.35rem;
}

.guide-h-blaze {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 7px;
}

.guide-h-icon {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--lodge);
    color: #fff;
}

.guide-h-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.guide-body .rooms {
    display: grid;
    gap: 0.3rem;
    margin: 0.4rem 0 0.8rem;
    padding: 0;
    background: none;
}

/* "Learn other ways to help": all six, the reader's own marked in words. */
.ways-list {
    display: grid;
    gap: 0.5rem;
    max-width: var(--read);
    margin: 0.2rem 0 0.8rem;
    padding: 0;
    list-style: none;
}

.ways-list li {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.8rem;
    align-items: start;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
}

.ways-list li.mine {
    background: var(--trail-tint);
}

.ways-list .odesc {
    display: block;
}

.yours {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--trail-ink);
}


/* ==========================================================================
   The Bulletin Board: a cork-colored board. The trip, place by place, then
   notes pinned to it.
   ========================================================================== */

.place.is-board .place-board {
    margin-top: 0.6rem;
    padding: 1.1rem 1.1rem 1.3rem;
    border: 2px solid #D9C9B4;
    border-radius: 12px;
    background: var(--board-tint);
}

.board-lede {
    max-width: var(--read);
    margin: 0 0 1rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--board);
}

/* The trip: the park map in the reader's trail color, then each place. */
.trip {
    padding: 0.9rem 1rem 1rem;
    border-radius: 10px;
    background: var(--bg-primary);
    box-shadow: 0 1px 3px rgba(74, 52, 34, 0.15);
}

.trip .board-h {
    margin: 0 0 0.6rem;
}

/* Smaller than the Visitor Center's map: a look back at the whole loop. */
.trip-map {
    max-width: 520px;
    margin: 0 auto 1rem;
}

.trip-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trip-steps li {
    position: relative;
    display: grid;
    gap: 0.35rem;
    align-content: start;
    font-size: 0.92rem;
    line-height: 1.35;
}

.trip-steps b,
.trip-did {
    display: block;
}

.trip-did {
    color: var(--text-secondary);
}

.trip-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--trip);
    color: #fff;
}

.trip-icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.trip-trailhead { --trip: var(--park); }
.trip-trail     { --trip: var(--trail); }
.trip-lodge     { --trip: var(--lodge); }
.trip-back      { --trip: var(--board); }
.trip-finish    { --trip: var(--park); }

.trip-trail .trip-icon {
    color: var(--trail-on);
}

/* A check on each place behind you; the board is marked "You're here." */
.trip-check {
    position: absolute;
    top: -0.35rem;
    left: 1.9rem;
    width: 1.15rem;
    height: 1.15rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg-primary);
    color: var(--park);
    box-shadow: 0 0 0 2px var(--bg-primary);
}

.trip-check svg {
    width: 1rem;
    height: 1rem;
}

.trip-steps .is-here b {
    color: var(--board);
}

/* No exhibit visited yet: the Pavilion sits quieter, with no check, and a
   line under the loop offers the way back. */
.trip-steps .is-skipped .trip-icon {
    opacity: 0.45;
}

.trip-none {
    max-width: var(--read);
    margin: 0.8rem 0 0;
    color: var(--text-secondary);
}

/* The pinned notes: white cards with a pin at the top. */
.pins {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    margin-top: 1.4rem;
}

.pin {
    position: relative;
    min-width: 0;
    padding: 1.2rem 1.1rem 1.1rem;
    border-radius: 10px;
    background: var(--bg-primary);
    box-shadow: 0 1px 3px rgba(74, 52, 34, 0.15);
}

/* A pushpin: a round head with a little shine and a soft shadow, in the
   board's own wood brown (never a trail color), set just inside the
   note's top edge. */
.pin::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0 2.5px, rgba(255, 255, 255, 0) 4px),
        radial-gradient(circle at 50% 50%, var(--pin, var(--board)) 0 60%, color-mix(in srgb, var(--pin, var(--board)) 70%, black) 100%);
    box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.35);
}

.pin h3 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.pin p {
    margin: 0 0 0.6rem;
}

.pin-words,
.pin-save,
.pin-before,
.pin-feedback {
    grid-column: 1 / -1;
}

/* Your first step, under your way of helping. */
.board-step-h {
    margin: 0.9rem 0 0.4rem;
}

/* "Before you go": one print button, then short openers. */
.before-print {
    margin: 0 0 0.4rem;
}

.before-item {
    border-top: 1px solid var(--border-color);
    margin: 0;
    padding: 0.35rem 0;
}

.before-item > summary {
    min-height: 44px;
    align-items: center;
    cursor: pointer;
}

.before-body {
    padding: 0.2rem 0 0.6rem;
}

.before-body .save {
    margin: 0;
}

/* The way back to the start, at the very end. */
.home-row {
    margin: 1.4rem 0 0.4rem;
}

/* "Help make the trail better": short questions, side by side where
   there's room, each answer easy to tap. */
.fb-q {
    margin: 0 0 0.9rem;
    padding: 0;
    border: none;
}

.fb-q legend {
    margin-bottom: 0.35rem;
    padding: 0;
    font-weight: 700;
}

.fb-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fb-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
}

.fb-opt:has(input:checked) {
    border-color: var(--lodge);
    background: var(--bg-secondary);
    font-weight: 700;
}

.fb-opt input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--lodge);
}

.fb-label {
    display: block;
    margin: 0.2rem 0 0.35rem;
    font-weight: 700;
}

.fb-comment {
    width: 100%;
    max-width: var(--read);
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 1rem;
    color: var(--text-primary);
    resize: vertical;
}

.fb-includes,
.fb-privacy {
    max-width: var(--read);
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.fb-includes {
    margin-top: 0.5rem;
}

.pin-feedback .save-row {
    margin: 0.2rem 0 0.7rem;
}

.pin-save .save {
    margin: 0;
}

.pin-words p {
    max-width: var(--read);
    font-size: 1.05rem;
}

.pin-words p:last-child {
    margin-bottom: 0;
    font-weight: 700;
    color: var(--board);
}

/* Your way of helping, and its three words. */
.way-you {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--trail-text);
}

.way-you .blaze {
    flex: none;
    margin: 0;
}

.way-words {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
}

.way-words li {
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--trail-tint);
    color: var(--trail-ink);
    font-weight: 700;
    font-size: 0.9rem;
}

/* "Your first steps": with more than one, pick one to start with; it
   moves to the top. */
.first-hint {
    color: var(--text-secondary);
}

.first-list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.first-list li {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: 0.6rem;
    align-items: start;
}

.first-list li:has(.first-pick) {
    display: block;
}

/* A topic left out of the Field Guide hides its first step too. */
.first-list li[hidden] {
    display: none;
}

.first-list li.is-start {
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: var(--board-tint);
}

.first-icon {
    margin-top: 0.1rem;
    color: var(--lodge);
}

.first-icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.first-pick {
    display: grid;
    grid-template-columns: 1.1rem 1.4rem 1fr;
    gap: 0.6rem;
    align-items: start;
    cursor: pointer;
}

.first-pick input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0.2rem 0 0;
    accent-color: var(--lodge);
}

.start-tag {
    display: none;
    margin-left: 0.4rem;
    padding: 0 0.45rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 0.1em;
}

.first-list li.is-start .start-tag {
    display: inline-block;
}

/* Pass the trail on: the message to share. */
.pass-msg {
    margin: 0 0 0.8rem;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    background: var(--board-tint);
    font-style: italic;
    overflow-wrap: anywhere;
}

/* Try another trail. */
.try-trails {
    display: grid;
    gap: 0.3rem;
}

.try-trail {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.3rem 0.6rem;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-weight: 700;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.try-trail:hover {
    background: var(--bg-secondary);
}

.try-trail:focus-visible {
    outline: 3px solid var(--lodge);
    outline-offset: 1px;
}

.try-trail .blaze {
    flex: none;
    width: 0.9rem;
    height: 1.3rem;
    margin: 0;
}


/* ==========================================================================
   Save your spot: share, email, or copy a link back to this spot, at the
   top of the page and on the Bulletin Board
   ========================================================================== */

.save {
    margin-top: 0.4rem;
}

.save-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.save-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1rem;
    border: 2px solid var(--lodge);
    border-radius: 999px;
    background: var(--bg-primary);
    font: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--lodge);
    text-decoration: none;
    cursor: pointer;
}

.save-btn:hover {
    background: var(--lodge-tint);
}

.save-link {
    display: block;
    width: 100%;
    margin-top: 0.7rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--bg-primary);
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* What is (and isn't) saved. Beats the paragraph spacing of the header
   and the pinned notes. */
.save-privacy {
    margin: 0.7rem 0 0 !important;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.save-privacy b {
    color: var(--text-primary);
}


/* ==========================================================================
   Content inside a stop
   ========================================================================== */

/* A small heading inside a stop. Its spacing beats the paragraph spacing
   of every place it sits. */
.sub {
    font-weight: 700;
    margin: 1rem 0 0.25rem !important;
}

.cite {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* The saved copy beside a source: smaller and quieter than the source. */
.archived {
    font-size: 0.85em;
    white-space: nowrap;
}

a.ext svg {
    width: 0.95rem;
    height: 0.95rem;
    margin-left: 0.2rem;
    vertical-align: -0.1rem;
}

ul.plain {
    max-width: var(--read);
    margin: 0 0 0.8rem;
    padding-left: 1.2rem;
}

ul.plain li {
    margin-bottom: 0.45rem;
}

/* Action words and other short definitions: the word, then what it means. */
.actions,
.defs {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.5rem 0.9rem;
    max-width: var(--read);
    margin: 0 0 0.8rem;
}

.actions dt,
.defs dt {
    font-weight: 700;
    color: var(--trail-text);
}

.actions dd,
.defs dd {
    margin: 0;
}

.actions .eg {
    display: block;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.quote {
    max-width: var(--read);
    margin: 0.4rem 0 1rem;
    padding: 0.2rem 0 0.2rem 1rem;
    border-left: 4px solid var(--trail);
}

.quote blockquote {
    margin: 0 0 0.3rem;
    font-family: var(--display);
    font-size: 1.2rem;
    line-height: 1.35;
}

.quote figcaption {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Directions: a checkbox, then a sentence that starts with a bold verb. */
.check {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    max-width: var(--read);
    padding: 0.25rem 0;
}

.check input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.3rem;
    accent-color: var(--lodge);
}

.reach {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.rdesc {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.say {
    margin: 0 0 0.8rem;
    padding-left: 1.2rem;
}

.say li {
    margin-bottom: 0.4rem;
}

.say q {
    font-style: italic;
}

/* Rest and Reflect: questions in a shaded box, then a notes box. */
.reflect {
    max-width: var(--read);
    margin: 0.6rem 0 1.1rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    background: var(--note-tint);
}

.reflect ul {
    margin: 0;
    padding-left: 1.2rem;
}

.reflect .sub {
    color: var(--note);
    margin-top: 0 !important;
}

.notes {
    max-width: var(--read);
    margin: 0.4rem 0 0.6rem;
}

.notes .sub {
    display: block;
}

.note {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--note) 45%, white);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 1rem;
    color: var(--text-primary);
    resize: vertical;
}

.note:focus-visible {
    outline-color: var(--note);
}

.notes .note-help {
    margin: 0.35rem 0 0.2rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

/* A button that reads as a link ("Clear my notes"). */
.linkish {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lodge);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Hidden find: guess first, then reveal. */
.find {
    max-width: var(--read);
    margin: 0.6rem 0 1.1rem;
    padding: 0.8rem 1rem;
    border: 2px dashed var(--border-strong);
    border-radius: 12px;
}

.find-prompt {
    font-weight: 700;
}

.find-reveal {
    margin-top: 0.7rem;
}

/* "Try it now": a short activity on a small paper card, like a page of
   the Field Guide, with a version that needs no movement. */
.stretch {
    max-width: var(--read);
    margin: 0.6rem 0 1.1rem;
    padding: 1rem 1.1rem;
    border: 2px dashed var(--note);
    border-radius: 12px;
    background: var(--note-tint);
}

.stretch .sub {
    color: #5C4418;
}

.stretch ol {
    margin: 0 0 0.5rem;
    padding-left: 1.3rem;
}

.stretch-note {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.3rem 0 0.4rem;
}

.pills .pill-btn,
.find .pill-btn,
.next-btn {
    padding: 0.4rem 0.95rem;
    font-size: 0.95rem;
}


/* ==========================================================================
   The progress bar: a slim strip that stays at the top of the screen once
   a trail is picked and the reader is past the Trailhead
   ========================================================================== */

.progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.progress ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.25rem;
    max-width: 62rem;
    margin: 0 auto;
    padding: 0.3rem 0.5rem;
    list-style: none;
}

.prog-btn {
    position: relative;
    width: 100%;
    min-height: 44px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.15rem;
    padding: 0.25rem 0.15rem;
    border: none;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 0.72rem;
    line-height: 1.15;
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
}

.prog-btn:hover {
    background: var(--bg-secondary);
}

.prog-btn:focus-visible {
    outline: 3px solid var(--lodge);
    outline-offset: 1px;
}

/* The Field Guide and the Bulletin Board wait for an exhibit. */
.prog-btn:disabled {
    opacity: 0.4;
    cursor: default;
    background: none;
}

.prog-icon {
    width: 1.8rem;
    height: 1.8rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--prog);
    border-radius: 6px;
    color: var(--prog);
}

.prog-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.prog-trailhead { --prog: var(--park); }
.prog-trail     { --prog: var(--trail); }
.prog-lodge     { --prog: var(--lodge); }
.prog-back      { --prog: var(--board); }
.prog-finish    { --prog: var(--park); }

/* The place you're in: its icon filled, its name in bold. */
.prog-btn[aria-current="location"] {
    color: var(--text-primary);
    font-weight: 700;
}

.prog-btn[aria-current="location"] .prog-icon {
    background: var(--prog);
    color: #fff;
}

/* One dot for each trail stop, filled once it's been opened. */
.prog-dots {
    display: flex;
    gap: 3px;
}

.prog-dots i {
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--trail);
    border-radius: 50%;
}

.prog-dots i.done {
    background: var(--trail);
}

/* The number of exhibits visited, as a small badge on the Lodge icon. */
.prog-count {
    position: absolute;
    top: 0;
    right: calc(50% - 1.6rem);
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--text-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1rem;
}


/* ==========================================================================
   The foot of the page
   ========================================================================== */

/* The preview's feedback line, above the shared footer. */
.site-foot .feedback {
    max-width: var(--read);
    margin: 0 0 1rem;
    font-weight: 700;
    color: var(--text-primary);
}


/* ==========================================================================
   Screen sizes
   ========================================================================== */

/* Wider screens: the Lodge is three rooms wide. */
@media (min-width: 700px) {
    .exhibits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Phones and small tablets: the Lodge is two rooms wide, with the ninth
   running the full width at the end, and the Bulletin Board stacks. */
@media (max-width: 699px) {
    .lodge-card {
        padding: 0.8rem 0.7rem 0.9rem;
    }

    .exhibits li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .exhibits .opt {
        padding: 0.75rem 0.6rem 0.85rem;
    }

    .exhibits .oname {
        font-size: 0.88rem;
    }

    .exhibits .odesc {
        font-size: 0.82rem;
    }

    /* Rooms are narrow here, so the tag sits on its own line under the
       icon instead of on top of it. */
    .here {
        position: static;
        justify-self: start;
        margin: 0.1rem 0;
    }

    .place.is-board .place-board,
    .board {
        padding: 0.9rem 0.7rem 1rem;
    }

    .trip-steps {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .trip-steps li {
        grid-template-columns: 2.4rem 1fr;
        align-items: center;
        gap: 0.7rem;
    }

    .trip-check {
        top: -0.3rem;
        left: 1.85rem;
    }

    .pins {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phones: give the boxes room. Every stop and place uses the same line
   position, so the trail runs straight from top to bottom with no jogs. */
@media (max-width: 560px) {
    /* The place markers sit a little left of the line; the line moves in
       by that much, so they stay inside the page frame. */
    .line {
        padding-left: 0.3rem;
    }

    .stop {
        padding-left: 2.7rem;
    }

    .stop::before,
    .stop.is-guide::after {
        left: 0.8rem;
    }

    .marker {
        left: 0.05rem;
        width: 1.9rem;
    }

    .stop.rest > .marker {
        left: -0.05rem;
        width: 2.1rem;
        height: 2.1rem;
    }

    .place > .marker,
    .stop.is-guide > .marker {
        left: -0.3rem;
    }

    .stop.trail > details > summary,
    .stop.room > details > summary {
        padding: 0.9rem;
    }

    .stop.trail .body,
    .stop.room .body {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .rooms {
        padding: 0;
    }

    .body .ahead {
        display: block;
    }

    .ahead svg {
        display: none;
    }

    .park-map .map-wide { display: none; }
    .park-map .map-tall { display: block; max-width: 26rem; margin: 0 auto; }

    .route {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .route-place {
        grid-template-columns: 2.4rem 1fr;
        align-items: center;
        gap: 0.7rem;
    }

    .room-sign {
        grid-template-columns: 1fr;
        padding: 0.7rem;
    }

    .room-sign .place-icon {
        display: none;
    }

    .room-body {
        padding: 0.7rem 0.7rem 0.2rem;
    }

    .guide-body {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .door {
        padding: 1.1rem 0.9rem;
    }

    .actions,
    .defs {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .actions dd,
    .defs dd {
        margin-bottom: 0.5rem;
    }

    .reflect ul {
        padding-left: 1rem;
    }
}


/* ==========================================================================
   Print: the whole trail, opened, without the buttons
   ========================================================================== */

@media print {
    .toggle,
    .pills,
    .find-btn,
    .next-btn,
    .mini,
    .save,
    .linkish,
    .progress,
    .site-foot {
        display: none;
    }

    .find-reveal {
        display: block;
    }

    .note {
        min-height: 6rem;
        border: 1px solid #999;
    }

    /* "Print it" prints the Field Guide keepsake alone. */
    .print-guide .page-header,
    .print-guide main > :not(.keepsake),
    .print-guide .progress,
    .print-guide .site-foot {
        display: none;
    }

    /* The keepsake's own look comes with it (trail.js writes it in when
       printing), so it prints the same as the downloaded file. */
    .print-guide .keepsake {
        display: block;
    }

    .print-guide main {
        margin: 0;
        padding: 0;
        max-width: none;
    }
}


/* ==========================================================================
   Back at the Visitor Center: the Bulletin Board, the Field Guide, and the
   end of the line
   ========================================================================== */

/* The Bulletin Board: a cork board with a wooden sign, holding every note
   for the road home. All notes look alike. */
.board {
    margin: 1.4rem 0 0;
    padding: 1.1rem 1.1rem 1.3rem;
    border: 2px solid #D9C9B4;
    border-radius: 12px;
    background: var(--board-tint);
}

.board-sign {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.9rem 0.35rem 0.4rem;
    border-radius: 9px;
    background: var(--board);
    color: #fff;
}

.board-sign h3 {
    margin: 0;
    font-size: 1.15rem;
}

.board-sign-icon {
    display: grid;
    place-items: center;
}

.board-sign-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* Wide notes: the plan and the closing words. */
.pin-plan {
    grid-column: 1 / -1;
}

.pin-note {
    font-size: 0.92rem;
    color: var(--text-secondary);
}

/* "Plan your first step": numbered, one small question at a time. */
.plan-steps {
    margin: 0.6rem 0 0.4rem;
    padding-left: 1.4rem;
}

.plan-step {
    margin: 0 0 1rem;
    padding-left: 0.2rem;
}

.plan-step::marker {
    font-weight: 700;
    color: var(--board);
}

.plan-q {
    margin: 0 0 0.4rem;
    max-width: var(--read);
}

.plan-own {
    margin: 0.6rem 0 0.3rem;
    font-weight: 700;
}

.plan-field {
    max-width: var(--read);
    min-height: 0;
}

/* "Near you": the topic's places to find help, plainly listed. */
.pin-near .check {
    margin-bottom: 0.5rem;
}

/* The Field Guide: its own card under the board, the same look as a
   note, with every way to keep it in one row. */
.pin.take {
    margin-top: 1.4rem;
}

.pin.take::before {
    display: none;
}

.pin.take h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.take-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 7px;
    background: var(--note);
    color: #fff;
}

.take-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.take-row {
    margin: 0.8rem 0 0.6rem;
}

/* The end of the line: the Trailhead sign, where the trail began. The
   line runs down to it and stops there. */
.place.is-end {
    --place: var(--park);
    padding-bottom: 1rem;
}

.place.is-end::before {
    bottom: auto;
    height: 1.4rem;
}

.end-sign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    min-height: 2.6rem;
    padding-top: 0.5rem;
}

.end-name {
    margin: 0;
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--park);
}

/* Feedback: below the trail, on its own, plainly styled. */
.feedback-zone {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1.6rem 1.2rem 2rem;
    border-top: 1px solid var(--border-color);
}

.feedback-zone:empty {
    display: none;
}

.fb-title {
    margin: 0 0 0.4rem;
    font-size: 1.3rem;
}

/* A note's short line under its title: "Transportation," with its icon. */
.pin-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: -0.3rem 0 0.6rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.pin-line svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--lodge);
}

/* "Remember your trail": a row of quiet chips, a swatch or an icon and a
   name in plain text. */
.pin-recap {
    grid-column: 1 / -1;
}

.recap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.recap li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
}

.recap .blaze {
    width: 0.9rem;
    height: 1.35rem;
    margin: 0;
    border-radius: 3px;
}

.recap-icon {
    display: grid;
    place-items: center;
    color: var(--lodge);
}

.recap-icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

/* The board's notes, pinned by hand: each one tilted a little, left or
   right. Small enough that the text stays easy to read. */
.board .pins > .pin {
    box-shadow: 0 2px 6px rgba(74, 52, 34, 0.2);
}

.board .pins > .pin:nth-child(odd) {
    transform: rotate(-0.6deg);
}

.board .pins > .pin:nth-child(even) {
    transform: rotate(0.5deg);
}

/* The plan note has a form to fill in, so it hangs straight. */
.board .pins > .pin.pin-plan {
    transform: none;
}

/* Cork: a faint speckle on the board's tan. */
.board {
    background-color: var(--board-tint);
    background-image:
        radial-gradient(rgba(122, 92, 34, 0.12) 1px, transparent 1.4px),
        radial-gradient(rgba(122, 92, 34, 0.08) 1px, transparent 1.4px);
    background-size: 11px 11px, 7px 7px;
    background-position: 0 0, 4px 5px;
}

/* "Climate Realities": one card on the Pavilion's panel, edged like the
   exhibit cards below it, not a box inside a box. */
.reality .rooms {
    padding: 0;
    background: none;
}

.reality .stop.room > details {
    border-color: #B9DCE8;
}

/* The Return Trail: the same for everyone, so its line and markers are
   the park's wood brown, never a trail color. */
#backStops {
    --trail: var(--board);
    --trail-text: var(--board);
    --trail-tint: var(--board-tint);
    --trail-ink: var(--board);
    --trail-on: #fff;
}

/* The map's own lines: soft contours and the park road. */
.map-contour { fill: none; stroke: #DCE3D3; stroke-width: 1px; }
.map-road { fill: none; stroke: #C9CCC4; stroke-width: 5px; }
.map-parking { fill: #334155; }
.map-p { font: 700 14px 'Varela Round', sans-serif; fill: #fff; }