/*
 * 公開画面のスタイル。
 *
 * 方針
 *   - 見出しタグを使わないため、見出し風の文字は段落へクラスで当てる
 *   - 記事の見出し（h2・h3）と競合しないよう、セクション名は小さな補助ラベルにする
 *   - 図は CSS だけで描く。SVG・外部ライブラリ・外部フォント・外部画像は使わない
 *   - 色だけに依存させず、形（円とひし形）と数値ラベルを併記する
 *   - ページ全体に横スクロールを出さない
 *   - すべての指定を .hps-block 以下へ閉じる。
 *     h1〜h6・本文・表・ボタンのグローバルなスタイルは触らない
 */

.hps-block {
	/* 配色はここだけで定義する。テーマ側の変数には依存しない。 */
	--hps-ink: #403c46;
	--hps-ink-soft: #6d6470;
	--hps-ink-faint: #8b8187;
	--hps-accent: #a65f6e;
	--hps-accent-strong: #c76f81;
	--hps-accent-bg: #f8eeee;
	--hps-compare: #7c88a9;
	--hps-compare-ink: #687493;
	--hps-value: #4e806f;
	--hps-down: #ad6573;
	--hps-surface: #fffaf9;
	--hps-card: #fff;
	--hps-line: #eadfdf;
	--hps-line-soft: #eee4e5;
	--hps-track: #ebe6e7;

	margin: 1.75em 0;
	padding: 1.6em;
	border: 1px solid var(--hps-line);
	border-radius: 20px;
	background: var(--hps-surface);
	color: var(--hps-ink);
	font-size: 1rem;
	line-height: 1.7;
}

.hps-block *,
.hps-block *::before,
.hps-block *::after {
	box-sizing: border-box;
}

.hps-block.is-loading {
	opacity: 0.6;
}

/* --- セクションの補助ラベル --------------------------------------------- */

/*
 * 記事の見出しには見せない。小さく、くすんだピンクで、太い下線も付けない。
 * --rule は右側へ 1px の細い線を伸ばすだけ。
 */
.hps-block .hps-section-label {
	margin: 0;
	color: var(--hps-accent);
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.08em;
}

.hps-block .hps-section-label--rule {
	display: flex;
	gap: 0.85em;
	align-items: center;
	white-space: nowrap;
}

.hps-block .hps-section-label--rule::after {
	flex: 1 1 auto;
	height: 1px;
	background: #e4d6d9;
	content: "";
}

.hps-block .hps-section-sub {
	margin: 0.2em 0 0;
	color: var(--hps-ink-faint);
	font-size: 0.72em;
	line-height: 1.5;
}

/* --- 冒頭（小ラベル・タイトル・説明文） --------------------------------- */

.hps-block__header {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7em 1.1em;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1.1em;
}

.hps-block__intro {
	flex: 1 1 16em;
	min-width: 0;
}

