/* WO #595 — Routes & Trails arena panel.
   Ported from the approved v6-flat prototype, scoped under .route-panel so it can
   drop into the live arena page without colliding with arena-view.css. Square corners
   everywhere (the only round thing is the "easy" difficulty circle); no shadows. */

.route-panel {
    --ink: #20231d;
    --ink-soft: #34382e;
    --orange: #F8993D;
    --orange-deep: #e07f1c;
    --forest: #436b3f;
    --forest-deep: #2f4d2c;
    --paper: #f3efe7;
    --card: #ffffff;
    --line: #e7e1d4;
    --text: #2c2b27;
    --muted: #8c877c;
    color: var(--text);
    font-family: Helvetica, Arial, sans-serif;
    /* Fit the whole panel into one screenful below the page chrome (main header + arena
       tab nav). Host pages set --rp-chrome to their combined header height. Flex column so
       the titlebar is auto-height and the map area fills the rest. */
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--rp-chrome, 125px));
    min-height: 480px;
    overflow: hidden;
    /* Full-bleed: break out of the page's content box (no section padding / gray frame) so the
       panel runs edge to edge. The gray gap above is removed via the #arena-additional rule. */
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0;
    position: relative;
    z-index: 1;
}
.route-panel *,
.route-panel *::before,
.route-panel *::after {
    box-sizing: border-box;
}
.route-panel h2,
.route-panel h3,
.route-panel .display {
    font-family: 'Sora', Helvetica, Arial, sans-serif;
}

/* Section header + controls */
.route-panel .titlebar {
    flex: 0 0 auto; /* section header — auto height */
    background: linear-gradient(180deg, #fbf8f2, var(--paper));
    border-bottom: 1px solid var(--line);
    padding: 14px 26px 0;
}
.route-panel .section-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
}
/* High specificity to beat the host site's #content h2 styling (which uppercases, centers,
   grays and enlarges all content headings). Keep v6's mixed-case Sora title. */
#route-panel .titlebar h2.section-title {
    font-family: 'Sora', sans-serif;
    font-size: 23px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    text-transform: none;
    text-align: left;
    letter-spacing: normal;
    line-height: 1.2;
}
.route-panel .section-title .sh-count {
    color: var(--orange);
}
.route-panel .section-title .sh-div {
    color: #d8d2c4;
    font-weight: 400;
}
.route-panel .section-title .sh-range {
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.route-panel .print-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 0;
    padding: 9px 16px;
    cursor: pointer;
}
.route-panel .print-btn:hover {
    border-color: #cfc7b6;
}
.route-panel .rp-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto; /* push the action buttons to the right of the title + chips row */
}

/* Fullscreen / lock-to-screen: pin the whole panel to the viewport and freeze the page
   behind it, so the user doesn't have to scroll it into the right spot (and can't scroll
   away from the map while a route is open). */
.route-panel.rp-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.route-panel.rp-fullscreen .panel {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}
.route-panel.rp-fullscreen .panel-inner {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}
body.rp-fs-lock {
    overflow: hidden;
}
/* Keep scrolling the list or the route detail from chaining out to the page. */
.route-panel .routelist,
.route-panel .drawer {
    overscroll-behavior: contain;
}

