/* ══════════════════════════════════════
   电脑版布局 · 第 2 阶段：四个主页面的宽屏排版（记忆首页、合集概览、学习、我的）
   只重排现有节点，不改 DOM、不加 JS；全部规则在 ≥1100px 且侧栏就绪（html.lp-shell）时生效，
   断点与 desktop-shell.css 一致。原则：同屏同一个数字只出现一次——今日学习时长、连续天数
   只在侧栏「今日目标」，页面里与它重复的块在宽屏隐藏。
   规划：进行中的任务/电脑版布局-方案A落地.md
══════════════════════════════════════ */

@media (min-width: 1100px) {
  /* ── 公共：列表页统一留白，内容最宽 1240 并居中（padding 的百分比按页面宽度算）── */
  html.lp-shell .memory-dashboard-scroll,
  html.lp-shell .learning-dashboard-scroll,
  html.lp-shell .repo-dashboard-scroll,
  html.lp-shell .srs-deck-overview-scroll {
    padding-top: 28px;
    padding-bottom: 40px;
    padding-left: max(40px, calc((100% - 1240px) / 2));
    padding-right: max(40px, calc((100% - 1240px) / 2));
  }

  /* ══ 记忆首页 ══ */
  /* 同步按钮与状态行由侧栏底部的同步入口接管（它镜像 #homeSyncBtn，隐藏不影响镜像与点击） */
  html.lp-shell #homeSyncBtn,
  html.lp-shell #homeSyncStatus { display: none; }
  html.lp-shell .memory-page-header.has-sync-status { padding-bottom: 0; }

  html.lp-shell .memory-hero-card { margin-bottom: 28px; }

  /* 合集：一行一张 → 卡片网格（简版：只有到期徽章，2026-10-17 定） */
  html.lp-shell #srs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
  }
  html.lp-shell #srs-list > .deck-item,
  html.lp-shell #srs-list > .skeleton-item { margin-bottom: 0; }
  html.lp-shell #srs-list > .deck-item {
    min-height: 88px;
    padding: 18px 20px;
    align-items: flex-start;
  }
  html.lp-shell #srs-list > .deck-item:hover { border-color: rgba(60, 60, 67, 0.24); }
  html.lp-shell #srs-list > .empty-state { grid-column: 1 / -1; }

  /* ══ 合集概览 ══ */
  html.lp-shell #page-srs-deck .top-nav {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* 两栏：左「今日进度 / 任务构成」，右「到期预测 / 上限与复习模式」 */
  html.lp-shell .srs-deck-overview-scroll {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    align-items: start;
    gap: 16px 20px;
  }
  html.lp-shell .srs-deck-overview-scroll > .srs-deck-summary-card { grid-column: 1; grid-row: 1; }
  html.lp-shell .srs-deck-overview-scroll > .srs-deck-info-panel:not(.srs-deck-forecast-panel) { grid-column: 1; grid-row: 2; }
  html.lp-shell .srs-deck-overview-scroll > .srs-deck-forecast-panel { grid-column: 2; grid-row: 1; }
  html.lp-shell .srs-deck-overview-scroll > .srs-deck-control-card { grid-column: 2; grid-row: 2; }
  /* 「开始复习」从通栏大按钮收成右下角按钮 */
  html.lp-shell .srs-deck-actions {
    display: flex;
    justify-content: flex-end;
    padding: 12px max(40px, calc((100% - 1240px) / 2)) calc(18px + var(--safe-bottom));
    background: transparent; /* 透出概览页自己的底色，不另起一条白底栏 */
    box-shadow: none;
  }
  html.lp-shell .srs-deck-start-btn {
    width: auto;
    min-width: 260px;
    min-height: 48px;
    padding: 0 32px;
  }

  /* ══ 学习 ══ */
  html.lp-shell #page-learning > .learning-page-header,
  html.lp-shell #page-learning > .learning-channel-rail {
    padding-left: max(40px, calc((100% - 1240px) / 2));
    padding-right: max(40px, calc((100% - 1240px) / 2));
  }
  html.lp-shell #page-learning > .learning-page-header { padding-top: 16px; }
  html.lp-shell #page-learning .learning-dashboard-scroll { padding-top: 4px; }
  /* 频道：撑满一行的等分条 → 按内容宽度的分段按钮，多了自动换行 */
  html.lp-shell .learning-channel-tabs,
  html.lp-shell .learning-channel-tabs.is-even {
    display: inline-flex;
    flex-wrap: wrap;
    width: auto;
    max-width: 100%;
    overflow: visible;
  }
  html.lp-shell .learning-channel-tab {
    padding: 8px 18px;
    font-size: 14px;
  }
  /* 剧集：一行一条 → 缩略图在上的卡片网格 */
  html.lp-shell .learning-video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px 18px;
  }
  html.lp-shell .learning-video-list > .skeleton-item { margin-bottom: 0; }
  html.lp-shell .learning-video-list > .empty-state { grid-column: 1 / -1; }
  html.lp-shell .learning-video-list > .media-list-card {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
  }
  html.lp-shell .learning-video-list > .media-list-card:hover { border-color: rgba(60, 60, 67, 0.24); }
  html.lp-shell .learning-video-list .media-list-thumb {
    width: 100%;
    height: auto;
    flex: none;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }
  html.lp-shell .learning-video-list .media-list-duration {
    right: 8px;
    bottom: 8px;
    padding: 2px 6px;
    font-size: 11px;
  }
  html.lp-shell .learning-video-list .media-list-body { padding: 12px 14px 14px; }
  html.lp-shell .learning-video-list .media-list-title { font-size: 15px; }
  html.lp-shell .learning-video-list .media-list-side {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
  }
  html.lp-shell .learning-video-list .media-list-side .deck-chevron { display: none; }

  /* ══ 我的：学习库与统计并排；今日学习时长、连续天数交给侧栏 ══ */
  html.lp-shell .repo-dashboard-scroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "header  header"
      "libhead stathead"
      "library statcard"
      "library stats";
    column-gap: 32px;
    align-content: start;
  }
  html.lp-shell .repo-page-header { grid-area: header; }
  html.lp-shell .repo-settings-entry { display: none; } /* 设置入口在侧栏底部 */

  /* Tab 切换在宽屏不需要：两栏同时显示，原来的两个 Tab 按钮改当栏目标题 */
  html.lp-shell .repo-section-tabs,
  html.lp-shell .repo-section-tab-group { display: contents; }
  html.lp-shell .repo-section-tabs .repo-section-tab,
  html.lp-shell .repo-section-tabs .repo-section-tab.active {
    align-self: end;
    justify-self: start;
    padding: 0 0 12px;
    font-size: 20px;
    font-weight: 800;
    color: var(--text) !important;
    pointer-events: none;
  }
  html.lp-shell .repo-section-tab.active::after { display: none; }
  html.lp-shell #tabLibrary { grid-area: libhead; }
  html.lp-shell #tabStats { grid-area: stathead; }
  html.lp-shell .repo-library-actions {
    grid-area: libhead;
    justify-self: end;
    align-self: end;
    padding-bottom: 8px;
  }
  /* switchRepoSection 会写 inline display，宽屏两栏都要常显，只能 !important */
  html.lp-shell #repoSectionLibrary { grid-area: library; display: block !important; }
  html.lp-shell #repoSectionStats { grid-area: stats; display: block !important; }

  /* 今日数据卡：只留「今日新学 / 今日复习」，放到统计栏顶部 */
  html.lp-shell .repo-dashboard-stats {
    grid-area: statcard;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 12px;
  }
  html.lp-shell .repo-dashboard-stats .repo-stat-card:not(.repo-streak-card) .repo-stat-row:first-child,
  html.lp-shell .repo-streak-card { display: none; }

  /* 学习库：卡片网格 */
  html.lp-shell #repo-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
  }
  html.lp-shell #repo-list > .repo-library-item,
  html.lp-shell #repo-list > .skeleton-item { margin-bottom: 0; }
  html.lp-shell #repo-list > .repo-library-item { min-height: 72px; }
  html.lp-shell #repo-list > .empty-state { grid-column: 1 / -1; }

  /* 统计：每日记录收紧成列表 */
  html.lp-shell #statsHistoryList > .stats-hist-row {
    margin-bottom: 8px;
    padding: 12px 14px;
    border-radius: 14px;
  }
}

