/*
 * **SNS ログインボタンの体裁 — 1 実装。** 設計参照: ADR 0067 /
 * `public/federated.js` (配線) / `src/federatedAuth.ts` (文言の正本)。
 *
 * これを読む画面は 2 つ — コンソールのログイン (`console.html` の `#sns-buttons`) と、
 * 申込・招待の受諾 (`index.html` の `#ac-sns` / `#invite-providers`)。もとは両方の `<style>` に**目で写した**
 * 同じ規則が置いてあった。**片方だけ直る**壊れ方をするので、写しを増やす前にここへ出した
 * (CLAUDE.md 穴 7)。器の id では選ばない — `.sns-btn` は `federated.js` が付ける。
 *
 * ★ **色・寸法・文言は各社のガイドラインの要件**であって、意匠の好みではない。
 *   Google は**ガイドライン遵守をアプリ審査の要件**としている。
 *   一次情報 (2026-09-04 に確認):
 *     Google  https://developers.google.com/identity/branding-guidelines
 *     LINE    https://developers.line.biz/ja/docs/line-login/login-button/
 *     Yahoo!  https://developer.yahoo.co.jp/yconnect/loginbuttons.html
 *   **数字だけを書くと、次の人が善意で「サイトの配色に揃える」ために壊す**ので、
 *   どの規定に由来する値かを各所に書いてある (穴 17)。
 *
 * ★ **ロゴは Google だけ入っている** (2026-09-04)。**それらしいロゴを描き起こすのは
 *   改変**なので、入るのは公式アセットだけ。差し口は `--sns-logo` の 1 つで、
 *   置き場は `public/img/sns/<provider>.svg`。
 *   CSP は `img-src 'self' data:` (`src/securityHeaders.ts`) なので**自己ホストのみ**。
 *   外部ホストは増やさない (増やすとその分だけ持ち出し口が広がる)。
 *
 *   **LINE と Yahoo! のアセットは入れていない。理由は「まだ作業していない」ではない** —
 *   どちらも**ダウンロードした時点で同意したものとみなす**と明記している:
 *     LINE  「以下のLINEログインボタンのテンプレートをダウンロードすることにより、
 *             ガイドラインに同意したものとみなされます」
 *     Yahoo! アイコン画像のダウンロードが注意事項への同意にあたる
 *   **同意は人が行う** — エージェントが代わりに踏まない。入れるときの手順:
 *     1. **人が**公式サイトから取得する (その時点で同意したことになる)
 *     2. `public/img/sns/<provider>.svg` (または .png) に置く
 *     3. 下の該当プロバイダの規則に `--sns-logo: url("/img/sns/<provider>.svg");`
 *   Google の配布物にはこの形の条項が無く、ガイドラインが**明示的に認めた使い方**の
 *   範囲に収まる (「事前承認済み」アセットとして配布されている)。
 *
 * ★ **大きさは 3 社で揃える。** Google の要件に「他の第三者ログインと同程度に
 *   目立たせる」があり、1 社だけ大きい・濃いと満たせない。だから**寸法は下の
 *   共通規則だけが持ち、プロバイダごとの規則は色しか上書きしない**
 *   (`markup.test.ts`「3 社の大きさが揃っている」が字面で見張る)。
 */

/* 何社になるかはサーバが決める (`/api/auth/config`) ので、縦 1 列で数に依らない形。 */
#sns-buttons,
#ac-sns,
#invite-providers:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*
 * 共通 (= 3 社で揃える部分)。寸法は Google の Web 向け指定に合わせてある:
 * 左 12px / ロゴの右 10px / テキストの右 12px、書体は 14px・行送り 20px。
 * **Google Sans Medium は配布物なので手元に無い** — ガイドラインは代替を使う場合に
 * それを明記するよう求めているので、ここに書く: Roboto → システム UI 書体の順で落とす。
 */
.sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Google: G ロゴとテキストのあいだ */
  width: 100%;
  min-height: 40px;
  padding: 10px 12px; /* Google: 左右 12px */
  /* Google Sans Medium (未配布のため代替): Roboto → システム UI */
  font-family: "Google Sans", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
}

.sns-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/*
 * ロゴの枠。**アセットが無いプロバイダでは何も描かない** (`--sns-logo` の既定が `none`)
 * が、枠は取ってある — アセットを差した日にレイアウトが動かないようにするため。
 *
 * ★ **20px は公式ボタンの比率。** 配布されている「文字あり・角丸」のボタンは
 * 180×40 で、ロゴは **20×20 を左から 12px** の位置に置いている (SVG の mask が
 * x=12 y=10 w=20 h=20)。ガイドラインは**ロゴの大きさと色を変えることを禁じている**
 * ので、ここを 18px などに縮めない。
 */