.route-panel .controls {
    /* Desktop: chips now live in the title row, so this row (mobile List/Map toggle only) collapses. */
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
}
.route-panel .chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}
.route-panel .chip {
    flex: 0 0 auto;
    cursor: pointer;
    border: 1px solid var(--line);
    background: #fff;
    color: #57534a;
    border-radius: 0;
    padding: 8px 15px;
    font-size: 13.5px;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: all .15s;
}
.route-panel .chip:hover {
    border-color: #cfc7b6;
}
.route-panel .chip.on {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
.route-panel .legend {
    display: none;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: var(--muted);
    flex-wrap: wrap;
}

/* Activity icons (mask-tinted) + difficulty markers */
.route-panel .act-ic {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #6f6a5f;
    vertical-align: -3px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.route-panel .chip.on .act-ic {
    background-color: #fff;
}
.route-panel .dmark {
    display: inline-block;
    width: 11px;
    height: 11px;
    vertical-align: -1px;
    /* Subtle ring so a white (Beginner/Easiest) marker is visible; barely shows on dark colors. */
    border: 1px solid rgba(0, 0, 0, 0.28);
}
.route-panel .dmark.circle {
    border-radius: 50%;
}
.route-panel .dmark.square {
    border-radius: 0;
}
.route-panel .dmark.diamond {
    width: 9px;
    height: 9px;
    border-radius: 0;
    transform: rotate(45deg);
    vertical-align: 0;
}
.route-panel .ddiamond {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    vertical-align: -1px;
}
.route-panel .actpair {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Two-pane panel: list + map */
.route-panel .panel {
    flex: 1 1 auto; /* fills the height left under the titlebar */
    min-height: 0;
    display: flex;
    padding: 14px 26px 18px;
    background: var(--paper);
}
.route-panel .panel-inner {
    position: relative;
    display: flex;
    gap: 0;
    overflow: hidden;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}
.route-panel .list {
    flex: 0 0 348px;
    position: relative;
    z-index: 3;
    background: var(--paper);
    height: 100%;
}
.route-panel .mapcol {
    flex: 1;
    min-width: 0;
    z-index: 1;
    position: relative;
}
.route-panel .gmap {
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: #e7efe6;
    height: 100%;
}
.route-panel .mapgest {
    position: absolute;
    left: 10px;
    bottom: 24px;
    z-index: 5;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    padding: 7px 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.route-panel .mapgest.on {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

/* Route list rows */
.route-panel .routelist {
    max-height: 100%;
    overflow-y: auto;
}
.route-panel .rrow {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--line);
    transition: background .12s;
}
.route-panel .rrow:last-child {
    border-bottom: 0;
}
.route-panel .rrow:hover {
    background: #faf8f2;
}
.route-panel .rrow.on {
    background: #fff6ea;
    border-left-color: var(--orange);
}
.route-panel .rthumb {
    flex: 0 0 auto;
    width: 54px;
    height: 44px;
    border-radius: 0;
    background: #f0ece2;
    border: 1px solid var(--line);
    overflow: hidden;
}
.route-panel .rthumb svg {
    width: 100%;
    height: 100%;
    display: block;
}
.route-panel .rmain {
    flex: 1;
    min-width: 0;
}
.route-panel .rtop {
    display: flex;
    align-items: center;
    gap: 8px;
}
.route-panel .rname {
    font-family: 'Sora', sans-serif;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.route-panel .rdiff {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.route-panel .rdifflbl {
    font-size: 12.5px;
    font-weight: 600;
}
.route-panel .rstats {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    font-size: 13px;
    color: #6f6a5f;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.route-panel .rstats .sep {
    color: #cdc6b6;
}
.route-panel .rstats .gain {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.route-panel .rstats .rtype {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 10.5px;
    color: #9a9488;
}

/* Slide-out detail drawer */
.route-panel .drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 366px;
    width: 424px;
    z-index: 2;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
    transform: translateX(-108%);
    transition: transform .28s ease;
    overflow: auto;
}
.route-panel .drawer.open {
    transform: translateX(0);
}
.route-panel .dhead {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--line);
    position: relative;
}
.route-panel .dclose {
    position: absolute;
    top: 14px;
    right: 14px;
    border: 0;
    background: var(--paper);
    border-radius: 0;
    width: 34px;
    height: 34px;
    cursor: pointer;
    color: #777;
}
.route-panel .dname {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
    padding-right: 40px;
    line-height: 1.15;
}
.route-panel .dsub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13.5px;
    color: #6f6a5f;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.route-panel .dsub .sep {
    color: #cdc6b6;
}
.route-panel .dsub .rtype {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 11px;
    color: #9a9488;
}
/* One-way (directional) badge — shown in the detail pane for routes that travel one direction. */
.route-panel .oneway-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px 2px 7px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background: #57534a;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.route-panel .oneway-pill i {
    font-size: 14px;
}
.route-panel .dacts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 14px;
}
.route-panel .dact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: #4f4b43;
}
.route-panel .dact .anm {
    color: var(--muted);
}
.route-panel .ddesc {
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #4f4b43;
}

/* Instrument-style data strip */
.route-panel .dstrip {
    display: flex;
    flex-wrap: wrap;
    margin: 0 20px;
    border-bottom: 1px solid var(--line);
}
.route-panel .stat {
    flex: 1 0 33.33%;
    padding: 14px 4px;
    text-align: center;
    border-right: 1px solid var(--line);
}
.route-panel .stat:nth-child(3n) {
    border-right: 0;
}
.route-panel .stat:nth-child(n+4) {
    border-top: 1px solid var(--line);
}
.route-panel .sv {
    font-family: 'Sora', sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.route-panel .sv u {
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    margin-left: 2px;
}
.route-panel .sl {
    font-size: 9.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 4px;
}

/* Elevation chart */
.route-panel .dchart-wrap {
    padding: 18px 20px 4px;
}
.route-panel .dchart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 9px;
}
.route-panel .dchart-head .t {
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.route-panel .dchart-head .h {
    font-size: 11px;
    color: var(--muted);
}
.route-panel .chartwrap {
    position: relative;
    cursor: crosshair;
}
.route-panel .chart-read {
    position: absolute;
    top: -4px;
    right: 0;
    font-size: 12px;
    color: var(--ink);
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--line);
    padding: 2px 8px;
    border-radius: 0;
    display: none;
    font-variant-numeric: tabular-nums;
}
.route-panel .dfoot {
    padding: 14px 20px 22px;
}
.route-panel .trail-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    align-items: center;
}
.route-panel .trail-lbl {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.route-panel .trail-chip {
    font-size: 12px;
    color: var(--forest-deep);
    background: #e9f0e1;
    border-radius: 0;
    padding: 3px 11px;
}
/* Route restrictions as icons; "No ..." ones get a red prohibition badge (circle + slash) */
.route-panel .restrict-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
    align-items: center;
}
.route-panel .restrict-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #4f4b43;
}
.route-panel .restrict-ic {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 17px;
    color: #57534a;
}
.route-panel .restrict-badge {
    position: absolute;
    right: -3px;
    bottom: -2px;
    font-size: 11px;
    color: #f0a500;
    background: #fff;
    border-radius: 50%;
    line-height: 1;
}

