/*
 * Front-end ticket forms (submit, view, my tickets).
 *
 * Every color comes from a --revticket-* custom property declared once below.
 * Each one reads the Revolutionary theme palette when the theme prints it
 * (--dash-mode-*, and the --rev-btn-* button tokens), and otherwise falls back
 * to a neutral derived from the inherited text color. That way the forms follow
 * the site's palette in light and dark mode with no per-site CSS, and a site
 * without the theme still gets readable, on-palette controls. No brand color is
 * hard-coded here. Sites can still override any --revticket-* property.
 */
.revticket-form,
.revticket-reply-form,
.revticket-view,
.revticket-my-tickets,
.revticket-notice {
	--revticket-text: var(--dash-mode-text, currentColor);
	--revticket-muted: var(--dash-mode-muted, currentColor);
	--revticket-border: var(--dash-mode-border, currentColor);
	--revticket-surface: var(--dash-mode-surface, transparent);
	--revticket-surface-alt: var(--dash-mode-surface-alt, transparent);
	--revticket-accent: var(--rev-btn-bg, var(--dash-mode-accent, currentColor));
	/* Focus rings use the text color, not the accent: a pale accent such as a
	   yellow brand color is under 3:1 on a light page. */
	--revticket-focus: var(--dash-mode-text, currentColor);
	--revticket-danger: #8a1c13;
	--revticket-target: 44px;
	color: var(--revticket-text);
}

/* Where color-mix() is supported, soften the fallback neutrals. The theme
   tokens, when present, still win because they come first in each var(). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.revticket-form,
	.revticket-reply-form,
	.revticket-view,
	.revticket-my-tickets,
	.revticket-notice {
		/* 80% of the text color keeps muted copy above 4.5:1 on any page whose
		   body text itself clears 7:1. */
		--revticket-muted: var(--dash-mode-muted, color-mix(in srgb, currentColor 80%, transparent));
		--revticket-border: var(--dash-mode-border, color-mix(in srgb, currentColor 22%, transparent));
		--revticket-surface-alt: var(--dash-mode-surface-alt, color-mix(in srgb, currentColor 6%, transparent));
		/* Input boundaries must reach 3:1 (WCAG 1.4.11), and a decorative
		   hairline such as #d4d4d4 does not, so controls mix their own. */
		--revticket-control-border: color-mix(in srgb, var(--revticket-text) 60%, transparent);
		/* Red pulled toward the text color: dark red on a light page and light
		   red on a dark one, above 4.5:1 either way, with or without the theme. */
		--revticket-danger: color-mix(in srgb, #d93025 55%, currentColor);
	}
}

/* Error red has to change with the page: dark red is unreadable on a dark
   surface. The theme marks the active mode on <html>. */
html[data-color-mode="dark"] :is(.revticket-form, .revticket-reply-form, .revticket-view, .revticket-notice) {
	--revticket-danger: #ffa198;
}

.revticket-form,
.revticket-reply-form,
.revticket-view,
.revticket-my-tickets {
	font-family: var(--rev-font, inherit);
	max-width: 720px;
	font-size: 1rem;
	line-height: 1.5;
}

.revticket-form p,
.revticket-reply-form p {
	margin: 0 0 1rem;
}

.revticket-form label,
.revticket-reply-form label {
	display: inline-block;
	margin-bottom: 0.25rem;
	font-weight: 600;
	color: inherit;
}

.revticket-form input[type="text"],
.revticket-form input[type="email"],
.revticket-form input[type="date"],
.revticket-form input[type="number"],
.revticket-form input[type="url"],
.revticket-form input[type="tel"],
.revticket-form input[type="file"],
.revticket-form select,
.revticket-form textarea,
.revticket-reply-form textarea {
	width: 100%;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--revticket-text);
	border: 1px solid var(--revticket-control-border, var(--revticket-text));
	border-radius: 4px;
	background: var(--revticket-surface);
	color: var(--revticket-text);
	font: inherit;
	box-sizing: border-box;
}

.revticket-form select option {
	background: var(--dash-mode-surface, Canvas);
	color: var(--dash-mode-text, CanvasText);
}

.revticket-form input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0 0.5rem 0 0;
	vertical-align: middle;
	accent-color: var(--revticket-text);
}

.revticket-form textarea,
.revticket-reply-form textarea {
	min-height: 8rem;
	resize: vertical;
}

/* Buttons read the theme's --rev-btn-* tokens. Without them the fallback is an
   outlined button in the text color, which is legible on any background. */
.revticket-form button,
.revticket-reply-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rev-btn-bg, var(--dash-mode-accent, transparent));
	color: var(--rev-btn-color, var(--dash-mode-accent-text, var(--revticket-text)));
	border: var(--rev-btn-border, 2px solid currentColor);
	padding: var(--rev-btn-padding, 0.55rem 1rem);
	border-radius: var(--rev-btn-radius, 4px);
	cursor: pointer;
	font-family: var(--rev-btn-font-family, inherit);
	font-size: var(--rev-btn-font-size, 1rem);
	font-weight: var(--rev-btn-font-weight, 600);
	line-height: 1.25;
	text-transform: var(--rev-btn-text-transform, none);
	box-shadow: var(--rev-btn-shadow, none);
	transition: var(--rev-btn-transition, background .15s ease);
}

