/* ActiCount 官网样式。
 *
 * 排版语法取自应用界面而非通行的网站模板：米色底、超大黑色粗体标题占据画面
 * 主体、大留白、细分隔线、黄色胶囊标签与黑色胶囊按钮。不设导航条，不用卡片
 * 与边框，导航链接收在页脚。改动结构前请先看 artifacts/acticount-home.png，
 * 那张截图是本站视觉的依据。
 *
 * 配色取自 lib/app/theme.dart 的 ActiColors，与应用界面共用同一套常量；修改
 * 此处的色值前，须确认应用内的对应常量是否一并调整。
 * 品牌字样 ACTI/COUNT 与拉丁文标签使用 Space Grotesk，正文使用 Instrument
 * Sans 加中文系统字体回退栈——Space Grotesk 不含中日韩字形，不得用于中文正文。 */

:root {
  /* 取自 ActiColors 的品牌常量 */
  --ink: #0a0a0a;
  --bone: #f3f1ea;
  --signal: #ffd84d;
  --coral: #ff4d55;
  --graphite: #727272;
  --white: #ffffff;

  /* 由品牌色派生的界面色，浅色主题 */
  --bg: var(--bone);
  --fg: var(--ink);
  --fg-muted: #5f5d57;
  --fg-faint: #6e6c66;
  --hairline: #dedbd1;
  --mark: var(--coral);
  /* 标题首行的浅色，与应用首页浅深两行的对比排版一致。 */
  --title-soft: #85827a;
  /* 超大序号的底色，须淡到不与正文争夺注意力。 */
  --numeral: #e4e1d6;
  /* 环形刻度中缺口一段的浅灰，与应用内的未完成刻度同色。 */
  --track: #d8d5cb;

  /* 黑色胶囊按钮。深色主题下反相，否则按钮会与底色糊在一起。 */
  --pill-bg: var(--ink);
  --pill-fg: var(--bone);

  /* 隐私立场一屏的深墨底。深色主题下略提亮，以与页面底色拉开层次。 */
  --stance-bg: var(--ink);
  --stance-fg: #e8e6df;
  --stance-muted: #b4b2ab;

  --font-brand: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC",
    sans-serif;

  --measure: 32rem;
  --page: 72rem;
  --gutter: clamp(1.5rem, 6vw, 5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101010;
    --fg: var(--bone);
    --fg-muted: #a6a49d;
    --fg-faint: #85837c;
    --hairline: #2b2b28;
    --mark: #ff6b72;
    --title-soft: #6e6c66;
    --numeral: #1e1e1c;
    --track: #34342f;
    --pill-bg: var(--bone);
    --pill-fg: var(--ink);
    --stance-bg: #1a1a18;
    --stance-fg: #e8e6df;
    --stance-muted: #b4b2ab;
  }
}

:root[data-theme="dark"] {
  --bg: #101010;
  --fg: var(--bone);
  --fg-muted: #a6a49d;
  --fg-faint: #85837c;
  --hairline: #2b2b28;
  --mark: #ff6b72;
  --title-soft: #6e6c66;
  --numeral: #1e1e1c;
  --track: #34342f;
  --pill-bg: var(--bone);
  --pill-fg: var(--ink);
  --stance-bg: #1a1a18;
  --stance-fg: #e8e6df;
  --stance-muted: #b4b2ab;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.06rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* 窄屏下页面主体不得横向滚动；表格另行在自身容器内滚动。 */
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--mark);
  outline-offset: 4px;
  border-radius: 2px;
}

a {
  color: inherit;
  text-decoration-color: var(--fg-faint);
  text-underline-offset: 0.25em;
}

a:hover {
  text-decoration-color: var(--mark);
}

img {
  max-width: 100%;
}

/* 语言分区：两种语言的内容同页并存，切换只改变显示状态。
   英文块在标记中预设 hidden，因而脚本未执行时页面退回中文版而非整页空白。 */
[data-lang-block][hidden] {
  display: none;
}

/* ---------- 顶部：品牌字样、黄色胶囊标签与一枚圆钮，没有导航条 ---------- */

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter);
}

.topbar .brand {
  margin-right: auto;
}

/* 品牌字样。全大写、粗体、字距略收紧，中间的斜杠原样保留，
   与应用首页左上角的写法一致，不得改写为 ActiCount。 */
.brand {
  display: inline-block;
  font-family: var(--font-brand);
  font-size: clamp(0.94rem, 1.5vw, 1.05rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--fg);
  white-space: nowrap;
}

/* 黄色胶囊标签，取自应用首页右上角的「仅在设备内识别」。
   黄底黑字在浅深两种主题下均可读，故不随主题反相。 */
