.trail-map-embed {
    font-family: inherit;
    color: inherit;
}

.trail-map-embed-dashboard .trail-map-embed__counts {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.trail-map-embed-procedures,
.trail-map-embed-procedures--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.trail-map-embed-procedures--list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.trail-map-embed-procedures--list .trail-map-procedure-card {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.trail-map-embed-procedures--list .trail-map-procedure-card__title {
    flex-shrink: 0;
    margin: 0;
}

.trail-map-embed-procedures--list .trail-map-procedure-card__categories {
    margin-bottom: 0;
}

.trail-map-embed-procedures--list .trail-map-procedure-card__summary {
    flex: 1 1 auto;
    min-width: 200px;
    margin: 0;
    opacity: 0.75;
}

.trail-map-embed-tutorials,
.trail-map-embed-tutorials--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.trail-map-embed-tutorials--list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.trail-map-embed-tutorials--list .trail-map-tutorial-card {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.trail-map-embed-tutorials--list .trail-map-tutorial-card__title {
    flex-shrink: 0;
    margin: 0;
}

.trail-map-embed-tutorials--list .trail-map-tutorial-card__categories {
    margin-bottom: 0;
}

.trail-map-embed-tutorials--list .trail-map-tutorial-card__summary {
    flex: 1 1 auto;
    min-width: 200px;
    margin: 0;
    opacity: 0.75;
}

.trail-map-tutorial-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 1rem;
}

.trail-map-tutorial-card__title a {
    text-decoration: none;
    color: inherit;
}

.trail-map-tutorial-card__title a:hover {
    text-decoration: underline;
}

.trail-map-tutorial-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.trail-map-tutorial-card__category {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.6;
}

.trail-map-tutorial-card__category:not(:last-child)::after {
    content: '\00b7';
    margin-left: 0.4rem;
    opacity: 0.6;
}

.trail-map-tutorial-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.trail-map-tutorial-categories__link {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: inherit;
    font-size: 0.85rem;
}

.trail-map-tutorial-categories__link:hover {
    border-color: rgba(0, 0, 0, 0.3);
}

.trail-map-tutorial-categories__link--active {
    background: #1a1a2e;
    border-color: #1a1a2e;
    color: #fff;
}

.trail-map-tutorial__cover {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Same section-spacing rule as .trail-map-embed-procedure, for the tutorial wrapper */
.trail-map-embed-tutorial:not(.trail-map-tutorial--sidebar) > * + * {
    margin-top: 2.5rem;
}

.trail-map-tutorial__sidebar > * + *,
.trail-map-tutorial__main > * + * {
    margin-top: 2.5rem;
}

.trail-map-tutorial--sidebar {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 2rem;
    align-items: start;
}

.trail-map-tutorial__sidebar {
    position: sticky;
    top: 1rem;
}

@media (max-width: 720px) {
    .trail-map-tutorial--sidebar {
        grid-template-columns: 1fr;
    }

    .trail-map-tutorial__sidebar {
        position: static;
    }
}

/* Video embed — shared by SOP and tutorial steps (steps.video_url) */
.trail-map-step__video {
    margin-top: 0.5rem;
}

.trail-map-step__video--embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.trail-map-step__video--embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 6px;
}

.trail-map-step__video--file {
    max-width: 100%;
    border-radius: 6px;
}

.trail-map-search {
    display: flex;
    gap: 0.5rem;
}

.trail-map-search__input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}

.trail-map-search__btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    background: #1a1a2e;
    color: #fff;
    cursor: pointer;
}

.trail-map-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.trail-map-categories__link {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: inherit;
    font-size: 0.85rem;
}

.trail-map-categories__link:hover {
    border-color: rgba(0, 0, 0, 0.3);
}

.trail-map-categories__link--active {
    background: #1a1a2e;
    border-color: #1a1a2e;
    color: #fff;
}

.trail-map-departments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.trail-map-departments__link {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: inherit;
    font-size: 0.85rem;
}

.trail-map-departments__link:hover {
    border-color: rgba(0, 0, 0, 0.3);
}

.trail-map-departments__link--active {
    background: #1a1a2e;
    border-color: #1a1a2e;
    color: #fff;
}

.trail-map-procedure-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 1rem;
}

.trail-map-procedure-card__title a {
    text-decoration: none;
    color: inherit;
}

.trail-map-procedure-card__title a:hover {
    text-decoration: underline;
}

.trail-map-procedure-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.trail-map-procedure-card__category {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.6;
}

.trail-map-procedure-card__category:not(:last-child)::after {
    content: '\00b7';
    margin-left: 0.4rem;
    opacity: 0.6;
}

.trail-map-procedure-card__departments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.trail-map-procedure-card__department {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
}

