@layer reset, tokens, base, components, utilities;
@import url("./tickets.css");

@layer reset {
	.sheet,
	.sheet *,
	.sheet *::before,
	.sheet *::after,
	.form-ui,
	.form-ui *,
	.form-ui *::before,
	.form-ui *::after {
		box-sizing: border-box;
	}

	.sheet h1,
	.sheet h2,
	.sheet h3,
	.sheet p,
	.sheet figure,
	.sheet fieldset,
	.form-ui h1,
	.form-ui h2,
	.form-ui h3,
	.form-ui p,
	.form-ui figure,
	.form-ui fieldset {
		margin: 0;
	}

	.sheet button,
	.sheet input,
	.sheet select,
	.sheet textarea,
	.form-ui button,
	.form-ui input,
	.form-ui select,
	.form-ui textarea {
		font: inherit;
	}

	.sheet button,
	.sheet select,
	.form-ui button,
	.form-ui select {
		cursor: pointer;
	}

	.sheet img,
	.form-ui img {
		display: block;
		max-width: 100%;
	}
}

@layer tokens {
	:where(.sheet, .form-ui) {
		color-scheme: light;
		--paper: #ffffff;
		--ink: #161616;
		--quiet-ink: #555555;
		--wash: #f2f2f2;
		--rule: #8a8a8a;
		--focus: #1356a2;
		--status-error: #c62828;
		--status-warning: #ed8b23;
		--status-info: #87cefa;
		--status-success: #26853b;
		--the-halley-100: #1ea0cf;
		--picturehouse-100: #f95407;
		--juxtapose-100: #ff72ff;
		--rainbow: linear-gradient(
			90deg,
			magenta 0%,
			rebeccapurple 34%,
			dodgerblue 68%,
			green 100%
		);
		--space-1: 4px;
		--space-2: 8px;
		--space-3: 12px;
		--space-4: 16px;
		--space-6: 24px;
		--space-8: 32px;
		--space-12: 48px;
		--border: 1px;
		--radius: 0;
		--control-height: 48px;
		--font-body: Roboto, Arial, sans-serif;
		--type-caption: 12px;
		--type-small: 14px;
		--type-body: 16px;
		--type-section: 18px;
		--type-heading: 22px;
		--type-display: 28px;
		--focus-outline: 3px solid var(--focus);
	}
}

@layer base {
	@font-face {
		font-family: Roboto;
		src: url("/css/fonts/Roboto-Regular.ttf") format("truetype");
		font-style: normal;
		font-weight: 400;
		font-display: swap;
	}

	.form-ui {
		color: var(--ink);
		container-type: inline-size;
		font-family: var(--font-body);
		font-size: var(--type-body);
		line-height: 1.5;
		width: 100%;
		padding: 0;
	}

	.form-ui button,
	.form-ui input,
	.form-ui select,
	.form-ui textarea,
	.sheet button,
	.sheet input,
	.sheet select,
	.sheet textarea {
		border-radius: var(--radius);
	}

	.form-ui :focus-visible,
	.sheet :focus-visible {
		outline: var(--focus-outline);
		outline-offset: 2px;
	}

	.form-ui a,
	.sheet a {
		color: inherit;
	}

	.form-ui ::selection,
	.sheet ::selection {
		background: var(--ink);
		color: var(--paper);
	}

	.form-ui[data-motion="reduced"] *,
	.form-ui[data-motion="reduced"] *::before,
	.form-ui[data-motion="reduced"] *::after,
	.sheet[data-motion="reduced"] *,
	.sheet[data-motion="reduced"] *::before,
	.sheet[data-motion="reduced"] *::after {
		scroll-behavior: auto;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
	}
}

