/* ==========================================================================
 *  宜宇 · PC 端布局（pc.css）2026-09-20
 *  --------------------------------------------------------------------------
 *  只在 ≥1024px 生效。移动端完全不加载这些选择器（全部裹在媒体查询里），
 *  所以「PC 改版」不会给手机端带来任何风险。
 *
 *  结构（pc.js 动态生成 .pc-side / .pc-rail，DOM 来源见 pc.js 注释）：
 *      左栏 232px 固定  │  内容（沿用 .yq-app / .yq-main）  │  右栏 300px
 *
 *  ★ 复用而非重写：
 *    内容区仍然是 .yq-app / .yq-main / .yq-water —— 与移动端同一套 DOM、
 *    同一份卡片组件。PC 只是「把它放宽、加两栏」，而不是另起一套页面。
 *    这样帖子卡片、活动卡、评论区等 30+ 组件不需要各自写 PC 版。
 *
 *  ★ 不用「拉伸的移动端」：
 *    底栏 .yq-tb 在 PC 上隐藏（导航移到左栏），瀑布流提到 4-5 列，
 *    悬浮发布按钮隐藏（左栏有常驻发布按钮）。
 * ========================================================================== */

/* 默认（移动端）不显示这两栏 —— pc.js 只在 ≥1024px 才创建它们，
   但样式也兜一层，避免 JS 未执行时出现裸内容 */
.pc-side, .pc-rail { display: none; }

