/* 關於頁（/about/、/zh/about/；原本的家長頁 /parents/，檔名與 class 沿用）：版面借文件頁的 legal.css（.doc、.doc__box、.doc__toc、.doc-table），
   頁尾借 home.css 的 .footer；這裡只放關於頁多出來的東西（docs/design/website.md「關於頁」）。 */

/* 每一節的第一句就是答案：大一號、主要文字色；後面的說明是次要色。 */
.doc .parents__answer {
  color: var(--ss-text-primary);
}

/* 承諾方塊：上緣一條往右淡出的棋盤格，關於頁的品牌記號（ADR-0035）。 */
.parents__promise {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--ss-space-7) + var(--ss-space-6));
}

.parents__band {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--ss-checker-cell) * 2);
}

/* 承諾用編號不用星形：之後會被引用成「第 5 句」。 */
.parents__promises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ss-space-4);
  counter-reset: promise;
}

.parents__promises li {
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: var(--ss-space-4);
  align-items: baseline;
  counter-increment: promise;
  text-wrap: pretty;
}

.parents__promises li::before {
  content: counter(promise, decimal-leading-zero);
  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 p {
  text-wrap: pretty;
}

/* 第 5 題的調整階梯：第一欄是順序（隨時、先、再、最後），用等寬金色字，跟目錄的編號同一種。 */
.parents__ladder tbody th {
  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);
  white-space: nowrap;
}

/* 寬螢幕的欄寬：順序窄、「看到什麼」中等、「App 先做什麼」最寬。窄螢幕照 legal.css 變卡片。 */
@media (min-width: 641px) {
  .parents__ladder tbody th {
    width: 16%;
  }

  .parents__ladder td:first-of-type {
    width: 34%;
  }
}