/* ============================================================
 * Sound Collective — /student-registration-page/ 専用CSS(#275 / 2026-08-05)
 *
 * Tutor LMS 標準の学生登録フォームにデザイントークン(sc-design-tokens.css)を当てる。
 * マークアップはプラグイン側のまま(CSS のみで上書き)= sc-tutor-login.css と同じ方針。
 *
 * ## なぜ必要か
 *
 * 報告: 「フォントが黒くなってしまっている」
 * 実測(dev): このページには `sc-global-overrides.css` しか読み込まれておらず、
 *   **Tutor 登録画面向けのダーク化 CSS が存在しなかった**(対応漏れ)。
 *   ログインページには `sc-tutor-login.css` があるが、enqueue 条件が
 *   「本文に [tutor_login] を含むページ」なので登録ページには当たらない
 *   (登録ページは `post_content` が空で、Tutor が `Template::convert_static_page_to_template()`
 *    でショートコードに差し替える方式のため)。
 *
 * ## 🔴 ログインフォームとはマークアップが違う
 *
 * 実測(dev の HTML):
 *   ラベル … **クラス無しの素の `<label>`**（ログイン側は .tutor-form-label 相当が付く）
 *   入力欄 … `class="tutor_user_name"` / `class="password-checker"` など。
 *            **`.tutor-form-control` が付かない**
 * → セレクタは要素で拾う必要がある。`.tutor-form-control` 前提の
 *   sc-tutor-login.css をそのまま流用できない(だから別ファイルにした)。
 *
 * ## スコープ
 *
 * すべて `#tutor-registration-wrap`(Tutor テンプレートのルート ID)配下に限定。
 *   → 詳細度が (1,x,x) になり Blocksy / Tutor の class 既定に確実に勝つ
 *   → enqueue も登録ページ限定(sc-tutor-registration.php)なので二重に安全
 *
 * ⚠️ **`--sc-*` トークンのみを使う。** 生の色値を書くと将来のテーマ変更で取り残される。
 * ============================================================ */

#tutor-registration-wrap {
	color: var(--sc-fg);
	font-family: var(--sc-font);
	font-weight: var(--sc-fw-medium);
	line-height: var(--sc-lh);
}
#tutor-registration-wrap *,
#tutor-registration-wrap *::before,
#tutor-registration-wrap *::after { box-sizing: border-box; }

/* ---- ラベル(素の <label>。ここが黒くなっていた本体) ---- */
#tutor-registration-wrap label {
	color: var(--sc-fg);
	font-family: var(--sc-font);
	font-weight: var(--sc-fw-medium);
	font-size: var(--sc-fs-sm);
}

/* ---- 入力欄 = .sc-input 相当。`.tutor-form-control` が付かないので要素で拾う ---- */
#tutor-registration-wrap input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="url"]),
#tutor-registration-wrap select,
#tutor-registration-wrap textarea {
	width: 100%;
	background: rgba(255, 255, 255, .10);
	border: 1px solid var(--sc-border);
	border-radius: 8px;
	color: var(--sc-fg);
	-webkit-text-fill-color: var(--sc-fg);
	font-family: var(--sc-font);
	font-weight: var(--sc-fw-medium);
	font-size: var(--sc-fs-sm);
	line-height: var(--sc-lh);
	padding: 8px 12px;
	min-height: 48px;
	transition: border-color .15s ease, background-color .15s ease;
}
#tutor-registration-wrap input::placeholder,
#tutor-registration-wrap textarea::placeholder { color: var(--sc-fg-secondary); opacity: .8; }
#tutor-registration-wrap input:hover,
#tutor-registration-wrap select:hover { background: rgba(255, 255, 255, .06); }

/* 🔴 フォーカス時に color を必ず書く。
 *   Blocksy の `input:is([type="text"],…):focus` は
 *   `color: var(--theme-form-text-focus-color, var(--theme-text-color))` で、
 *   `--theme-form-text-focus-color` が未定義のため **#000 にフォールバック**する。
 *   色を書かないブロックはこれに負けて「フォーカス時だけ黒文字」になる
 *   (sc-tutor-login.css で 2026-07-27 に踏んだのと同型 = memory「Blocksy input 特異性の罠(#84)」)。
 *   `-webkit-text-fill-color` も併記: autofill は color を無視して text-fill-color を使う。 */
#tutor-registration-wrap input:focus,
#tutor-registration-wrap select:focus,
#tutor-registration-wrap textarea:focus {
	outline: none;
	border-color: var(--sc-primary);
	background: rgba(255, 255, 255, .10);
	color: var(--sc-fg);
	-webkit-text-fill-color: var(--sc-fg);
}

/* ---- 補足文・ヒント ---- */
#tutor-registration-wrap .tutor-color-muted,
#tutor-registration-wrap .tutor-color-secondary,
#tutor-registration-wrap .tutor-password-strength-hint { color: var(--sc-fg-secondary); }
#tutor-registration-wrap .tutor-color-black { color: var(--sc-fg); }
#tutor-registration-wrap .tutor-color-success { color: var(--sc-success, #2bb673); }

/* ---- 「Register」ボタン = .sc-btn--primary/L 相当(sc-tutor-login.css と同一の見た目) ---- */
#tutor-registration-wrap .tutor-btn-primary {
	background-color: var(--sc-primary);
	border: 1px solid transparent;
	border-radius: var(--sc-radius-pill);
	color: #f7f7f7;
	font-family: var(--sc-font);
	font-weight: var(--sc-fw-bold);
	font-size: var(--sc-fs-lg);
	line-height: var(--sc-lh);
	min-height: 44px;
	padding: 7px 20px;
	transition: background-color .15s ease, color .15s ease;
}
#tutor-registration-wrap .tutor-btn-primary:hover,
#tutor-registration-wrap .tutor-btn-primary:active,
#tutor-registration-wrap .tutor-btn-primary:focus {
	background-color: var(--sc-primary);
	background-image: linear-gradient(rgba(255, 255, 255, .10), rgba(255, 255, 255, .10));
	border-color: transparent;
	color: #f7f7f7;
}

/* ---- 区切り線・エラー ---- */
#tutor-registration-wrap .tutor-border-top-light { border-top-color: var(--sc-border-dim); }
#tutor-registration-wrap .tutor-alert { color: var(--sc-fg); }

/* ============================================================
 * SP — max-width:1024px
 * ============================================================ */
@media (max-width: 1024px) {
	#tutor-registration-wrap .tutor-form-col-6 { flex: 0 0 100%; max-width: 100%; }
}