@layer components {
	.sheet {
		position: fixed;
		inset: auto 0 0;
		width: 100%;
		max-width: none;
		max-height: 92dvh;
		margin: 0;
		padding: 0;
		overflow: visible;
		border: var(--border) solid var(--ink);
		border-radius: var(--radius);
		background: var(--paper);
		box-shadow: none;
		color: var(--ink);
		font-family: var(--font-body);
		font-size: var(--type-body);
		line-height: 1.5;
		animation: sheet-in 180ms ease-out both;
		container-type: inline-size;
	}

	.sheet::backdrop {
		background: color-mix(in srgb, var(--ink) 70%, transparent);
	}

	.sheet .sheet__frame {
		position: relative;
		display: flex;
		max-height: 92dvh;
		flex-direction: column;
		padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--paper);
	}

	.sheet .sheet__frame::before {
		position: absolute;
		z-index: 1;
		inset: 0 0 auto;
		height: 3px;
		background: var(--rainbow);
		content: "";
	}

	.sheet .sheet__header {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		padding: var(--space-4);
		border-bottom: var(--border) solid var(--rule);
		background: var(--paper);
	}

	.sheet .sheet__eyebrow {
		color: var(--quiet-ink);
		font-size: var(--type-caption);
	}

	.sheet .sheet__header h2 {
		margin-top: var(--space-1);
		font-size: var(--type-section);
	}

	.sheet .sheet__close {
		min-width: 64px;
	}

	.sheet .sheet__body {
		min-height: 0;
		overflow: auto;
		overscroll-behavior: contain;
	}

	.sheet .sheet__content {
		padding: var(--space-4);
	}

	.sheet .sheet__actions {
		z-index: 1;
		flex: 0 0 auto;
		padding: var(--space-3) var(--space-4);
		padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
		border-top: var(--border) solid var(--rule);
		background: var(--paper);
	}

	.sheet .action-row {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	:where(.sheet, .form-ui) .flow {
		display: grid;
		gap: var(--space-4);
		width: 100%;
	}

	:where(.sheet, .form-ui) [data-role="journey"] {
		display: flex;
		gap: var(--space-3);
		margin: 0 0 var(--space-4);
		padding: 0;
		list-style: none;
		font-size: var(--type-small);
		counter-reset: journey;
	}

	:where(.sheet, .form-ui) [data-journey-step] {
		flex: 1;
		padding-top: var(--space-2);
		border-top: 3px solid color-mix(in srgb, var(--ink) 15%, transparent);
		opacity: 0.6;
		counter-increment: journey;
	}

	:where(.sheet, .form-ui) [data-journey-step]::before {
		content: counter(journey) ". ";
	}

	:where(.sheet, .form-ui) [data-journey-step][aria-current="step"] {
		border-color: var(--ink);
		font-weight: 700;
		opacity: 1;
	}

	:where(.sheet, .form-ui) [data-journey-step]:has(~ [aria-current="step"]),
	:where(.sheet, .form-ui)
		[data-role="journey"][data-complete]
		[data-journey-step] {
		border-color: var(--ink);
		opacity: 1;
	}

	:where(.sheet, .form-ui)
		[data-journey-step]:has(~ [aria-current="step"])::before,
	:where(.sheet, .form-ui)
		[data-role="journey"][data-complete]
		[data-journey-step]::before {
		content: "✓ ";
	}

	:where(.sheet, .form-ui) .lead {
		max-width: 55ch;
		font-size: var(--type-body);
		line-height: 1.55;
	}

	:where(.sheet, .form-ui) .body-copy {
		color: var(--quiet-ink);
	}

	:where(.sheet, .form-ui) .field-grid {
		display: grid;
		gap: var(--space-4);
	}

	:where(.sheet, .form-ui) .field,
	:where(.sheet, .form-ui) .field-group {
		display: grid;
		min-width: 0;
		gap: var(--space-2);
		padding: 0;
		border: 0;
	}

	:where(.sheet, .form-ui) .field {
		--field-border: var(--rule);
		align-content: start;
	}

	:where(.sheet, .form-ui) .field:has(:user-invalid),
	:where(.sheet, .form-ui) .field:has([aria-invalid="true"]) {
		--field-border: var(--ink);
	}

	:where(.sheet, .form-ui) .field__label,
	:where(.sheet, .form-ui) .field-group legend {
		font-size: var(--type-body);
		font-weight: 700;
	}

	:where(.sheet, .form-ui) .field-group legend {
		margin-bottom: var(--space-2);
	}

	:where(.sheet, .form-ui) .field__hint,
	:where(.sheet, .form-ui) .optional,
	:where(.sheet, .form-ui) .required {
		color: var(--quiet-ink);
		font-size: var(--type-small);
		font-weight: 400;
	}

	:where(.sheet, .form-ui) .input {
		width: 100%;
		min-height: var(--control-height);
		padding: var(--space-2) var(--space-3);
		border: var(--border) solid var(--field-border, var(--rule));
		background: var(--paper);
		color: var(--ink);
		font-size: max(var(--type-body), 16px);
	}

	:where(.sheet, .form-ui) .input:disabled {
		background-color: var(--wash);
		color: var(--quiet-ink);
	}

	:where(.sheet, .form-ui) select.input {
		appearance: none;
		padding-inline-end: var(--space-12);
		background-image: url("/css/ui/chevron.svg");
		background-repeat: no-repeat;
		background-position: right var(--space-4) center;
		background-size: 16px;
	}

	:where(.sheet, .form-ui) .field__error {
		color: var(--ink);
		font-size: var(--type-small);
		font-weight: 700;
	}

	:where(.sheet, .form-ui) .input--file,
	:where(.sheet, .form-ui) .upload__input {
		height: auto;
		min-height: var(--control-height);
		padding-block: var(--space-2);
	}

	:where(.sheet, .form-ui) .input--range {
		padding-inline: 0;
		border: 0;
	}

	:where(.sheet, .form-ui) .btn {
		position: relative;
		display: inline-flex;
		min-width: 44px;
		min-height: var(--control-height);
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-4);
		border: var(--border) solid var(--ink);
		background: var(--paper);
		color: var(--ink);
		font-size: var(--type-body);
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
	}

	:where(.sheet, .form-ui) .input-with-action {
		display: flex;
	}

	:where(.sheet, .form-ui) .input-with-action .input {
		min-width: 0;
	}

	:where(.sheet, .form-ui) .input-with-action .btn {
		flex: 0 0 auto;
		min-height: var(--control-height);
		border-left: 0;
	}

	:where(.sheet, .form-ui) .btn:hover:not(:disabled) {
		background: var(--wash);
	}

	:where(.sheet, .form-ui) .btn:disabled {
		cursor: not-allowed;
		opacity: 0.55;
	}

	:where(.sheet, .form-ui) .btn--primary {
		background: var(--ink);
		color: var(--paper);
	}

	:where(.sheet, .form-ui) .btn--primary:hover:not(:disabled) {
		background: var(--ink);
	}

	:where(.sheet, .form-ui) .btn--primary::after {
		position: absolute;
		inset: auto 0 calc(-1 * var(--border));
		height: 3px;
		background: var(--rainbow);
		content: "";
		opacity: 0;
	}

	:where(.sheet, .form-ui) .btn--primary:focus-visible::after,
	:where(.sheet, .form-ui) .btn--primary:active::after {
		opacity: 1;
	}

	:where(.sheet, .form-ui) .btn--secondary {
		background: var(--wash);
	}

	:where(.sheet, .form-ui) .btn--quiet {
		border-color: transparent;
	}

	:where(.sheet, .form-ui) .btn--danger {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--paper);
	}

	:where(.sheet, .form-ui) .btn--loading {
		cursor: progress;
	}

	:where(.sheet, .form-ui) .check,
	:where(.sheet, .form-ui) .switch {
		display: flex;
		min-height: 44px;
		align-items: center;
		gap: var(--space-3);
	}

	:where(.sheet, .form-ui) .check input,
	:where(.sheet, .form-ui) .switch input,
	:where(.sheet, .form-ui) .choice input,
	:where(.sheet, .form-ui) .radio-pill input {
		width: 20px;
		height: 20px;
		flex: 0 0 auto;
		accent-color: var(--ink);
	}

	:where(.sheet, .form-ui) .switch input {
		width: 44px;
		height: 24px;
	}

	:where(.sheet, .form-ui) .boolean {
		display: flex;
		min-width: 0;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-3);
		padding: 0;
		border: 0;
	}

	:where(.sheet, .form-ui) .boolean__options {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 144px;
		flex: 0 0 auto;
		border: var(--border) solid var(--ink);
	}

	:where(.sheet, .form-ui) .boolean__option {
		position: relative;
	}

	:where(.sheet, .form-ui) .boolean__option + .boolean__option {
		border-left: var(--border) solid var(--ink);
	}

	:where(.sheet, .form-ui) .boolean__label {
		display: grid;
		min-height: var(--control-height);
		place-items: center;
		cursor: pointer;
	}

	:where(.sheet, .form-ui)
		.boolean__option:has(input:checked)
		.boolean__label {
		background: var(--ink);
		color: var(--paper);
		font-weight: 700;
	}

	:where(.sheet, .form-ui) .boolean__option:has(input:focus-visible) {
		z-index: 1;
		outline: var(--focus-outline);
		outline-offset: 2px;
	}

	:where(.sheet, .form-ui) .choice-stack {
		display: grid;
		gap: var(--space-2);
	}

	:where(.sheet, .form-ui) .choice {
		display: flex;
		min-height: 64px;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-3);
		border: var(--border) solid var(--rule);
	}

	:where(.sheet, .form-ui) .choice:has(input:checked) {
		border-color: var(--ink);
		background: var(--wash);
	}

	:where(.sheet, .form-ui) .choice__text {
		display: grid;
		min-width: 0;
		flex: 1;
		gap: var(--space-1);
	}

	:where(.sheet, .form-ui) .choice__text span {
		color: var(--quiet-ink);
		font-size: var(--type-small);
	}

	:where(.sheet, .form-ui) .choice__price {
		white-space: nowrap;
	}

	:where(.sheet, .form-ui) .radio-pill {
		display: inline-flex;
		min-height: 44px;
		align-items: center;
		gap: var(--space-2);
		padding-inline: var(--space-2);
		border: var(--border) solid var(--rule);
	}

	:where(.sheet, .form-ui) .radio-pill:has(input:checked) {
		border-color: var(--ink);
		background: var(--wash);
	}

	:where(.sheet, .form-ui) .otp {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--space-2);
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}

	:where(.sheet, .form-ui) .otp__input {
		min-width: 0;
		padding-inline: 0;
		text-align: center;
	}

	:where(.sheet, .form-ui) .stepper {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: min(100%, 150px);
		justify-self: start;
		align-items: center;
		border: var(--border) solid var(--rule);
	}

	:where(.sheet, .form-ui) .stepper__button {
		min-height: 44px;
		padding: 0;
		border: 0;
	}

	:where(.sheet, .form-ui) .stepper__value {
		min-width: 0;
		text-align: center;
		font-weight: 700;
	}

	:where(.sheet, .form-ui) .upload {
		display: grid;
		gap: var(--space-2);
	}

	:where(.sheet, .form-ui) .upload__preview,
	:where(.sheet, .form-ui) .image-preview {
		max-height: 180px;
		object-fit: contain;
		object-position: left;
		border: var(--border) solid var(--rule);
	}

	:where(.sheet, .form-ui) .form-status {
		padding: var(--space-3);
		border-left: 3px solid var(--status-info);
		background: var(--wash);
	}

	:where(.sheet, .form-ui) .form-status--error {
		border-left-color: var(--status-error);
	}

	:where(.sheet, .form-ui) .form-status--warning {
		border-left-color: var(--status-warning);
	}

	:where(.sheet, .form-ui) .form-status--info {
		border-left-color: var(--status-info);
	}

	:where(.sheet, .form-ui) .form-status--success {
		border-left-color: var(--status-success);
	}

	:where(.sheet, .form-ui) .form-status--error,
	:where(.sheet, .form-ui) .form-status--success {
		font-weight: 700;
	}

	:where(.sheet, .form-ui) {
		.loading-mark {
			width: 14px;
			height: 14px;
			flex: 0 0 auto;
			border: 2px solid currentColor;
			border-right-color: transparent;
			border-radius: 50%;
			animation: loading-spin 700ms linear infinite;
		}
	}

	:where(.sheet, .form-ui) .visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		clip-path: inset(50%);
	}

	@media (forced-colors: active) {
		:where(.sheet, .form-ui) select.input {
			appearance: auto;
			background-image: none;
		}

		:where(.sheet, .form-ui)
			.boolean__option:has(input:checked)
			.boolean__label,
		:where(.sheet, .form-ui) .btn--primary {
			border: 1px solid ButtonText;
			background: ButtonFace;
			color: ButtonText;
			forced-color-adjust: auto;
		}
	}
}

