/**
 * ログイン（生徒・保護者・講師の入口 `page-login.php` ＋ 社員の入口 `parts/login-staff.php`）だけの見た目。
 *
 * ★2026-09-11（K-1562 段 H）: 画面の中の style ブロックから移した。
 * ★独立ページ（wp_head を呼ばない）なので、読み込みは画面の <link> が持つ（★components.css の後ろ ＝ 旧 style ブロックと同じ位置）。
 * ★値はトークン（tokens.css）から。★旧 #00A86B は --ies-jade と同じ値（★見た目は変わらない）。
 * ★2026-10-31（部品化 ①・R2A）: 社員の入口（login-staff.php）も同じ <link> で読む ＝ 2 つの入口の共通の見た目をここに置く。
 *
 * ★★消したもの（★この画面から）:
 *   ・入力欄の焦点の上書き … 入力欄をすべて部品 `.ies-input` にしたので、焦点の見た目は部品が持つ。
 *   ・焦点の包みの規則 … この画面のどこにも使われていなかった（★repo 全体で 0 件）。
 *   ・選ばれているタブの規則（2026-10-31）… タブを部品 `.ies-tab` の `is-active` にした後は使い手が 0 件だった。
 */

/* ★★2026-10-31（部品化 ①・R2A）: 画面ぜんたい（body）。★旧 = body の手書き（字色・高さ・余白）＋ style= の緑のグラデーション／社員は style="background:#fafafa"。
 *   ★並べ方（flex・中央寄せ）は body の class に残してある。★緑の 2 色は tokens.css の --nb-login-grad-0 / -1・下端は --ies-jade（旧の手書きと同値）。
 *   ★社員の入口の地は部品の地 --ies-bg へ寄せた ＝ 旧の薄い灰より 8 段階沈む（白いカードとの差が広がる側）。 */
.nb-login-page {
  min-height: 100vh;
  padding: var(--cl-sp-6);
  color: var(--cl-ink);
  background: linear-gradient(160deg, var(--nb-login-grad-0) 0%, var(--nb-login-grad-1) 45%, var(--ies-jade) 100%);
}
.nb-login-page--staff { background: var(--ies-bg); }

/* ★緑地の上の白い字（ロゴの字・標語・著作権）。★色は面の白（--cl-surface）と、その透明度違い（新しい色は作っていない）。
 *   ★旧の手書きと同じ値: 字 30px/36px・太字・字間 -0.025em ／ 標語 14px/20px・字間 0.1em ／ 著作権 12px/16px・上 2rem・中央。★白の濃さだけは 2026-10-31 に変えた（標語 70 → 80%・著作権 50 → 85%・下の各規則の注記）。
 *   ★ロゴの印は字の左にはみ出して置く（右端を字の左端へ・縦は中央から 3px 下げる ＝ 旧の `absolute right-full top-1/2 -translate-y-1/2 mt-[3px]` と同じ）。 */
.nb-login__mark {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: 0.1875rem;
  transform: translateY(-50%);
}
.nb-login__word {
  font-size: var(--cl-fs-3xl);
  line-height: 2.25rem;
  font-weight: var(--cl-fw-bold);
  letter-spacing: var(--cl-ls-tight);
  color: var(--cl-surface);
}
.nb-login__tag {
  font-size: var(--cl-fs-sm);
  line-height: 1.25rem;
  letter-spacing: var(--cl-ls-wider);
  /* ★2026-10-31（相澤さん「推奨どおりで」）: 白 70% → 80%。★字の真後ろの地の画素で測った明暗比 = 1280 で 4.52 → 5.40・390 で 4.84 → 5.79（scratchpad LG-px.mjs）。 */
  color: color-mix(in srgb, var(--cl-surface) 80%, transparent);
}
.nb-login__copy {
  margin: var(--cl-sp-8) 0 0;
  text-align: center;
  font-size: var(--cl-fs-xs);
  line-height: 1rem;
  /* ★2026-10-31（同上）: 白 50% → 85%。★字の真後ろの地の画素で測った明暗比 = 1280 で 2.17 → 3.58・390 で 2.07 → 3.31。
   *   ★★12px の字の 4.5 にはまだ届かない。★ここの地（008b5a〜00925e）は白 100% でも 4.34／3.98 ＝ 透明度だけでは届かない（届かせるなら地のグラデーションの下側を暗くする話）。 */
  color: color-mix(in srgb, var(--cl-surface) 85%, transparent);
}

/* ★★K-2185（2026-10-23・一覧 W-658）: 講師の入口（noberu.net/t/）と、2 つの入口の下の「もう一方への小さな道」。
 *   ★見本 = docs/ui/screens/ログイン/mock-2026-10-23-entrances.png（真ん中が家庭・右が講師）。★Tailwind の字を増やさず、素のクラスで書く（tools/nb-test-screen-look.php の page-login.php の上限のため）。
 *   ★値はトークンから（新しい色・生の px は作らない）: 見出し 1.125rem（text-lg・画面タイトルの大きさ）／ 太さ 700 ／ 字色 --cl-ink ／ カードの中の下の空き --cl-sp-6（24px）。
 *   ★小さな道 = 緑の地の上の白い 14px（text-sm・12px 以上）の下線つきリンク。★上の空き --cl-sp-5（20px）・押せる箱の高さは 上下 --cl-sp-2（8px × 2）＋ 行の高さ（14px × 1.5 と見て 21px）＝ 約 37px（S 24 を割らない・計算）。
 *   ★白い字の明暗比（★計算・ブラウザでは測っていない）: 地のグラデーションの 45%（#00704A）で 6.1 : 1・60%（≒ #007F53）で 5.1 : 1・下端（#00A86B）で 3.1 : 1 ＝ カードの下の位置（中ほど）では 4.5 : 1 以上。 */
.nb-login__title {
  margin: 0 0 var(--cl-sp-6);
  font-size: var(--cl-fs-lg);
  font-weight: var(--cl-fw-bold);
  line-height: var(--cl-lh-snug);
  color: var(--cl-ink);
}
.nb-login__switch {
  margin: var(--cl-sp-5) 0 0;
  text-align: center;
  font-size: var(--cl-fs-sm);
}
.nb-login__switch a {
  display: inline-block;
  padding: var(--cl-sp-2) var(--cl-sp-3);
  color: var(--cl-surface);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ★2026-11-12（W-2254）: カードの中、ログインのボタンの下の「ログインできないとき」。白い地の上の 14px の下線つきリンク（字色 --cl-primary-dark ＝ 白地で 4.5 : 1 以上の緑）。押せる箱は上下 --cl-sp-2 */
.nb-login__help {
  margin: var(--cl-sp-4) 0 0;
  text-align: center;
  font-size: var(--cl-fs-sm);
}
.nb-login__help a {
  display: inline-block;
  padding: var(--cl-sp-2) var(--cl-sp-3);
  color: var(--cl-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nb-login__switch a:focus-visible {
  outline: 2px solid var(--cl-surface);
  outline-offset: 2px;
  border-radius: var(--cl-radius-sm);
}