/* ============================================================================
 * 张掖美食地图 · 大屏（PC）增强层  pc.css
 * ----------------------------------------------------------------------------
 * 定位：手机端（<1200px）一个像素都不动。本文件由 index.html 以
 *       <link media="(min-width:1200px)"> 引入，窄屏根本不会加载。
 *
 * 为什么要单独一层，而不直接把 app.css 改宽：
 *   app.css 已经有一套 900/1100/1400/1600/1800/2400 的响应式补丁，那套解决的是
 *   「手机上怎么塞得下、桌面上怎么不空旷」，但它的骨架是手机骨架的等比放大 ——
 *   ① 左侧 264px 常驻栏只放 4 个入口，1080 高度下空掉 700px；
 *   ② 顶栏（.topbar）在 body 的内容盒里，到地图左缘就断了，投屏时右上角像被削掉；
 *   ③ 字号按笔记本（1440×900、观看 0.6m）标定，会议室/大屏 3—5m 外偏小；
 *   ④ 没有「演示位」——全屏、去边框、放大、键盘翻页，讲解的人只能靠鼠标找。
 *   这四条都不是「改几个数值」能解决的，所以单开一层做骨架重排。
 *
 * 骨架（>=1200px）：
 *   ┌──────────────────────── 通栏顶栏 64px（sticky） ────────────────────────┐
 *   ├── 导览栏 264 ──┬──── 内容列（县区/场景/菜品/门店）────┬── 地图 34vw ──┤
 *   顶栏横跨三列 = 顶栏自带 margin-left:-264px + 宽度补足右侧地图，是"溢出式通栏"：
 *   不动 body 的 padding，也就不必去改 app.css 里十几处 left:264px 的抽屉/弹层定位。
 *
 * 变量单源：地图宽度 --pc-mapw、顶栏高度 --pc-head 各定义一次，
 *   顶栏宽度、body 右内边距、吸顶偏移、演示模式全部引用它 ——
 *   改地图宽窄只要改一处，不会再出现"地图变了、顶栏没跟上"的裂缝。
 * ========================================================================== */

