/* TailPass 安装说明的共用样式。
 *
 * 移动优先：客户基本都是在微信里点开链接，手机是主场，电脑是顺带。
 * 所以默认样式就是窄屏的，宽屏只做加法（.qa 两栏、main 居中留白）。
 *
 * 抽成独立文件是因为说明已经拆成三页（入口 / 手机 / 电脑）。内联的话
 * 改一处字号要改三遍，迟早有一页被漏掉。
 */

:root{
  --bg:#f3f4f6; --card:#fff; --line:#e5e7eb; --text:#111827; --muted:#6b7280;
  --accent:#2563eb; --ok:#16a34a; --warn:#b45309;
  --tap:48px;                       /* 最小可点高度：拇指点得到 */
}

*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;    /* 横屏时安卓浏览器别自己放大字 */
  text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  /* 16px 起：iOS 在小于 16px 的输入框上会自动缩放整页，一缩就再也回不去 */
  font:16px/1.75 "Microsoft YaHei UI","PingFang SC","Hiragino Sans GB","Segoe UI",system-ui,sans-serif;
  /* 刘海屏和底部手势条 */
  padding-bottom:env(safe-area-inset-bottom);
  overflow-wrap:break-word;
}

/* ---------- 顶栏 ---------- */

header{
  background:#111827; color:#fff;
  padding:16px 20px;
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
}
header h1{margin:0;font-size:19px;font-weight:600;line-height:1.4}
header p{margin:5px 0 0;font-size:13.5px;color:#9ca3af;line-height:1.6}
header a{color:#93c5fd}

/* 手机 / 电脑 互跳。两份说明各自独立，所以每页都要能一键去另一页。 */
nav.swap{
  background:#1f2937;
  display:flex;
  padding-left:max(0px, env(safe-area-inset-left));
  padding-right:max(0px, env(safe-area-inset-right));
}
nav.swap a{
  flex:1;
  min-height:var(--tap);
  display:flex; align-items:center; justify-content:center;
  color:#9ca3af; text-decoration:none;
  font-size:14.5px; font-weight:500;
  border-bottom:3px solid transparent;
}
nav.swap a.on{color:#fff;border-bottom-color:var(--accent);background:#111827}

/* ---------- 版心 ---------- */

main{
  max-width:720px; margin:0 auto;
  padding:16px;
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  padding-bottom:40px;
}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:16px; margin-bottom:14px;
}
.card h2{margin:0 0 4px;font-size:18px;line-height:1.45}
.card .sub{color:var(--muted);font-size:13.5px;margin:0 0 14px;line-height:1.6}
.card > :last-child{margin-bottom:0}

/* ---------- 按钮 ---------- */

a.dl, button.act{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:var(--tap);
  background:var(--accent); color:#fff;
  border:0; border-radius:10px;
  padding:13px 16px; margin:10px 0 0;
  font:600 16px/1.4 inherit; font-family:inherit;
  text-decoration:none; text-align:center; cursor:pointer;
}
a.dl:active, button.act:active{opacity:.82}
a.dl.secondary, button.act.secondary{
  background:#fff; color:var(--accent); border:1px solid var(--accent);
  font-weight:500; font-size:15px;
}
button.act.done{background:var(--ok)}
button.act:disabled{background:#9ca3af;cursor:default}

/* 分流名单：状态行 + 自动复制失败时的手动兜底 */
.status{font-size:13.5px;color:var(--muted);margin:10px 0 0}
textarea.fallback{
  width:100%; height:120px; margin:8px 0 0; padding:9px;
  border:1px solid #d1d5db; border-radius:8px; background:#f9fafb;
  font:12px/1.5 Consolas,Monaco,"Courier New",monospace;
  resize:vertical;
}

/* 入口页的两个大选择。副标题要能换行，所以是纵向排布。 */
a.pick{
  display:block; width:100%;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:10px; padding:14px 16px; margin:10px 0 0;
  text-decoration:none; color:var(--text);
}
a.pick:active{background:#f9fafb}
a.pick b{display:block;font-size:16.5px;margin-bottom:3px}
a.pick span{display:block;font-size:13.5px;color:var(--muted);line-height:1.6}
a.pick.me{border-left-color:var(--ok);background:#f0fdf4}
a.pick .tag{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:var(--ok);color:#fff;font-size:11.5px;font-weight:600;vertical-align:1px;
}

/* ---------- 步骤 ---------- */

ol{margin:10px 0 0;padding-left:21px}
ol li{margin-bottom:8px}
ol ol{margin:6px 0 2px;padding-left:19px}
ol ol li{margin-bottom:5px}

.step{
  background:#f9fafb; border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:8px; padding:12px 13px; margin:10px 0;
}
.step b.t{display:block;margin-bottom:5px;font-size:16px}

/* ---------- 提示框 ---------- */

.note{
  background:#fffbeb; border:1px solid #fde68a; color:#78350f;
  border-radius:9px; padding:12px 13px; font-size:14px; line-height:1.7; margin:12px 0 0;
}
.note.blue{background:#eff6ff;border-color:#bfdbfe;color:#1e3a5f}
.note.green{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.note.red{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
.note b.t{display:block;margin-bottom:4px;font-size:15px}

/* 地址变更横幅：域名换掉之后，已装到桌面的客户只能从这里知道新地址 */
#addr-banner{
  background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d;
  border-radius:12px;padding:14px 16px;margin-bottom:14px;font-size:14.5px;line-height:1.7;
}
#addr-banner b.t{display:block;margin-bottom:6px;font-size:16px}
#addr-banner a{color:#b91c1c;font-weight:600}

/* ---------- 可复制的一行 ---------- */

.copy{margin:10px 0 0}
.copy code{
  display:block; width:100%;
  background:#f9fafb; border:1px solid #d1d5db; border-radius:8px;
  padding:11px 12px; margin:0;
  font:13px/1.6 Consolas,Monaco,"Courier New",monospace;
  overflow-wrap:anywhere;
}
.copy button{
  width:100%; min-height:var(--tap); margin:8px 0 0;
  background:#fff; color:var(--accent); border:1px solid var(--accent);
  border-radius:9px; font:600 15px/1.4 inherit; font-family:inherit; cursor:pointer;
}
.copy button:active{background:#eff6ff}
.copy button.done{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}

/* ---------- 问答（原来是表格，手机上两列挤不开） ---------- */

.qa{border-top:1px solid var(--line);padding:12px 0 0;margin-top:12px}
.qa:first-of-type{border-top:0;padding-top:0;margin-top:10px}
.qa .q{font-weight:600;font-size:15px;margin-bottom:4px}
.qa .a{font-size:14.5px;color:#374151;line-height:1.75}

/* 前置条件那三行 */
.kv{border-top:1px solid var(--line);padding:11px 0;display:flex;gap:12px;flex-wrap:wrap}
.kv:first-of-type{border-top:0}
.kv .k{font-weight:600;font-size:14.5px;min-width:112px}
.kv .v{font-size:14.5px;color:#374151;flex:1;min-width:160px}

code{
  background:#f3f4f6; padding:2px 6px; border-radius:5px;
  font-size:13.5px; overflow-wrap:anywhere;
  font-family:Consolas,Monaco,"Courier New",monospace;
}

a{color:var(--accent)}

footer{
  color:var(--muted); font-size:13px; text-align:center; line-height:1.8;
  padding:12px 16px 32px;
}
footer code{font-size:12.5px}

.hide{display:none !important}

/* ---------- 宽屏加法 ---------- */

@media (min-width:600px){
  .qa{display:grid;grid-template-columns:200px 1fr;gap:0 18px}
  .qa .q{margin-bottom:0}
  a.dl, button.act{width:auto;min-width:260px;display:inline-flex}
  .copy{display:flex;gap:8px;align-items:flex-start}
  .copy code{flex:1}
  .copy button{width:auto;min-width:104px;margin:0;flex:none}
}