/* TechBlue Next · 小组件（热榜 / 天气 / 收藏 / 最近访问）——独立样式文件，只用 app.css 里的 CSS 变量，不覆盖全站规则。
   右栏组件沿用 .panel.rail-panel，三栏布局分支里可直接放进 <aside class="rail">。 */

/* ---------- 热榜 ---------- */
.w-hot-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -2px 8px;padding:2px}
.w-hot-tabs::-webkit-scrollbar{display:none}
.w-hot-tabs button{flex:none;border:1px solid var(--border);background:var(--bg-elev);padding:3px 10px;border-radius:99px;font:500 12px/1.6 var(--font);color:var(--text-2);cursor:pointer}
.w-hot-tabs button:hover{border-color:var(--primary);color:var(--primary)}
.w-hot-tabs button[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.w-hot-list{list-style:none;margin:0;padding:0;counter-reset:none}
.w-hot-list li{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--border)}
.w-hot-list li:last-child{border-bottom:0}
.w-hot-list a{font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.w-hot-list small{grid-column:2;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.w-hot-desc{grid-column:2;margin:2px 0 0;font-size:12px;line-height:1.5;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.w-rank{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--bg-soft);color:var(--text-3);font:700 11px/1 var(--font);font-variant-numeric:tabular-nums}
.w-rank.r1{background:#ef4444;color:#fff}.w-rank.r2{background:#f97316;color:#fff}.w-rank.r3{background:#eab308;color:#fff}
.w-foot{display:flex;align-items:center;gap:4px;margin:8px 0 0;font-size:12px;color:var(--text-3)}
.w-foot .ic{width:14px;height:14px}
.w-hot-page{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));align-items:start;margin-bottom:24px}
.w-hot-card .block-head h2{font-size:16px}

/* ---------- 天气 ---------- */
.w-wx-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.w-wx-city{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;padding:2px 4px;margin-left:-4px;border-radius:8px;font:600 15px var(--font);color:var(--text);cursor:pointer}
.w-wx-city:hover{background:var(--bg-soft)}
.w-wx-city .ic{width:16px;height:16px;color:var(--primary)}
.w-wx-city .w-wx-caret{color:var(--text-3);transition:transform .15s}
.w-wx-city[aria-expanded="true"] .w-wx-caret{transform:rotate(90deg)}
.w-wx-src{font-size:11px;color:var(--text-3)}
.w-wx-now{display:flex;align-items:center;gap:12px;margin-top:6px}
.w-wx-now>.ic{width:40px;height:40px;stroke-width:1.6;color:var(--primary)}
.w-wx-temp{font:700 32px/1 var(--font);font-variant-numeric:tabular-nums}
.w-wx-desc{display:flex;flex-direction:column;font-size:13px;color:var(--text-2);line-height:1.5}
.w-wx-desc small{color:var(--text-3);font-size:12px}
.w-wx-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:10px;padding-top:8px;border-top:1px dashed var(--border)}
.w-wx-days div{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;color:var(--text-2)}
.w-wx-days .ic{width:18px;height:18px;color:var(--text-3)}
.w-wx-days b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.w-wx-msg{margin:8px 0 0;font-size:13px;color:var(--text-3)}
.w-wx-picker{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.w-wx-search{display:flex;gap:6px}
.w-wx-search input{flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:13px}
.w-wx-search input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.w-wx-search .chip{flex:none;gap:4px;height:32px;padding:0 10px}
.w-wx-search .chip .ic{width:15px;height:15px}
.w-wx-results{list-style:none;margin:6px 0 0;padding:0}
.w-wx-results:empty{display:none}
.w-wx-results button{display:flex;width:100%;justify-content:space-between;gap:8px;border:0;background:transparent;padding:6px 8px;border-radius:8px;font:13px var(--font);color:var(--text);cursor:pointer;text-align:left}
.w-wx-results button:hover,.w-wx-results button:focus-visible{background:var(--bg-soft)}
.w-wx-results small{color:var(--text-3)}
.w-wx-cities{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:132px;overflow:auto;scrollbar-width:thin}
.w-wx-cities .chip{height:26px;padding:0 9px;font-size:12px}
.w-wx-note{margin:8px 0 0;font-size:11px;color:var(--text-3)}
.w-wx-auto{margin:2px 0 0;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-wx-link{border:0;background:transparent;padding:0;font:inherit;color:var(--primary);cursor:pointer}
.w-wx-link:hover{text-decoration:underline}
.w-wx-cities .w-wx-autochip{color:var(--primary);border-color:var(--primary)}
.w-wx-auto[hidden],.w-wx-autochip[hidden]{display:none!important}

/* ---------- 收藏星标（widgets.js 给每张链接卡片包一层 .w-fw） ---------- */
.w-fw{position:relative;min-width:0;height:100%}
.w-fw>.card{height:100%}
.w-fw>.card .card-title{padding-right:22px}
.grid-featured .w-fw>.card .card-title{padding-right:0}
.w-star{position:absolute;top:5px;right:5px;z-index:2;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--text-3);cursor:pointer;opacity:0;transition:opacity .15s,color .15s,background .15s}
.w-star .ic{width:16px;height:16px}
.w-fw:hover .w-star,.w-star:focus-visible,.w-star.on{opacity:1}
.w-star:hover{background:var(--bg-soft);color:#f59e0b}
.w-star.on{color:#f59e0b}
@media (hover:none){.w-star{opacity:.55}.grid-featured .w-star:not(.on){display:none}}

/* ---------- 我的收藏 / 最近访问 ---------- */
.w-favs{margin-bottom:22px}
.w-favs .block-head h2 small{font-size:12px;font-weight:500;color:var(--text-3)}
.w-favs .block-head h2 .ic{color:#f59e0b}
.w-recent-part .block-head h2 .ic{color:var(--primary)}
.w-favs-part+.w-recent-part{margin-top:16px}
.w-actions{display:flex;flex-wrap:wrap;gap:6px}
.w-favs .chip{height:28px;padding:0 10px;gap:4px;font-size:12px}
.w-favs .chip .ic{width:14px;height:14px}
.w-recent{display:flex;flex-wrap:wrap;gap:8px}
.w-recent a{display:inline-flex;align-items:center;gap:8px;max-width:220px;height:36px;padding:0 12px 0 4px;border:1px solid var(--border);border-radius:99px;background:var(--bg-elev);font-size:13px}
.w-recent a:hover{border-color:var(--primary)}
.w-recent a>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-recent .avatar{width:28px;height:28px;border-radius:99px;font-size:12px}
.w-recent .avatar img{inset:3px;width:20px;height:20px;border-radius:99px}
.w-favs-note{margin:10px 0 0;font-size:12px;color:var(--text-3)}
.w-toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translateX(-50%);padding:8px 16px;border-radius:99px;background:var(--text);color:var(--bg);font-size:13px;box-shadow:var(--shadow-lg);pointer-events:none}
.w-row{align-items:start}
[data-w-favs][hidden],.w-wx-cities .chip[hidden],.w-toast[hidden]{display:none!important}

/* ---------- 放进三栏布局右栏 <aside class="rail"> 时（feat/layout-3col）：天气固定高度、热榜分一份剩余高度并在内部滚动 ---------- */
.rail>.w-wx{flex:none}
.rail>.w-hot{display:flex;flex-direction:column;min-height:0}
.rail>.w-hot .block-head,.rail>.w-hot .w-hot-tabs,.rail>.w-hot .w-foot{flex:none}
.rail>.w-hot .w-hot-pane{display:flex;flex-direction:column;min-height:0;flex:1}
.rail>.w-hot .w-hot-pane[hidden]{display:none}
.rail>.w-hot .w-hot-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin-right:-8px;padding-right:8px}
@container main (min-width:720px){
  .rail>.w-hot{flex:1 1 0}
  .rail>.w-wx .w-wx-days{display:none}
  .rail>.w-wx .w-wx-now{margin-top:2px}
}

/* ---------- 与 tool-pages（右上角「直达」）/ task-entry（右下角反馈）卡片共存 ---------- */
.w-fw-tool>.w-star{right:32px}
.w-fw-tool>.card .card-title{padding-right:44px}
.grid-featured .w-fw-tool>.w-star{right:5px}

/* 右栏紧凑天气（三栏时）：一行 = 城市/定位·切换 | 图标 温度 天气；数据来源写在城市选择面板与页脚 */
@container main (min-width:720px){
  .rail>.w-wx.rail-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:8px 12px}
  .rail>.w-wx .w-wx-head{grid-column:1;grid-row:1;min-width:0}
  .rail>.w-wx .w-wx-city{font-size:14px;max-width:100%}
  .rail>.w-wx .w-wx-src{display:none}
  .rail>.w-wx .w-wx-auto:not([hidden]){grid-column:1;grid-row:2;margin:0;font-size:11px;display:flex;min-width:0;gap:3px}
  .rail>.w-wx .w-wx-auto>[data-wx-auto-text]{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .rail>.w-wx .w-wx-auto>.w-wx-link{flex:none}
  .rail>.w-wx .w-wx-body{grid-column:2;grid-row:1/3}
  .rail>.w-wx .w-wx-now{margin:0;gap:6px}
  .rail>.w-wx .w-wx-now>.ic{width:24px;height:24px}
  .rail>.w-wx .w-wx-temp{font-size:22px}
  .rail>.w-wx .w-wx-desc{font-size:12px;max-width:4.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rail>.w-wx .w-wx-desc small,.rail>.w-wx .w-wx-days{display:none}
  .rail>.w-wx .w-wx-msg{margin:0;font-size:12px}
  .rail>.w-wx .w-wx-picker{grid-column:1/-1}
}