/* Route map page styles */
:root{
    --max-width: 1040px;
    --map-max-width: 704px;
}
.page-content:has(.layout){
    width:min(100%, 1060px);
    padding:12px 14px 18px;
}
.card:has(.layout){
    padding:10px;
    border-radius:14px;
    background:#f7fbf8;
}
@media (max-height:760px) and (min-width:901px){
    .page-content:has(.layout){
        padding-top:10px;
        padding-bottom:14px;
    }
    .card:has(.layout){
        padding:10px;
    }
    .sidebar{
        height:calc((min(100vw - 384px, var(--map-max-width)) - 32px) * 0.75 + 32px);
        max-height:calc(100vh - 104px);
    }
    .route-list{
        height:clamp(190px, calc(100vh - 242px), 360px);
    }
}
.layout{
    display:grid;
    grid-template-columns: minmax(280px, 320px) minmax(500px, var(--map-max-width));
    gap:16px;
    width:100%;
    max-width:var(--max-width);
    align-items:start;
}
.sidebar{
    background:linear-gradient(180deg,#ffffff,#f7fbf8);
    border:0;
    border-radius:12px;
    padding:12px;
    box-shadow:0 6px 18px rgba(31, 89, 70, 0.06);
    height:fit-content;
    max-height:calc(100vh - 132px);
    min-width:260px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
.filter-controls{
    display:flex;
    width:100%;
    gap:10px;
    align-items:flex-start;
    flex-wrap:wrap;
}
.filter-item{
    display:flex;
    flex-direction:column;
    gap:4px;
    flex:1;
    flex-basis:100px;
    min-width:0;
}
.filter-controls label{
    font-size:0.76rem;
    color:#475569;
    font-weight:600;
}
#boulder-select{
    width:100%;
    height:34px;
}
.sort-grade-btn,
.guide-btn{
    width:28px;
    height:28px;
    flex:0 0 28px;
    border-radius:50%;
    border:1px solid #cbd5e1;
    background:#eff6ff;
    color:#2563eb;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    font-size:0.9rem;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.sort-grade-btn:hover,
.guide-btn:hover{
    background:#eef4ff;
    border-color:#bfd0ef;
}
#grade-range{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
}
#grade-select{
    width:100%;
    height:34px;
    flex:1;
}
#grade-end-select{
    height:34px;
    flex:1;
    width:100%;
    display:none;
}
#grade-range span{
    display:none;
    flex:0 0 auto;
}
#grade-range.active span{
    display:block;
}
#grade-range.active #grade-end-select{
    display:block;
}
.filter-controls select{
    border:1px solid #e2e7ef;
    background:#f8fafc;
    border-radius:7px;
    padding:6px 8px;
    font-size:0.8rem;
    color:#0f172a;
}
.route-list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:11px;
    height:clamp(220px, calc(100vh - 270px), 420px);
    min-height:0;
    flex:none;
    overflow-y:auto;
    scrollbar-gutter:stable;
    padding-right:6px;
    margin-top:12px;
}
.route-button{
    appearance:none;
    border:1px solid #dbe3ef;
    padding:16px 13px;
    border-radius:9px;
    background:#ffffff;
    color:#0f172a;
    text-align:left;
    cursor:pointer;
    width:100%;
    max-width:100%;
    font-size:1.05rem;
    transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    white-space:normal;
}
.route-grade{
    background:rgba(255, 255, 255, 0.25);
    padding:3px 8px;
    font-weight:bold;
    font-size:1rem;
    border-radius:7px;
    display:inline-block;
    min-width:45px;
    text-align:left;
}
.route-button:hover{ background:#f6f9ff; border-color:#bfd0ef; transform:translateY(-1px); }
.route-button.active{ border-color:#2563eb; background:#eff6ff; font-weight:700; }
.route-detail{
    display:none;
    margin-top:6px;
    padding:10px;
    border:1px solid #dbe3ef;
    border-radius:9px;
    background:#f8fafc;
    color:#0f172a;
}
.route-detail.active{
    display:block;
}
.info-row{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:8px 12px;
    width:100%;
}
.info-item{
    display:flex;
    gap:4px;
    font-size:0.72rem;
    min-width:0;
}
.info-item span{
    min-width:0;
    overflow-wrap:anywhere;
}
.info-description{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #e3e9f2;
    line-height:1.5;
    font-size:0.82rem;
    color:#263241;
}
.info-description span{
    display:block;
    overflow-wrap:anywhere;
}
.label-grade{ color:#e74c3c; }
.label-fa{ color:#3498db; }
.label-start{ color:#27ae60; }
.label-top{ color:#f39c12; }
.map-area{
    background:linear-gradient(180deg,#ffffff,#f7fbf8);
    border-radius:18px;
    padding:16px;
    box-shadow:0 6px 18px rgba(31, 89, 70, 0.06);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    align-self:start;
    width:100%;
    overflow:hidden;
}
.image-container{ position:relative; width:100%; max-width:100%; aspect-ratio:4 / 3; }
.boulder-image{ width:100%; height:100%; object-fit:cover; display:block; border-radius:16px; }
.overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.route{ pointer-events:visiblePainted; }
.route-hit{ pointer-events:stroke; }
#marker-layer circle{ pointer-events:none; }
.controls-row{ display:flex; gap:8px; align-items:center; margin-bottom:10px; justify-content:space-between; }
.title-tools{ display:flex; gap:8px; align-items:center; }
.guide-wrapper{ position:relative; display:flex; align-items:center; }
.guide-popup{
    position:absolute;
    top:36px;
    right:0;
    width:220px;
    padding:10px 12px;
    background:#ffffff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(15,23,42,0.12);
    color:#0f172a;
    font-size:0.9rem;
    display:none;
    z-index:20;
}
.guide-popup p{ margin:0; }
.guide-list{
    margin:0;
    padding-left:16px;
    display:grid;
    gap:6px;
}
.guide-list li{
    line-height:1.35;
}
.guide-popup.show{ display:block; }
.beta-marker{ fill:#416ef6; opacity:0.9; stroke:#fff; stroke-width:1; }
.start-marker{ fill:#9eff9e; stroke:#fff; stroke-width:1; }
.top-marker{ fill:#ff8e8e; stroke:#fff; stroke-width:1; }
.route,
.route-hit{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.route{
    stroke:var(--route-color,#ff0000);
    stroke-width:6;
    opacity:0.88;
    stroke-dasharray:14 10;
    transition:opacity 0.28s ease, stroke-width 0.28s ease;
}
.route-hit{
    stroke:transparent;
    stroke-width:22;
    pointer-events:stroke;
}
.route:hover,
.route.hovered{
    opacity:1;
    stroke-width:7;
}
.route.active{
    opacity:1;
    stroke-width:10;
    stroke-dasharray:none;
}
.route.dimmed{
    opacity:0.55;
    stroke-width:4;
}
.route.beta-dimmed{
    opacity:0.3;
}
.route.active.beta-dimmed{
    opacity:0.34;
    stroke-width:7;
}
.beta-toggle{
    width:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:0;
    padding:7px 10px;
    border-color:#cbd5e1;
    background:rgba(255, 255, 255, 0.28);
    color:#0f172a;
    font-weight:700;
    font-size:0.86rem;
    line-height:1;
    backdrop-filter:blur(2px);
    margin-left:auto;
    position:absolute;
    top:14px;
    left:14px;
    max-width:min(42%, 150px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    z-index:25;
}
.beta-toggle:hover{
    background:rgba(255, 255, 255, 0.48);
}
.beta-toggle.active{
    background:rgba(255, 255, 255, 0.42);
    border-color:rgba(203, 213, 225, 0.72);
    color:#0f172a;
}
.beta-toggle.active:hover{
    background:rgba(255, 255, 255, 0.62);
}
.image-container{ position:relative; width:100%; max-width:var(--map-max-width); z-index:0; aspect-ratio:4 / 3; }
@media (min-width:901px){
    .sidebar{
        height:calc((min(100vw - 384px, var(--map-max-width)) - 32px) * 0.75 + 32px);
    }
    .route-list{
        flex:1;
        height:auto;
        min-height:0;
    }
}
@media (max-width:900px){
    .page-content:has(.layout){
        padding:8px 10px 14px;
    }
    .card:has(.layout){
        padding:8px;
    }
    .layout{
        display:flex;
        flex-direction:column;
        gap:10px;
    }
    .map-area{
        order:1;
        width:100%;
        padding:10px;
        border-radius:14px;
    }
    .sidebar{
        order:2;
        width:100%;
        min-width:0;
        height:auto;
        max-height:none;
        padding:10px;
    }
    .route-list{
        flex:none;
        min-height:0;
        height:280px;
        padding-right:0;
        scrollbar-gutter:auto;
        margin-top:10px;
        gap:9px;
    }
    .route-button{ padding:12px; font-size:1rem; width:100%; }
    .route-detail{
        padding:8px;
        margin-top:5px;
    }
    .info-row{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:7px 10px;
    }
    .info-item{
        font-size:0.72rem;
    }
    .info-description{
        margin-top:8px;
        padding-top:8px;
        max-height:4.6rem;
        overflow-y:auto;
    }
    .beta-toggle{
        position:absolute;
        top:8px;
        left:8px;
        width:auto;
        max-width:min(44%, 128px);
        margin-top:0;
        padding:6px 8px;
        border-radius:8px;
        font-size:0.72rem;
        line-height:1;
    }
    .boulder-image{ height:100%; }
    .image-container{ border-radius:16px; overflow:hidden; }
}
@media (max-width:900px) and (max-height:760px){
    .image-container{
        width:min(100%, 52vh);
        margin:0 auto;
    }
    .route-list{
        height:clamp(240px, 40vh, 310px);
    }
}
#route{
    pointer-events:none;
}