@media (min-width:1200px){

  :root{
    --pc-head:64px;        /* 通栏顶栏高度 */
    --pc-mapw:34vw;        /* 右侧常驻地图宽度（与 app.css 1100 断点一致） */
    --pc-rail:264px;       /* 左侧导览栏宽度（必须等于 app.css 的 264，抽屉靠它定位） */
    --pc-gold:#D9A441;
  }
  /* ---------------------------------------------------------------- 骨架 */
  body{
    padding-left:var(--pc-rail);
    padding-right:calc(var(--pc-mapw) + 28px);
  }

  /* ------------------------------------------------- 顶栏：溢出式通栏
     margin-left:-264 + width 补足两侧，让顶栏从视口最左铺到最右；
     padding-left 保持 20px，让「食」标落在物理左边缘，视觉上成为一个真正的页头。
     高度固定 64：下面 countybar/scenes/mapwrap 的 offset 全部由 --pc-head 推导，
     不能再用 auto（内容一换行整条吸顶链就会错位）。 */
  .topbar{
    position:sticky; top:0; z-index:47;
    margin-left:calc(-1 * var(--pc-rail));
    width:calc(100% + var(--pc-rail) + var(--pc-mapw) + 28px);
    height:var(--pc-head); box-sizing:border-box;
    padding:0 18px; border-radius:0;
    display:flex; align-items:center; gap:16px;
    box-shadow:0 3px 16px rgba(6,42,33,.22);
  }
  .topbar .logo{width:34px;height:34px;flex:0 0 34px;font-size:18px}
  .topbar .bt{font-size:18px}
  .topbar .bs{font-size:11.5px}
  /* 顶栏内的分隔竖线（品牌 | 统计 | 按钮），避免三块挤成一团 */
  .pc-sep{width:1px;height:22px;background:rgba(10,74,58,.16);flex:0 0 1px}

  /* 统计胶囊：把"有多少内容"摆到领导一眼能看到的位置。
     门店/菜品/县区三个数字由 pc.js 从 STORES / DISHES 现算，不写死。 */
  .pc-stats{display:flex;align-items:center;gap:18px;margin-left:6px}
  .pc-stat{display:flex;align-items:baseline;gap:5px;color:#3D6152;white-space:nowrap}
  .pc-stat b{font-size:19px;font-weight:800;color:#0A4A3A;letter-spacing:.01em;
    font-variant-numeric:tabular-nums}
  .pc-stat span{font-size:12.5px;color:#4A6A57}

  /* 演示模式按钮：和「数据大屏」并排放在最右，是讲解场景的第一入口 */
  .pc-btn{
    margin-left:auto; display:inline-flex; align-items:center; gap:6px;
    padding:8px 15px; border-radius:999px; cursor:pointer;
    border:1px solid rgba(10,74,58,.28); background:rgba(255,255,255,.82);
    color:#0A4A3A; font-size:13px; font-weight:800; font-family:inherit;
    white-space:nowrap; transition:background .16s, transform .12s;
  }
  .pc-btn:hover{background:#fff}
  .pc-btn:active{transform:scale(.97)}
  .pc-btn.on{background:linear-gradient(135deg,#1B8A6B,#0F6E56);color:#fff;
    border-color:transparent}
  .pc-btn kbd{font:inherit;font-size:11px;font-weight:700;opacity:.6;
    border:1px solid currentColor;border-radius:4px;padding:0 4px;line-height:1.5}
  .topbar .dashlink{margin-left:0}

  /* ------------------------------------------------ 左侧导览栏：填实空白
     app.css 的 .tabbar 在桌面端是 100vh 满高，4 个入口之后全部空着。
     这里把上沿压到顶栏之下，剩下的纵向空间交给「必吃榜 + 数据概览」。
     ⚠ padding-top:0 必须显式覆盖 —— 900 断点写死了 130px（那是给贴顶顶栏留的），
       不清掉会在 64px 顶栏下再多空出 130px。 */
  .tabbar{
    top:var(--pc-head); height:calc(100vh - var(--pc-head));
    padding-top:0; width:var(--pc-rail); z-index:50;
    background:linear-gradient(180deg,#F3F7F0 0%, var(--sand) 46%);
    border-right:1px solid var(--line);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .tabbar .tb{flex:0 0 54px;font-size:14.5px;gap:13px;padding-left:24px}
  .tabbar .tb i{width:19px;height:19px}
  /* 4 个入口之间的分隔（第一个之前不加） */
  .tabbar .tb + .tb{border-top:1px solid rgba(10,74,58,.05)}

  .pc-rail{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 14px 18px;
    border-top:1px solid rgba(10,74,58,.10)}
  .pc-rail::-webkit-scrollbar{width:5px}
  .pc-rail::-webkit-scrollbar-thumb{background:rgba(15,110,86,.2);border-radius:3px}
  .pc-rh{display:flex;align-items:baseline;gap:7px;margin:0 0 10px}
  .pc-rh b{font-size:13px;font-weight:800;color:#0A4A3A;letter-spacing:.04em}
  .pc-rh span{font-size:11px;color:var(--ink3)}

  /* 必吃榜条目：缩略图 + 菜名 + 承接门店数。
     整条带 data-dish，点击由 app.js 的全局委托接管（与首页菜品卡同一套逻辑），
     不需要在这里重复写开抽屉的代码。 */
  .pc-rank{display:flex;align-items:center;gap:9px;padding:7px 8px;margin-bottom:7px;
    background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;
    transition:border-color .15s, box-shadow .15s, transform .12s}
  .pc-rank:hover{border-color:rgba(15,110,86,.45);box-shadow:0 3px 10px rgba(10,74,58,.10)}
  .pc-rank:active{transform:scale(.99)}
  .pc-rank .rk{flex:0 0 18px;font-size:12px;font-weight:800;color:#C08A2E;text-align:center;
    font-variant-numeric:tabular-nums}
  .pc-rank img{flex:0 0 40px;width:40px;height:40px;border-radius:8px;object-fit:cover;
    background:var(--sand2)}
  /* 无图菜品的占位块：场景色淡底 + 首字，和右侧缩略图同尺寸、同圆角 */
  .pc-rank .ph{flex:0 0 40px;width:40px;height:40px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;font-weight:800}
  .pc-rank .rt{flex:1 1 auto;min-width:0}
  .pc-rank .rt b{display:block;font-size:13.5px;color:var(--ink);line-height:1.3;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pc-rank .rt small{display:block;margin-top:2px;font-size:11px;color:var(--ink3)}

  /* 数据概览：2×2 小格，给讲解人一个"家底"开口 */
  .pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
  .pc-cell{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 10px}
  .pc-cell b{display:block;font-size:20px;font-weight:800;color:#0F6E56;line-height:1.2;
    font-variant-numeric:tabular-nums}
  .pc-cell span{display:block;margin-top:2px;font-size:11px;color:var(--ink3)}

  /* 操作提示：只在演示模式外显示，给第一次上手的人看的 */
  .pc-hint{margin-top:14px;padding:9px 10px;border-radius:9px;
    background:rgba(15,110,86,.06);border:1px dashed rgba(15,110,86,.28);
    font-size:11px;line-height:1.75;color:#3D6152}
  .pc-hint b{color:#0A4A3A}

  /* -------------------------------------------------- 吸顶链：整体下移一档
     顶栏从"随内容滚走"变成 sticky 常驻后，下面两级吸顶必须让开 64px，
     否则滚到一半县区条会钻到顶栏底下（半透明的顶栏会露出底下的字）。 */
  .countybar{top:var(--pc-head)}
  .scenes{top:calc(var(--pc-head) + var(--h-county,62px))}

  /* 县区条：下拉与"定位"按钮放大到可远距离辨认 */
  .cbar-loc{padding:8px 16px 8px;gap:10px}
  .csel{font-size:15.5px;font-weight:700}
  .cgeo{font-size:13px;padding:5px 12px}

  /* 地图：上沿压到顶栏之下，否则顶栏会盖住地图自带的缩放/比例尺控件 */
  .mapwrap{top:var(--pc-head)}
  #map,.mapph{height:100%}

  /* 地图图例（pc.js 注入）：投屏时观众不知道点是什么，必须给一行说明 */
  .pc-legend{position:absolute;left:14px;top:14px;z-index:6;max-width:196px;
    background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:11px;
    padding:10px 12px;box-shadow:0 4px 16px rgba(10,74,58,.14);
    backdrop-filter:blur(4px)}
  .pc-legend>b{display:block;font-size:12px;font-weight:800;color:#0A4A3A;margin-bottom:7px;
    letter-spacing:.03em}
  .pc-lg{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#4A443C;
    line-height:1.9}
  .pc-lg i{flex:0 0 9px;width:9px;height:9px;border-radius:50%}
  .pc-legend .pc-lf{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line);
    font-size:10.5px;color:var(--ink3);line-height:1.6}

  /* 地图左下角的门店计数（.mstat）在桌面端偏小，抬一档 */
  .mstat{font-size:13px;padding:6px 12px}

  /* ---------------------------------------------- 内容列：远距离可读性
     这一段只调字，不动任何横向尺寸（列数由 app.css 的 1400/1800/2400 断点管）。
     投影 1080p、观看 3—5m 时，13px 正文约等于纸面 6pt，必须往上抬。 */
  .card h3{font-size:17.5px}
  .card .cmeta{font-size:13px}
  .ctag{font-size:12px;padding:2px 7px}
  .cdishes b{font-size:12.5px}
  .cgo{font-size:12.5px}
  .lhead b{font-size:17px}
  .lhead span{font-size:12.5px}
  .dcard h4{font-size:17px}
  .dcard .dp,.dcard .dc{font-size:13px}
  .sc{font-size:15px;padding:9px 10px;border-radius:9px}
  .sc i{width:19px;height:19px}

  /* 菜品横排：桌面端不再隐藏滚动条 —— 鼠标用户看不到"右边还有"，
     细条本身就是可滚动的提示；配合 pc.js 的滚轮横滚，不用去找 shift。 */
  .dishrow{gap:12px;padding-bottom:13px}
  .dishrow::-webkit-scrollbar{display:block;height:6px}
  .dishrow::-webkit-scrollbar-track{background:transparent}
  .dishrow::-webkit-scrollbar-thumb{background:rgba(15,110,86,.22);border-radius:3px}
  .dishrow::-webkit-scrollbar-thumb:hover{background:rgba(15,110,86,.38)}
  /* 内容溢出时右缘渐隐（类名由 pc.js 按 scrollWidth/clientWidth 实测切换）：
     否则第 4、5 张卡会被列宽从中间切断，投屏时看着像"排版坏了"而不是"还有更多"。 */
  .dishrow.pc-more{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent 100%);
  }

  /* 六县寻味图入口卡：桌面端横向撑开，缩略图也放大 */
  .hmentry img{width:150px;height:auto}
  .hme-t b{font-size:15px}
  .hme-t i{font-size:12px}

  /* ------------------------------------------------------------ 抽屉/弹层
     抽屉在桌面端从左侧滑出（left:264px），顶栏常驻后必须让开 64px，
     否则抽屉顶部会被顶栏压住、标题看不全。 */
  .sheet{top:var(--pc-head);max-height:calc(100vh - var(--pc-head))}
  .ov-panel{top:calc(var(--pc-head) + 16px)}
  .mask{top:var(--pc-head)}
}

/* 1800px 起地图收窄到 30vw —— 与 app.css 的同名断点保持同一口径。
   这里只改变量，顶栏宽度、body 右内边距、吸顶右边界全部自动跟着走。
   ⚠ 单独一段而不是嵌套在上面的 @media 里：条件组规则嵌套虽然合法，
     但混在长文件里改起来容易看漏，平铺更不容易出错。
   顺带把左栏字号抬一档：2560 的屏上 264px 的栏只占 10% 宽，
   11px 的辅助文字在 3m 外等于看不见。 */
@media (min-width:1800px){
  :root{ --pc-mapw:30vw }
  .tabbar .tb{font-size:15.5px}
  .pc-rh b{font-size:14px}
  .pc-rh span{font-size:11.5px}
  .pc-rank .rt b{font-size:15px}
  .pc-rank .rt small{font-size:12px}
  .pc-rank .ph{font-size:18px}
  .pc-cell b{font-size:22px}
  .pc-cell span{font-size:12px}
  .pc-hint{font-size:12px}
  .pc-stat b{font-size:20px}
  .pc-stat span{font-size:13px}
}

/* ============================================================================
 * 演示模式（body.present）
 * ----------------------------------------------------------------------------
 * 触发：顶栏「大屏演示」按钮 / F 键；退出：Esc / 再点一次。
 * 做四件事：① 真全屏 ② 收起左侧导览栏，把宽度还给内容 ③ 地图加宽 ④ 字号再上一档。
 * 为什么不用浏览器缩放：缩放会把吸顶链、固定定位的抽屉一起放大，
 *   滚动时容易露出错位的白边；这里只动宽度与字号，骨架坐标仍由变量推导。
 * ========================================================================== */
@media (min-width:1200px){
  body.present{ --pc-mapw:40vw; padding-left:0 }
  body.present .tabbar{display:none}

  /* 导览栏收起后，顶栏左边距归零、宽度少一节 */
  body.present .topbar{
    margin-left:0;
    width:calc(100% + var(--pc-mapw) + 28px);
    padding-left:20px;
  }
  /* ⚠ 抽屉/弹层/二级页的 left:264px 是给导览栏让位的，演示模式下必须归零，
     否则抽屉会悬在半空中、左侧露出一条地图。 */
  body.present .sheet,
  body.present .mask,
  body.present .spotov,
  body.present .pgsn,
  body.present .pagejoin,
  body.present .pagezone,
  body.present .pagemy,
  body.present .pagespot,
  body.present .pageproduce{left:0}
  body.present .scenes{left:0;right:calc(var(--pc-mapw) + 28px)}

  /* 字号：演示位再上 12%—18%，投到 3m 外仍能看清标签 */
  body.present .topbar .bt{font-size:20px}
  body.present .topbar .bs{font-size:12.5px}
  body.present .pc-stat b{font-size:21px}
  body.present .csel{font-size:17px}
  body.present .sc{font-size:16px;padding:11px 12px}
  body.present .sc small{font-size:12px}
  body.present .dh2{font-size:21px}
  body.present .dcard{flex:0 0 218px;padding:13px 15px}
  body.present .dcard h4{font-size:19px}
  body.present .dcard .dp,body.present .dcard .dc{font-size:14px}
  body.present .lhead b{font-size:19px}
  body.present .lhead span{font-size:13.5px}
  body.present .card{padding:15px 17px}
  body.present .card h3{font-size:19.5px}
  body.present .card .cmeta{font-size:14px}
  body.present .ctag{font-size:13px}
  body.present .cdishes b{font-size:13.5px}
  body.present .cgo{font-size:14px}
  body.present .pc-legend{max-width:216px}
  body.present .pc-legend>b{font-size:13px}
  body.present .pc-lg{font-size:12.5px}
  body.present .mstat{font-size:15px;padding:7px 14px}
}