.hps-block__eyebrow {
	margin: 0 0 0.3em;
	color: var(--hps-accent);
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

/*
 * 見出しタグは使わない。記事の見出しと見間違えないよう、
 * サイズは h2・h3 より控えめに保ち、下線や飾りも付けない。
 */
.hps-block__title {
	color: var(--hps-ink);
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.4;
}

.hps-block__context {
	max-width: 44em;
	margin: 0.45em 0 0;
	color: var(--hps-ink-soft);
	font-size: 0.85em;
	line-height: 1.75;
}

/* 折りたたみボタンは冒頭の右端に置く。余白は header 側で取る。 */
.hps-block__header .hps-controls__toggle {
	margin: 0;
}

/* --- 切り替えバー ------------------------------------------------------- */

.hps-controls {
	margin: 0 0 1.15em;
}

/*
 * 折りたたみボタンは狭い画面でしか出さない。
 * 出すのは .hps-block--js が付いたとき（＝スクリプトが動いたとき）だけなので、
 * JavaScript が無効なら押せないボタンが残ることもない。
 */
.hps-controls__toggle {
	display: none;
	gap: 0.4em;
	align-items: center;
	margin: 0 0 0.7em;
	padding: 0.6em 0.85em;
	border: 1px solid #d8cacc;
	border-radius: 10px;
	background: var(--hps-card);
	color: #5c5158;
	font: inherit;
	font-size: 0.82em;
	font-weight: 700;
	cursor: pointer;
}

.hps-controls__toggle::after {
	content: "⌄";
}

.hps-controls__toggle[aria-expanded="true"]::after {
	content: "⌃";
}

.hps-controls__panel {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 0.75em;
	padding: 0.9em;
	border-radius: 14px;
	background: var(--hps-accent-bg);
}

.hps-controls__item {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	min-width: 0;
	margin: 0;
}

.hps-controls__item label {
	color: #645a61;
	font-size: 0.76em;
	font-weight: 700;
}

.hps-controls__item select {
	width: 100%;
	max-width: 100%;
	min-height: 2.7em;
	padding: 0.35em 0.5em;
	border: 1px solid #dacdce;
	border-radius: 10px;
	background: var(--hps-card);
	color: var(--hps-ink);
	font: inherit;
	font-size: 0.9em;
	line-height: 1.4;
}

/*
 * フォーカス表示はテーマ任せにしない。
 * outline を消すテーマもあるため、自分で必ず見える枠を出す。
 */
.hps-controls__item select:focus,
.hps-controls__item select:focus-visible,
.hps-controls__toggle:focus,
.hps-controls__toggle:focus-visible,
.hps-details summary:focus,
.hps-details summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.hps-controls__status {
	margin: 0.5em 0 0;
	min-height: 1.2em;
	font-size: 0.8em;
}

/* --- 3項目のドット比較 --------------------------------------------------- */

.hps-scores {
	padding: 1.1em 1.15em 0.6em;
	border: 1px solid #e7dada;
	border-radius: 16px;
	background: var(--hps-card);
}

.hps-scores__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em 1em;
	align-items: flex-start;
	justify-content: space-between;
}

.hps-scores__title {
	min-width: 0;
}

.hps-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 0.9em;
	margin: 0;
	color: var(--hps-ink-soft);
	font-size: 0.72em;
}

.hps-legend__item {
	display: inline-flex;
	gap: 0.4em;
	align-items: center;
}

.hps-legend__swatch {
	display: inline-block;
	flex: 0 0 auto;
}

/* 対象サービスは円。 */
.hps-legend__swatch--own {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--hps-accent-strong);
}

/* 比較対象はひし形。色を見分けられなくても形で区別できる。 */
.hps-legend__swatch--compare {
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--hps-compare);
	transform: rotate(45deg);
}

.hps-scores__list {
	margin-top: 0.5em;
}

.hps-score {
	padding: 0.8em 0 0.55em;
	border-top: 1px solid var(--hps-line-soft);
}

.hps-score__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.8em;
	align-items: baseline;
	justify-content: space-between;
}

.hps-score__name {
	color: #514951;
	font-size: 0.85em;
}

.hps-score__values {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.8em;
	align-items: center;
	justify-content: flex-end;
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
}

.hps-score__own,
.hps-score__compare {
	display: inline-flex;
	gap: 0.35em;
	align-items: center;
	font-weight: 700;
}

.hps-score__own {
	color: #b95f73;
}

/* 数値の前にも図と同じ形を置く。凡例を見に戻らなくても対応が分かる。 */
.hps-score__own::before {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--hps-accent-strong);
	content: "";
}

.hps-score__compare {
	color: var(--hps-compare-ink);
}

.hps-score__compare::before {
	width: 7px;
	height: 7px;
	border-radius: 1px;
	background: var(--hps-compare);
	content: "";
	transform: rotate(45deg);
}

/* 差は記号と符号を文字で持っている。色は補助にとどめる。 */
.hps-score__diff {
	font-weight: 700;
}

