/* ============================================================
 * Sound Collective — /tutor-login/ 専用CSS(GitHub #156)
 *
 * Tutor LMS 標準ログインフォームにデザイントークン(sc-design-tokens.css)を当てる。
 * マークアップはプラグイン側のまま(CSSのみで上書き)。
 *
 * スコープ: すべて `.tutor-login-wrap`(ログインカードのルート)配下に限定。
 *   → 詳細度 0,2,0 以上になり Tutor の単一クラス既定(0,1,0)に確実に勝つ。
 *   → enqueue も本文に [tutor_login] を持つページ限定(sc-tutor-login.php)なので二重に安全。
 *
 * 参照トークン(sc-design-tokens.css :root):
 *   --sc-bg #121212 / --sc-bg-bright #272727 / --sc-radius-card 12px
 *   --sc-fg #f0f2f4 / --sc-fg-secondary #adb3bb / --sc-primary #f04b50
 *   --sc-border #7d7e80 / --sc-error #ff0000 / --sc-font(Montserrat)
 * 入力欄は .sc-input パターン(bg rgba(255,255,255,.10)/border --sc-border/角丸8px)、
 * ボタンは .sc-btn--primary(--sc-primary / 角丸pill / L=44px・18px)を CSS で等価再現する。
 * ============================================================ */

/* ---- カード本体(.tutor-login-wrap 自身) ---- */
.tutor-login-wrap {
	background: var(--sc-bg-bright);
	border-radius: var(--sc-radius-card);
	box-shadow: none;
	max-width: 480px;
	margin: 64px auto;
	font-family: var(--sc-font);
	color: var(--sc-fg);
}

.tutor-login-wrap *,
.tutor-login-wrap *::before,
.tutor-login-wrap *::after { box-sizing: border-box; }

/* ---- 見出し「Hi, Welcome back!」(.tutor-fs-5.tutor-color-black) ---- */
.tutor-login-wrap .tutor-login-form-wrapper > .tutor-color-black,
.tutor-login-wrap .tutor-login-title {
	color: var(--sc-fg);
	font-family: var(--sc-font);
	font-size: var(--sc-fs-2xl); /* 24px */
	font-weight: var(--sc-fw-bold);
	line-height: 1.2;
}

/* ---- 入力欄(.tutor-form-control)= .sc-input 相当 ---- */
.tutor-login-wrap .tutor-form-control {
	width: 100%;
	background: rgba(255, 255, 255, .10);
	border: 1px solid var(--sc-border);
	border-radius: 8px;
	color: var(--sc-fg);
	font-family: var(--sc-font);
	font-weight: var(--sc-fw-medium);
	font-size: var(--sc-fs-sm); /* 14px */
	line-height: var(--sc-lh);
	padding: 8px 12px;
	min-height: 48px;
	transition: border-color .15s ease, background-color .15s ease;
}
.tutor-login-wrap .tutor-form-control::placeholder { color: var(--sc-fg-secondary); opacity: .8; }
.tutor-login-wrap .tutor-form-control:hover { background: rgba(255, 255, 255, .06); }
.tutor-login-wrap .tutor-form-control:focus {
	outline: none;
	border-color: var(--sc-primary);
	background: rgba(255, 255, 255, .10);
	/* ★ 入力文字が黒くなる問題の修正(2026-07-27 報告)。
	 *   このブロックは色を指定していなかったため、**フォーカス時だけ** Blocksy の
	 *   `main.min.css` の focus ルールに負けて `color: #000` になっていた。
	 *   実測(STG): 空+blur=rgb(240,242,244) / **空+focus=rgb(0,0,0)** /
	 *              入力+focus=rgb(0,0,0) / 入力+blur=rgb(240,242,244)
	 *   Blocksy 側は `color: var(--theme-form-text-focus-color, var(--theme-text-color))` で、
	 *   **`--theme-form-text-focus-color` が未定義**のため `--theme-text-color: #000000` に
	 *   フォールバックする(§8b と同じ Blocksy 黒文字の根)。加えて Blocksy の focus セレクタは
	 *   `input:is([type="text"],…):focus` = (0,2,1) で、色未指定だった当ブロック(0,3,0)でも
	 *   **color を書いていなければ当然勝てない**。= memory の「Blocksy input 特異性の罠(#84)」と同型。
	 *   `-webkit-text-fill-color` も併記: ブラウザの autofill は `color` を無視して
	 *   text-fill-color を使うため、これが無いと自動入力時に再発する。 */
	color: var(--sc-fg);
	-webkit-text-fill-color: var(--sc-fg);
}
/* 未フォーカス側も text-fill-color を明示(autofill 対策。色は基底と同じ) */
.tutor-login-wrap .tutor-form-control {
	-webkit-text-fill-color: var(--sc-fg);
}

/* ---- エラーメッセージ(.tutor-login-error) ---- */
.tutor-login-wrap .tutor-login-error {
	color: var(--sc-error);
	font-family: var(--sc-font);
	font-size: var(--sc-fs-sm);
	line-height: var(--sc-lh);
}
.tutor-login-wrap .tutor-login-error:not(:empty) { margin-bottom: 16px; }

/* ---- 「Keep me signed in」チェックボックス+ラベル ---- */
.tutor-login-wrap .tutor-form-check-input { accent-color: var(--sc-primary); }
.tutor-login-wrap .tutor-form-check label,
.tutor-login-wrap .tutor-color-muted {
	color: var(--sc-fg-secondary);
	font-family: var(--sc-font);
}

/* ---- 「Forgot Password?」(.tutor-btn-ghost = テキストリンク) ---- */
.tutor-login-wrap .tutor-btn-ghost {
	color: var(--sc-fg-secondary);
	font-family: var(--sc-font);
}
.tutor-login-wrap .tutor-btn-ghost:hover { color: var(--sc-primary); }
.tutor-login-wrap .tutor-btn-ghost.tutor-has-underline:after,
.tutor-login-wrap .tutor-btn-ghost:hover:after { background-color: currentColor; }

/* ---- 「Sign In」(.tutor-btn-primary.tutor-btn-block)= .sc-btn--primary/L 相当 ---- */
.tutor-login-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); /* 18px = L */
	line-height: var(--sc-lh);
	min-height: 44px;
	padding: 7px 20px;
	transition: background-color .15s ease, color .15s ease;
}
.tutor-login-wrap .tutor-btn-primary:hover,
.tutor-login-wrap .tutor-btn-primary:active,
.tutor-login-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;
}

/* ---- 「Don't have an account?」補足文(.tutor-color-secondary) ---- */
.tutor-login-wrap .tutor-color-secondary { color: var(--sc-fg-secondary); }

/* ---- 「Register Now」(.tutor-btn-link)= プライマリ色リンク ---- */
.tutor-login-wrap .tutor-btn-link {
	color: var(--sc-primary);
	font-family: var(--sc-font);
	font-weight: var(--sc-fw-medium);
}
.tutor-login-wrap .tutor-btn-link:after { background: var(--sc-primary); }

/* ---- ソーシャルログインとの区切り線 ---- */
.tutor-login-wrap .tutor-border-top-light { border-top-color: var(--sc-border-dim); }