/*
 * 使い方（/help/）・規約とポリシー（/legal/）・開発者向けドキュメント（/docs/）・404 のページの共通のスタイル。
 * 色・文字・余白は本体のリポジトリの design/brand/README.md（ブランドの決まり）に合わせる。
 * CSP が style-src 'self' なので、見た目はすべてここに書く（HTML の style 属性は効かない）。
 * 余白は 4px の刻み（4 / 8 / 12 / 16 / 24 / 32 / 48 / 64）。
 */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f7f6f2;
  --line: #e5e3dc;
  --ink: #1c1f2a;
  --muted: #5b5f6e;
  --link: #1d5fd1;
  --yellow: #ffd23f;
  /* 主ボタンは、明るいテーマでは墨の地に白い文字（黄色の地は白の上で目立ちすぎ、文字との差も小さい）。 */
  --button-bg: #1c1f2a;
  --button-bg-hover: #373b4b;
  --button-ink: #ffffff;
  --font: "Hiragino Sans", "Noto Sans JP", "BIZ UDPGothic", "Yu Gothic UI", Meiryo, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "BIZ UDGothic", monospace;
  --page-max: 80rem;
  --gutter: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #14161d;
    --surface: #1e212b;
    --line: #2e3242;
    --ink: #f1f2f5;
    --muted: #a4a9b8;
    --link: #8fb2ff;
    /* 暗いテーマでは、主ボタンはテロップイエローの地に墨の文字。 */
    --button-bg: #ffd23f;
    --button-bg-hover: #ffdd66;
    --button-ink: #1c1f2a;
  }
}

@media (max-width: 40rem) {
  :root {
    --gutter: 16px;
  }
}

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

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

/* フッターを短いページでも画面の下に置くため、縦の flex にする。 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: break-word;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.skip-link:focus {
  left: 8px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--button-bg);
  color: var(--button-ink);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.button:hover {
  background: var(--button-bg-hover);
}

/* タッチの端末では、押す的を 44px にする（Apple・Material の指針。管理画面の .db-button と同じ）。 */
@media (pointer: coarse) {
  .button {
    min-height: 44px;
  }
}

/* ---- 共通のヘッダー ---- */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: var(--page-max);
  min-height: 64px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  /* ロゴの組み合わせの間はブランドの決まりで 10px。 */
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

.site-mark {
  display: block;
  width: 28px;
  height: 28px;
}

.site-wordmark {
  display: block;
  width: auto;
  height: 16px;
}

.site-section {
  padding-left: 16px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.7;
  text-decoration: none;
  white-space: nowrap;
}

.site-section:hover {
  color: var(--ink);
}

.site-nav {
  display: flex;
  align-self: stretch;
  gap: 24px;
  margin-left: auto;
}

/* 下線の印はヘッダーの下の線に重ねたいので、リンクをヘッダーの高さいっぱいに伸ばして内側の影で描く。 */
.site-nav a {
  display: flex;
  align-items: center;
  color: var(--ink);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -3px 0 transparent;
}

.site-nav a:hover {
  box-shadow: inset 0 -3px 0 var(--line);
}

.site-nav a[aria-current] {
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--yellow);
}

@media (max-width: 40rem) {
  /* 狭い画面: 1 段目にロゴと「Discord に追加」、2 段目にリンク。区分の名前はページの見出しと重なるので出さない。 */
  .site-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "logo cta"
      "nav nav";
    gap: 0 12px;
    min-height: 0;
  }

  .site-logo {
    grid-area: logo;
    padding: 14px 0;
  }

  .site-cta {
    grid-area: cta;
  }

  .site-section {
    display: none;
  }

  .site-nav {
    grid-area: nav;
    min-height: 44px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    border-top: 1px solid var(--line);
  }
}

/* ---- 共通のフッター ---- */

.site-footer {
  margin-top: auto;
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 32px var(--gutter);
}

/* 1 段目に使い方・開発者向け、2 段目に規約・ポリシーとお問い合わせ。 */
.site-footer-nav {
  display: grid;
  gap: 8px;
}

.site-footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer-nav li {
  margin: 0;
}

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

.site-footer-nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.site-footer-nav a[aria-current] {
  color: var(--ink);
}

