/**
 * css/components/single-meta.css
 * ============================================================
 * A LEGEND 2：Single Meta
 * ============================================================
 *
 * 役割：
 * - template-parts/components/single-meta.php の日付・ターム・アプリ情報を装飾します。
 *
 * 今回の改修：
 * - メタ項目背景の固定白半透明を --aleg2-glass-bg へ置換します。
 * - タームhover時の固定文字色 #061018 を --aleg2-color-on-primary へ置換します。
 * - 角丸を design.radius.button 由来の --aleg2-radius-button へ接続します。
 * - 文字色を text-muted / text-faint / primary token へ整理します。
 * - 英字装飾扱いとして --aleg2-font-latin を使用します。
 * - design.buttons.hover_lift / hover_amount が有効な場合だけ、リンクメタを少し持ち上げます。
 * - キーボード操作用の focus-visible を追加します。
 * - 既存セレクタ・既存HTML構造・レスポンシブ挙動は維持します。
 *
 * Application追加方針：
 * - template-parts/components/single-meta.php 側で追加した
 *   .aleg2-single-meta__item--app-version /
 *   .aleg2-single-meta__item--app-platform /
 *   .aleg2-single-meta__item--app-status /
 *   .aleg2-single-meta__item--app-updated を装飾します。
 * - 既存の .aleg2-single-meta__item の見た目を崩さず、
 *   Application固有情報だけ少し判別しやすくします。
 * - app_platform / app_status は通常タームループから除外されるため、
 *   専用メタチップとして視認しやすい色味にします。
 */

/* ------------------------------------------------------------
 * Single meta wrapper
 * ------------------------------------------------------------
 *
 * 詳細ページタイトル下の日付・ターム・アプリ情報を横並びで表示します。
 *
 * 注意：
 * - 既存のflex wrap構造を維持します。
 * - 投稿タイプによって表示項目が増減しても自然に折り返します。
 */
.aleg2-single-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aleg2-space-2);
	align-items: center;
	margin-top: var(--aleg2-space-6);
	color: var(--aleg2-color-text-faint);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 800;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-transform: uppercase;
}

/* ------------------------------------------------------------
 * Meta items
 * ------------------------------------------------------------
 *
 * 日付・通常項目・タームの共通チップです。
 *
 * 旧コード：
 * - background: rgba(255, 255, 255, 0.055)
 * - border-radius: var(--aleg2-radius-pill)
 *
 * 改修後：
 * - background: var(--aleg2-glass-bg)
 * - border-radius: var(--aleg2-radius-button)
 *
 * ボタン系チップとして見た目を揃えるため、radius.button を使います。
 */
.aleg2-single-meta__date,
.aleg2-single-meta__item,
.aleg2-single-meta__term {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0.34em 0.82em;
	color: var(--aleg2-color-text-muted);
	line-height: 1;
	text-decoration: none;
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-button);
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		background var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

/**
 * 日付。
 *
 * 日付はリンクでない場合も多いため、primary色で強調しつつ、
 * hover反転の対象にはしません。
 */
.aleg2-single-meta__date {
	color: var(--aleg2-color-primary);
}

/**
 * 通常項目。
 *
 * Application情報などでリンクではない項目にも使えるため、
 * 基本は控えめなmuted表示にします。
 */
.aleg2-single-meta__item {
	color: var(--aleg2-color-text-muted);
}

/* ------------------------------------------------------------
 * Application meta items
 * ------------------------------------------------------------
 *
 * Application詳細ページ専用のメタチップです。
 *
 * single-meta.php 側では、Application context から取得した
 * version / platform / status / updated を以下のmodifier classで出力します。
 *
 * - .aleg2-single-meta__item--app-version
 * - .aleg2-single-meta__item--app-platform
 * - .aleg2-single-meta__item--app-status
 * - .aleg2-single-meta__item--app-updated
 *
 * 注意：
 * - 通常の .aleg2-single-meta__item をベースにし、必要最小限だけ差別化します。
 * - 固定色は使わず、既存のdesign tokenへ接続します。
 */
.aleg2-single-meta__item--app-version {
	color: var(--aleg2-color-primary);
	border-color: color-mix(in srgb, var(--aleg2-color-primary) 42%, var(--aleg2-color-border));
}

