/* ============================================================================
   「国际 / 国内 · ⚲ 城市」那一行的样式  ——  2026-09-05，第二轮工位二
   跟 assets/sensornet-scope.js 一对一。上游是项目 B 的 site/web/assets/cn.css
   （251 行）的第 ① 段（24–115 行：开关那一行 + 城市面板）。

   ── 改了什么（照搬会炸的地方，逐条）──────────────────────────────────
   1. **类名前缀 cn- 换成 sns-**，令牌换成 A 这边的 --sn-*。
      B 的 cn.css 用的是它自己那套裸令牌（--hair / --hue / --ink / --t-tick…），
      A 这边移植首屏时把它们统统加了 --sn- 前缀（理由写在 sensornet-hero.css
      文件头第 1 条：--panel/--line/--ink 跟 A 已有的令牌撞车）。照抄 = 全部失效，
      而且**不报错**，只是所有颜色和字号悄悄退回浏览器默认值。
   2. **B 的 --hue-dim / --hue-line 这两个令牌 A 这边没有**，改用
      color-mix(--sn-hue) 现调 —— 首屏那套样式通篇是这么写的，保持一致。
   3. 锚点仍旧沿用 B 那个做法：**不去改 .sn-modes 本身，而是由 JS 打一个
      .sns-host 标记类**。差别不在效果，在可删性 —— 删掉 sensornet-scope.js
      那个 <script>，标记类不再出现，这几条样式自动失效，模式键那一行原样退回
      接入之前；直接改 .sn-modes 的话，删了脚本样式还赖在那儿，没人知道是谁加的。

   ── 窄屏（产品方这次的验收项之一：新加的这一行在窄屏下要有去处）──────────
   B 的做法是 720px 以下退回单占一行、居中。A 这边照做，但多一条：
   **结果页（.sna-console）那条紧凑搜索台是靠左的**，所以窄屏下它也靠左，
   跟着那一行的 justify-content 走，不要写死 center。
   ============================================================================ */

/* ── 开关那一行 ────────────────────────────────────────────────────────
   摆在 .sn-modes（问一问 / 搜一搜）那一行的左端，绝对定位钉住 ——
   模式键仍旧居中，两边互不挤（塞进同一个 flex 会把模式键推得偏右）。 */
.sns-host{position:relative}
.sns-bar{position:absolute;left:0;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:7px}
/* 结果页那条搜索台整行靠左，开关钉在左边会跟模式键叠在一起 —— 改成同一个 flex 里
   排在最前面。这一行只在 .sna-console 里生效，首屏不受影响。 */
.sna-console .sns-host{display:flex;align-items:center;gap:12px}
.sna-console .sns-bar{position:static;transform:none}

.sns-seg{display:flex;border:1px solid var(--sn-line);border-radius:var(--sn-r-sm);
  overflow:hidden;flex:none}
.sns-seg button{font-family:var(--sn-mono);font-size:var(--sn-t-tick);letter-spacing:.06em;
  padding:4px 11px;color:var(--sn-faint);transition:.2s;background:none;
  border:0;cursor:pointer;white-space:nowrap}
.sns-seg button+button{border-left:1px solid var(--sn-line)}
.sns-seg button:hover{color:var(--sn-mute)}
.sns-seg button.on{background:var(--sn-hue);color:var(--sn-on-hue)}
/* 「国际」还没对外开放时的样子：淡一档 + 右上角一个小点。
   「淡一档 + 右上角一个小点」这套长相原来首屏那个 .sn-modes>button.soon 也用，
   但「问一问」2026-09-06 已经开放、那条样式随开关一起退休了（见 sensornet-hero.css
   文件头的退休记录）。所以现在**全站只剩这一处**在用这套语言；将来再有「某一档还没开」
   的场景，照这里抄，别另发明一种。 */
