/* ==================================================================
   R10-2 · 首页极简单框
   ------------------------------------------------------------------
   首屏只有一块居中面板：Logo + 四平台搜索框（含联想）+ 查询按钮 + 一张小贴士。
   铁律：本文件不出现任何色值，全部走 tokens.css 变量（--blue / --card /
   --line / --wash / --t1 / --t2 / --r-m / --r-l …），深浅模式自动跟随。
   ================================================================== */

.home-main{
  display:flex;justify-content:center;
  padding-top:clamp(40px,7vw,104px);
  padding-bottom:clamp(56px,8vw,128px);
  /* R11-1：搜索区 / 小贴士 / 常见问题 共用同一个容器宽度，整块落在中轴线上 */
  --home-block:min(560px,92vw);
}

/* ---------- 统一容器（R11-1） ----------
   搜索区三件套（平台 tabs 条 + 昵称输入框 + 查询按钮）全部装进这个容器，
   容器自身水平居中；小贴士与常见问题复用同一个宽度，上下共用同一中轴。 */
.search-block{
  width:min(560px,92vw);
  margin:0 auto;
}

.home-panel{
  width:100%;max-width:720px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

/* ---------- Logo ---------- */
.home-logo{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0 2px;
  border-radius:var(--r-m);
}
.home-logo-m{
  width:34px;height:34px;border-radius:var(--r-s);
  background:var(--blue);color:var(--card);
  display:grid;place-items:center;
  font-size:var(--t-h3);font-weight:600;letter-spacing:-.02em;
}
.home-logo-t{
  font-size:clamp(22px,2.1vw,28px);font-weight:600;
  color:var(--ink);letter-spacing:-.014em;line-height:1.25;
}
.home-sub{
  margin-top:6px;
  font-size:var(--t-sm);color:var(--t2);letter-spacing:.01em;
}

/* ---------- 搜索表单 ---------- */
/* R11-1：form 本身就是统一容器（.search-block），宽 min(560px,92vw) 且水平居中；
   .home-field 撑满容器，查询按钮以绝对定位贴在输入框同一排的最右侧。 */
.home-form{
  width:min(560px,92vw);
  margin:clamp(26px,3.4vw,40px) auto 0;
  position:relative;
  display:flex;flex-direction:column;align-items:stretch;
}
.home-field{
  position:relative;width:100%;min-width:0;
  background:var(--card);
  /* 1px（不用 1.5px：Chromium 会把边框宽度取整成 1px，补偿值才对得齐） */
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--sh-1);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.home-field:focus-within{
  border-color:var(--blue-line);
  box-shadow:0 0 0 3px var(--blue-soft);
}

/* 平台 tabs：嵌在框内顶部，宽度 100% 填满容器 */
.home-tabs{
  display:flex;align-items:center;gap:2px;
  /* 抵掉 .home-field 左右各 1px 边框，让 tabs 条左右边界与容器严格重合 */
  width:calc(100% + 2px);margin-left:-1px;margin-right:-1px;
  padding:7px 7px 0;
}
.home-tab{
  /* 44px 触控目标（手机端与桌面端都要求） */
  min-height:44px;padding:11px 15px;
  border-radius:999px;
  font-size:var(--t-xs);font-weight:500;color:var(--t2);
  transition:background var(--t-fast),color var(--t-fast);
}
.home-tab:hover{background:var(--wash);color:var(--ink)}
.home-tab[aria-selected="true"]{
  background:var(--blue-soft);color:var(--blue);font-weight:600;
}

/* 输入框：--t-lead 的 clamp 下界就是 16px，任何屏宽都 >=16px，
   手机端聚焦时 iOS Safari 不会自动放大页面 */
.home-input{
  /* 同上：输入框左右边界与容器严格重合 */
  width:calc(100% + 2px);margin-left:-1px;margin-right:-1px;
  height:52px;
  /* 右侧留出查询按钮的位置，文字不会被按钮压住 */
  padding:0 132px 0 18px;
  border:0;background:none;
  border-radius:var(--r-m);
  font-size:var(--t-lead);font-weight:500;line-height:1.4;
  color:var(--t1);text-align:left;
}
.home-input::placeholder{color:var(--t2);font-weight:400}
.home-input:focus{outline:none}
.home-input::-webkit-search-cancel-button{display:none}

/* 联想下拉 / 最近查询下拉（R12-2）：两个列表共用同一套浮层样式，
   位置都是紧贴输入框下方，互斥展示，不会互相遮挡。 */
.home-suggest,
.home-history{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;
  margin:0;padding:6px;list-style:none;
  background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-2);
  max-height:296px;overflow-y:auto;
  text-align:left;
  -webkit-overflow-scrolling:touch;
}
.home-suggest[hidden],.home-history[hidden]{display:none}