/* ══════════════════════════════════════
   第 5 阶段：学习库详情网格 + 拖放导入提示、设置两栏
   拖放逻辑在 js/repo-drop-import.js，设置分类导航在 js/settings-desktop-nav.js；
   两者插入的节点在窄屏一律不显示。
══════════════════════════════════════ */
.repo-drop-hint,
.settings-desktop-nav { display: none; }

@media (min-width: 1100px) {
  /* ── 学习库详情：一列 → 缩略图在上的卡片网格 ── */
  html.lp-shell #repoCardsList {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px 18px;
    padding-top: 16px;
    padding-bottom: 40px;
    padding-left: max(40px, calc((100% - 1240px) / 2));
    padding-right: max(40px, calc((100% - 1240px) / 2));
  }
  html.lp-shell #repoCardsList > .media-list-card {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
  }
  html.lp-shell #repoCardsList > .media-list-card:hover { border-color: rgba(60, 60, 67, 0.24); }
  html.lp-shell #repoCardsList .media-list-thumb {
    width: 100%;
    height: auto;
    flex: none;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }
  html.lp-shell #repoCardsList .repo-card-select-check { left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 12px; }
  html.lp-shell #repoCardsList .media-list-duration { right: 8px; bottom: 8px; padding: 2px 6px; font-size: 11px; }
  html.lp-shell #repoCardsList .media-list-body { padding: 12px 14px 14px; }
  html.lp-shell #repoCardsList .media-list-title { font-size: 15px; }
  html.lp-shell #repoCardsList .media-list-side { position: absolute; top: 8px; right: 8px; margin: 0; }
  html.lp-shell #repoCardsList .media-list-side .deck-chevron { display: none; }

  /* 拖放导入：列表上方一条常驻提示；拖着文件经过页面时整页高亮 */
  html.lp-shell #page-repo-cards .repo-drop-hint {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    margin: 16px max(40px, calc((100% - 1240px) / 2)) 0;
    padding: 14px 18px;
    border: 1.5px dashed rgba(60, 60, 67, 0.28);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
  }
  .repo-drop-hint-text { flex: 1; min-width: 0; }
  .repo-drop-hint-title { font-size: 14px; font-weight: 700; color: var(--text); }
  .repo-drop-hint-sub { margin-top: 2px; font-size: 12px; color: #3a3a3c; }
  .repo-drop-hint-btn {
    height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(60, 60, 67, 0.18);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
  html.lp-shell #page-repo-cards.is-drop-target .repo-drop-hint {
    border-color: var(--blue);
    background: var(--blue-light);
  }
  html.lp-shell #page-repo-cards.is-drop-target #repoCardsList { opacity: 0.45; }

  /* ── 设置：左分类、右内容，一次只显示一类 ── */
  html.lp-shell #page-settings .list-scroll {
    display: grid;
    grid-template-columns: 200px minmax(0, 720px);
    column-gap: 28px;
    align-content: start;
    padding-top: 24px;
    padding-bottom: 40px;
    padding-left: max(40px, calc((100% - 960px) / 2));
    padding-right: max(40px, calc((100% - 960px) / 2));
  }
  html.lp-shell #page-settings .list-scroll > * { grid-column: 2; }
  html.lp-shell #page-settings .list-scroll > .settings-desktop-nav {
    grid-column: 1;
    grid-row: 1 / span 40;
    align-self: start;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--separator);
  }
  /* 不是当前分类的段落在宽屏收起；!important 压过各段自己按平台写的 inline display */
  html.lp-shell #page-settings .list-scroll > [data-ds-off] { display: none !important; }
  .sdn-item {
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }
  .sdn-item[hidden] { display: none; }
  .sdn-item:hover { background: rgba(0, 0, 0, 0.04); }
  .sdn-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .sdn-item[aria-selected="true"] {
    background: rgba(255, 138, 0, 0.12);
    color: #b45000;
    font-weight: 700;
  }
}