.site-copyright {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.site-copyright img {
  display: block;
  width: 20px;
  height: 20px;
}

/* ---- 本文（規約・ポリシーの既定。ドキュメントは下で上書き） ---- */

main {
  width: 100%;
  /* 本文の幅は 40 字前後（ブランドの決まり）。 */
  max-width: calc(40rem + 2 * var(--gutter));
  margin: 0 auto;
  padding: 48px var(--gutter) 64px;
}

h1,
h2,
h3,
h4 {
  line-height: 1.45;
  scroll-margin-top: 16px;
}

/*
 * 日本語の見出しを文節の切れ目で折り返す（「オーバー／レイ」「保存期／間」のような語の途中の改行を防ぐ）。
 * text-wrap: balance は併せない（行を揃えようとして、かえって語の途中で割れることがあるため）。
 * 対応していないブラウザでは今までどおりの折り返しになるだけ。1 行に収まらない長い文節は、body の overflow-wrap で折れる。
 */
h1,
h2,
h3,
summary {
  word-break: auto-phrase;
}

h1 {
  margin: 0 0 8px;
  font-size: 1.75rem;
  letter-spacing: 0.01em;
}

h2 {
  margin: 48px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 1.25rem;
}

h3 {
  margin: 32px 0 8px;
  font-size: 1.0625rem;
}

h4 {
  margin: 24px 0 8px;
  font-size: 1rem;
}

p,
li {
  margin: 8px 0;
}

ol,
ul {
  padding-left: 24px;
}

hr {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.meta {
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 0.875rem;
}

/* 規約とポリシーの一覧（/legal/） */
.links {
  display: grid;
  gap: 12px;
  margin: 32px 0 48px;
  padding: 0;
  list-style: none;
}

.links li {
  margin: 0;
}

.links a {
  display: block;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.links a:hover {
  border-color: var(--muted);
  background: var(--surface);
}

.links a span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
}

/* ---- 表 ---- */

/* 表は狭い画面で横にはみ出すので、ページではなく表の囲みだけを横に動かす。 */
.table-wrap {
  max-width: 100%;
  margin: 16px 0;
  overflow-x: auto;
}

table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.table-wrap table {
  margin: 0;
}

th,
td {
  /* 列が多い表でも 1 文字ずつの縦書きのように潰れないよう、列の幅に下限を置く（超えたら囲みが横に動く）。 */
  min-width: 5rem;
  padding: 8px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--surface);
  font-weight: 700;
}

/* 規約の表の見出しは短い項目名なので、折り返さずに左の列を揃える。 */
body:not(.docs) th {
  white-space: nowrap;
}

/* メールアドレスや URL のような切れ目の無い文字列が、表の列を押し広げて横にはみ出させないようにする。 */
td {
  overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
  /* 狭い画面では見出しの列も折り返し、項目と内容の 2 列の表を画面に収める。 */
  body:not(.docs) th {
    /* 「運営統括責任者」くらいの項目名が 1 行に収まる幅は残す（残りは内容の列へ）。 */
    min-width: 7.5em;
    white-space: normal;
  }
}

td > p:first-child,
td > ul:first-child {
  margin-top: 0;
}

td > p:last-child,
td > ul:last-child {
  margin-bottom: 0;
}

/* ---- コード・引用 ---- */

code,
pre {
  font-family: var(--mono);
}

code {
  font-size: 0.875em;
}

:not(pre) > code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  overflow-wrap: anywhere;
}

pre {
  margin: 16px 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-x: auto;
  tab-size: 2;
}

pre code {
  font-size: inherit;
}

blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--yellow);
  border-radius: 0 10px 10px 0;
  background: var(--surface);
}

blockquote > :first-child {
  margin-top: 0;
}

blockquote > :last-child {
  margin-bottom: 0;
}

/* ---- データの流れの図（/legal/data-flow.html の「1. データの流れ」） ---- */

