/* 桌面端（≥769px）覆盖层。
   单独成文件的理由：媒体查询不增加特异性，桌面覆盖必须排在基础规则之后才生效。
   以前这些块散在 style-modern.css 的 6 个位置，顺序一错就被静默覆盖；
   集中到这里并由 link 顺序保证“永远在 base 之后”。 */


/* 桌面端侧边栏收起 */
@media screen and (min-width: 769px) {
  .sidebar.collapsed {
    width: 64px;
    min-width: 64px;
  }

  .sidebar.collapsed .card {
    display: none !important;
  }

  .sidebar.collapsed .sidebar-header {
    padding: 10px;
    flex-wrap: wrap;
  }

  .sidebar.collapsed .sidebar-header h1,
  .sidebar.collapsed .theme-selector,
  .sidebar.collapsed .service-status {
    display: none;
  }

  .sidebar.collapsed .logo-container {
    margin: 0;
  }
}


/* ---------- PC端布局：卡片可折叠 ---------- */
@media (min-width: 769px) {
  .card .card-header {
    cursor: pointer;
  }

  /* 展开态不再受 max-height 上限约束（原先内容超过 2000px 会被裁掉且无法滚动）。
     高度动画改由 grid 轨道承担：每张卡恰好只有 card-header + card-body 两个子元素。 */
  .card {
    display: grid;
    /* 第一轨必须是 max-content 而不是 auto：grid 默认 align-content: stretch，
       在 1fr→0fr 插值过程中多余空间会被分给 auto 轨，实测卡片头会从 38px 鼓到 102px
       再缩回，视觉上就是内容先往下跳一下再回来。max-content 是确定的内在尺寸，不参与拉伸。 */
    grid-template-rows: max-content 1fr;
    transition: grid-template-rows 0.24s ease-out,
                margin 0.24s ease-out,
                box-shadow var(--transition-normal),
                border-color var(--transition-normal),
                transform var(--transition-normal);
  }

  .card.collapsed {
    grid-template-rows: max-content 0fr;
  }

  .card:not(.collapsed) .card-body {
    max-height: none;
  }

  /* 纯高度裁剪：内容不再淡出（淡出+裁剪叠加会被看成两段动画），
     padding 仍要归零才能把盒子收到 0 高（box-sizing:border-box 下 padding 不可压缩），
     但时长与缓动与行高严格一致，避免结尾“再抽一下”。 */
  .card .card-body {
    overflow: hidden;
    min-height: 0;
    opacity: 1;
    transition: padding 0.24s ease-out;
  }

  .card.collapsed .card-body {
    opacity: 1;
    /* 关键：这里不能留 max-height: 0。max-height 不在过渡列表里，
       折叠瞬间就会把盒子钳成 0 高，grid 轨道动画被完全掩盖（表现为“折叠没动画、展开才有”）。
       收到 0 高由轨道 0fr + padding 归零 + min-height:0 共同达成，三者都是 240ms 同步。 */
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* 箭头方向已由 toggleCard 切换 SVG path 表达；基样式那条 rotate(-90deg)
     会再叠一层旋转，导致箭头指向角度错乱。PC 端取消该旋转（移动端维持原状）。 */
  .card.collapsed .collapse-icon {
    transform: none;
  }

  .card-header:active {
    transform: none;
  }

  .card:hover {
    transform: none;
  }
}


/* PC 端：内容超高时只让 body 滚动，footer 常驻可见 */
@media (min-width: 769px) {
  .modal-content.first-use-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 440px;
    max-height: calc(100vh - 40px);
  }

  .first-use-modal .first-use-header,
  .first-use-modal .first-use-footer {
    flex: 0 0 auto;
  }

  .first-use-modal .first-use-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .first-use-modal .first-use-body::-webkit-scrollbar {
    width: 4px;
  }

  .first-use-modal .first-use-body::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 4px;
  }

  .first-use-modal .first-use-footer {
    border-top: 1px solid var(--glass-border);
  }
}

@media (min-width: 769px) {
  .leaflet-control-container .leaflet-top.leaflet-left {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
  }

  .leaflet-control-container .leaflet-top.leaflet-left .leaflet-control {
    margin-top: 0;
    margin-left: 0;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

@media (min-width: 769px) {
  .distance-display {
    font-size: 16px;
    padding: 10px 12px;
    margin-bottom: 8px;
    line-height: 1.2;
  }
}

@media (min-width: 769px) {
  .export-options {
    margin-bottom: 8px;
  }

  .export-top-row,
  .action-buttons {
    margin-bottom: 8px;
  }

  .options-title {
    margin: 0 0 6px;
    line-height: 1.2;
  }

  .saved-routes {
    min-height: 34px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .saved-routes-empty {
    min-height: 34px;
  }

  .card {
    margin: 8px 12px;
  }

  .card-header {
    padding: 10px 14px;
  }

  .card-body {
    padding: 10px 14px;
  }
}