.pill {
  display: inline-block;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  background: var(--signal);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.topbar .pill {
  font-size: 0.7rem;
}

/* 窄屏下页顶只留品牌字样与切换钮，胶囊标签让位，避免挤压折行。 */
@media (max-width: 30rem) {
  .topbar .pill {
    display: none;
  }
}

/* 圆钮呼应应用界面右上角的圆形按钮。 */
.lang-toggle {
  appearance: none;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--fg-muted);
  font-family: var(--font-brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.lang-toggle:hover {
  color: var(--fg);
  border-color: var(--fg-faint);
}

/* ---------- 海报：每屏一张 ---------- */

.poster {
  min-height: 100svh;
  padding: clamp(6rem, 12vh, 9rem) var(--gutter) clamp(4rem, 9vh, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.poster > .inner {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
}

/* 适用范围一节是一条窄带，不必独占一屏。 */
.poster--band {
  min-height: 0;
  padding-block: clamp(3rem, 8vh, 5rem);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* 末屏与页脚同处一屏，不再单独占满视口。 */
.poster--tail {
  min-height: 0;
  padding-bottom: clamp(2rem, 5vh, 3rem);
}

.eyebrow {
  font-family: var(--font-brand);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 1.4rem;
}

/* 超大黑色粗体标题占据画面主体，是本站最主要的版面元素。 */
.display {
  font-family: var(--font-brand);
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 1.6rem;
  text-wrap: balance;
}

.display .soft {
  color: var(--title-soft);
}

/* 中文字身远宽于拉丁字母，同一字号下标题会多折出两行。中文标题因而单独
   收窄字号并放宽行高，使其保持在两至三行之内。 */
[data-lang-block="zh"] .display {
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.lede {
  margin: 0;
  max-width: var(--measure);
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  color: var(--fg-muted);
}

/* ---------- 首屏 ---------- */

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  }
}

/* 环形刻度图形。应用的核心视觉符号，以内联 SVG 复现而非引用位图。 */
.dial {
  justify-self: center;
  width: min(100%, 24rem);
}

.dial svg {
  display: block;
  width: 100%;
  height: auto;
}

/* SVG 的呈现属性不解析 CSS 自定义属性，故环形图形的描边、填色与字体一律
   写在样式表内，图形本身只带类名。 */
.dial-track,
.dial-progress {
  fill: none;
  stroke-width: 26;
  stroke-linecap: butt;
}

.dial-track {
  stroke: var(--track);
}

.dial-progress {
  stroke: var(--signal);
}

.dial-ticks {
  stroke: var(--fg);
  stroke-width: 8;
  stroke-linecap: butt;
}

.dial-marker {
  fill: var(--mark);
}

.dial-letter {
  fill: var(--fg);
  font-family: var(--font-brand);
  font-size: 108px;
  font-weight: 700;
}

.thread-dot {
  fill: var(--mark);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2rem, 5vh, 2.75rem);
}

/* 黑色胶囊按钮，取自应用首页的主操作按钮。 */
.button {
  display: inline-block;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
}

.button:hover {
  opacity: 0.82;
}

.soon {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-brand);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.soon::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--mark);
}

/* ---------- 步骤：序号本身就是版面，不用卡片 ---------- */

.steps {
  list-style: none;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: step;
}

@media (min-width: 52rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.steps li {
  counter-increment: step;
  position: relative;
  /* 上留白须不小于超大序号的实际高度（字号 × 行高 0.8），否则窄屏上序号会与
     其下的小标题叠在一起。 */
  padding-top: clamp(3rem, 5vw, 3.5rem);
}

/* 超大序号作为版面骨架，而非装饰性的小标签。 */
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: -0.06em;
  font-family: var(--font-brand);
  font-size: clamp(3.4rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 0.8;
  color: var(--numeral);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.steps h3,
.list h3 {
  font-size: clamp(1.08rem, 1.7vw, 1.25rem);
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.steps p,
.list p {
  margin: 0;
  color: var(--fg-muted);
  max-width: 26rem;
}

/* ---------- 功能：两列文字，靠细分隔线与留白分隔 ---------- */

.list {
  list-style: none;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 46rem) {
  .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 6vw, 5rem);
  }
}

.list li {
  padding: clamp(1.4rem, 3vw, 1.9rem) 0;
  border-top: 1px solid var(--hairline);
}

/* ---------- 适用范围：一条坦白的窄带 ---------- */

.band-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 52rem) {
  .band-grid {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.band-grid .pill {
  justify-self: start;
}

.band-grid p {
  margin: 0;
  max-width: 44rem;
  color: var(--fg-muted);
}

/* ---------- 隐私立场：整屏深墨，与应用的深色块同源 ---------- */

.poster--stance {
  background: var(--stance-bg);
  color: var(--stance-fg);
}

.poster--stance .display {
  color: var(--signal);
}

.poster--stance .eyebrow {
  color: var(--stance-muted);
}

.stance-list {
  list-style: none;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2vh, 1.4rem);
  max-width: 46rem;
}

.stance-list li {
  padding-left: 2.2rem;
  position: relative;
  color: var(--stance-muted);
}

.stance-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 1.2rem;
  height: 1px;
  background: var(--coral);
}

.note {
  margin: clamp(1.4rem, 4vh, 2rem) 0 0;
  max-width: var(--measure);
  font-size: 0.92rem;
  color: var(--fg-faint);
}

/* ---------- 末屏：应用图标与上架说明并排 ---------- */

.release {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  flex-wrap: wrap;
}

/* 应用图标的源文件是方形，四角为近黑色，圆角由系统在设备上裁切。网页须自行
   裁切成同样的圆角，否则四角的黑色会直接露出来。 */
.app-icon {
  flex: none;
  width: clamp(4.25rem, 7vw, 5.5rem);
  height: auto;
  border-radius: 22.5%;
}

/* ---------- 屏间的细分隔线，呼应应用界面的那一道 ---------- */

.thread {
  display: block;
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin: 0 auto;
  padding-inline: var(--gutter);
  overflow: hidden;
  color: var(--hairline);
}

.thread svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 页脚 ---------- */

.footer {
  padding: clamp(3rem, 7vh, 4.5rem) var(--gutter) clamp(2.5rem, 5vh, 3.5rem);
  border-top: 1px solid var(--hairline);
}

.footer-inner {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  display: grid;
  gap: 2.5rem;
  font-size: 0.88rem;
}

@media (min-width: 44rem) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

.footer p {
  margin: 0 0 0.45rem;
  color: var(--fg-muted);
  max-width: var(--measure);
}

.footer .brand {
  margin-bottom: 1.1rem;
}

.footer nav {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

@media (min-width: 44rem) {
  .footer nav {
    justify-items: end;
  }
}

.footer nav a {
  color: var(--fg-muted);
  text-decoration: none;
}

.footer nav a:hover,
.footer nav a[aria-current="page"] {
  color: var(--fg);
  text-decoration: underline;
}

/* ---------- 法务文档与技术支持：以可读性为先，同样不用边框与底色 ---------- */

.doc {
  padding: clamp(7rem, 14vh, 10rem) var(--gutter) clamp(4rem, 8vh, 6rem);
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  /* 隐式栅格列按 auto 定尺，其下限取内容的 min-content，一段不可断行的宽内容
     （超宽表格、长表头）因而会把整列连同页面一并撑宽，.scroll-x 的横向滚动
     便不再生效。显式声明 minmax(0, 1fr) 把列的下限压到 0，超宽内容遂由
     .scroll-x 自行滚动，页面主体不受影响。 */
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 62rem) {
  .doc {
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: start;
  }

  /* 技术支持页没有小节目录，正文独占一栏。 */
  .doc--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

.toc {
  font-size: 0.85rem;
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

@media (max-width: 61.999rem) {
  .toc {
    position: static;
    max-height: none;
  }
}

.toc h2 {
  font-family: var(--font-brand);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 1rem;
  font-weight: 500;
}

.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.toc a {
  color: var(--fg-muted);
  text-decoration: none;
}

.toc a:hover {
  color: var(--fg);
  text-decoration: underline;
}

.prose {
  max-width: 40rem;
}

.prose h1 {
  font-family: var(--font-brand);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.prose h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 700;
  margin: 3.25rem 0 0.9rem;
  scroll-margin-top: 2rem;
  text-wrap: balance;
}

.prose h3 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 2rem 0 0.55rem;
}

.prose p {
  margin: 0 0 1.1rem;
}

.prose ul,
.prose ol {
  margin: 0 0 1.1rem;
  padding-left: 1.3rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose strong {
  font-weight: 700;
}

.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--signal);
  color: var(--fg-muted);
  font-size: 0.94rem;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 3rem 0 1.75rem;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 0 0 1.5rem;
}

.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
}

.prose th {
  font-weight: 700;
  border-bottom-color: var(--fg-faint);
}

/* 末列右侧的内边距之后再无内容，属可回收的空白。三列表格因此收回约 14 像素，
   英文表头（Permission／Why it is needed／If you decline）在 375 宽度下遂能
   整表容下，无须容器内滚动。 */
.prose th:last-child,
.prose td:last-child {
  padding-right: 0;
}

/* 中日韩文本可在任意字符之间断行，表格的自动布局因而会把「权限」「相机」一类
   短标签列压成一字之宽。为首列设一个下限，使短标签保持在一行内。 */
.prose th:first-child,
.prose td:first-child {
  min-width: 5rem;
}

/* 表头一律不断行。站内各表的表头都是「权限」「用途」「拒绝后的影响」一类短标签，
   窄屏上若允许其逐字折行，三格会各占两三行，标签与其下的数据便对不上。若日后出现
   长表头以致表格宽于容器，由外层的 .scroll-x 承接横向滚动，页面主体仍不横向滚动。 */
.prose th {
  white-space: nowrap;
}

/* 表格在窄屏上自行横向滚动，页面主体不得因此横向滚动。
   max-width 与 .doc 的 minmax(0, 1fr) 配合，二者缺一则超宽表格会撑开外层而非
   在容器内滚动。该保证已由注入超宽元素的对照试验验证。 */
.scroll-x {
  overflow-x: auto;
  max-width: 100%;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: 0.85rem;
  color: var(--fg-faint);
  margin: 0 0 2rem;
}

/* 邮箱在正文中另以纯文本重复一次，供邮箱混淆或脚本失效时读取。 */
.plain-address {
  font-size: 0.85rem;
  color: var(--fg-faint);
}

/* ---------- 入场动效 ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }

  .reveal--late {
    animation-delay: 0.1s;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.9rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}