/* ============================================================
   fp.css — /fingerprint 浏览器指纹台
   ------------------------------------------------------------
   依赖 app.css 的令牌与公共件（.btn / .chip / .badge / .kv / .tbl / .stat /
   .signals / .notes / .fine / .mono / .dot）以及 page.css 的 .pg / .pg-head。

   这一页只允许一种强调色：紫。它是数据密集页，行、表、详情全部保持中性底。
   四种状态（已取 / 未提供 / 取不到 / 易变）由左侧一枚小圆点承担颜色，
   状态文字仍是中性 pill —— 六十行同时染色等于没有信息。

   布局顺序按"先结论、后细节"排：指纹 ID 卡 → 两条结论 → 数字卡与画像
   （默认只露前两段）→ 可搜索 / 可折叠的组件表 → 说明与去路。
   ============================================================ */

/* ---------- 长页上下文：滚过主卡后贴在顶栏下方的迷你摘要条 ---------- */
/* fixed 而不是 sticky：它要在用户滚到组件表中段、甚至页面底部时仍然可见。
   z-index 低于 .bar(60)，高于分组吸顶头(20)，两者不会互相穿透。 */
.fp-mini{
  position:fixed;top:var(--bar-h);left:0;right:0;z-index:55;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:7px clamp(14px,3vw,30px);
  background:var(--card);border-bottom:var(--bd-sm) solid var(--ink);
  box-shadow:0 3px 0 rgba(20,18,16,.10);font-size:12.5px;
}
.fp-mini[hidden]{display:none}
.fp-mini-k{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-45);white-space:nowrap;
}
.fp-mini-id{font-size:13px;font-weight:700;color:var(--violet-deep);white-space:nowrap}
.fp-mini-band{font-weight:700;white-space:nowrap}
.fp-mini .btn{padding:5px 12px;font-size:12px;flex:none}
/* 迷你条显形时，分组吸顶头要往下让出这 44px，否则会被盖住 */
body.has-mini .fp-grp-h{top:calc(var(--bar-h) + 44px)}

/* ---------- 指纹 ID 主卡：实心紫，整页唯一的主色锚点 ---------- */
.hl-violet{background-image:linear-gradient(var(--violet-soft),var(--violet-soft))}

.fp-hero{
  display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px 26px;align-items:center;
  margin-top:26px;padding:18px 22px;
  background:var(--violet);color:#FFF9EC;
  border:var(--bd) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);
}
.fp-hero-l{min-width:0;display:flex;flex-direction:column;gap:8px}
.fp-k{
  font-family:var(--f-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);
}
.fp-hero .fp-k{color:rgba(255,249,236,.92)}
/* 短哈希与全长 64 位不是一回事，标签直接钉在卡头上，别让人以为 ID 被截断 */
.fp-k-sub{
  font-family:var(--f-body);font-size:10px;font-weight:600;
  letter-spacing:0;text-transform:none;color:rgba(255,249,236,.82);
}
.fp-id{
  margin:0;font-family:var(--f-mono);font-weight:700;
  display:flex;flex-wrap:wrap;gap:0 .34em;
  font-size:clamp(17px,3.1vw,30px);line-height:1.18;letter-spacing:.01em;
  min-height:1.18em;
}
.fp-id-g{white-space:nowrap}
.fp-id.wait{color:rgba(255,249,236,.55);letter-spacing:.14em}
.fp-id-meta{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;
  font-family:var(--f-mono);font-size:11px;color:rgba(255,249,236,.92);
}
.fp-id-full{
  margin:2px 0 0;font-family:var(--f-mono);font-size:10.5px;line-height:1.55;
  color:#FFF9EC;word-break:break-all;
  max-height:0;overflow:hidden;opacity:0;transition:max-height .2s,opacity .2s;
}
.fp-id-full.open{max-height:9em;opacity:1}
/* 原来是 11px 的下划线链接，在紫底上既读不清也不像能点。改成小胶囊按钮，
   箭头走伪元素，这样 JS 直接改 textContent 不会把图标一起抹掉。 */
.fp-id-more{
  align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  padding:4px 11px;font-family:var(--f-mono);font-size:11px;font-weight:700;
  color:#FFF9EC;background:rgba(255,249,236,.12);
  border:var(--bd-sm) solid rgba(255,249,236,.72);border-radius:999px;
  cursor:pointer;transition:.13s;
}
.fp-id-more::after{content:'↓';font-size:12px;line-height:1}
.fp-id-more[aria-expanded="true"]::after{content:'↑'}
.fp-id-more:hover{background:rgba(255,249,236,.24)}