/* 最近查询列表的表头与行内时间 */
.hh-hd{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:4px 12px 8px;
  font-size:var(--t-xs);color:var(--t3);
}
.home-sg-t{flex:0 0 auto;font-size:var(--t-xs);color:var(--t3)}
.home-sg{
  display:flex;align-items:center;gap:8px;
  min-height:44px;padding:9px 12px;border-radius:var(--r-s);
  cursor:pointer;
}
.home-sg:hover,.home-sg.is-on{background:var(--wash)}
.home-sg-n{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--t-sm);font-weight:500;color:var(--t1);
}
.home-sg-p{
  flex:0 0 auto;
  font-size:var(--t-xs);color:var(--t2);
  background:var(--blue-soft);color:var(--blue);
  padding:2px 8px;border-radius:999px;
}
.home-sg.is-ban .home-sg-p{background:var(--red-soft);color:var(--red)}
.home-sg-empty{
  padding:12px;font-size:var(--t-sm);color:var(--t2);
}

/* 查询按钮：与输入框同一排、紧贴容器右端，高度与圆角与输入框完全一致（统一 52px） */
.home-go{
  position:absolute;right:6px;bottom:6px;z-index:2;
  height:52px;padding:0 26px;
  border-radius:var(--r-m);
  font-size:var(--t-body);
}
.home-go svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 小贴士 ---------- */
.home-tip{
  display:flex;align-items:flex-start;gap:9px;
  /* R11-1.5：与搜索区同一个容器宽度，整块内容共用一条中轴 */
  width:var(--home-block);max-width:none;
  margin-left:auto;margin-right:auto;
  margin-top:clamp(20px,2.6vw,30px);
  padding:13px 16px;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-m);
  font-size:var(--t-xs);line-height:1.75;color:var(--t2);
  text-align:left;
}
.home-tip b{color:var(--t1);font-weight:500}
.home-tip-i{
  flex:0 0 auto;width:18px;height:18px;margin-top:2px;
  border-radius:50%;background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;
  font-size:12px;font-weight:600;font-style:italic;
}

/* ---------- 常见问题（R10-6 新增，默认收起，不占首屏） ---------- */
.home-faq{
  /* R11-1.5：同上，宽度与搜索区一致并水平居中 */
  width:var(--home-block);max-width:none;
  margin-left:auto;margin-right:auto;
  margin-top:clamp(14px,1.8vw,20px);
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-m);text-align:left;
}
.home-faq-sum{
  display:flex;align-items:center;gap:10px;
  min-height:48px;padding:12px 16px;
  cursor:pointer;list-style:none;
  font-size:var(--t-sm);color:var(--t1);
}
.home-faq-sum::-webkit-details-marker{display:none}
.home-faq-t{font-weight:500}
.home-faq-hint{margin-left:auto;font-size:var(--t-xs);color:var(--t3)}
.home-faq-sum::after{
  content:"";flex:0 0 auto;width:7px;height:7px;
  border-right:1.6px solid var(--t3);border-bottom:1.6px solid var(--t3);
  transform:rotate(45deg);transition:transform .18s ease;
}
.home-faq[open] .home-faq-sum::after{transform:rotate(-135deg)}
.home-faq .seo-faq-list{
  display:flex;flex-direction:column;gap:14px;
  padding:0 16px 14px;
}
.home-faq .seo-faq-item{padding-bottom:14px;border-bottom:1px solid var(--line)}
.home-faq .seo-faq-item:last-child{padding-bottom:0;border-bottom:0}
.home-faq .seo-faq-q{
  margin:0 0 6px;font-size:var(--t-sm);font-weight:600;
  line-height:1.5;color:var(--t1);
}
.home-faq .seo-faq-a{
  margin:0;font-size:var(--t-xs);line-height:1.75;color:var(--t2);
}

/* ---------- 窄屏 ---------- */
@media (max-width:720px){
  /* 92vw 的容器要放得下，取消主内容区左右留白，块仍靠 margin:auto 居中 */
  .home-main{padding-inline:0}
  .home-form{flex-direction:column;gap:10px}
  .home-field{width:100%}
  /* 手机端按钮与输入框纵向堆叠：宽度同为 100%（= 容器 92vw），高度仍统一 52px */
  .home-go{position:static;width:100%;height:52px;margin-top:10px}
  /* 手机端基础层有 body[data-page="misc-index"] .home-tip{width:100%}，优先级更高，
     这里提权把小贴士拉回与搜索区同一个容器宽度，左右边界才对得齐 */
  body[data-page="misc-index"] .home-panel .home-tip{width:var(--home-block);max-width:none}
  .home-tabs{overflow-x:auto;scrollbar-width:none}
  .home-tabs::-webkit-scrollbar{display:none}
  .home-tab{min-height:44px;padding:11px 14px}
  /* 手机端基础层把 input 统一压到 48px，这里用更高优先级把高度拉回 52px，
     保证「输入框 = 查询按钮 = 52px」在 390 档同样成立 */
  .home-panel .home-field .home-input{height:52px;min-height:52px;padding-right:18px}
  /* 小贴士是 <p>，手机端字号由 mobile-base.css 的正文基线统一兜到 max(14px,1em)，
     这里不再重复声明，避免写成死规则。 */
}