.hps-score__diff--up {
	color: var(--hps-value);
}

.hps-score__diff--down {
	color: var(--hps-down);
}

.hps-score__diff--even,
.hps-score__diff--none {
	color: var(--hps-ink-soft);
}

.hps-score__plot {
	position: relative;
	margin-top: 0.85em;
	padding: 0 6px;
}

.hps-score__track {
	position: relative;
	display: block;
	height: 4px;
	margin: 0 6px;
	border-radius: 999px;
	background: var(--hps-track);
}

.hps-score__connector {
	position: absolute;
	top: 0;
	height: 4px;
	border-radius: 999px;
	background: #dcb6bf;
}

.hps-score__dot {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: block;
}

.hps-score__dot--own {
	width: 15px;
	height: 15px;
	border: 3px solid var(--hps-card);
	border-radius: 50%;
	background: var(--hps-accent-strong);
	box-shadow: 0 0 0 1px var(--hps-accent-strong);
	transform: translate(-50%, -50%);
}

.hps-score__dot--compare {
	width: 11px;
	height: 11px;
	border: 2px solid var(--hps-card);
	border-radius: 2px;
	background: var(--hps-compare);
	box-shadow: 0 0 0 1px var(--hps-compare);
	transform: translate(-50%, -50%) rotate(45deg);
}

.hps-score__scale {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5em;
	padding: 0 6px;
	color: #9b9297;
	font-size: 0.62em;
}

.hps-score__suppressed {
	margin: 0.5em 0 0;
	color: var(--hps-ink-faint);
	font-size: 0.8em;
}

/* --- 数値表（既定は畳んでおく） ----------------------------------------- */

.hps-details {
	margin: 0.9em 0 0;
	font-size: 0.9em;
}

.hps-details summary {
	width: max-content;
	color: var(--hps-accent);
	font-size: 0.85em;
	font-weight: 700;
	cursor: pointer;
}

.hps-details[open] summary {
	margin-bottom: 0.7em;
}

.hps-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* 表の領域はキーボードで横スクロールできる。合焦していることが分かるようにする。 */
.hps-table-scroll:focus,
.hps-table-scroll:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.hps-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hps-block .hps-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.85em;
}

.hps-block .hps-table__caption {
	padding: 0 0 0.4em;
	color: var(--hps-ink-soft);
	caption-side: top;
	font-size: 0.9em;
	text-align: left;
}

.hps-block .hps-table th,
.hps-block .hps-table td {
	padding: 0.45em 0.6em;
	border: 1px solid var(--hps-line-soft);
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.hps-block .hps-table thead th,
.hps-block .hps-table tbody th {
	text-align: left;
	white-space: normal;
}

.hps-block .hps-table thead th {
	background: var(--hps-accent-bg);
}

.hps-block .hps-table__counts th,
.hps-block .hps-table__counts td {
	color: var(--hps-ink-soft);
	font-size: 0.92em;
}

.hps-table__suppressed {
	color: var(--hps-ink-faint);
	font-weight: 400;
}

/* --- 転職結果のカード --------------------------------------------------- */

.hps-outcomes {
	margin: 1.4em 0 0;
}

.hps-outcomes__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75em;
	margin-top: 0.9em;
}

.hps-card {
	min-width: 0;
	padding: 1em 1.05em;
	border: 1px solid #e5d4d7;
	border-radius: 14px;
	background: var(--hps-card);
}

.hps-card__label {
	margin: 0;
	color: #4e474f;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.5;
}

.hps-card__value {
	margin: 0.15em 0 0;
	color: var(--hps-value);
	font-size: 1.85em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
}

.hps-card__note {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 0.85em;
	margin: 0.45em 0 0;
	color: var(--hps-ink-faint);
	font-size: 0.74em;
	line-height: 1.6;
}

.hps-card__fraction {
	font-variant-numeric: tabular-nums;
}