/**
 * プラットフォーム。
 *
 * app_platform taxonomy の代表値を表示する想定です。
 * バージョンほど強くはせず、heading寄りの文字色で読みやすくします。
 */
.aleg2-single-meta__item--app-platform {
	color: var(--aleg2-color-heading);
	background: var(--aleg2-glass-bg-strong);
}

/**
 * ステータス。
 *
 * app_status taxonomy の代表値を表示する想定です。
 * 注意喚起ではなく状態表示なので、primaryを薄く使います。
 */
.aleg2-single-meta__item--app-status {
	color: var(--aleg2-color-primary);
	background: color-mix(in srgb, var(--aleg2-color-primary) 10%, var(--aleg2-glass-bg));
	border-color: color-mix(in srgb, var(--aleg2-color-primary) 36%, var(--aleg2-color-border));
}

/**
 * Application更新日。
 *
 * 投稿日とは別の「アプリケーション更新日」です。
 * 日付チップと競合しないよう、控えめなmuted表示にします。
 */
.aleg2-single-meta__item--app-updated {
	color: var(--aleg2-color-text-faint);
}

/**
 * color-mix() 非対応ブラウザ向けfallback。
 *
 * 上のApplication専用チップは color-mix() が使える環境では
 * より自然な色になります。非対応環境でも表示が崩れないよう、
 * @supports not で安全なtokenへ戻します。
 */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
	.aleg2-single-meta__item--app-version,
	.aleg2-single-meta__item--app-status {
		border-color: var(--aleg2-color-primary);
	}

	.aleg2-single-meta__item--app-status {
		background: var(--aleg2-glass-bg);
	}
}

/**
 * タームリンク。
 *
 * タームはリンクとして使われる想定なので、hover時にprimary背景へ反転します。
 */
.aleg2-single-meta__term:hover {
	color: var(--aleg2-color-on-primary);
	text-decoration: none;
	background: var(--aleg2-color-primary);
	border-color: var(--aleg2-color-primary);
	box-shadow: var(--aleg2-shadow-soft);
}

/**
 * hover liftが有効な場合だけ、タームリンクを少し持ち上げます。
 */
body.aleg2-buttons-hover-lift .aleg2-single-meta__term:hover {
	transform: translateY(calc(var(--aleg2-button-hover-amount) * -1));
}

/**
 * キーボード操作時のフォーカス表示。
 *
 * タームがaタグの場合に、現在位置が分かるようにします。
 */
.aleg2-single-meta__term:focus-visible {
	outline: none;
	color: var(--aleg2-color-on-primary);
	background: var(--aleg2-color-primary);
	border-color: var(--aleg2-color-primary);
	box-shadow:
		var(--aleg2-shadow-soft),
		var(--aleg2-focus-ring);
}

/**
 * meta内リンク共通。
 *
 * 拡張で __item 側がaタグになる場合にも自然に反応させます。
 */
a.aleg2-single-meta__item:hover {
	color: var(--aleg2-color-heading);
	text-decoration: none;
	background: var(--aleg2-glass-bg-strong);
	border-color: var(--aleg2-color-border-strong);
	box-shadow: var(--aleg2-shadow-soft);
}

a.aleg2-single-meta__item:focus-visible {
	outline: none;
	box-shadow:
		var(--aleg2-shadow-soft),
		var(--aleg2-focus-ring);
}

/**
 * hover liftが有効な場合だけ、リンク化された通常メタも少し持ち上げます。
 *
 * 現時点では .aleg2-single-meta__item はspan出力が中心ですが、
 * 将来、ApplicationのVersionやPlatformをリンク化した場合にも
 * 同じ操作感で扱えるようにします。
 */
body.aleg2-buttons-hover-lift a.aleg2-single-meta__item:hover {
	transform: translateY(calc(var(--aleg2-button-hover-amount) * -1));
}

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------
 *
 * 既存のスマホ調整を維持します。
 */
@media (max-width: 640px) {
	.aleg2-single-meta {
		gap: var(--aleg2-space-2);
	}

	/**
	 * スマホではApplicationメタが増えると横幅が詰まりやすいため、
	 * 文字の詰まりだけを少し緩和します。
	 * flex-wrap自体は既存仕様どおり維持します。
	 */
	.aleg2-single-meta__date,
	.aleg2-single-meta__item,
	.aleg2-single-meta__term {
		min-height: 26px;
		padding-inline: 0.72em;
	}
}