/*
 * GPIPL UI primitives (Phase 3, global): icons, buttons, text links, badges, breadcrumbs.
 * Every colour comes from role tokens, so these work unchanged inside dark sections.
 */
@layer components {
	/* ============================================================ Icons (Lucide sprite)
	   <svg class="icon"><use href="sprite.svg#name"></use></svg>, via gpipl_icon().
	   Stroke settings live here, not in the sprite, so one value styles every icon. */
	.icon {
		display: inline-block;
		flex-shrink: 0;
		width: 1.25em;
		height: 1.25em;
		fill: none;
		stroke: currentColor;
		stroke-width: var(--icon-stroke);
		stroke-linecap: round;
		stroke-linejoin: round;
		vertical-align: -0.2em;
	}
	.icon--s { width: 1em; height: 1em; }
	.icon--l { width: 1.75rem; height: 1.75rem; }
	.icon--xl { width: 2.5rem; height: 2.5rem; --icon-stroke: 1.5; }

	/* Icon on a square plate, e.g. capability or solution markers. */
	.icon-plate {
		display: inline-grid;
		place-items: center;
		width: 3rem;
		height: 3rem;
		border: var(--border);
		border-radius: var(--radius-m);
		color: var(--color-accent);
		background: var(--color-bg);
	}

	/* ============================================================ Buttons
	   Minimum 44px target. Primary = one per view where possible. */
	.button {
		--button-bg: transparent;
		--button-text: var(--color-text);
		--button-border: var(--color-control-border);

		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);
		min-height: var(--tap);
		padding: 0.625em 1.25em;
		border: 1px solid var(--button-border);
		border-radius: var(--radius-s);
		background-color: var(--button-bg);
		color: var(--button-text);
		font-size: var(--step-0);
		font-weight: var(--wght-semibold);
		font-stretch: var(--wdth-ui);
		line-height: 1.2;
		letter-spacing: 0.005em;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition:
			background-color var(--dur-fast) var(--ease-out),
			border-color var(--dur-fast) var(--ease-out),
			color var(--dur-fast) var(--ease-out);
	}
	.button:hover { text-decoration: none; }

	.button--primary {
		--button-bg: var(--button-primary-bg);
		--button-text: var(--button-primary-text);
		--button-border: var(--button-primary-bg);
	}
	.button--primary:hover {
		--button-bg: var(--button-primary-bg-hover);
		--button-border: var(--button-primary-bg-hover);
		--button-text: var(--button-primary-text);
	}

	.button--secondary:hover {
		--button-border: var(--color-text);
		--button-bg: color-mix(in srgb, var(--color-text) 5%, transparent);
	}

	/* Quiet: text-weight action with an underline, for secondary card links. */
	.button--quiet {
		--button-border: transparent;
		--button-text: var(--color-link);
		padding-inline: 0;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.22em;
	}
	.button--quiet:hover { --button-text: var(--color-link-hover); text-decoration: underline; text-decoration-thickness: 2px; }

	.button--small { min-height: 2.5rem; padding: 0.5em 1em; font-size: var(--step--1); }
	@media (pointer: coarse) { .button--small { min-height: var(--tap); } } /* full touch target on touch screens */
	.button--large { min-height: 3.25rem; padding: 0.75em 1.5em; font-size: var(--step-1); }
	.button--block { display: flex; width: 100%; }

	/* A trailing icon moves 2px on hover: feedback for the pointer, nothing more. */
	.button__icon { transition: transform var(--dur-base) var(--ease-out); }
	.button:hover .button__icon--end { transform: translateX(2px); }

	.button:disabled,
	.button[aria-disabled="true"] {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
	}

	.button-group { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
	@media (max-width: 29.99em) {
		.button-group--stack-mobile { flex-direction: column; align-items: stretch; }
		.button-group--stack-mobile > .button { width: 100%; }
	}

	@media (forced-colors: active) {
		.button { border-color: ButtonText; }
	}

	/* ============================================================ Text links */
	.link {
		color: var(--color-link);
		font-weight: var(--wght-medium);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.22em;
	}
	.link:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
	.link--plain { color: inherit; text-decoration: none; }
	.link--plain:hover { color: var(--color-link); text-decoration: underline; }
	.link--external .icon { width: 0.9em; height: 0.9em; margin-inline-start: 0.2em; vertical-align: -0.05em; }

	/* ============================================================ Badges / status */
	.badge {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		padding: 0.2em 0.6em;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-s);
		background: var(--color-surface);
		color: var(--color-text-muted);
		font-size: var(--step--1);
		font-weight: var(--wght-medium);
		font-stretch: var(--wdth-ui);
		line-height: 1.4;
		max-width: 100%;
		text-align: start;
		text-wrap: balance; /* long badges (e.g. category names on phones) wrap evenly */
	}
	.badge .icon { width: 1em; height: 1em; flex-shrink: 0; align-self: flex-start; margin-top: 0.2em; }

	.badge--outline { background: transparent; }

	.badge--verified {
		border-color: transparent;
		background: var(--color-accent-tint);
		color: var(--color-accent-strong);
	}
	.is-dark .badge--verified,
	.section--dark .badge--verified { color: var(--color-accent); }

	/* Amber is never text on light backgrounds: tint fill + derived dark amber text. */
	.badge--attention {
		border-color: transparent;
		background: var(--color-attention-tint);
		color: var(--color-attention-text);
	}

	/* Status dot: always paired with a text label (never colour alone). */
	.status {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		font-size: var(--step--1);
		color: var(--color-text-muted);
	}
	.status::before {
		content: "";
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background: var(--color-text-muted);
	}
	.status--ok::before { background: var(--color-accent); }
	.status--attention::before { background: var(--color-attention); }

	/* ============================================================ Breadcrumbs */
	.breadcrumbs {
		font-size: var(--step--1);
		color: var(--color-text-muted);
	}
	.breadcrumbs__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.25em 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.breadcrumbs__item { display: inline-flex; align-items: center; min-width: 0; }
	.breadcrumbs__item + .breadcrumbs__item::before {
		content: "/";
		margin-inline: 0.6em;
		color: var(--color-line-strong);
		speak: never;
	}
	.breadcrumbs a {
		display: inline-flex;
		align-items: center;
		min-height: var(--tap); /* 44px target; breadcrumbs are standalone links, not inline text */
		color: var(--color-text-muted);
		text-decoration: none;
	}
	.breadcrumbs a:hover { color: var(--color-link); text-decoration: underline; }
	.breadcrumbs [aria-current="page"] {
		color: var(--color-text);
		font-weight: var(--wght-medium);
		/* Long product names truncate instead of pushing the layout. */
		max-width: 32ch;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	@media (max-width: 29.99em) {
		.breadcrumbs [aria-current="page"] { max-width: 22ch; }
	}
	/* Small screens: one 44px row that scrolls sideways within itself (never the page),
	   instead of long category names wrapping into several rows. */
	@media (max-width: 47.99em) {
		.breadcrumbs__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
		.breadcrumbs__list::-webkit-scrollbar { display: none; }
		.breadcrumbs__item { flex-shrink: 0; white-space: nowrap; }
	}

	/* Fallback listings (search results): titles are standalone links, so give them a 44px target. */
	.entry-title a { display: inline-flex; align-items: center; min-height: var(--tap); }
	.not-found__text { font-size: var(--step-1); color: var(--color-text-muted); max-width: 52ch; }
}