.hps-card__na {
	margin: 0.35em 0 0;
	color: var(--hps-ink-faint);
	font-size: 0.8em;
	line-height: 1.6;
}

/* --- 内定までにかかった期間 --------------------------------------------- */

.hps-period {
	margin-top: 1.35em;
}

.hps-period__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 1.25em;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.6em;
}

.hps-period__lead {
	margin: 0;
	color: var(--hps-ink-soft);
	font-size: 0.8em;
	line-height: 1.6;
}

.hps-period__lead strong {
	color: var(--hps-ink);
}

.hps-period__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hps-period__row {
	display: grid;
	grid-template-columns: minmax(6.5em, 8em) minmax(0, 1fr) 3.6em;
	gap: 0.85em;
	align-items: center;
	margin: 0;
	padding: 0.65em 0;
	border-top: 1px solid #eee7e8;
}

.hps-period__name {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15em 0.5em;
	align-items: baseline;
	justify-content: space-between;
	min-width: 0;
	color: #4f474f;
	font-size: 0.8em;
}

.hps-period__name strong {
	overflow-wrap: anywhere;
}

.hps-period__name > span {
	color: var(--hps-ink-faint);
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}

.hps-period__track {
	display: block;
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--hps-track);
}

.hps-period__track > i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--hps-accent-strong);
}