.sns-btn .sns-logo {
  flex: none;
  width: 20px;
  height: 20px;
  background-image: var(--sns-logo, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sns-btn .sns-label {
  min-width: 0;
  /* LINE: 文言に**改行を入れない** */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------- Google ----------------
 * https://developers.google.com/identity/branding-guidelines
 * light   背景 #FFFFFF / 枠線 #747775 1px (内側) / 文字 #1F1F1F
 * dark    背景 #131314 / 枠線 #8E918F 1px      / 文字 #E3E3E3
 * neutral 背景 #F2F2F2 / 枠線なし              / 文字 #1F1F1F
 * **ロゴは標準カラーの G を白地に置く** — 色もアスペクト比も変えない。
 * ここでは light を既定にし、OS がダークのときだけ dark の指定へ入れ替える
 * (neutral は下に用意してあり、地の色が白でない面で `.sns-neutral` を足して使う)。
 *
 * ★ ロゴは**配布物から起こした 1 枚**を light / dark の両方で使う — 配布物の
 * Light 版と Dark 版はロゴ部分が同一で、**G を地の色に直に置く**のが公式の形
 * (白い丸を敷いたりしない)。出どころと、切り出しでやった操作は
 * `public/img/sns/google.svg` の冒頭コメントに書いてある。 */
.sns-btn[data-provider="google.com"] {
  --sns-logo: url("/img/sns/google.svg");
  color: #1f1f1f;
  background: #ffffff;
  border: 1px solid #747775;
}
.sns-btn[data-provider="google.com"]:hover:enabled {
  /* 押せることを示すだけの控えめな変化 (指定色は動かさない) */
  box-shadow: 0 1px 2px rgb(60 64 67 / 30%);
}
.sns-btn[data-provider="google.com"].sns-neutral {
  color: #1f1f1f;
  background: #f2f2f2;
  border: 0;
}
/* ★ **ダーク版は置かない** (2026-09-04 の実害)。以前ここに
   `@media (prefers-color-scheme: dark)` で Google の dark 版 (#131314) を書いていて、
   **OS がダークの端末で「白いカードの上に黒い Google ボタン」**が出た。

   このコンソールは `brand.css` が `color-scheme: light` で**ライト固定**。各ページの
   `@media (prefers-color-scheme: dark)` は `:root` のトークンを差し替えるだけで、
   **後から読む brand.css の `:root` が後勝ちで戻す**ので効かない。しかし
   **部品側の直指定は戻らない** — トークンを経由しない生の色だから。
   同じ罠が 2026-09-01 に `console.html` で 1 度起きていて、そこには
   「★ ダーク用の打ち消しを置かない」と書いてある。**その注意書きは
   console.html の中にあり、このファイルを書いた人は読んでいない** (穴 17)。

   Google のガイドラインは light / dark / neutral から**自分の地の色に合う版**を
   選べと言っている。地が常に白なら、選ぶのは常に light 版。
   検査は test/markup.test.ts「★ ダークの打ち消しは :root のトークンだけ」。 */

/* ---------------- LINE ----------------
 * https://developers.line.biz/ja/docs/line-login/login-button/
 * 基本 #06C755 / ホバー = #000000 を 10% 重ねる / 押下 = 30% 重ねる
 * 文字・ロゴは #FFFFFF、区切りの縦線は #000000 8%
 * 無効時は 背景 #FFFFFF / 枠線 #E5E5E5 を 60% の不透明度で
 * (区切りの縦線はロゴが入ってから引く — ロゴが無いあいだは線だけが浮く)
 * ★ **ロゴは入れていない。** 配布物 (LINE_Login_Button_Image.zip) は
 *   **ダウンロードした時点でガイドラインに同意したものとみなされる**ため
 *   (Yahoo! と同じ形。冒頭の注記を見ること)。**色と文言はここに書ける** —
 *   それはガイドラインの本文に書かれた事実で、アセットの取得を伴わない。 */
.sns-btn[data-provider="oidc.line"] {
  color: #ffffff;
  background: #06c755;
  border: 0;
}
.sns-btn[data-provider="oidc.line"]:hover:enabled {
  background: color-mix(in srgb, #000000 10%, #06c755);
}
.sns-btn[data-provider="oidc.line"]:active:enabled {
  background: color-mix(in srgb, #000000 30%, #06c755);
}
.sns-btn[data-provider="oidc.line"]:disabled {
  color: #1f1f1f;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  opacity: 0.6;
}

/* ---------------- Yahoo! JAPAN ----------------
 * https://developer.yahoo.co.jp/yconnect/loginbuttons.html
 * 文言は「ログイン」または「Yahoo! JAPAN IDでログイン」。ボタンのほかテキストリンク形式も可。
 * ★ **配色の指定は公式アイコン画像に載っており、画像の取得には注意事項への同意が要る**
 *   (ダウンロードした時点で同意とみなされる)。**こちらで色を推測して塗らない** —
 *   ブランド色を当てずっぽうで置くほうがガイドライン違反に近い。
 *   だからここは**中立の面**にとどめ、寸法と文言だけをガイドラインに合わせる。
 *   アセットと配色が正式に入った時点で、この規則を差し替える。 */
.sns-btn[data-provider="oidc.yahoo-japan"] {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--grid, #e1e0d9);
}
.sns-btn[data-provider="oidc.yahoo-japan"]:hover:enabled {
  background: color-mix(in srgb, var(--ink) 6%, var(--surface));
}

/* カタログに無いプロバイダが増えたときの受け皿 (色を持たない中立の面)。
   **ここに落ちること自体が「ガイドラインを確認していない」印**なので、
   見た目で分かるように控えめにしてある。 */
.sns-btn:not([data-provider="google.com"]):not([data-provider="oidc.line"]):not([data-provider="oidc.yahoo-japan"]) {
  color: var(--ink);
  background: var(--surface);
  border: 1px dashed var(--grid, #e1e0d9);
}