/**
 * Comparison selection UI.
 *
 * Two pieces: the toggle that lives on a service card, and the bar that shows
 * what is currently selected. Kept apart from comparison.css — that file styles
 * the comparison page itself, which is a different screen with a different job.
 *
 * The toggle is a secondary action. "詳しく見る" is what most readers want from
 * a card, so adding to a comparison must not out-shout it; the primary accent
 * is reserved for the compare button in the bar, which is the one action that
 * moves the reader forward.
 *
 * Loaded on market and service-archive pages only.
 */

/* =====================================================================
 * 1. Toggle
 * ================================================================== */

/*
 * Hidden until the selection script announces itself: a button that cannot do
 * anything is worse than no button at all.
 */
.ms-compare-toggle {
	display: none;
}

.ms-compare-ready .ms-compare-toggle {
	align-items: center;
	background-color: transparent;
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-full);
	color: var(--color-text-secondary);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	gap: var(--space-1);
	justify-content: center;
	line-height: 1.4;
	min-height: 40px;
	padding: var(--space-2) var(--space-4);
	transition: background-color var(--transition-fast), border-color var(--transition-fast),
		color var(--transition-fast);
	width: 100%;
}

.ms-compare-ready .ms-compare-toggle:hover {
	background-color: var(--color-background-alt);
	border-color: var(--color-text-secondary);
	color: var(--color-text-primary);
}

/*
 * Selected state is carried by the label text ("比較から外す"), aria-pressed and
 * the check mark. The tint is the last of the four signals, not the only one.
 */
.ms-compare-ready .ms-compare-toggle.is-selected {
	background-color: var(--color-primary-light);
	border-color: var(--color-primary);
	border-style: solid;
	color: var(--color-primary-hover);
}

.ms-compare-toggle__icon {
	height: 1em;
	opacity: 0;
	width: 1em;
}

.ms-compare-toggle.is-selected .ms-compare-toggle__icon {
	opacity: 1;
}

.ms-compare-toggle__label {
	white-space: nowrap;
}

/* Sits under the detail link on a card, sharing its width. */
.ms-market-card__footer .ms-compare-toggle,
.ms-ranking-item__footer .ms-compare-toggle {
	margin-top: var(--space-2);
}

/* =====================================================================
 * 2. Bar
 * ================================================================== */

.ms-compare-bar {
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-border);
	bottom: 0;
	box-shadow: var(--shadow-lg);
	left: 0;
	padding: var(--space-2) var(--content-gutter);
	padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
	position: fixed;
	right: 0;
	z-index: var(--z-sticky);
}

.ms-compare-bar[hidden] {
	display: none;
}

.ms-compare-bar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-inline: auto;
	max-width: var(--content-width);
}

/*
 * The count and the chips share a row even on the narrowest screen: the bar
 * covers the page while it is open, so every line it takes is a line of content
 * the reader loses.
 */
.ms-compare-bar__summary {
	align-items: center;
	display: flex;
	gap: var(--space-2);
	min-width: 0;
}

.ms-compare-bar__count {
	color: var(--color-text-secondary);
	flex: none;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	margin: 0;
	white-space: nowrap;
}

.ms-compare-bar__items {
	display: flex;
	flex: 1 1 auto;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	min-width: 0;
	overflow-x: auto;
	padding: 0;
	scrollbar-width: thin;
}

.ms-compare-bar__item {
	align-items: center;
	background-color: var(--color-background-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	display: inline-flex;
	flex: none;
	gap: var(--space-1);
	max-width: 13rem;
	padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
}

.ms-compare-bar__item-name {
	color: var(--color-text-primary);
	font-size: var(--font-size-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ms-compare-bar__remove {
	align-items: center;
	background-color: transparent;
	border: 0;
	border-radius: var(--radius-full);
	color: var(--color-text-secondary);
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font-size: var(--font-size-base);
	height: 28px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 28px;
}

.ms-compare-bar__remove:hover {
	background-color: var(--color-background-muted);
	color: var(--color-text-primary);
}

.ms-compare-bar__notice {
	background-color: var(--color-warning-light);
	border-radius: var(--radius-md);
	color: var(--color-text-primary);
	font-size: var(--font-size-sm);
	margin: 0;
	padding: var(--space-2) var(--space-3);
}

.ms-compare-bar__notice[hidden] {
	display: none;
}

.ms-compare-bar__actions {
	align-items: center;
	display: flex;
	gap: var(--space-2);
}

.ms-compare-bar__clear {
	flex: none;
}

.ms-compare-bar__submit {
	flex: 1 1 auto;
	min-height: 48px;
}

/*
 * Disabled deliberately does not rely on the shared opacity rule: a faded
 * coral button still reads as "press me" and drops the label below AA. A grey
 * button with full-strength text says "not yet" and stays legible; the label
 * itself explains what is missing.
 */
.ms-compare-bar__submit:disabled {
	background-color: var(--color-background-muted);
	border-color: var(--color-border);
	color: var(--color-text-secondary);
	opacity: 1;
}

/*
 * Reserve the bar's height at the end of the page so the footer stays readable
 * instead of sitting behind it. The values track the measured bar height
 * (111px / 127px) with a little room for a longer button label — the same
 * approach as the service page's sticky CTA.
 */
.ms-has-compare-bar .ms-site-footer {
	padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
}

.ms-compare-noscript {
	color: var(--color-text-secondary);
	font-size: var(--font-size-sm);
	margin: var(--space-4) auto;
	max-width: var(--content-width);
	padding-inline: var(--content-gutter);
}

@media (min-width: 768px) {
	.ms-compare-bar {
		padding-block: var(--space-3);
		padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
	}

	.ms-compare-bar__inner {
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-4);
	}

	/*
	 * Basis 0 rather than auto: the chip row is allowed to take the space that
	 * is left after the buttons, not to push them onto a second line.
	 */
	.ms-compare-bar__summary {
		flex: 1 1 0%;
		gap: var(--space-3);
	}

	.ms-compare-bar__notice {
		flex: 1 0 100%;
		order: 3;
	}

	.ms-compare-bar__actions {
		flex: none;
	}

	.ms-compare-bar__submit {
		flex: none;
	}

	.ms-has-compare-bar .ms-site-footer {
		padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
	}

	/* Matches the detail button above it, which stops being full width here. */
	.ms-ranking-item__footer .ms-compare-toggle {
		min-width: 220px;
		width: auto;
	}
}