@media (min-width: 1024px) {

  /* ------------------------------------------------------------------ 骨架 */
  html.yq-pc .pc-side { display: flex; }
  html.yq-pc .pc-rail { display: block; }

  /* 内容区让位左栏 */
  html.yq-pc .yq-app {
    margin-left: 232px;
    max-width: none;
    padding-bottom: 24px;
    background: var(--bg-base);
  }
  html.yq-pc .yq-main,
  html.yq-pc .yq-hd {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
  html.yq-pc .yq-main { min-height: 70vh; }

  /* 底栏 / 悬浮按钮：PC 上不需要 */
  html.yq-pc .yq-tb,
  html.yq-pc .yq-fab { display: none !important; }

  /* ----------------------------------------------------------------- 左栏 */
  .pc-side {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 232px;
    z-index: 70;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px 14px;
    background: var(--bg-raise);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .pc-side__brand {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 10px 16px;
    text-decoration: none;
    color: var(--text-primary);
  }
  .pc-side__bname { font-size: 1.24rem; font-weight: 800; letter-spacing: -.3px; }

  .pc-side__nav { display: flex; flex-direction: column; gap: 2px; }

  /* 导航项：图标 + 文字 + 胶囊高亮。
     刻意不同于「纯文字列表」的通用做法 —— 有图标更接近桌面应用观感，
     也让我们自己的绿色胶囊成为识别点。 */
  .pc-nav__i {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    color: var(--text-second);
    text-decoration: none;
    font-size: .96rem;
    font-weight: 600;
    transition: background-color .16s var(--ease-out), color .16s var(--ease-out);
  }
  .pc-nav__i:hover { background: var(--bg-raise-2); color: var(--text-primary); }
  .pc-nav__i.is-on { background: var(--grad-brand-soft); color: var(--brand-700); }
  .pc-nav__ico { display: inline-flex; width: 23px; justify-content: center; flex: 0 0 auto; }
  .pc-nav__t { flex: 1 1 auto; }
  .pc-nav__dot {
    flex: 0 0 auto;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: var(--r-full);
    background: #ff2e4d; color: #fff;
    font-size: 11px; font-style: normal; font-weight: 700;
    line-height: 18px; text-align: center;
  }

  .pc-side__pub {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 12px 4px 6px;
    min-height: 46px;
    border: 0; border-radius: var(--r-full);
    background: var(--grad-brand);
    color: #fff;
    font-size: .98rem; font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: var(--sh-brand);
    transition: transform .14s var(--ease-out), filter .14s var(--ease-out);
  }
  .pc-side__pub span { font-size: 1.2rem; line-height: 1; margin-top: -2px; }
  .pc-side__pub:hover { filter: brightness(1.04); }
  .pc-side__pub:active { transform: scale(.97); }

  .pc-side__sub {
    display: flex; flex-direction: column; gap: 1px;
    margin-top: 6px; padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .pc-sub__i {
    display: block;
    min-height: 38px; line-height: 38px;
    padding: 0 12px;
    border-radius: var(--r-xs);
    color: var(--text-third);
    font-size: .875rem;
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pc-sub__i:hover { background: var(--bg-raise-2); color: var(--brand-600); }

  .pc-side__user { margin-top: auto; padding-top: 12px; }
  /* 克隆进来的抽屉用户卡：去掉抽屉场景下的内边距与深色底 */
  .pc-side__user .yq-side__hd {
    padding: 0;
    background: none;
    border: 0;
  }
  .pc-side__user .yq-side__me,
  .pc-side__user .yq-side__login {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--text-primary);
  }
  .pc-side__user .yq-side__me:hover { background: var(--bg-raise-2); }
  .pc-side__login {
    display: block; text-align: center;
    min-height: 44px; line-height: 44px;
    border-radius: var(--r-full);
    background: var(--grad-brand);
    color: #fff !important;
    font-weight: 700;
  }

  /* ----------------------------------------------------------------- 右栏 */
  .pc-rail {
    position: fixed;
    right: 28px; top: 76px;
    width: 292px;
    z-index: 60;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .pc-card {
    padding: 15px 16px;
    margin-bottom: 14px;
    border-radius: var(--r-md);
    background: var(--bg-raise);
    border: 1px solid var(--line);
  }
  .pc-card__t {
    margin: 0 0 10px;
    font-size: .95rem; font-weight: 800;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 6px;
  }
  .pc-card__t::before {
    content: "";
    width: 3px; height: 14px;
    border-radius: 2px;
    background: var(--grad-brand);
  }

  .pc-hot { display: flex; flex-direction: column; }
  .pc-hot__i {
    display: flex; align-items: center; gap: 9px;
    min-height: 40px;
    padding: 0 4px;
    border-radius: var(--r-xs);
    text-decoration: none;
    color: var(--text-primary);
  }
  .pc-hot__i:hover { background: var(--bg-raise-2); }
  .pc-hot__n {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    border-radius: 5px;
    background: var(--bg-sunken);
    color: var(--text-third);
    font-size: 11px; font-style: normal; font-weight: 800;
    line-height: 18px; text-align: center;
  }
  .pc-hot__n.is-top { background: var(--grad-brand); color: #fff; }
  .pc-hot__t {
    flex: 1 1 auto; min-width: 0;
    font-size: .875rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pc-hot__u { flex: 0 0 auto; font-size: .72rem; color: var(--text-third); }
  .pc-hot__sk {
    height: 34px; margin-bottom: 6px;
    border-radius: var(--r-xs);
    background: var(--bg-sunken);
    animation: pc-sk 1.2s ease-in-out infinite;
  }
  .pc-hot__none { font-size: .8rem; color: var(--text-third); padding: 8px 4px; }
  @keyframes pc-sk { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

  /* 下载卡：用品牌渐变做底 —— 这是右栏唯一的「彩色块」，
     作用是让「装 App」这件事在满屏白卡里有视觉重量 */
  .pc-dl {
    border: 0;
    background: linear-gradient(150deg, #1fbe66 0%, #12a054 62%, #0b6438 100%);
    color: #fff;
  }
  .pc-dl .pc-card__t { color: #fff; }
  .pc-dl .pc-card__t::before { background: rgba(255, 255, 255, .85); }
  .pc-dl__d { margin: 0 0 12px; font-size: .8rem; line-height: 1.75; opacity: .92; }
  .pc-dl__btn {
    display: block;
    min-height: 42px; line-height: 42px;
    text-align: center;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, .96);
    color: var(--brand-700);
    font-size: .9rem; font-weight: 800;
    text-decoration: none;
  }
  .pc-dl__btn:hover { background: #fff; }

  .pc-rail__foot {
    font-size: .72rem;
    color: var(--text-third);
    text-align: center;
    padding: 4px 0 12px;
  }

  /* -------------------------------------------------------- 内容密度提升 */
  /* 瀑布流：宽屏下 3 列太少，信息密度对不起那块屏幕 */
  html.yq-pc .yq-water { column-count: 3; padding: 0 var(--sp-5); }
  html.yq-pc .yq-main,
  html.yq-pc .yq-hd { padding-left: var(--sp-5); padding-right: var(--sp-5); }

  /* 详情页/表单类页面在 PC 上不要拉满 —— 一行 90 字的正文没人读得下去 */
  html.yq-pc .sh-body,
  html.yq-pc .pub,
  html.yq-pc .set-list { max-width: 760px; margin-left: auto; margin-right: auto; }

  /* ---- 广场 hero（.hsq）：PC 上铺满内容列（20260921fs1 终版）----
     用户拍板：要铺满、不要左右留空、保持大画面。
     ★ 病根复盘（用户截图「还是一样」）：之前只放宽了外层 .hsq 的 max-height，
     但真正收缩宽度的是内层 .hsq__stage —— 它是 aspect-ratio:16/9 + max-height:62vh，
     高度一旦被 vh 压住，宽度就按 16:9 反推收缩 → 卡片右侧留出一块白。
     正确做法：PC 上把 stage 的比例约束整个去掉，宽度恒等于内容列 100%，
     高度固定 78vh，画面 object-fit:cover 上下裁切 —— 任何屏宽都铺满。 */
  html.yq-pc .hsq__stage {
    aspect-ratio: auto;
    width: 100%;
    height: 78vh;
    max-height: none;
  }

  /* 悬浮元素（返回顶部、抽屉）在 PC 上跟着内容列走 */
  html.yq-pc .yq-mask { left: 232px; }
  html.yq-pc .yq-drawer { left: 232px; }

  /* 手势层在 PC 上无意义，隐藏下拉刷新与上下文面板的「取消」以外不用动 ——
     它们本来就只在触摸事件里出现 */

  /* ------------------------------------------------------ 主题切换（PC 专属） */
  /* DOM 由 pc.js 生成（buildThemeSw），移动端根本不会创建 —— 天然只针对 PC。
     样式为什么要放在 pc.css 而不是 wild.css？
       因为「清新」态下这个控件也要可见，否则用户找不到切回山野的入口。
     所以它是**PC 骨架**的一部分，不是山野主题的一部分。 */
  .pc-theme {
    display: flex;
    gap: 2px;
    margin: 10px 4px 0;
    padding: 3px;
    border-radius: var(--r-full);
    background: var(--bg-sunken);
    border: 1px solid var(--line);
  }
  .pc-theme__b {
    flex: 1 1 0;
    border: 0;
    background: none;
    cursor: pointer;
    height: 30px;
    border-radius: var(--r-full);
    font-size: .8rem;
    font-weight: 800;
    font-family: inherit;
    color: var(--text-third);
    transition: color .16s var(--ease-out), background-color .16s var(--ease-out);
  }
  .pc-theme__b:hover { color: var(--text-primary); }
  .pc-theme__b.is-on {
    background: var(--bg-raise);
    color: var(--brand-700);
    box-shadow: var(--sh-1);
  }
  html[data-theme="dark"] .pc-theme__b.is-on { color: var(--brand-400); }
}

@media (min-width: 1280px) {
  html.yq-pc .yq-water { column-count: 4; }
}

/* ≥1500px：右栏有地方放了，内容列往左让出 292+28 的宽度 */
@media (min-width: 1500px) {
  /* 20260920sq2 · 全铺开：内容列不再 1080 封顶，瀑布流吃满（右栏仍在最右） */
  html.yq-pc .yq-main,
  html.yq-pc .yq-hd {
    max-width: none;
    margin-right: 320px;
  }
  html.yq-pc .yq-water { column-count: 5; }
}

@media (min-width: 1800px) {
  html.yq-pc .yq-water { column-count: 6; }
}

/* 1024-1499px：右栏会压住内容，直接藏掉（导航仍在左栏，功能不缺） */
@media (min-width: 1024px) and (max-width: 1499px) {
  html.yq-pc .pc-rail { display: none; }
}

/* 深色主题下左栏/右栏的底色跟随令牌，无需额外覆盖；
   只有「热榜前三名」的胶囊在深色里需要压亮一点 */
html[data-theme="dark"].yq-pc .pc-hot__n.is-top { color: #08110b; }