.fp-hero-r{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:0}
/* 主按钮独占一行，两个次要操作并排：层级一眼就清楚，移动端也不会排成 2+1+1 */
.fp-hero-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fp-hero-main{grid-column:1 / -1}
.fp-hero .btn{border-color:var(--ink);box-shadow:var(--sh-xs)}
.fp-hero .btn-sm{padding:8px 10px;font-size:12.5px}
.fp-hero .btn-primary{background:#FFF9EC;color:var(--violet-deep)}
.fp-hero .btn-ghost{background:transparent;color:#FFF9EC;border-color:rgba(255,249,236,.8);box-shadow:3px 3px 0 rgba(20,18,16,.6)}
.fp-hero .btn-ghost:hover{background:rgba(255,249,236,.16)}
.fp-hero-status{
  grid-column:1 / -1;margin:2px 0 0;padding-top:10px;
  border-top:2px dashed rgba(255,249,236,.38);
  color:rgba(255,249,236,.94);font-size:12.5px;
}
.fp-hero-status .dot{border-color:rgba(20,18,16,.55)}

/* ---------- 结论带：两卡 + 一条默认收起的口径说明 ---------- */
.fp-verdict{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;
}
.fp-vcard{
  display:flex;flex-direction:column;gap:5px;padding:13px 16px;
  background:var(--card);border:var(--bd) solid var(--ink);
  border-radius:var(--r-sm);box-shadow:var(--sh-xs);min-width:0;
}
.fp-vcard.band{background:var(--violet-soft)}
.fp-band{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(18px,2.3vw,24px);line-height:1.2;letter-spacing:-.01em;
}
.fp-band-d{font-size:12px;line-height:1.55;color:var(--ink-70)}
.fp-odds{font-family:var(--f-mono);font-size:13.5px;font-weight:700;overflow-wrap:anywhere}
.fp-vcard .fine{margin-top:auto;font-size:11px}
.fp-vnote{
  grid-column:1 / -1;background:var(--paper-2);
  border:var(--bd-sm) solid var(--ink-18);border-radius:var(--r-xs);overflow:hidden;
}
.fp-vnote summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 13px;font-size:12.5px;font-weight:700;
}
.fp-vnote summary::-webkit-details-marker{display:none}
.fp-vnote summary::after{
  content:'+';margin-left:auto;font-family:var(--f-mono);font-size:16px;font-weight:700;
  line-height:1;color:var(--ink-45);
}
.fp-vnote[open] summary::after{content:'–'}
.fp-vnote-hint{font-weight:400;font-size:11.5px;color:var(--ink-45)}
.fp-vnote .fp-note{
  margin:0 13px 10px;padding:10px 12px;font-size:12px;line-height:1.7;
  background:var(--card);border-left:3px solid var(--violet);border-radius:0 9px 9px 0;
}
.fp-vnote .fine{margin:0 13px 12px;font-size:11.5px;line-height:1.7}

/* ---------- 统计条：桌面竖着排满右栏，与画像卡等高 ---------- */
.fp-intro{
  display:grid;grid-template-columns:minmax(0,1fr) 236px;
  gap:18px;align-items:stretch;margin-top:18px;
}
.fp-intro .fp-portrait{margin-top:0}
.fp-intro .fp-stats{
  margin-top:0;grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(0,1fr));
  height:100%;gap:8px;
}
.fp-intro .stat{justify-content:center}
.fp-intro .stat b{font-size:20px}
.stat-sub{font-style:normal;font-size:10px;color:var(--ink-45);line-height:1.3}
/* 宽屏画像默认展开后会变高，右栏四张卡别被 repeat(4,1fr) 拉成空盒子：
   改回自然高度、沿全高均匀分布，数字放大一档，留白变成节奏而不是空腔。 */
@media (min-width:901px){
  body.has-portrait-open .fp-intro .fp-stats{
    grid-template-rows:repeat(4,auto);align-content:space-evenly;
  }
  body.has-portrait-open .fp-intro .stat b{font-size:26px}
}