.sns-seg button.soon{position:relative;opacity:.62}
.sns-seg button.soon.on{opacity:1}
.sns-seg button.soon::before{content:"";position:absolute;top:3px;right:4px;
  width:4px;height:4px;border-radius:50%;background:var(--sn-hue);opacity:.85}

/* 城市键：只有拨到「国内」才出现。当前筛在哪座城市**必须在这上面看得见** ——
   产品方的验收项：不能选了却不知道自己被筛着。 */
.sns-city{display:flex;align-items:center;gap:6px;flex:none;cursor:pointer;
  border:1px solid var(--sn-line);border-radius:var(--sn-r-sm);padding:3px 9px;
  font-size:var(--sn-t-micro);color:var(--sn-ink);transition:.2s;background:none;
  max-width:160px;font-family:var(--sn-han)}
.sns-city:hover{border-color:color-mix(in srgb,var(--sn-hue) 45%,transparent)}
.sns-city .pin{width:11px;height:11px;flex:none;color:var(--sn-hue)}
.sns-city .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sns-city .car{font-size:var(--sn-t-tick);color:var(--sn-faint);flex:none}
/* 「不限城市」时是灰描边（没在筛）；选了城市是琥珀描边（正在筛，一眼看得见）。 */
.sns-city.picked{border-color:color-mix(in srgb,var(--sn-hue) 55%,transparent);
  background:color-mix(in srgb,var(--sn-hue) 9%,transparent)}

/* ── 城市面板 ──────────────────────────────────────────────────────────
   **往上开**，不往下开（B 产品方 2026-09-02 拍的：往下开在结果页会开到屏幕外面）。
   面板本身不滚，只有中间那段清单滚 —— 抬头和脚注要一直看得见。 */
.sns-panel{position:absolute;left:0;bottom:calc(100% + 8px);z-index:70;
  width:min(430px,92vw);text-align:left;
  background:var(--sn-sunk);border:1px solid var(--sn-line);border-radius:var(--sn-r);
  box-shadow:0 34px 90px -30px #000,inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;display:flex;flex-direction:column;
  /* 高度封在 360 而不是 430：往上开的时候，430 那一版在 1440×900 上算出来
     top≈33，而官网的导航条是**固定在页面顶上**的（高约 62），抬头那一行
     「选一座城市」正好被压在导航条底下看不见（2026-09-05 截图里逮到的）。
     B 那边没有这个问题 —— 它那一页的顶栏跟这里不是一回事。
     清单本来就自己滚，矮一点只是一屏少看一两条，抬头和脚注却一直在。 */
  max-height:min(52vh,360px);
  animation:snsIn .24s cubic-bezier(.2,.7,.3,1) both}
/* ⚠️ 这一行不能省：浏览器自带的 [hidden]{display:none} 优先级最低，
   上面那个 display:flex 会把它盖掉，面板一进页面就是开着的。
   凡是给可能带 [hidden] 的元素指定 display，都要把这条补回来。 */
.sns-panel[hidden]{display:none}
@keyframes snsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 结果页那条搜索台是靠左的紧凑版，面板跟着它的左边缘走。 */
.sna-console .sns-panel{bottom:auto;top:calc(100% + 8px)}

.sns-panel .ph{flex:none;display:flex;align-items:center;gap:8px;padding:12px 15px 10px;
  font-size:var(--sn-t-micro);color:var(--sn-faint);border-bottom:1px solid var(--sn-line2)}
.sns-panel .ph .grow{flex:1}
.sns-list{overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto}
.sns-list::-webkit-scrollbar{width:8px}
.sns-list::-webkit-scrollbar-thumb{background:var(--sn-line);border-radius:4px}

.sns-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 15px;
  text-align:left;border:0;border-top:1px solid var(--sn-line2);transition:.15s;
  background:none;cursor:pointer;font-family:var(--sn-han)}
