/* 文件頁（隱私權政策、使用條款、支援）與關於頁的版面：英文四頁與繁中四頁共用。
   元件樣式在 sigil.css；頂列與頁尾在 site.css，這裡只管文件版面（docs/design/website.md「文件頁骨架」）。 */

/* ---- 文件本體 ---- */
.doc {
  padding-block: var(--ss-space-9) var(--ss-space-11);
}

.doc__head {
  display: grid;
  gap: var(--ss-space-4);
  justify-items: start;
  margin-bottom: var(--ss-space-8);
}

.doc__head p {
  margin: 0;
}

.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-space-2) var(--ss-space-5);
  font-family: var(--ss-font-mono);
  font-size: var(--ss-type-numeral-sm-size);
  line-height: var(--ss-type-numeral-sm-line);
  color: var(--ss-text-tertiary);
}

.doc__lede {
  color: var(--ss-text-secondary);
}

/* 重點摘要與聯絡方塊：凸起的面板，條列前面一顆小星形。 */
.doc__box {
  display: grid;
  gap: var(--ss-space-4);
  padding: var(--ss-space-7);
  margin-bottom: var(--ss-space-8);
}

.doc__box > * {
  margin: 0;
}

.doc__points {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--ss-space-3);
}

.doc__points li {
  position: relative;
  padding-left: var(--ss-space-7);
}

.doc__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 10px;
  height: 10px;
  background: var(--ss-accent);
  clip-path: polygon(50% 0, 63.4% 36.6%, 100% 50%, 63.4% 63.4%, 50% 100%, 36.6% 63.4%, 0 50%, 36.6% 36.6%);
}

/* 目錄：寬螢幕兩欄。 */
.doc__toc {
  margin-bottom: var(--ss-space-6);
}

.doc__toc ol {
  list-style: none;
  margin: var(--ss-space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--ss-space-3) var(--ss-space-7);
}

@media (min-width: 640px) {
  .doc__toc ol {
    grid-template-columns: repeat(2, 1fr);
  }
}

.doc__toc a {
  display: flex;
  gap: var(--ss-space-4);
  color: var(--ss-text-secondary);
  text-decoration: none;
}

.doc__toc a:hover {
  color: var(--ss-text-primary);
}

.doc__num {
  flex: none;
  min-width: 2ch;
  font-family: var(--ss-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: var(--ss-type-numeral-sm-size);
  color: var(--ss-accent-text);
}

/* 每一節 */
.doc section {
  padding-top: var(--ss-space-8);
}

.doc h2 {
  display: flex;
  align-items: baseline;
  gap: var(--ss-space-4);
  margin: 0 0 var(--ss-space-5);
}

.doc h3 {
  margin: var(--ss-space-7) 0 var(--ss-space-3);
}

.doc section p,
.doc section ul,
.doc section ol {
  margin: 0 0 var(--ss-space-5);
}

.doc section ul,
.doc section ol {
  padding-left: var(--ss-space-7);
}

.doc section li + li {
  margin-top: var(--ss-space-3);
}

.doc section li::marker {
  color: var(--ss-text-tertiary);
}

.doc .ss-spell-line {
  margin: var(--ss-space-9) 0 0;
}

/* 中文長文在字間斷行，英文用預設。 */
:lang(zh) .doc h1,
:lang(zh) .doc h2 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.doc h1 {
  text-wrap: balance;
}

/* ---- 表格：寬螢幕是表格，窄螢幕每列變一張卡（td 用 data-label 補欄名） ---- */
.doc-table {
  width: 100%;
  margin: 0 0 var(--ss-space-6);
  border-collapse: collapse;
  font-size: var(--ss-type-body-md-size);
  line-height: var(--ss-type-body-md-line);
}

.doc-table th,
.doc-table td {
  padding: var(--ss-space-4) var(--ss-space-4) var(--ss-space-4) 0;
  border-bottom: var(--ss-stroke-hairline) solid var(--ss-border);
  text-align: left;
  vertical-align: top;
}

.doc-table thead th {
  font-family: var(--ss-font-mono);
  font-size: var(--ss-type-eyebrow-size);
  line-height: var(--ss-type-eyebrow-line);
  letter-spacing: var(--ss-type-eyebrow-tracking);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ss-text-tertiary);
  border-bottom-color: var(--ss-border-strong);
}

.doc-table tbody th {
  font-weight: 600;
  width: 22%;
}

.doc-table td {
  color: var(--ss-text-secondary);
}

@media (max-width: 640px) {
  .doc-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .doc-table,
  .doc-table tbody,
  .doc-table tr,
  .doc-table th,
  .doc-table tbody th,
  .doc-table td {
    display: block;
    width: auto;
  }

  .doc-table tr {
    padding: var(--ss-space-5) 0;
    border-bottom: var(--ss-stroke-hairline) solid var(--ss-border);
  }

  .doc-table th,
  .doc-table td {
    padding: 0;
    border: 0;
  }

  .doc-table td {
    margin-top: var(--ss-space-3);
  }

  .doc-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--ss-space-1);
    font-family: var(--ss-font-mono);
    font-size: var(--ss-type-eyebrow-size);
    line-height: var(--ss-type-eyebrow-line);
    letter-spacing: var(--ss-type-eyebrow-tracking);
    text-transform: uppercase;
    color: var(--ss-text-tertiary);
  }
}

/* ---- 支援頁的常見問題 ---- */
.faq {
  display: grid;
  gap: var(--ss-space-4);
  margin: 0 0 var(--ss-space-5);
}

.faq__item {
  padding: var(--ss-space-6) var(--ss-space-7);
}

.faq__item h3 {
  margin: 0 0 var(--ss-space-3);
}

.faq__item > :last-child {
  margin-bottom: 0;
}

.faq__item p,
.faq__item ol,
.faq__item ul {
  color: var(--ss-text-secondary);
}

@media (max-width: 560px) {
  .doc__box,
  .faq__item {
    padding: var(--ss-space-5);
  }
}

/* ---- 還沒決定的內容：上線前要填（docs/legal/README.md「待辦」）。整頁搜 TODO 就找得到。 ---- */
.todo {
  padding: 0 var(--ss-space-2);
  border: var(--ss-stroke-hairline) dashed color-mix(in srgb, var(--ss-warning) 60%, transparent);
  border-radius: var(--ss-radius-xs);
  background: var(--ss-warning-soft);
  color: var(--ss-warning-text);
  font-family: var(--ss-font-mono);
  font-size: 0.86em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

a.todo {
  text-decoration: none;
}

/* 頁名跟首頁的區塊標題同一個尺度（website.md「頂列與頁尾」：關於與文件頁跟首頁一致）。 */
@media (min-width: 720px) {
  .doc__head h1 {
    font-size: calc(var(--ss-type-display-md-size) * 1.32);
    line-height: 1.18;
  }
}