/* License tiers and passes, shared by the home page pricing and the account
page. */

@layer tokens {
	:root {
		/* The gold contact chip on every pass, the same in both themes. */
		--color-chip-light: #f3d9a8;
		--color-chip-dark: #b88a45;
	}
}

@layer components {
	/* License tiers: a tier-* class sets --tier and its channel --ch-tier, and a
	tiered component reads only those. */
	.tier-community {
		--tier: var(--color-tier-community);
		--ch-tier: var(--ch-tier-community);
	}

	.tier-solo {
		--tier: var(--color-tier-solo);
		--ch-tier: var(--ch-tier-solo);
	}

	.tier-team {
		--tier: var(--color-tier-team);
		--ch-tier: var(--ch-tier-team);
	}

	/* The alpha terms, folded to one gold line. */
	.alpha-note {
		border: 1px solid rgb(var(--ch-action) / 50%);
		background: rgb(var(--ch-action) / 10%);
		color: var(--color-text-strong);

		> summary {
			display: flex;
			align-items: center;
			gap: var(--space-3);
			min-block-size: 3rem;
			padding: var(--space-2) var(--space-4);
			list-style: none;
			cursor: pointer;

			&::-webkit-details-marker {
				display: none;
			}

			> .icon {
				color: var(--color-action);
			}
		}

		strong {
			font-weight: 600;
		}
	}

	.alpha-note-more {
		margin-inline-start: auto;
		color: var(--color-action);
		font-size: 0.8rem;
		white-space: nowrap;
	}

	.alpha-note-body {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 1.25em + var(--space-3));
		font-size: 0.85rem;
		line-height: 1.5;
	}

	.passes {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* A license as a wide pass: the tier band, then the face beside the ticket
	stub, which wraps below on a narrow card. Every pass shares one minimum
	height, and renaming changes none of its geometry. */
	.pass {
		display: flex;
		min-block-size: 14.5rem;
		overflow: hidden;
		border: 1px solid rgb(var(--ch-tier) / 75%);
		border-radius: 14px;
		background:
			radial-gradient(ellipse at 100% 0%, rgb(var(--ch-tier) / 22%), transparent 55%),
			linear-gradient(135deg, rgb(var(--ch-surface)), var(--color-deep) 70%);
		box-shadow:
			inset 0 1px 0 rgb(var(--ch-paper) / 8%),
			0 14px 36px rgb(var(--ch-shadow) / 40%);
	}

	.pass-band {
		display: flex;
		flex: 0 0 4.5rem;
		flex-direction: column;
		align-items: center;
		gap: var(--space-5);
		padding-block: var(--space-5);
		background: linear-gradient(180deg, var(--tier), rgb(var(--ch-tier) / 45%));
		color: var(--color-void);

		> .icon {
			inline-size: 1.75rem;
			block-size: 1.75rem;
		}
	}

	.pass-band-name {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font-family: var(--font-display);
		font-size: 0.72rem;
		letter-spacing: 0.3em;
		text-transform: uppercase;
	}

	.pass-body {
		display: flex;
		container: pass / inline-size;
		flex: 1 1 0;
		flex-wrap: wrap;
		min-inline-size: 0;
	}

	.pass-face {
		display: flex;
		flex: 999 1 24rem;
		flex-direction: column;
		gap: var(--space-4);
		min-inline-size: 0;
		padding: var(--space-5) var(--space-5);
	}

	.pass-brand {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		color: var(--color-text-strong);
		font-family: var(--font-display);
		font-size: 0.82rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
	}

	.pass-kind {
		color: var(--tier);
		font-family: var(--font-data);
		font-size: 0.6rem;
		letter-spacing: 0.24em;
	}

	.pass-number {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-3) var(--space-5);
	}

	/* The gold contact chip, the same on every tier. */
	.pass-chip {
		flex: none;
		inline-size: 2.9rem;
		block-size: 2.1rem;
		border-radius: 6px;
		background: linear-gradient(135deg, var(--color-chip-light), var(--color-chip-dark));
		box-shadow:
			inset 0 0 0 1px rgb(var(--ch-shadow) / 25%),
			inset 15px 0 0 -14px rgb(var(--ch-shadow) / 35%),
			inset -15px 0 0 -14px rgb(var(--ch-shadow) / 35%),
			inset 0 11px 0 -10px rgb(var(--ch-shadow) / 35%),
			inset 0 -11px 0 -10px rgb(var(--ch-shadow) / 35%);
	}

	.pass-id {
		color: var(--color-text-strong);
		font-family: var(--font-data);
		font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.2rem);
		letter-spacing: 0.14em;
		overflow-wrap: anywhere;
	}

	.pass-fields {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--space-4) var(--space-6);
		margin-block-start: auto;
	}

	.pass-field {
		display: flex;
		flex: 0 1 auto;
		flex-direction: column;
		gap: var(--space-1);
		min-inline-size: 0;
	}

	.pass-field-wide {
		flex-basis: 16rem;
	}

	.pass-label {
		color: var(--color-text-dim);
		font-family: var(--font-data);
		font-size: 0.6rem;
		letter-spacing: 0.2em;
		line-height: 1.4;
		text-transform: uppercase;
	}

	/* The value and the rename input share this line height, so swapping one
	for the other keeps the card still. */
	.pass-value,
	.pass-input {
		color: var(--color-text-strong);
		font-size: 0.9rem;
		letter-spacing: 0.04em;
		line-height: 1.5;
		overflow-wrap: anywhere;
	}

	.pass-value {
		text-transform: uppercase;
	}

	.pass-scope,
	.pass-error {
		color: var(--color-text-dim);
		font-size: 0.78rem;
	}

	.pass-error {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		color: var(--color-danger);
	}

	/* Rename: the summary is the label row and, closed, the value with Rename;
	open, Cancel sits by the label and the form takes the value's line. */
	.pass-rename {
		> summary {
			display: flex;
			flex-wrap: wrap;
			align-items: baseline;
			gap: var(--space-1) var(--space-3);
			list-style: none;
			cursor: pointer;

			&::-webkit-details-marker {
				display: none;
			}

			> .pass-label {
				flex-basis: 100%;
			}
		}

		&[open] > summary > .pass-label {
			flex-basis: auto;
		}

		&:has([aria-invalid="true"]) .pass-label {
			color: var(--color-danger);
		}
	}

	.pass-rename-shown {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-3);
		min-inline-size: 0;
	}

	.pass-rename-open,
	.pass-rename-cancel {
		color: var(--color-info);
		font-size: 0.72rem;
		text-decoration: underline;
	}

	.pass-rename-cancel {
		display: none;
		color: var(--color-text-dim);
		font-size: 0.66rem;
	}

	.pass-rename[open] {
		.pass-rename-shown {
			display: none;
		}

		.pass-rename-cancel {
			display: inline;
		}
	}

	.pass-rename-form {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-block-start: var(--space-1);
	}

	.pass-input {
		flex: 1 1 auto;
		min-inline-size: 0;
		block-size: 1.5em;
		border: 0;
		border-block-end: 1px solid var(--tier);
		padding: 0 var(--space-1);
		background: rgb(var(--ch-tier) / 8%);
		font-family: inherit;

		&::placeholder {
			color: var(--color-text-dim);
		}

		&[aria-invalid="true"] {
			border-block-end-color: var(--color-danger);
			background: rgb(var(--ch-danger) / 8%);
		}
	}

	.pass-save {
		flex: none;
		border: 0;
		padding: 0;
		background: none;
		color: var(--tier);
		font: inherit;
		font-size: 0.72rem;
		line-height: 1.5;
		text-decoration: underline;
		cursor: pointer;
	}

	/* The ticket stub: a dashed tear line, the tier-tinted hex grid and four HUD
	corner brackets around what the next download is. */
	.pass-stub {
		position: relative;
		isolation: isolate;
		display: flex;
		flex: 0 0 16rem;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--space-2);
		border-inline-start: 1px dashed rgb(var(--ch-tier) / 45%);
		padding: var(--space-6) var(--space-6);
		background-color: rgb(var(--ch-void) / 60%);

		/* hex.svg strokes at 5% alpha; three copies of it as the mask add up to
		a grid that reads in the tier colour. */
		&::before {
			content: "";
			position: absolute;
			z-index: -1;
			inset: 0;
			background: var(--tier);
			mask: url("/assets/patterns/hex-c2c83d179d58aa11ca11bda559153a3287e40b548ec4d5ad47eba64de9bdb381.svg") 0 0 / 24px auto, url("/assets/patterns/hex-c2c83d179d58aa11ca11bda559153a3287e40b548ec4d5ad47eba64de9bdb381.svg") 0 0 / 24px auto,
				url("/assets/patterns/hex-c2c83d179d58aa11ca11bda559153a3287e40b548ec4d5ad47eba64de9bdb381.svg") 0 0 / 24px auto;
		}

		&::after {
			content: "";
			position: absolute;
			z-index: -1;
			inset: 10px;
			background:
				linear-gradient(var(--tier) 0 0) top left / 14px 2px,
				linear-gradient(var(--tier) 0 0) top left / 2px 14px,
				linear-gradient(var(--tier) 0 0) top right / 14px 2px,
				linear-gradient(var(--tier) 0 0) top right / 2px 14px,
				linear-gradient(var(--tier) 0 0) bottom left / 14px 2px,
				linear-gradient(var(--tier) 0 0) bottom left / 2px 14px,
				linear-gradient(var(--tier) 0 0) bottom right / 14px 2px,
				linear-gradient(var(--tier) 0 0) bottom right / 2px 14px;
			background-repeat: no-repeat;
			pointer-events: none;
		}
	}

	/* Wrapped below the face (the body is narrower than the two bases), the stub
	tears along its top instead. */
	@container pass (max-width: 40rem) {
		.pass-stub {
			flex-basis: 100%;
			border-inline-start: 0;
			border-block-start: 1px dashed rgb(var(--ch-tier) / 45%);
		}
	}

	.pass-readout-label {
		color: var(--tier);
		font-family: var(--font-data);
		font-size: 0.6rem;
		letter-spacing: 0.24em;
		text-transform: uppercase;
	}

	.pass-readout-value {
		color: var(--color-text-strong);
		font-family: var(--font-display);
		font-size: 1.65rem;
		letter-spacing: 0.04em;
		line-height: 1.1;
		text-shadow: 0 0 18px rgb(var(--ch-tier) / 55%);
		text-transform: uppercase;
	}

	.pass-readout-line {
		max-inline-size: 14rem;
		color: var(--color-text-dim);
		font-size: 0.72rem;
		line-height: 1.4;
	}

	/* A pass on the pricing section: a headline in place of the license ID, the
	price with its crossed-out earlier price, and the optional renewal, dimmed
	under a rule. */
	.pass-headline {
		color: var(--color-text-strong);
		font-family: var(--font-display);
		font-size: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.pass-price {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--space-1) var(--space-3);

		> s {
			color: var(--color-text-dim);
			font-size: 0.9rem;
		}
	}

	.pass-off {
		font-size: 1.15rem;
	}

	.pass-renewal {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-inline-size: min(100%, 12.5rem);
		border-block-start: 1px solid var(--color-line-low);
		padding-block: var(--space-2) 2px;
		color: var(--color-text-dim);
		font-size: 0.72rem;
		line-height: 1.4;
	}

	.pass-renewal-price {
		font-size: 0.82rem;

		> span {
			font-size: 0.72rem;
		}
	}

	/* The Enterprise card: the pass layout without band, tier colour or foil;
	the stub keeps its tear line but no hex grid or brackets. */
	.pass-plain {
		--tier: var(--color-info);
		--ch-tier: var(--ch-info);

		border-color: rgb(var(--ch-edge) / 45%);
		background: linear-gradient(135deg, rgb(var(--ch-surface)), var(--color-deep) 70%);
		transition: border-color var(--motion-fast), box-shadow var(--motion-fast);

		/* No holo here: hover and focus light the card with a glow instead. */
		&:hover,
		&:focus-within {
			border-color: rgb(var(--ch-glow));
			box-shadow:
				inset 0 0 60px rgb(var(--ch-glow) / 22%),
				0 0 0 1px rgb(var(--ch-glow) / 80%),
				0 0 24px rgb(var(--ch-glow) / 65%),
				0 0 64px rgb(var(--ch-glow) / 45%),
				0 0 120px rgb(var(--ch-edge) / 30%),
				0 14px 36px rgb(var(--ch-shadow) / 40%);
		}

		@media (prefers-reduced-motion: reduce) {
			transition: none;
		}

		.pass-stub {
			background-color: rgb(var(--ch-void) / 45%);

			&::before,
			&::after {
				display: none;
			}
		}

		.pass-readout-line {
			max-inline-size: 16rem;
			font-size: 0.85rem;
			line-height: 1.5;
		}
	}

	.pass-heading {
		font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem);
		--track: 0.04em;
	}

	.pass-lede {
		max-inline-size: 40rem;
		line-height: 1.6;
	}

	/* The enterprise spec sheet: a 2x2 grid split by hairlines between cells
	   only, each cell an indexed mono title over one sentence. */
	.pass-points {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 0;

		> div {
			padding: var(--space-3) var(--space-4);
		}

		> div:nth-child(odd) { padding-inline-start: 0; }
		> div:nth-child(even) {
			border-inline-start: 1px solid var(--color-line-low);
			padding-inline-end: 0;
		}
		> div:nth-child(n + 3) { border-block-start: 1px solid var(--color-line-low); }

		dt {
			display: flex;
			align-items: baseline;
			gap: var(--space-2);
			color: var(--color-text-strong);
			font-family: var(--font-data);
			font-size: 0.72rem;
			font-weight: 600;
			letter-spacing: 0.08em;
			text-transform: uppercase;
		}

		dd {
			margin: var(--space-1) 0 0;
			font-size: 0.88rem;
			line-height: 1.5;
		}

		@media (width < 40rem) {
			grid-template-columns: 1fr;

			> div, > div:nth-child(odd), > div:nth-child(even) {
				border-inline-start: 0;
				padding-inline: 0;
			}
			> div + div { border-block-start: 1px solid var(--color-line-low); }
		}
	}

	.pass-point-index {
		color: var(--color-info);
		font-family: var(--font-data);
		font-size: 0.66rem;
		font-weight: 400;
		font-variant-numeric: tabular-nums;
		letter-spacing: 0;
	}

	/*
	The holographic pass. <holo-pass> (rocket/holo-pass.js) draws the tilt and
	its light layers in its shadow root; this sheet sets the host box, the
	pattern images (so their asset paths are rewritten) and the card's nebula.
	The shadow root inherits --ch-tier and the theme's channels. Without the
	script the pass is the flat card above.
	*/
	holo-pass {
		display: block;
		border-radius: 14px;
		/* The effect covers the card face only: not the tier band (4.5rem) nor the
		stub (16rem, or below the face on a narrow card, where only the band is left
		out). */
		--holo-clip: inset(0 16rem 0 4.5rem);
		--holo-clip-narrow: inset(0 0 0 4.5rem);

		/* On the light theme's pale card the layers darken instead of lighting:
		--holo-rest keeps a faint cosmos and --holo-hover scales the pointer's
		effect. */
		:root[data-theme="light"] & {
			--holo-blend: multiply;
			--holo-boost: 0.9;
			--holo-saturate: 1;
			--holo-glitter-blend: difference;
			--holo-glitter-strength: 0.35;
			--holo-hover: 0.4;
			--holo-rest: 0.4;
			--holo-glare-blend: multiply;
			--holo-rim: 7%;
		}

		--holo-glitter-image: url("/assets/patterns/glitter-87f558e4fc5804440194623bf4999100af4d38c71cfa17c4ae8001222d74d8d6.svg");
		--holo-cosmos-image: url("/assets/patterns/cosmos-13ed8acb84383e0844ffdff60acb72a95062600f8ad5074cdbf960b9624013ea.svg");
	}

	/* The nebula: soft clouds in the tier and its neighbours, fixed to the card. */
	holo-pass:defined > .pass {
		background:
			radial-gradient(ellipse 38% 60% at 20% 35%, rgb(var(--ch-edge) / 32%), transparent 70%),
			radial-gradient(ellipse 32% 50% at 74% 65%, rgb(var(--ch-glow) / 22%), transparent 70%),
			radial-gradient(ellipse 45% 40% at 50% 10%, rgb(var(--ch-tier) / 30%), transparent 70%),
			radial-gradient(ellipse 28% 45% at 92% 20%, rgb(var(--ch-tier) / 24%), transparent 70%),
			radial-gradient(ellipse at 100% 0%, rgb(var(--ch-tier) / 22%), transparent 55%),
			linear-gradient(135deg, rgb(var(--ch-surface)), var(--color-deep) 70%);
	}

	/* A compact button in the tier's colour: a card's download and Buy. */
	.tier-button {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: var(--space-2);
		min-block-size: 2.5rem;
		margin-block-start: var(--space-1);
		border: 1px solid var(--tier, var(--color-edge));
		padding: 0 var(--space-4);
		background: rgb(var(--ch-tier, var(--ch-edge)) / 16%);
		color: var(--color-text-strong);
		font-family: var(--font-display);
		font-size: 0.66rem;
		letter-spacing: 0.1em;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		cursor: pointer;
		transition: filter var(--motion-fast);

		&:hover:not(:disabled) {
			filter: var(--control-hover) drop-shadow(0 0 8px rgb(var(--ch-tier, var(--ch-edge)) / 45%));
			color: var(--color-text-strong);
		}

		&:disabled {
			border-color: var(--color-line-low);
			background: none;
			color: var(--color-text-dim);
			cursor: not-allowed;
		}
	}

	/* Hovering a pass, or focusing inside it, makes its button solid in the tier
	colour: dark ink on the bright dark-theme tiers, white on the deeper light ones. */
	holo-pass:is(:hover, :focus-within) .tier-button:not(:disabled) {
		border-color: var(--tier);
		background: var(--tier);
		color: var(--holo-button-ink, var(--color-deep));
		font-weight: 700;

		:root[data-theme="light"] & {
			--holo-button-ink: rgb(var(--ch-surface));
		}
	}
}