@layer utilities {
	:where(.sheet, .form-ui) .hidden {
		display: none;
	}

	:where(.sheet, .form-ui)[hidden],
	:where(.sheet, .form-ui) [hidden] {
		display: none;
	}

	@container (min-width: 520px) {
		.sheet .sheet__content {
			padding: var(--space-6);
		}

		.sheet .field-grid,
		.form-ui .field-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}

@media (min-width: 900px) {
	@layer components {
		.sheet {
			inset: 50% auto auto 50%;
			width: min(calc(100vw - var(--space-8)), 480px);
			max-height: 92dvh;
			transform: translate(-50%, -50%);
			animation: none;
		}

		.sheet.sheet--wide {
			width: min(calc(100vw - var(--space-8)), 560px);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.form-ui *,
	.form-ui *::before,
	.form-ui *::after,
	.sheet *,
	.sheet *::before,
	.sheet *::after {
		scroll-behavior: auto;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
	}
}

@layer components {
	.form-ui.form-page {
		width: min(calc(100% - var(--space-8)), 560px);
		margin: var(--space-8) auto;
		border: var(--border) solid var(--rule);
	}

	:where(.sheet, .form-ui) :where(.password-control) .input {
		padding-inline-end: calc(var(--space-12) + var(--space-8));
	}

	:where(.sheet, .form-ui) .password-control {
		position: relative;
		min-width: 0;
	}

	:where(.sheet, .form-ui) .password-control__toggle {
		position: absolute;
		inset-inline-end: var(--border);
		bottom: var(--border);
		min-height: calc(var(--control-height) - 2 * var(--border));
		width: calc(var(--space-12) + var(--space-8));
		padding: var(--space-2);
	}

	.form-page .sheet__frame {
		border-top: 3px solid transparent;
		border-image: var(--rainbow) 1;
	}

	.form-ui .standalone-form {
		padding: var(--space-6);
		max-width: 560px;
		margin-inline: auto;
	}
}

@keyframes sheet-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (min-width: 900px) {
	@keyframes sheet-in {
		from {
			opacity: 0;
			transform: translate(-50%, calc(-50% + 8px));
		}

		to {
			opacity: 1;
			transform: translate(-50%, -50%);
		}
	}
}

@keyframes loading-spin {
	to {
		transform: rotate(360deg);
	}
}