/* POI markers rendered as flat HTML elements on Google (custom overlay), so the modern Maps
   API never draws a default pin under them. 24px type-icon, or a dot when the type has no icon. */
#rp-gmap .rp-poi-mk {
    position: absolute;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
#rp-gmap .rp-poi-mk.rp-poi-dot {
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    background-color: #c0392b;
    border: 2px solid #fff;
    border-radius: 50%;
}

/* POI map-marker hover label — same clean dark pill on both Google (custom overlay) and
   Mapbox (styled popup), replacing the chunky default InfoWindow / popup chrome. */
#rp-gmap .rp-poi-tip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 16px));
    background: #20231d;
    color: #fff;
    font: 600 12px/1.2 'Sora', Helvetica, Arial, sans-serif;
    padding: 5px 9px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 6;
}
#rp-gmap .mapboxgl-popup-content {
    background: #20231d;
    color: #fff;
    font: 600 12px/1.2 'Sora', Helvetica, Arial, sans-serif;
    padding: 5px 9px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#rp-gmap .mapboxgl-popup-tip {
    display: none;
}
.route-panel .restrict-ic.prohibited {
    color: #b3261e;
}
.route-panel .restrict-ic.prohibited::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #b3261e;
    border-radius: 50%;
}
.route-panel .restrict-ic.prohibited::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 28px;
    margin: -14px 0 0 -1px;
    background: #b3261e;
    transform: rotate(45deg);
}
.route-panel .dc-actions {
    display: flex;
    gap: 9px;
}
.route-panel .btn-dark {
    background: var(--orange);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 0;
    padding: 10px 18px;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.route-panel .btn-dark:hover {
    background: var(--orange-deep);
}
.route-panel .btn-light {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    font-size: 14px;
    font-weight: 500;
    border-radius: 0;
    padding: 10px 18px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.route-panel .rp-edit-route {
    gap: 6px;
}
.route-panel .rp-edit-route i {
    font-size: 15px;
}
.route-panel .sheet-handle {
    display: none;
}
.route-panel .mtoggle {
    display: none;
}

/* Mobile: List/Map toggle + bottom-sheet drawer */
@media (max-width: 820px) {
    /* Mobile scrolls normally — release the one-screenful constraint (revisit later). */
    .route-panel {
        height: auto;
        overflow: visible;
    }
    .route-panel .panel {
        display: block;
    }
    /* Tighter, unbroken header on small screens */
    .route-panel .titlebar {
        padding: 10px 14px 0;
    }
    #route-panel .titlebar h2.section-title {
        font-size: 18px;
        /* Not full-width, so the icon buttons ride up on the heading row to its right. */
    }
    .route-panel .section-head {
        flex-wrap: wrap;
        gap: 8px;
    }
    .route-panel .rp-head-actions {
        flex-wrap: wrap;
        gap: 4px; /* tighter spacing between the icon buttons */
    }
    /* Icon-only action buttons on mobile — font-size:0 hides the label text; the icons keep their
       own inline size, so the whole row fits on one line instead of wrapping. */
    .route-panel .print-btn {
        padding: 7px 8px; /* slightly slimmer so the icons fit up on the heading row */
        font-size: 0;
        gap: 0;
    }
    .route-panel .panel {
        padding: 10px 12px 14px;
    }
    .route-panel .controls {
        display: flex;
        flex-wrap: wrap;
    }
    /* Chips get their own full-width row on mobile (they moved into the title row on desktop). */
    .route-panel .section-head .chips {
        width: 100%;
        order: 3;
    }
    .route-panel .mtoggle {
        display: flex;
        width: 100%;
        background: #eae5da;
        border-radius: 0;
        padding: 3px;
        gap: 3px;
        margin-bottom: 4px;
    }
    .route-panel .mtoggle button {
        flex: 1;
        border: 0;
        border-radius: 0;
        padding: 9px;
        font-size: 14px;
        font-family: inherit;
        font-weight: 500;
        cursor: pointer;
        background: transparent;
        color: #857f73;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .route-panel .mtoggle button.on {
        background: #fff;
        color: var(--orange-deep);
    }
    .route-panel .panel-inner {
        flex-direction: column;
        overflow: visible;
        height: auto;
        min-height: 0;
    }
    .route-panel .list {
        flex: none;
        width: 100%;
        height: auto;
    }
    .route-panel .routelist {
        height: auto;
        overflow: visible;
    }
    .route-panel .mapcol {
        width: 100%;
    }
    .route-panel .gmap {
        height: 56vh;
        min-height: 360px;
    }
    .route-panel .panel-inner.show-list .mapcol {
        display: none;
    }
    .route-panel .panel-inner.show-map .list {
        display: none;
    }
    .route-panel .drawer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        height: auto;
        max-height: 86vh;
        border-radius: 0;
        transform: translateY(100%);
        border-top: 1px solid var(--line);
        /* Bottom sheet must sit above the route list (z-index 3), not behind it. */
        z-index: 1000;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    }
    .route-panel .drawer.open {
        transform: translateY(0);
    }
    .route-panel .sheet-handle {
        display: block;
        width: 40px;
        height: 4px;
        background: #ddd;
        border-radius: 0;
        margin: 9px auto 0;
    }
}