/* 欢迎弹窗与最近分析记录面板 —— 沿用 style.css 的配色变量，不自成一套 */

/* 修复：body 的隐式网格列会被内容（判据表格）撑宽，窄屏下整页横向溢出，
   连带把 position:fixed 的弹层一起撑变形。把列宽钉在容器内，表格回到 #abody
   自己滚动（它本来就有 overflow:auto）。桌面端呈现不变。 */
body{grid-template-columns:minmax(0,1fr)}

/* ================================================================ 通用遮罩 */
.uw-mask{
  position:fixed; inset:0; z-index:120; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(8,11,15,.78);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.uw-mask.on{display:flex}
.uw-panel{
  width:100%; max-width:560px; max-height:calc(100vh - 40px);
  display:flex; flex-direction:column;
  background:var(--bg2); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:uw-in .18s ease-out;
}
@keyframes uw-in{from{opacity:0; transform:translateY(8px) scale(.99)} to{opacity:1; transform:none}}

/* ================================================================ 欢迎弹窗 */
.uw-head{
  padding:22px 24px 14px; border-bottom:1px solid var(--line);
}
.uw-eyebrow{
  font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--acc); margin-bottom:8px;
}
.uw-title{
  margin:0; font-size:17px; font-weight:600; line-height:1.45; color:var(--fg);
  letter-spacing:.2px;
}
.uw-body{padding:16px 24px 4px; overflow:auto; font-size:13px; line-height:1.75; color:var(--fg2);
  flex:1 1 auto}
.uw-body p{margin:0 0 12px}
.uw-body p b{color:var(--fg); font-weight:600}

/* 开发者署名 + 微信二维码。二维码按原图（354px）的一半渲染，
   既保证扫码清晰，又不会把弹窗撑高。 */
.uw-author{margin:0 0 16px}
.uw-author p{margin:0 0 12px}
.uw-qr{
  display:flex; align-items:center; gap:14px;
  padding:8px 14px 8px 8px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); text-decoration:none; color:var(--fg2);
  transition:border-color .12s, transform .12s;
}
.uw-qr:hover{border-color:var(--acc)}
.uw-qr:active{transform:translateY(1px)}
.uw-qr:focus-visible{outline:2px solid rgba(79,195,247,.75); outline-offset:2px}
.uw-qr img{display:block; width:128px; height:auto; border-radius:4px; background:#fff; flex:none}
.uw-qr-tx{display:flex; flex-direction:column; gap:5px; min-width:0; line-height:1.55}
.uw-qr-tx b{color:var(--fg); font-size:12.5px; font-weight:600}
.uw-qr-tx i{font-style:normal; font-size:11.5px; color:var(--fg3)}
.uw-qr-tx i.lnk{color:var(--acc); opacity:.85}
.uw-sub{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--fg3); letter-spacing:.3px;
  margin:0 0 14px;
}
.uw-sub::after{content:""; flex:1; height:1px; background:var(--line)}
.uw-list{
  list-style:none; margin:0 0 6px; padding:0;
  border:1px solid var(--line); border-radius:8px; background:var(--bg);
}
.uw-list li{
  position:relative; padding:9px 14px 9px 30px; font-size:12.5px; line-height:1.65;
  color:var(--fg2); border-bottom:1px solid var(--line);
}
.uw-list li:last-child{border-bottom:none}
.uw-list li::before{
  content:""; position:absolute; left:14px; top:16px;
  width:6px; height:6px; border-radius:50%; background:var(--acc); opacity:.75;
}
.uw-list li b{color:var(--fg); font-weight:600}
.uw-foot{
  display:flex; align-items:center; gap:12px;
  padding:14px 24px 20px; border-top:1px solid var(--line);
}
.uw-note{font-size:11.5px; color:var(--fg3); line-height:1.5; margin-right:auto}
.uw-btn{
  appearance:none; cursor:pointer; font-family:inherit;
  padding:9px 20px; border-radius:7px; font-size:13px; font-weight:600;
  background:var(--acc); border:1px solid var(--acc); color:#08111a;
  transition:filter .12s, transform .12s;
  white-space:nowrap;
}
.uw-btn:hover{filter:brightness(1.08)}
.uw-btn:active{transform:translateY(1px)}
.uw-btn:focus-visible{outline:2px solid rgba(79,195,247,.75); outline-offset:2px}
.uw-btn.ghost{
  background:var(--bg3); border-color:var(--line); color:var(--fg2); font-weight:500;
  padding:6px 12px; font-size:12px;
}
.uw-btn.ghost:hover{border-color:var(--acc); color:var(--acc); filter:none}

/* ================================================================ 历史面板 */
.uh-panel{
  width:100%; max-width:780px; max-height:calc(100vh - 40px);
  display:flex; flex-direction:column;
  background:var(--bg2); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:uw-in .18s ease-out;
}
.uh-head{
  display:flex; align-items:center; gap:10px;
  padding:15px 18px; border-bottom:1px solid var(--line);
}
.uh-head h2{margin:0; font-size:14px; font-weight:600; color:var(--fg)}
.uh-head .uh-sub{font-size:11.5px; color:var(--fg3); margin-left:2px}
.uh-close{
  margin-left:auto; background:none; border:1px solid transparent; color:var(--fg2);
  font-size:18px; line-height:1; cursor:pointer; padding:3px 9px; border-radius:6px;
}
.uh-close:hover{color:var(--acc); border-color:var(--line); background:var(--bg3)}
.uh-body{overflow:auto; padding:10px 14px 16px; min-height:120px}
.uh-empty{
  color:var(--fg3); text-align:center; padding:38px 16px; font-size:12.5px; line-height:2;
}
.uh-empty b{display:block; color:var(--fg2); font-weight:600; font-size:13px; margin-bottom:4px}