.revticket-form button:hover,
.revticket-reply-form button:hover {
	background: var(--rev-btn-bg-hover, var(--dash-mode-accent-hover, var(--revticket-surface-alt)));
	color: var(--rev-btn-color-hover, var(--rev-btn-color, var(--dash-mode-accent-text, var(--revticket-text))));
	box-shadow: var(--rev-btn-shadow-hover, var(--rev-btn-shadow, none));
	transform: translateY(var(--rev-btn-lift, 0));
}

/* Touch targets: at least 44px tall wherever the pointer is coarse or the
   screen is phone sized (WCAG 2.5.5). */
@media (any-pointer: coarse), (max-width: 600px) {
	.revticket-form button,
	.revticket-reply-form button,
	.revticket-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
	.revticket-form select {
		min-height: var(--revticket-target);
	}

	.revticket-form button,
	.revticket-reply-form button {
		min-width: var(--revticket-target);
	}

	.revticket-form input[type="checkbox"] {
		width: 1.5rem;
		height: 1.5rem;
	}

	.revticket-form input[type="checkbox"] + label,
	.revticket-internal-toggle label {
		min-height: var(--revticket-target);
		display: inline-flex;
		align-items: center;
	}
}

.revticket-notice {
	padding: 0.75rem 1rem;
	border-radius: 4px;
	margin: 0 0 1rem;
	border: 1px solid var(--revticket-border);
	border-left-width: 4px;
	background: var(--revticket-surface-alt);
}

.revticket-notice p {
	margin: 0;
	color: inherit;
}

/* Status is carried by the words in the notice; the rule color only
   reinforces it, so the text itself stays in the theme's text color. */
.revticket-notice-success {
	border-left-color: #34a853;
}

.revticket-notice-error {
	border-left-color: var(--revticket-danger);
}

.revticket-my-tickets {
	width: 100%;
	border-collapse: collapse;
}

.revticket-my-tickets th,
.revticket-my-tickets td {
	text-align: left;
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid var(--revticket-border);
	color: inherit;
}

.revticket-my-tickets thead th {
	background: var(--revticket-surface-alt);
	font-weight: 600;
}

.revticket-my-tickets a {
	display: inline-block;
	padding: 0.25rem 0;
}

.revticket-view header h2 {
	margin: 0 0 0.25rem;
	color: inherit;
}

.revticket-view .revticket-meta {
	color: var(--revticket-muted);
	margin: 0 0 1rem;
}

.revticket-view .revticket-body {
	border-left: 3px solid var(--revticket-accent);
	padding: 0.5rem 1rem;
	background: var(--revticket-surface-alt);
	margin: 0 0 1.5rem;
}

.revticket-replies {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}

.revticket-replies li {
	padding: 0.75rem 1rem;
	border: 1px solid var(--revticket-border);
	border-radius: 4px;
	margin-bottom: 0.5rem;
	background: var(--revticket-surface);
}

.revticket-replies li strong {
	margin-right: 0.5rem;
}

.revticket-replies li em {
	color: var(--revticket-muted);
}

/* Honeypot. Hidden from people without display:none, which some bots detect
   and skip. Paired with aria-hidden and tabindex="-1" on the markup, so it is
   absent from both the tab order and the accessibility tree. */
.revticket-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.revticket-required-key {
	font-size: 0.9em;
	color: var(--revticket-muted);
}

.revticket-required-mark {
	color: inherit;
	font-weight: 700;
}

/* Visually hidden text alternative for the required marker. */
.revticket-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.revticket-help {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.9em;
	color: var(--revticket-muted);
}

/* #8a1c13 is 7.53:1 on white and the dark-mode value #ffa198 is over 9:1 on
   #0a0a0a. Error text must not rely on color alone, so it is also bound to the
   field with aria-describedby and aria-invalid. */
.revticket-field-error {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--revticket-danger);
}

.revticket-form :is(input, select, textarea)[aria-invalid="true"] {
	border-color: var(--revticket-danger);
	border-width: 2px;
}

.revticket-my-tickets caption {
	text-align: left;
	font-weight: 600;
	padding-bottom: 0.5rem;
	color: inherit;
}

/* Do not let a theme's reset drop the focus ring. The ring uses the text color
   with a surface-colored halo, so it clears 3:1 in both modes. */
.revticket-form :focus-visible,
.revticket-reply-form :focus-visible,
.revticket-my-tickets a:focus-visible,
.revticket-notice:focus-visible {
	outline: 2px solid var(--revticket-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--dash-mode-surface, transparent);
}

/* Internal notes must be unmistakable in the thread. Color alone would not be
   enough, so the badge carries the meaning in words and the left rule and tint
   only reinforce it. */
.revticket-reply-internal {
	border-left: 4px solid #b26a00;
	background: var(--revticket-surface-alt);
}

.revticket-note-badge {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.85em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: inherit;
}

.revticket-internal-toggle label {
	font-weight: normal;
}

/* The native [hidden] attribute is only display:none by UA stylesheet, and a
   theme rule as ordinary as `p { display: block }` beats it on specificity.
   Conditional fields would then stay on screen while the script believed it had
   hidden them. */
.revticket-cf-conditional[hidden] {
	display: none !important;
}