/* ============================================================
   WebTV Messages — banner and submission form
   Colours follow the site tokens. Override any of these on
   .wtvm-ticker / .wtvm-form to reskin without editing this file.
   ============================================================ */

.wtvm-ticker,
.wtvm-form {
	--wtvm-gold:   #D4A853;
	--wtvm-dark:   #0D0D0D;
	--wtvm-cream:  #F5F0E8;
	--wtvm-muted:  #888;
	--wtvm-live:   #E5484D;
	--wtvm-border: rgba(212, 168, 83, 0.18);
	--wtvm-mono:   'Space Mono', ui-monospace, monospace;
	--wtvm-body:   'DM Sans', system-ui, sans-serif;
	box-sizing: border-box;
}

.wtvm-ticker *,
.wtvm-form * {
	box-sizing: border-box;
}

/* ---------- Ticker ---------- */

.wtvm-ticker {
	display: flex;
	align-items: stretch;
	background: var(--wtvm-dark);
	border: 1px solid var(--wtvm-border);
	border-radius: 4px;
	overflow: hidden;
	font-family: var(--wtvm-body);
	color: var(--wtvm-cream);
	min-height: 46px;
}

.wtvm-ticker[hidden] {
	display: none;
}

/* Fixed label on the left, like a broadcast lower third. */
.wtvm-ticker-label {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 16px;
	background: var(--wtvm-live);
	color: #fff;
	font-family: var(--wtvm-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
}

.wtvm-ticker-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	animation: wtvmPulse 1.6s ease-in-out infinite;
}

@keyframes wtvmPulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.3; }
}

/* The window the strip moves through. */
.wtvm-ticker-viewport {
	flex: 1;
	min-width: 0;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}

/* Fade the edges so text does not appear to be cut off mid letter. */
.wtvm-ticker-viewport::before,
.wtvm-ticker-viewport::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 32px;
	z-index: 2;
	pointer-events: none;
}

.wtvm-ticker-viewport::before {
	left: 0;
	background: linear-gradient( 90deg, var(--wtvm-dark) 0%, rgba( 13, 13, 13, 0 ) 100% );
}

.wtvm-ticker-viewport::after {
	right: 0;
	background: linear-gradient( 270deg, var(--wtvm-dark) 0%, rgba( 13, 13, 13, 0 ) 100% );
}

.wtvm-ticker-track {
	display: flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
}

/* Travels exactly one copy of the strip, so the wrap is invisible. */
@keyframes wtvmCrawl {
	from { transform: translateX( 0 ); }
	to   { transform: translateX( calc( var( --wtvm-shift, 100% ) * -1 ) ); }
}

/* Pausing on hover lets someone finish reading an item. */
.wtvm-ticker:hover .wtvm-ticker-track {
	animation-play-state: paused;
}

/* Reduced motion, or no measurable width: no crawl, scroll by hand. */
.wtvm-ticker.is-static .wtvm-ticker-viewport {
	overflow-x: auto;
}

.wtvm-run {
	display: inline-flex;
	align-items: center;
}

.wtvm-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0 18px;
	white-space: nowrap;
}

/* Separator between entries. */
.wtvm-item::after {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba( 212, 168, 83, 0.4 );
	margin-left: 18px;
}

.wtvm-item-tag {
	flex-shrink: 0;
	font-family: var(--wtvm-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wtvm-gold);
}

.wtvm-item.is-flash .wtvm-item-tag {
	color: var(--wtvm-live);
}

.wtvm-item-text {
	font-size: 14px;
	line-height: 1.4;
	color: var(--wtvm-cream);
}

.wtvm-item.is-flash .wtvm-item-text {
	font-weight: 500;
}

.wtvm-sig {
	color: var(--wtvm-gold);
}