.uh-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); margin-bottom:8px;
}
.uh-row:hover{border-color:#33465a}
.uh-row.expired{opacity:.6}
.uh-main{min-width:0; flex:1}
.uh-name{
  font-size:13px; color:var(--fg); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:3px;
}
.uh-meta{
  font-size:11.5px; color:var(--fg3);
  display:flex; gap:16px; flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.uh-meta span{position:relative}
/* 用间距分隔而非「·」：换行时不会在行首留下孤立的点 */
.uh-meta span:first-child{color:#7d8fa1}
.uh-side{display:flex; align-items:center; gap:8px; flex:none}
.uh-msg{font-size:11px; color:var(--bad); max-width:220px; line-height:1.4; text-align:right}
.uh-go{
  cursor:pointer; font-family:inherit; white-space:nowrap;
  padding:5px 13px; border-radius:6px; font-size:12px;
  background:rgba(79,195,247,.12); border:1px solid rgba(79,195,247,.4); color:var(--acc);
}
.uh-go:hover{background:rgba(79,195,247,.22); border-color:var(--acc)}
.uh-go[disabled]{background:var(--bg3); border-color:var(--line); color:var(--fg3); cursor:not-allowed}
.uh-del{
  cursor:pointer; font-family:inherit; background:none; border:1px solid transparent;
  color:var(--fg3); font-size:15px; line-height:1; padding:3px 7px; border-radius:5px;
}
.uh-del:hover{color:var(--bad); border-color:rgba(224,96,90,.35)}

.uh-loading{padding:34px 12px; text-align:center; color:var(--fg2); font-size:12.5px}
.uh-spin{
  display:inline-block; width:16px; height:16px; margin-right:8px; vertical-align:-3px;
  border:2px solid var(--line); border-top-color:var(--acc); border-radius:50%;
  animation:uh-rot .7s linear infinite;
}
@keyframes uh-rot{to{transform:rotate(360deg)}}
.uh-err{
  margin:0 0 10px; padding:8px 12px; border-radius:7px; font-size:12px; line-height:1.6;
  background:rgba(224,96,90,.1); border:1px solid rgba(224,96,90,.32); color:#f0a09b;
}
.uh-tip{font-size:11.5px; color:var(--fg3); padding:8px 4px 2px; line-height:1.7}

/* ================================================================ 折线图折叠
   只隐藏画布区与通道栏，toolbar 保留（折叠按钮就在里面，随时能展开）。
   body 的三行网格由 auto/1fr/auto 变成 auto/auto/1fr，判据区接管剩余高度。 */
#toolbar .foldbtn{
  margin-left:auto; flex:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  background:var(--bg3); border:1px solid var(--line); color:var(--fg2);
  padding:3px 10px; border-radius:5px; font:12px/1.5 inherit;
  transition:color .12s, border-color .12s;
}
#toolbar .foldbtn:hover{border-color:var(--acc); color:var(--acc)}
#toolbar .foldbtn:active{transform:translateY(1px)}
#toolbar .foldbtn .arw{font-size:10px; line-height:1; transition:transform .15s}

body.chart-folded{grid-template-rows:auto auto 1fr}
body.chart-folded main{grid-template-columns:minmax(0,1fr)}
body.chart-folded aside{display:none}          /* 通道栏跟图一起收，不留半截 */
body.chart-folded #wrap{display:none}
body.chart-folded #analysis{max-height:none}   /* 折叠的全部意义：判据区吃满 */
body.chart-folded #toolbar .foldbtn .arw{transform:rotate(-90deg)}

/* 折叠后横轴/纵轴/跳段这些下拉没有图可作用，收起来只留一句说明，避免整行空着 */
body.chart-folded #toolbar label,
body.chart-folded #toolbar .sep,
body.chart-folded #zoomInfo{display:none}
#foldHint{display:none; color:var(--fg3); font-size:12px}
body.chart-folded #foldHint{display:inline}

/* 折叠后判据表是唯一阅读内容；窄屏下不钉最小宽会把每列压成竖排单字。
   760px 接近列宽可读的下限，超出部分靠 #abody 横向滚动。
   这条只在折叠态生效，展开态表格呈现完全不变。 */
body.chart-folded #abody table{min-width:760px}
/* 检查项名称不折行：否则「轨压偏差」会被断成「轨压偏 / 差」 */
body.chart-folded #results table tr[data-chk] td:nth-child(2),
body.chart-folded #results table th:nth-child(2){white-space:nowrap}

/* ================================================================ 小屏适配 */
@media (max-width:640px){
  /* 欢迎弹窗：小卡片居中，内容少时不留大片空白 */
  #uwMask{padding:16px; align-items:center}
  #uwMask .uw-panel{height:auto; max-height:100%; border-radius:12px}

  /* 历史面板：列表可能很长，占满全屏更好用 */
  #uhMask{padding:0; align-items:stretch}
  #uhMask .uh-panel{
    max-width:none; max-height:none; height:100%; border-radius:0; border:none;
  }
  .uw-head{padding:18px 18px 12px}
  .uw-title{font-size:16px}
  .uw-body{padding:14px 18px 4px; flex:0 1 auto}
  .uw-foot{flex-direction:column; align-items:stretch; padding:12px 18px 18px; gap:10px}
  .uw-note{margin:0; text-align:center}
  .uw-btn{width:100%; text-align:center; padding:12px 16px}
  .uh-head{padding:13px 14px}
  .uh-body{padding:10px 10px 16px}
  .uh-row{flex-wrap:wrap; align-items:flex-start}
  .uh-side{width:100%; justify-content:flex-end}
  .uh-msg{max-width:none; text-align:left; flex:1}
}