/*
 * 図は箱と線を CSS で描く（罫線の文字で描いた図は、日本語と幅が揃わずに線がずれ、狭い画面では右が切れた）。
 * 流れは、上から下への 1 本（Discord → ボット → 本サービスのサーバー）と、サーバーから分かれる 4 本の枝。どの幅でも縦に積むので、
 * 横にはみ出さない。線と矢じりは枠線で描く（背景は印刷で消えるが、枠線は印刷・PDF にも出る）。
 * 番号と説明の文字はふつうの文として読み上げられ、向きの印（↓・↑）は読み上げない。
 * --flow-stem は、箱の左端から矢印の縦の線の中心までの距離。本線の矢印・枝の幹・枝の矢印の字下げを揃える。
 */
.flow {
  --flow-line: var(--muted);
  --flow-stem: 16px;
  margin: 16px 0 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.flow ol,
.flow ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow li,
.flow p {
  margin: 0;
}

/* 狭い画面で箱と説明が折り返すときに、「アクティビ／ティ」のような語の途中で割らない（見出しと同じ。対応していなければ今までどおり）。 */
.flow-node,
.flow-edge {
  word-break: auto-phrase;
}

.flow-node {
  width: fit-content;
  max-width: 100%;
  padding: 4px 12px;
  border: 1px solid var(--flow-line);
  border-radius: 8px;
  background: var(--bg);
  font-weight: 700;
}

/*
 * 矢印: 左の縦の線（2px の枠線。中心が --flow-stem）と、下の端の下向きの矢じり。説明の文字は線の右に置く。
 * 字下げは .flow li・.flow p の余白の打ち消しより強くする（.flow を前に付ける）。負けると縦の線が左に寄り、
 * 幹からの横の線が縦の線の右へはみ出して T 字に見える。
 */
.flow .flow-edge {
  position: relative;
  margin-left: calc(var(--flow-stem) - 1px);
  padding: 8px 0 16px 14px;
  border-left: 2px solid var(--flow-line);
}

/* 矢じりの位置は枠線の内側から測るので、線の中心（枠線の 1px 目）から矢じりの半分の幅（6px）だけ左へ戻す。 */
.flow-edge::after {
  content: "";
  position: absolute;
  left: -7px;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.flow-edge::after {
  bottom: 0;
  border-top: 8px solid var(--flow-line);
}

/*
 * 行きと戻りのある線（③ サーバー → Google と ④ Google → サーバー）も、矢じりは下の端（Google の側）にだけ置き、戻り（④）は
 * 行の向きの印（↑）で言う。上の端に矢じりを置くと、幹からの横の線との角に重なって T 字に見える。
 */

.flow-to::before,
.flow-from::before {
  display: inline-block;
  width: 1.25em;
  color: var(--flow-line);
  font-weight: 700;
}

/* 2 つ目の content は、読み上げに渡す文字を空にする書き方（対応していないブラウザは 1 つ目を使い、印が読み上げられるだけ）。 */
.flow-to::before {
  content: "\2193";
  content: "\2193" / "";
}

.flow-from::before {
  content: "\2191";
  content: "\2191" / "";
}

/* サーバーから分かれる枝。左の縦の線（幹）から、それぞれの枝の最初の矢印の線まで横の線を引く。字下げは .flow ul より強くする。 */
.flow .flow-branches {
  margin-left: calc(var(--flow-stem) - 1px);
}

.flow-branches > li {
  position: relative;
  padding: 16px 0 0 24px;
}

.flow-branches > li::before,
.flow-branches > li::after {
  content: "";
  position: absolute;
  left: 0;
}

/* 幹。最後の枝では、横の線の高さで止める。 */
.flow-branches > li::before {
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--flow-line);
}

.flow-branches > li:last-child::before {
  bottom: auto;
  height: 18px;
}

/* 幹から、枝の最初の矢印の縦の線（li の字下げ 24px と、その中の矢印の字下げ）までの横の線。 */
.flow-branches > li::after {
  top: 16px;
  width: calc(24px + var(--flow-stem) + 1px);
  border-top: 2px solid var(--flow-line);
}

/* ---- 開発者向けドキュメント ---- */

.docs-shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 48px;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

body.docs main {
  min-width: 0;
  /* コードと表が多いので、規約の本文より少し広くする。 */
  max-width: 48rem;
  margin: 0;
  padding: 40px 0 64px;
}

/* 使い方（/help/）は読み物なので、本文の幅を規約と同じ 40 字前後に戻す（ブランドの決まり）。 */
body.help main {
  max-width: 40rem;
}

/*
 * 使い方のコマンド（「/字幕 開始」など）は、途中で折り返すと別のコマンドに見えるので 1 行に保つ。
 * いちばん長い「/transcribe usage」（日本語の名前では「/字幕 利用状況」）でも 150px ほどなので、本文の中ではみ出すことはない。ただし表では、折り返さない
 * コードの列が並ぶと、ほかの列が数文字の幅まで潰れる（360px で 3 列の表が読めなくなった）。そのため使い方の表は、
 * コードを 1 つの列にまとめた 2 列にする（コマンドの一覧は、日本語と英語の名前を同じ欄に 2 行で置く）。
 */
body.help :not(pre) > code {
  white-space: nowrap;
  overflow-wrap: normal;
}

/*
 * 使い方の 2 列の表（項目と説明）の 1 列目は、項目の名前やボットが出す文の引用。既定の 5rem のままだと、2 列目の長い文に
 * 幅を取られて 1 行が 4〜5 文字になり、「アクティビテ／ィ」のように割れる。広い画面では「配信用オーバーレイ」（9 文字）、
 * 狭い画面では「アクティビティ」（7 文字）が 1 行に収まる幅を残す（min-width は余白を含む）。3 列の表（チャージの比べ方・
 * レベル）は 1 列目が短い見出しで、ほかの列の幅を削るだけなので対象にしない（:nth-last-child(2) で 2 列の行だけに効かせる）。
 * word-break: auto-phrase は、引用の長い文節で行の長さがばらばらになるので使わない。
 */
body.help td:first-child:nth-last-child(2) {
  min-width: 11em;
}

@media (max-width: 40rem) {
  body.help td:first-child:nth-last-child(2) {
    min-width: 9em;
  }
}

.docs-nav {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 32px 0 48px;
  font-size: 0.875rem;
}

.docs-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-nav li {
  margin: 0;
}

.docs-nav li.group {
  margin: 24px 0 4px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.docs-nav a {
  display: block;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--ink);
  line-height: 1.5;
  text-decoration: none;
}

.docs-nav a:hover {
  background: var(--surface);
}

/* 一覧の箱は縦にスクロールする（overflow-y: auto）ので、外側に描く枠は箱の端で切れる。枠を内側に描く。 */
.docs-nav a:focus-visible {
  outline-offset: -2px;
}

/* 今のページは、色だけに頼らず太字と黄色の印を付ける。 */
.docs-nav a[aria-current="page"] {
  border-radius: 0 8px 8px 0;
  background: var(--surface);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--yellow);
}