/* ---------- 网站眼里的你：只读的地方给读书的版式，但默认收起后半 ---------- */
.fp-portrait{
  display:flex;flex-direction:column;padding:18px 22px 14px;
  background:var(--card);border:var(--bd) solid var(--ink);
  border-left:6px solid var(--violet);
  border-radius:var(--r);box-shadow:var(--sh);min-width:0;
}
.fp-portrait[hidden]{display:none}
.fp-portrait-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.fp-portrait-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
/* 双份文案由 .is-on 切换，JS 只切 class —— 中英文各自写在 HTML 里，不用再进字典 */
.t-on{display:none}
.is-on > .t-off{display:none}
.is-on > .t-on{display:inline}
.fp-portrait-more[hidden]{display:none}
.fp-portrait-rest[hidden]{display:none}
.fp-portrait-txt{display:flex;flex-direction:column;gap:11px}
.fp-portrait-rest{display:flex;flex-direction:column;gap:11px;margin-top:11px;
  padding-top:11px;border-top:var(--bd-sm) dashed var(--ink-18)}
.fp-portrait-txt p{
  margin:0;font-size:15px;line-height:1.82;color:var(--ink);
  text-wrap:pretty;letter-spacing:.002em;
}
.fp-portrait-txt b{font-weight:700}
.fp-flag-in{display:inline-flex;align-items:center;line-height:1}
.fp-flag-in .flag-in{margin:0 0 0 6px}
.fp-flag-in .flag{border-width:var(--bd-sm);border-radius:3px}
.fp-flag{
  display:inline-block;margin-left:5px;padding:0 6px;
  font-family:var(--f-mono);font-size:12px;line-height:1.5;
  color:var(--ink-70);background:var(--paper-2);
  border:2px solid var(--ink-18);border-radius:7px;
  vertical-align:.06em;letter-spacing:.02em;
}
.fp-portrait-txt .mono{font-family:var(--f-mono);font-size:.92em}
.fp-portrait .fine{margin:12px 0 0}

