/**
 * Simple LMS — アカウントメニュー（アバター＋ドロップダウン）
 *
 * プレイヤー内・コース外ページ（[slms_account_menu]）共通のスタイル。
 * PC   … トグルは「アバター＋名前＋シェブロン」のピル。パネルはトグル直下のカード
 *        （右端合わせは account-menu.js が right を設定）。
 * スマホ … トグルはアバターのみ。パネルはヘッダー下端に固定した全幅バー
 *        （top は account-menu.js が設定）。
 * プレイヤー固有の配置調整（.slms-topbar .slms-account-menu）は player.css 側。
 */

.slms-account-menu {
	position: relative;
}

/* アイコンは全て currentColor の線画。リンクのホバー色にそのまま追従する。 */
.slms-account-menu svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

/* --- トグル --------------------------------------------------------- */

.slms-account-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px;
	border-radius: 999px;
	cursor: pointer;
	list-style: none;
	color: var(--slms-gray-text, #6a6f73);
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s ease;
}

.slms-account-toggle::-webkit-details-marker {
	display: none;
}

.slms-account-toggle:focus-visible {
	outline: 2px solid var(--slms-accent, #1e5a8a);
	outline-offset: 2px;
}

.slms-account-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: block;
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--slms-card-border, #d1d7dc);
	transition: box-shadow 0.15s ease;
}

.slms-account-toggle:hover .slms-account-avatar,
.slms-account-menu[open] .slms-account-avatar {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--slms-accent, #1e5a8a);
}

/* 表示名は長くてもヘッダーを押し広げないよう幅を切って省略する。 */
.slms-account-toggle-name {
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--slms-ink, #1c1d1f);
}

.slms-account-chevron {
	width: 14px;
	height: 14px;
	transition: transform 0.18s ease;
}

.slms-account-menu[open] .slms-account-chevron {
	transform: rotate(180deg);
}

/* スマホはアバターのみ（名前とシェブロンは畳む）。 */
@media (max-width: 782px) {
	.slms-account-toggle-name,
	.slms-account-chevron {
		display: none;
	}
}

/* --- 背景の幕 ------------------------------------------------------- */

/* パネルを開いている間、背後の画面を少しだけ暗くして「開いている」ことを示す。
   バーより下だけを覆う（top/left は account-menu.js が実測して補正する。パネルと同じく
   祖先の transform / backdrop-filter で position:fixed の基準がズレるため）。
   details の兄弟に置いてあり、パネル（z-index:100000）と同じ重なり文脈なので必ず下に来る。

   暗転が唐突に見えないよう、開くときはゆっくり（0.28s ease-out）、閉じるときは
   パネルの消え方に合わせて速く（0.16s）。visibility は透明になりきってから畳む。 */
.slms-account-scrim {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(28, 42, 58, 0.12);
	z-index: 99998;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.16s ease-in, visibility 0s linear 0.16s;
}

.slms-account-scrim.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.28s ease-out, visibility 0s;
}

/* --- パネル --------------------------------------------------------- */

/* スマホ：ヘッダー下端（top は JS 設定）にビューポート全幅で固定。 */
.slms-account-dropdown {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	background: #fff;
	border-top: 1px solid var(--slms-card-border, #d1d7dc);
	box-shadow: 0 8px 24px rgba(28, 42, 58, 0.1),
		0 1px 2px rgba(28, 42, 58, 0.05);
	z-index: 100000;
	animation: slms-account-fade 0.16s ease;
}

@keyframes slms-account-fade {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 中身は本文幅に合わせて中央寄せ（スマホ幅）。 */
.slms-account-dropdown-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 24px 12px;
	box-sizing: border-box;
}

/* PC は全幅バーでなく、トグルの下に出るコンパクトなカード。
   right は account-menu.js がトグル右端に合わせて上書きする。 */
@media (min-width: 783px) {
	.slms-account-toggle {
		padding: 4px 10px 4px 4px;
	}

	.slms-account-toggle:hover,
	.slms-account-menu[open] .slms-account-toggle {
		background: var(--slms-gray, #f5f5f5);
	}

	.slms-account-dropdown {
		left: auto;
		right: 24px;
		width: auto;
		min-width: 260px;
		border: 1px solid var(--slms-card-border, #d1d7dc);
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(28, 42, 58, 0.12),
			0 2px 6px rgba(28, 42, 58, 0.06);
		overflow: hidden;
	}

	.slms-account-dropdown-inner {
		max-width: none;
		margin: 0;
		padding: 6px;
	}

	.slms-account-dropdown-links {
		padding-top: 6px;
	}
}

/* --- (a) ユーザー情報 ----------------------------------------------- */

.slms-account-user {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 12px;
	border-bottom: 1px solid var(--slms-border, #e0e0e0);
}

.slms-account-user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
	flex-shrink: 0;
}

/* min-width:0 が無いと長いメールで flex アイテムが縮まず、パネルが横に伸びる。 */
.slms-account-user-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.slms-account-user-name,
.slms-account-user-email {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.slms-account-user-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--slms-ink, #1c1d1f);
}

/* palt が英数字を詰めてメールが読みにくくなるので打ち消す。 */
.slms-account-user-email {
	font-size: 12px;
	color: var(--slms-gray-text, #6a6f73);
	font-feature-settings: normal;
}

/* --- (b) メインメニュー --------------------------------------------- */

/* 区切り線と行の間に余白を入れると、その行だけテキストが線と線の中央からズレて見える
   （上下の線に挟まれた帯＝リンクの箱、になるよう余白は持たせない）。 */
.slms-account-dropdown-nav {
	border-bottom: 1px solid var(--slms-border, #e0e0e0);
}

.slms-account-nav,
.slms-account-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 項目の切れ目が分かるよう薄い罫線で区切る。リンク自体は角丸のホバー背景を持つので、
   線は li 側に引いて角で欠けないようにする。 */
.slms-account-nav > li + li {
	border-top: 1px solid var(--slms-border-light, #ececec);
}

/* --- (c) 認証リンク・行（メインメニューと共通） --------------------- */

/* 最下段は「上の区切り線」と「パネルの下端」に挟まれるので、下端の余白（インナーの
   padding-bottom）と同じだけ上にも空けて中央に見せる。 */
.slms-account-dropdown-links {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 12px;
}

.slms-account-dropdown-links a,
.slms-account-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	color: var(--slms-text, #333);
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	border-radius: 8px;
	transition: background 0.12s ease, color 0.12s ease;
}

.slms-account-dropdown-links a:hover,
.slms-account-nav a:hover {
	background: var(--slms-gray, #f5f5f5);
	color: var(--slms-accent, #1e5a8a);
}

.slms-account-dropdown-links a svg {
	width: 18px;
	height: 18px;
}

.slms-account-nav .current-menu-item > a,
.slms-account-nav .current-menu-ancestor > a {
	color: var(--slms-accent, #1e5a8a);
}

/* 会員登録は主導線なのでアクセント色のボタンに。 */
.slms-account-dropdown-links a.is-primary {
	justify-content: center;
	margin-top: 4px;
	background: var(--slms-accent, #1e5a8a);
	color: #fff;
}

.slms-account-dropdown-links a.is-primary:hover {
	background: var(--slms-accent-dark, #164569);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.slms-account-dropdown {
		animation: none;
	}

	.slms-account-scrim,
	.slms-account-scrim.is-visible {
		transition: none;
	}

	.slms-account-toggle,
	.slms-account-avatar,
	.slms-account-chevron,
	.slms-account-dropdown-links a,
	.slms-account-nav a {
		transition: none;
	}
}