.trail-map-procedure__departments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.trail-map-procedure__department {
    display: inline-block;
    font-size: 0.8rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
}

.trail-map-print-btn,
.trail-map-pdf-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 0.4rem;
    margin-top: 0.75rem;
    margin-right: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    background: #1a1a2e;
    color: #fff;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}

.trail-map-print-btn:hover,
.trail-map-pdf-btn:hover {
    opacity: 0.9;
}

.trail-map-procedure__cover {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Consistent spacing between major sections (header, prerequisites, steps,
   checklist) for every layout that stacks them in one column. Sidebar
   spaces its two columns via grid gap instead, so it's excluded here. */
.trail-map-embed-procedure:not(.trail-map-procedure--sidebar) > * + * {
    margin-top: 2.5rem;
}

.trail-map-procedure__sidebar > * + *,
.trail-map-procedure__main > * + * {
    margin-top: 2.5rem;
}

.trail-map-steps {
    margin: 0;
    padding: 0;
}

.trail-map-step__title {
    font-weight: 600;
}

.trail-map-step__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.trail-map-step-number {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}

.trail-map-step__instructions {
    margin-top: 0.35rem;
}

.trail-map-step__image {
    max-width: 100%;
    border-radius: 6px;
    margin-top: 0.5rem;
}

.trail-map-step__code {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    margin-top: 0.5rem;
}

/* Section headings — a step with Type: Section Heading. No number badge,
   no body; styled distinctly so it reads as a divider between steps. */
.trail-map-step-heading {
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.75;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
}

.trail-map-step-heading--classic,
.trail-map-step-heading--accordion {
    margin: 0.5rem 0;
}

.trail-map-step-heading--cards {
    grid-column: 1 / -1;
}

.trail-map-step-heading--timeline {
    margin-left: 3rem;
    border-bottom-width: 1px;
}

/* Classic — plain ordered list; numbering is the custom .trail-map-step-number
   badge, not the browser's native <ol> marker, so a heading <li> mixed in
   can't pick up a stray native count. */
.trail-map-steps--classic {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-left: 1.5rem;
    list-style: none;
}

.trail-map-steps--classic > .trail-map-step {
    padding-left: 0.25rem;
}

/* Sidebar — meta/checklist pinned left, steps scroll on the right.
   Reuses .trail-map-steps--classic for the list itself; only the outer
   two-column shell differs. */
.trail-map-procedure--sidebar {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 2rem;
    align-items: start;
}

.trail-map-procedure__sidebar {
    position: sticky;
    top: 1rem;
}

@media (max-width: 720px) {
    .trail-map-procedure--sidebar {
        grid-template-columns: 1fr;
    }

    .trail-map-procedure__sidebar {
        position: static;
    }
}

/* Card Grid — steps as a grid of visual cards */
.trail-map-steps--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.trail-map-step-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 1rem;
}

/* Cards are visually separated tiles, so the number reads well bigger here */
.trail-map-steps--cards .trail-map-step-number {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.15rem;
    background: rgba(0, 0, 0, 0.1);
}

.trail-map-step__image-link {
    display: block;
    cursor: zoom-in;
}

/* Foundation 6 Reveal modal content */
.trail-map-lightbox {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.trail-map-lightbox img {
    display: block;
    width: 100%;
    border-radius: 6px;
}

/* Accordion — collapsed by default, native <details>/<summary> */
.trail-map-steps--accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trail-map-step--accordion {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.trail-map-step--accordion summary {
    cursor: pointer;
    list-style: none;
}

.trail-map-step--accordion summary::-webkit-details-marker {
    display: none;
}

.trail-map-step--accordion summary::before {
    content: '▸';
    display: inline-block;
    width: 1em;
    opacity: 0.6;
}

.trail-map-step--accordion[open] summary::before {
    content: '▾';
}

.trail-map-step__accordion-body {
    margin-top: 0.5rem;
    padding-left: 1.25rem;
}

/* Timeline — one continuous through-line runs the full height of the list,
   outside/behind the step titles, with numbered dots sitting on top of it. */
.trail-map-steps--timeline {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding-left: 0;
    list-style: none;
    position: relative;
}

.trail-map-steps--timeline::before {
    content: '';
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 1rem;
    transform: translateX(-50%);
    width: 3px;
    background: currentColor;
    opacity: 0.35;
}

.trail-map-step--timeline {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
}

.trail-map-timeline-dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #1a1a2e;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
}

.trail-map-timeline-content {
    flex: 1;
    padding-top: 0.15rem;
}

.trail-map-checklist ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}

.trail-map-checklist__item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.trail-map-checklist__notes {
    opacity: 0.6;
    font-size: 0.85rem;
}

/* The sidebar column is narrow (220-300px) — label and notes side by side
   there squashes the label into a multi-line wrap. Stack them instead. */