/* ---------- 组件表工具条：筛选 / 搜索 / 只看变化 / 折叠 ---------- */
.fp-tools{margin-top:26px}
.fp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.fp-tab i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;margin-left:2px}
.fp-tab.on{background:var(--violet);color:#FFF9EC;border-color:var(--ink)}
.fp-tab.on i{color:rgba(255,249,236,.8)}
.fp-tab .fine{display:none}
.fp-tools-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fp-search{
  display:flex;align-items:center;gap:7px;flex:1 1 220px;min-width:0;
  padding:6px 11px;background:var(--card);
  border:var(--bd-sm) solid var(--ink);border-radius:999px;box-shadow:var(--sh-xs);
}
.fp-search svg{color:var(--ink-45)}
.fp-search input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:var(--f-body);font-size:12.5px;color:var(--ink);
}
.fp-search input::placeholder{color:var(--ink-45)}
.fp-search input::-webkit-search-cancel-button{display:none}
.fp-search-clear{
  border:0;background:transparent;cursor:pointer;padding:0 2px;
  font-size:17px;line-height:1;color:var(--ink-45);
}
.fp-search-clear[hidden]{display:none}
.fp-tbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 12px;font-size:12px;font-weight:700;white-space:nowrap;
  background:var(--card);color:var(--ink);
  border:var(--bd-sm) solid var(--ink);border-radius:999px;
  box-shadow:2px 2px 0 var(--ink);cursor:pointer;transition:.13s;
}
.fp-tbtn:hover:not(:disabled){background:var(--violet-soft);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.fp-tbtn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.fp-tbtn.is-on{background:var(--violet);color:#FFF9EC}
.fp-legend{margin:10px 0 0;font-size:12px;line-height:1.72;color:var(--ink-70);max-width:82ch}
.fp-legend strong{color:var(--ink);font-weight:700}
.fp-legend .mono{font-size:11.5px}
.lg-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  border:1.5px solid var(--ink);vertical-align:0;margin:0 1px 0 5px;
}
.lg-ok{background:var(--violet-deep)}
.lg-absent{background:var(--card)}
.lg-gated{background:var(--amber)}
.lg-volatile{background:var(--coral)}
.fp-result{margin:8px 0 0;font-size:12px;color:var(--ink-70)}
.fp-result[hidden]{display:none}
.fp-result b{color:var(--ink);font-size:12.5px}

/* ---------- 分组：标题吸顶，点一下折叠整组 ---------- */
.fp-grp{margin-top:20px}
.fp-grp-h{
  position:sticky;top:var(--bar-h);z-index:20;
  margin:0 0 8px;padding:6px 0;
  background:var(--paper);border-bottom:var(--bd-sm) solid var(--ink);
}
.fp-grp-toggle{
  display:flex;align-items:baseline;gap:10px;width:100%;
  padding:1px 2px;background:transparent;border:0;
  text-align:left;font:inherit;color:var(--ink);cursor:pointer;
}
.fp-grp-toggle span:first-child{font-weight:700;font-size:15px}
.fp-grp-h em{
  font-style:normal;font-family:var(--f-mono);font-size:11px;font-weight:700;
  padding:1px 7px;border:2px solid var(--ink);border-radius:999px;background:var(--card);
}
.fp-grp-toggle .fine{margin-left:auto;font-size:11px}
.fp-grp-caret{
  font-style:normal;font-family:var(--f-mono);font-size:16px;font-weight:700;
  color:var(--ink-45);width:16px;text-align:center;flex:none;line-height:1;
}
.fp-grp.collapsed .fp-rows{display:none}

/* ---------- 组件行：统一 40px 行高，取值单行省略 ---------- */
.fp-rows{display:flex;flex-direction:column;gap:6px}
.fp-row{
  background:var(--card);border:var(--bd-sm) solid var(--ink);
  border-radius:var(--r-xs);box-shadow:var(--sh-xs);
  border-left-width:3px;border-left-color:var(--ink-18);
  transition:box-shadow .13s,transform .13s;
}
.fp-row:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.fp-row:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.fp-row.st-ok{border-left-color:var(--ink)}
.fp-row.st-volatile{border-left-color:var(--amber)}
.fp-row.st-absent{border-left-color:var(--ink-18)}
.fp-row.st-gated{border-left-color:var(--paper-2)}
.fp-row.ch{border-left-color:var(--coral-ink)}

.fp-line{
  display:grid;
  grid-template-columns:10px minmax(130px,.72fr) minmax(0,1.9fr) auto 76px 18px;
  gap:9px;align-items:center;min-height:40px;padding:5px 12px;cursor:pointer;
}
.fp-dot{
  width:10px;height:10px;border-radius:50%;
  border:2px solid var(--ink);background:var(--card);flex:none;
}
.fp-dot.d-ok{background:var(--violet-deep)}
.fp-dot.d-absent{background:var(--card)}
.fp-dot.d-gated{background:var(--amber)}
.fp-dot.d-volatile{background:var(--coral)}
.fp-n{font-size:12.5px;font-weight:700;min-width:0}
.fp-v{font-size:12.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-none{font-style:normal;font-size:11.5px;color:var(--ink-45)}
.fp-tag{
  flex:none;font-family:var(--f-mono);font-size:10px;font-weight:700;
  padding:2px 7px;border:2px solid var(--ink-18);border-radius:999px;color:var(--ink-45);
  white-space:nowrap;
}
.fp-tag.t-ok{border-color:var(--ink);color:var(--ink)}
.fp-tag.t-volatile{border-color:var(--amber);color:#7A5A00;background:rgba(255,201,77,.22)}
.fp-tag.t-gated,.fp-tag.t-absent{border-color:var(--ink-18)}
/* bit 从 10.5px 的淡字改成微条形 + 数字，扫一眼就知道哪几项最能区分人 */
.fp-b{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  font-size:10.5px;color:var(--ink-70);white-space:nowrap;
}
.fp-bit{display:block;width:36px;height:5px;background:var(--ink-18);border-radius:3px;overflow:hidden;flex:none}
.fp-bit i{display:block;height:100%;background:var(--violet-deep);border-radius:3px}
.fp-caret{
  font-family:var(--f-mono);font-size:14px;font-weight:700;color:var(--ink-45);
  text-align:center;line-height:1;transition:transform .15s;
}
.fp-row.open .fp-caret{transform:rotate(45deg);color:var(--violet-deep)}

.fp-det{
  padding:2px 12px 12px;border-top:var(--bd-sm) dashed var(--ink-18);
  display:flex;flex-direction:column;gap:9px;
}
.fp-det[hidden]{display:none}
.fp-hint{margin:0;font-size:12.5px;line-height:1.72;color:var(--ink-70);text-wrap:pretty}
.fp-raw{
  margin:0;padding:11px 12px;max-height:220px;overflow:auto;
  font-size:11px;line-height:1.6;color:var(--ink);
  background:var(--paper-2);border:2px solid var(--ink-18);border-radius:9px;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.fp-chg{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0;
  padding:9px 11px;background:var(--coral-soft);border-radius:9px;
  font-size:12px;color:var(--ink);
}
.fp-chg b{font-weight:700}
.fp-chg .mono{font-size:11.5px;background:#fff;padding:1px 6px;border-radius:6px;word-break:break-all}
.fp-key{margin:0;font-size:10px;letter-spacing:.04em;color:var(--ink-45)}
.fp-empty{
  padding:30px 18px;text-align:center;color:var(--ink-45);font-size:13px;
  background:var(--card);border:var(--bd-sm) dashed var(--ink-18);border-radius:var(--r-sm);
}

/* ---------- 两轮比对 ---------- */
.fp-diff{
  margin-top:30px;padding:18px 20px;
  background:var(--card);border:var(--bd) solid var(--ink);
  border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.fp-diff-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-bottom:12px}
.fp-diff-h .mono{font-size:12.5px;font-weight:700}
.fp-diff-h .fine{margin-left:auto;max-width:34ch}
.fp-diff-ok{margin:0;font-size:13px;color:var(--ink-70)}
.fp-diff .signals{margin-top:2px}
.fp-diff .signals li{border-left-width:3px}

/* ---------- 说明与去路 ---------- */
.fp-about{margin-top:34px;display:grid;gap:12px}
.fp-about h2{font-size:16px;letter-spacing:.01em;margin:22px 0 8px}
.fp-about p{margin:0 0 10px;font-size:13px;line-height:1.78;color:var(--ink-70);text-wrap:pretty;max-width:74ch}
.fp-about b{color:var(--ink)}
.fp-about .mono{font-size:12px;overflow-wrap:anywhere}
.fp-limit{
  display:flex;gap:11px;align-items:flex-start;margin:14px 0 0;padding:13px 15px;
  background:var(--paper-2);border:var(--bd-sm) dashed rgba(20,18,16,.32);border-radius:var(--r-xs);
}
.fp-limit svg{flex:none;margin-top:2px;color:var(--ink)}
.fp-limit p{margin:0;font-size:12.5px;line-height:1.72;color:var(--ink-70);max-width:none}
.fp-limit b{color:var(--ink)}
.pg-next.fp-next{margin-top:34px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .fp-hero{grid-template-columns:1fr;gap:14px}
  .fp-hero-r{min-width:0}
  /* 窄屏结论带保持两列：竖排会把结论推到第三屏去 */
  .fp-intro{grid-template-columns:1fr;gap:16px}
  .fp-intro .fp-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;height:auto;
  }
  /* 名称/状态/bit/箭头在第一行，取值独占第二行 —— bit 不隐藏，图例才对得上 */
  .fp-line{grid-template-columns:10px minmax(0,1fr) auto 76px 18px;row-gap:2px}
  .fp-v{grid-column:1 / -1;order:9}
  .fp-diff-h .fine{margin-left:0;max-width:none}
}
@media (max-width:620px){
  .fp-id{font-size:16px}
  /* 英文站导语比中文长一截，不收紧页头节奏的话结论带会被顶出首屏 */
  .pg-head .pg-title{margin-bottom:10px}
  .pg-head .pg-lede{font-size:14px;line-height:1.66}
  .fp-hero{margin-top:18px;padding:16px 16px}
  .fp-hero .btn-sm{padding:8px 8px;font-size:12px}
  .fp-mini{gap:8px;padding:6px 12px}
  .fp-mini-k,.fp-mini-band{display:none}
  .fp-verdict{gap:9px;margin-top:10px}
  .fp-vcard{padding:11px 12px}
  .fp-tools-row{gap:6px}
  .fp-search{flex:1 1 100%}
  .fp-tbtn{flex:1 1 auto;padding:7px 9px;font-size:11.5px}
  .fp-line{grid-template-columns:10px minmax(0,1fr) auto 60px 18px;gap:7px}
  .fp-bit{width:24px}
  .fp-n{font-size:12px}
  .fp-grp-toggle .fine{display:none}
  .fp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:360px){
  .fp-verdict{grid-template-columns:1fr}
}