.hps-period__share {
	color: #574f57;
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.hps-period__base,
.hps-period__zero,
.hps-period__note {
	margin: 0.45em 0 0;
	color: var(--hps-ink-faint);
	font-size: 0.74em;
	line-height: 1.6;
}

.hps-period__base {
	padding-top: 0.6em;
	border-top: 1px solid #eee7e8;
}

/* --- メタ情報・注意書き ------------------------------------------------- */

.hps-meta {
	margin: 1.1em 0 0;
	color: var(--hps-ink-faint);
	font-size: 0.75em;
}

.hps-notice {
	margin: 0 0 1em;
	padding: 0.7em 0.9em;
	border-radius: 10px;
	background: var(--hps-accent-bg);
	color: #6a5f66;
	font-size: 0.8em;
}

/* --- 狭い画面 ----------------------------------------------------------- */

@media (max-width: 767px) {
	.hps-block {
		padding: 1.1em 0.9em;
		border-radius: 16px;
	}

	.hps-block__title {
		font-size: 1.12em;
	}

	/*
	 * 絞り込みを畳むのは JavaScript が動くときだけ。
	 * .hps-block--js はスクリプトが付けるので、無効なら常に開いたまま。
	 */
	.hps-block--js .hps-controls__toggle {
		display: inline-flex;
	}

	.hps-block--js .hps-controls__panel {
		display: none;
	}

	.hps-block--js .hps-controls__panel.is-open {
		display: grid;
	}

	.hps-controls__panel {
		grid-template-columns: 1fr;
	}

	.hps-scores {
		padding: 0.9em 0.85em 0.5em;
	}

	.hps-outcomes__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 400px) {
	.hps-block__title {
		font-size: 1.05em;
	}

	.hps-scores__head {
		flex-direction: column;
	}

	.hps-score__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.hps-score__values {
		justify-content: flex-start;
	}

	.hps-card__value {
		font-size: 1.6em;
	}

	.hps-period__row {
		grid-template-columns: minmax(5em, 6.5em) minmax(0, 1fr) 3.2em;
		gap: 0.5em;
	}

	.hps-period__name {
		flex-direction: column;
		gap: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hps-block.is-loading {
		opacity: 1;
	}
}

/* ==========================================================================
 * アンケート全体モード
 *
 * サービス比較モードの見た目には一切影響させない。
 * 追加の指定はすべて .hps-block--overview の下に閉じる。
 * ダークモードもこのモードだけで受ける（既存表示を変えないため）。
 * ========================================================================== */

/*
 * 配色はサービス比較モードと同じものをそのまま使う。
 * prefers-color-scheme による自動ダーク表示は入れていない。
 * 同じ記事で2つのモードを併用したときに配色が食い違うことと、
 * OS の設定とテーマの表示状態が一致するとは限らないため。
 * ダーク対応するなら、SWELL 側の判定方法を確認したうえで両モード同時に行う。
 */
.hps-block--overview {
	padding: 1.35em;
}

/* --- 冒頭 --------------------------------------------------------------- */

.hps-block--overview .hps-overview__header {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7em 1.1em;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 1.1em;
}

.hps-block--overview .hps-overview__intro {
	flex: 1 1 16em;
	min-width: 0;
}

.hps-block--overview .hps-overview__eyebrow {
	margin: 0 0 0.3em;
	color: var(--hps-accent);
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

/*
 * 見出しタグは使わない。記事側の見出し階層を壊さないよう、
 * サイズも記事の h2・h3 より控えめに保つ。
 */
.hps-block--overview .hps-overview__title {
	color: var(--hps-ink);
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.4;
}

.hps-block--overview .hps-overview__context {
	margin: 0.45em 0 0;
	color: var(--hps-ink-soft);
	font-size: 0.85em;
	line-height: 1.75;
}

.hps-block--overview .hps-controls {
	margin: 0 0 1.15em;
}

.hps-block--overview .hps-controls__panel--overview {
	grid-template-columns: 1fr 1fr;
}

/* --- 3項目の平均評価 ----------------------------------------------------- */

.hps-block--overview .hps-score__head {
	align-items: flex-end;
}

.hps-block--overview .hps-score__label {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	min-width: 0;
}

.hps-block--overview .hps-score__count {
	color: var(--hps-ink-faint);
	font-size: 0.72em;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}

.hps-block--overview .hps-score__values {
	align-items: baseline;
	gap: 0.25em;
	font-size: 1em;
}

.hps-block--overview .hps-score__own {
	font-size: 1.15em;
}

.hps-block--overview .hps-score__max {
	color: var(--hps-ink-faint);
	font-size: 0.72em;
}

/* 平均位置までを塗る。位置を1つの点で示すので、比較用の点も接続線も持たない。 */
.hps-block--overview .hps-score__fill {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--hps-accent-strong);
	opacity: 0.55;
}

/* --- 転職結果・期間 ------------------------------------------------------ */

.hps-block--overview .hps-outcomes {
	margin-top: 1.3em;
}

.hps-block--overview .hps-period--overview {
	margin-top: 1.3em;
}

.hps-block--overview .hps-period__head {
	display: block;
	margin-bottom: 0.5em;
}

.hps-block--overview .hps-period__lead {
	margin-top: 0.2em;
}

/* --- 補足と調査情報 ------------------------------------------------------ */

.hps-block--overview .hps-overview__note {
	margin: 1.1em 0 0;
	color: var(--hps-ink-faint);
	font-size: 0.74em;
	line-height: 1.7;
}

.hps-block--overview .hps-details--overview {
	margin-top: 0.8em;
}

.hps-block--overview .hps-overview__facts {
	margin: 0.7em 0 0;
	padding: 0.9em 1em;
	border-radius: 12px;
	background: var(--hps-accent-bg);
	color: var(--hps-ink-soft);
	font-size: 0.76em;
	line-height: 1.8;
	list-style: none;
}

.hps-block--overview .hps-overview__facts li + li {
	margin-top: 0.35em;
}

/* --- 狭い画面 ----------------------------------------------------------- */

@media (max-width: 767px) {
	.hps-block--overview {
		padding: 1.05em 0.85em;
	}

	.hps-block--overview .hps-overview__title {
		font-size: 1.12em;
	}

	.hps-block--overview .hps-controls__panel--overview {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 400px) {
	.hps-block--overview .hps-score__head {
		flex-direction: row;
		align-items: flex-end;
	}

	.hps-block--overview .hps-score__values {
		justify-content: flex-end;
	}

	.hps-block--overview .hps-overview__title {
		font-size: 1.05em;
	}
}