.sns-list .sns-row:first-child{border-top:0}
.sns-row:hover{background:rgba(255,255,255,.035)}
.sns-row.on{background:color-mix(in srgb,var(--sn-hue) 12%,transparent)}
.sns-row .cx{flex:1;min-width:0}
.sns-row .c1{font-size:var(--sn-t-note);color:var(--sn-ink);line-height:1.35}
.sns-row .c1 em{font-style:normal;color:var(--sn-faint);font-size:var(--sn-t-micro);
  margin-left:6px}
.sns-row .c2{font-family:var(--sn-mono);font-size:var(--sn-t-tick);color:var(--sn-faint);
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 「快照日库里一台都没有」的那几座：标出来，但**照旧可以选** ——
   藏起来就是替用户决定他不该看见这座城，而这个数是快照、会过期。 */
.sns-row .none{flex:none;font-family:var(--sn-mono);font-size:var(--sn-t-tick);
  letter-spacing:.04em;color:var(--sn-faint);border:1px solid var(--sn-line);
  border-radius:999px;padding:2px 8px;white-space:nowrap}
.sns-row.dim .c1{color:var(--sn-mute)}
/* 「不限城市 / 全国」那一条：跟具体城市之间画一条线，它是另一类东西。 */
.sns-row.any{border-bottom:1px solid var(--sn-line2)}
.sns-panel .pf{flex:none;padding:10px 15px 12px;border-top:1px solid var(--sn-line2);
  font-size:var(--sn-t-tick);line-height:1.65;color:var(--sn-faint)}

/* ── 结果页上那枚「正在按城市筛」的牌子 ────────────────────────────────
   复用 .sna-chip 的长相（sensornet-ask.css），只多一个可点的手势：
   点它就把筛选退回「不限城市」，用户不用再回去找那个键。 */
/* 它是一颗真 <button>（键盘走得到）——所以要把浏览器给按钮的那套默认长相按掉：
   appearance（Safari 上不按掉背景和圆角会被系统样式吃掉）、line-height。
   字体/字号/间距**不在这里重写**，那几样从 .sna-chip 继承下来，一份就够。 */
.sna-chip.sns-chip{appearance:none;-webkit-appearance:none;line-height:inherit;
  cursor:pointer;border-color:color-mix(in srgb,var(--sn-hue) 45%,transparent);
  background:color-mix(in srgb,var(--sn-hue) 10%,transparent);color:var(--sn-ink)}
.sna-chip.sns-chip:hover{border-color:var(--sn-hue)}
.sna-chip.sns-chip:focus-visible{outline:2px solid var(--sn-hue);outline-offset:2px}

/* ── 窄屏：这一行退回单占一行 ──────────────────────────────────────── */
@media (max-width:720px){
  .sns-host{flex-wrap:wrap;justify-content:center}
  .sns-bar{position:static;transform:none;width:100%;margin-bottom:8px;
    justify-content:center}
  .sna-console .sns-host{flex-wrap:wrap}
  .sna-console .sns-bar{width:100%;justify-content:flex-start;margin-bottom:8px}
  /* 窄屏上面板**改成往下开**。这条跟桌面那条是反的，理由是实测出来的：
     390×844 上首屏那一行在 y≈392，面板高 430 —— 往上开算出来 top = -46，
     直接开到视口上面去了，而且页面滚不上去（首屏本来就在最顶上），
     那 46 像素永远看不见。往下开是从 y≈478 起，底下有的是地方，
     真不够也能跟着页面滚出来。
     桌面那边不能这么改：结果页的输入台是钉在视口底部的，往下开会开到屏幕外
     （B 产品方 2026-09-02 亲自报过这个）。所以两边是两种行为，别合并。 */
  .sns-panel{width:min(430px,calc(100vw - 32px));
    top:calc(100% + 8px);bottom:auto;max-height:min(56vh,380px)}
}
@media (max-width:420px){
  .sns-city{max-width:120px}
  .sns-seg button{padding:4px 9px}
}