@media (max-width: 700px) {
	.wtvm-ticker { min-height: 40px; }
	.wtvm-ticker-label { padding: 0 11px; font-size: 10px; letter-spacing: 1px; }
	.wtvm-item { padding: 0 12px; gap: 7px; }
	.wtvm-item::after { margin-left: 12px; }
	.wtvm-item-text { font-size: 13px; }
	.wtvm-ticker-viewport::before,
	.wtvm-ticker-viewport::after { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.wtvm-ticker-track { animation: none !important; }
	.wtvm-ticker-dot { animation: none; }
}


/* ---------- Size variants ----------
   Each step raises bar height, text size, and spacing together, so the
   proportions hold rather than the text rattling around in a taller bar. */

.wtvm-ticker.wtvm-size-large {
	min-height: 62px;
}

.wtvm-ticker.wtvm-size-large .wtvm-ticker-label {
	padding: 0 20px;
	font-size: 13px;
}

.wtvm-ticker.wtvm-size-large .wtvm-ticker-dot {
	width: 8px;
	height: 8px;
}

.wtvm-ticker.wtvm-size-large .wtvm-item {
	padding: 0 24px;
	gap: 11px;
}

.wtvm-ticker.wtvm-size-large .wtvm-item::after {
	margin-left: 24px;
	width: 5px;
	height: 5px;
}

.wtvm-ticker.wtvm-size-large .wtvm-item-tag {
	font-size: 12px;
}

.wtvm-ticker.wtvm-size-large .wtvm-item-text {
	font-size: 18px;
}

.wtvm-ticker.wtvm-size-xlarge {
	min-height: 78px;
}

.wtvm-ticker.wtvm-size-xlarge .wtvm-ticker-label {
	padding: 0 26px;
	font-size: 15px;
	letter-spacing: 3px;
}

.wtvm-ticker.wtvm-size-xlarge .wtvm-ticker-dot {
	width: 10px;
	height: 10px;
}

.wtvm-ticker.wtvm-size-xlarge .wtvm-item {
	padding: 0 30px;
	gap: 14px;
}

.wtvm-ticker.wtvm-size-xlarge .wtvm-item::after {
	margin-left: 30px;
	width: 6px;
	height: 6px;
}

.wtvm-ticker.wtvm-size-xlarge .wtvm-item-tag {
	font-size: 13px;
}

.wtvm-ticker.wtvm-size-xlarge .wtvm-item-text {
	font-size: 23px;
}

/* Phones step the larger sizes down, since an 80px bar would eat the
   screen. They stay bigger than normal, just not as dramatically. */
@media (max-width: 700px) {
	.wtvm-ticker.wtvm-size-large { min-height: 50px; }
	.wtvm-ticker.wtvm-size-large .wtvm-item-text { font-size: 15px; }
	.wtvm-ticker.wtvm-size-large .wtvm-item { padding: 0 15px; }
	.wtvm-ticker.wtvm-size-large .wtvm-item::after { margin-left: 15px; }

	.wtvm-ticker.wtvm-size-xlarge { min-height: 58px; }
	.wtvm-ticker.wtvm-size-xlarge .wtvm-item-text { font-size: 17px; }
	.wtvm-ticker.wtvm-size-xlarge .wtvm-item { padding: 0 18px; }
	.wtvm-ticker.wtvm-size-xlarge .wtvm-item::after { margin-left: 18px; }
	.wtvm-ticker.wtvm-size-xlarge .wtvm-ticker-label { padding: 0 14px; font-size: 11px; letter-spacing: 1px; }
}

/* ---------- Submission form ---------- */

.wtvm-form {
	background: var(--wtvm-dark);
	border: 1px solid var(--wtvm-border);
	border-radius: 4px;
	padding: 20px;
	font-family: var(--wtvm-body);
	color: var(--wtvm-cream);
}

.wtvm-form h3.wtvm-form-title,
.wtvm-form-title {
	margin: 0 0 14px !important;
	padding: 0;
	font-family: var(--wtvm-mono);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wtvm-gold);
	font-weight: 400;
}

.wtvm-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 10px;
}

.wtvm-form .wtvm-input,
.wtvm-form .wtvm-textarea,
.wtvm-form input[type="text"].wtvm-input,
.wtvm-form textarea.wtvm-textarea {
	width: 100%;
	max-width: 100%;
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(245, 240, 232, 0.14) !important;
	border-radius: 3px !important;
	padding: 11px 13px !important;
	margin: 0 !important;
	color: var(--wtvm-cream) !important;
	font-family: var(--wtvm-body);
	font-size: 14px;
	line-height: 1.5;
	box-shadow: none !important;
	transition: border-color 0.2s;
}

.wtvm-textarea {
	resize: vertical;
	min-height: 84px;
	line-height: 1.5;
}

.wtvm-input::placeholder,
.wtvm-textarea::placeholder {
	color: rgba(136, 136, 136, 0.8);
}

.wtvm-form .wtvm-input:focus,
.wtvm-form .wtvm-textarea:focus {
	outline: none;
	border-color: var(--wtvm-gold) !important;
	box-shadow: none !important;
}

/* Honeypot — off screen rather than display:none, which some bots detect.
   Marked important because themes commonly reset positioning on form rows. */
.wtvm-form .wtvm-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.wtvm-form-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}

.wtvm-count {
	font-family: var(--wtvm-mono);
	font-size: 11px;
	color: var(--wtvm-muted);
}

.wtvm-count.is-near {
	color: var(--wtvm-gold);
}

.wtvm-form button.wtvm-submit,
.wtvm-form .wtvm-submit {
	background: transparent !important;
	background-image: none !important;
	border: 1px solid rgba(245, 240, 232, 0.25) !important;
	border-radius: 2px !important;
	color: var(--wtvm-cream) !important;
	font-family: var(--wtvm-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 12px 26px !important;
	margin: 0 !important;
	width: auto !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.wtvm-form .wtvm-submit:hover:not(:disabled) {
	border-color: var(--wtvm-gold) !important;
	color: var(--wtvm-gold) !important;
	background: transparent !important;
}

.wtvm-submit:disabled {
	opacity: 0.5;
	cursor: default;
}

.wtvm-submit:focus-visible {
	outline: 2px solid var(--wtvm-gold);
	outline-offset: 2px;
}

.wtvm-feedback {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	min-height: 0;
}

.wtvm-feedback:empty {
	display: none;
}

.wtvm-feedback.is-ok {
	color: var(--wtvm-gold);
}

.wtvm-feedback.is-error {
	color: var(--wtvm-live);
}

.wtvm-form-closed p {
	margin: 0;
	color: var(--wtvm-muted);
	font-size: 14px;
}

@media (max-width: 700px) {
	.wtvm-form-row {
		grid-template-columns: 1fr;
	}
}