/* 広い画面では常に開いた一覧（.docs-nav-list）、狭い画面では畳んだ一覧（.docs-nav-menu）の片方だけを見せる。 */
.docs-nav-menu {
  display: none;
}

.docs-nav-menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
}

.docs-nav-menu summary::-webkit-details-marker {
  display: none;
}

.docs-nav-menu summary::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin: 0 4px 4px 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}

.docs-nav-menu[open] summary::after {
  margin-bottom: 0;
  margin-top: 4px;
  transform: rotate(-135deg);
}

.docs-nav-menu-label {
  color: var(--muted);
}

.docs-nav-menu-current {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-nav-menu ul {
  padding-bottom: 12px;
}

.docs-nav-menu li.group {
  margin-top: 16px;
}

body.docs h1 {
  margin-bottom: 16px;
}

.docs-footer {
  margin-top: 64px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

@media (max-width: 56rem) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .docs-nav {
    position: static;
    max-height: none;
    overflow: visible;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    border-bottom: 1px solid var(--line);
  }

  .docs-nav-list {
    display: none;
  }

  .docs-nav-menu {
    display: block;
  }

  body.docs main {
    padding-top: 24px;
  }
}

@media (max-width: 40rem) {
  main {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  h1 {
    font-size: 1.5rem;
  }
}

/* 規約を印刷・PDF にするときは、画面の移動のための部分を省く。 */
@media print {
  .site-header,
  .site-footer,
  .docs-nav,
  .skip-link {
    display: none;
  }

  main,
  body.docs main {
    max-width: none;
    padding: 0;
  }
}