.trail-map-procedure__sidebar .trail-map-checklist__item,
.trail-map-tutorial__sidebar .trail-map-checklist__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.trail-map-acknowledgment {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.trail-map-acknowledgment__help {
    opacity: 0.7;
    font-size: 0.9rem;
    margin: 0.25rem 0 0.75rem;
}

.trail-map-ack-form__id {
    font-size: 0.8rem;
    opacity: 0.6;
}

/* Print — isolates just the procedure and reformats it for a clean 8.5x11
   printout, whatever the on-screen Procedure View Layout is set to. Screen
   layouts (grid/sidebar/cards/etc.) are untouched; this only applies when
   the page is actually printed, triggered by .trail-map-print-btn. */
@media print {
    @page {
        size: letter;
        margin: 0.75in;
    }

    /* color-scheme: light plus explicit (not inherited) black-on-white
       below defeats a browser's own forced/auto dark-mode repainting of
       the page — which doesn't reliably carry over to the print pipeline
       and is the usual cause of a page that looks fine on screen but
       prints as a blank or broken dark block. This page's own CSS was
       never dark to begin with; this only protects against the browser
       overriding it. */
    html, body {
        color-scheme: light;
        background: #fff !important;
    }

    body * {
        visibility: hidden;
    }

    /* RapidWeaver's own Stacks wrapper divs (.stacks_out/.stacks_in) are
       position: relative with overflow: hidden, sized for their normal
       on-screen height. Positioning the procedure/tutorial absolutely
       (below) makes it position itself relative to whichever of those
       wrappers is its nearest positioned ancestor, and that ancestor's
       overflow then clips it to a sliver — this is what was cutting off
       everything but the top of the cover image. Neutralizing every
       ancestor defuses that before it can clip anything. */
    body *:has(.trail-map-embed-procedure),
    body *:has(.trail-map-embed-tutorial) {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        position: static !important;
    }

    .trail-map-embed-procedure,
    .trail-map-embed-procedure *,
    .trail-map-embed-tutorial,
    .trail-map-embed-tutorial * {
        visibility: visible;
        background: transparent !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .trail-map-embed-procedure,
    .trail-map-embed-tutorial {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        display: block;
        background: #fff !important;
    }

    .trail-map-print-btn,
    .trail-map-pdf-btn,
    .trail-map-lightbox,
    .trail-map-step__image-link::after,
    .trail-map-step__video--embed,
    .trail-map-acknowledgment {
        display: none !important;
    }

    /* Force every screen layout back to a single stacked column for print */
    .trail-map-procedure--sidebar,
    .trail-map-tutorial--sidebar {
        display: block;
    }

    .trail-map-procedure__sidebar,
    .trail-map-procedure__main,
    .trail-map-tutorial__sidebar,
    .trail-map-tutorial__main {
        position: static;
    }

    .trail-map-embed-procedure > * + *,
    .trail-map-procedure__sidebar > * + *,
    .trail-map-procedure__main > * + *,
    .trail-map-embed-tutorial > * + *,
    .trail-map-tutorial__sidebar > * + *,
    .trail-map-tutorial__main > * + * {
        margin-top: 1rem;
    }

    .trail-map-steps--cards {
        display: block;
    }

    .trail-map-step-card {
        border: none;
        padding: 0;
        margin-bottom: 0.75rem;
    }

    .trail-map-step-heading--cards {
        grid-column: auto;
    }

    .trail-map-steps--timeline::before {
        display: none;
    }

    .trail-map-step,
    .trail-map-step-card,
    .trail-map-checklist__item {
        break-inside: avoid;
    }

    .trail-map-step-heading {
        break-after: avoid;
        border-bottom-color: #000 !important;
        opacity: 1 !important;
    }

    /* Accordion is collapsed on screen — expand every step for print,
       since there's no way to click a <summary> on paper. */
    .trail-map-step--accordion {
        border: none;
        padding: 0;
    }

    .trail-map-step--accordion summary::before {
        content: none;
    }

    .trail-map-step__accordion-body {
        display: block !important;
        padding-left: 0;
    }

    /* Badges and numbers rely on background color, which most browsers
       don't print unless "background graphics" is explicitly enabled —
       redraw them with borders/black text so they stay legible either way. */
    .trail-map-step-number,
    .trail-map-timeline-dot,
    .trail-map-procedure__department,
    .trail-map-procedure-card__department {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }

    .trail-map-step__code {
        background: transparent !important;
        border: 1px solid #000;
    }

    .trail-map-procedure__cover,
    .trail-map-tutorial__cover,
    .trail-map-step__image {
        max-height: 3.5in;
        object-fit: contain;
    }

    a {
        color: inherit;
        text-decoration: none;
    }
}