/* Estilos de cadastro.html e gravador.html: telas de uso no celular, no evento.
   Mesma identidade do site (assets/css/site.css), mas sem as fotos de fundo.
   As cores abaixo repetem as de site.css; se mudar --cor-destaque lá, mude aqui também. */
:root {
	--black: #000000;
	--steel: #16181b;
	--paper: #efece6;
	--muted: #a6a49d;
	--line: rgba(239, 236, 230, 0.2);
	--laser: #ed1b2f; /* vermelho do logo */

	/* Texto preto sobre ela (6,3:1); sobre o preto ela tem 6,3:1 */
	--cor-destaque: #ff4655;
	--cor-destaque-suave: color-mix(in srgb, var(--cor-destaque) 45%, transparent);
	--texto-sobre-destaque: #000000;

	/* Campos: placas claras com texto preto, legíveis mesmo com sol na tela */
	--campo-fundo: #efece6;
	--campo-texto: #000000;
	--campo-dica: #5e5c57;

	--display: "Big Shoulders Display", "Arial Narrow", sans-serif;
	--body: "Barlow", system-ui, sans-serif;

	--header-h: 76px;
	--gutter: clamp(16px, 5vw, 40px);
	--alvo: 64px; /* altura de campos e botões */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	background: var(--black);
	color: var(--paper);
	font-family: var(--body);
	font-size: 18px;
	line-height: 1.5;
	margin: 0;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--cor-destaque); outline-offset: 3px; }
.shell { margin: 0 auto; width: min(100% - 2 * var(--gutter), 600px); }
.shell-wide { width: min(100% - 2 * var(--gutter), 960px); }

/* Topo: igual ao do site */
.topbar-wrap { border-bottom: 1px solid var(--line); }
.topbar { align-items: center; display: flex; justify-content: space-between; min-height: var(--header-h); }
.brand {
	color: var(--laser);
	display: block;
	font-family: var(--body);
	font-size: 24px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: -.05em;
	line-height: .8;
	position: relative;
	transform: scaleX(1.3);
	transform-origin: left center;
}
.brand::after { background: var(--cor-destaque); bottom: -7px; content: ""; height: 2px; left: 0; position: absolute; width: 26px; }
.back-link {
	color: var(--paper);
	font-family: var(--display);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .03em;
	line-height: 1;
	padding: 12px 0;
	position: relative;
	text-transform: uppercase;
}
.back-link::after {
	background: var(--cor-destaque);
	bottom: 6px;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s cubic-bezier(.65, 0, .25, 1);
	width: 100%;
}
.back-link:hover::after { transform: scaleX(1); }

main { padding: clamp(36px, 7vw, 72px) 0 72px; }
h1 {
	font-family: var(--display);
	font-size: clamp(52px, 15vw, 104px);
	font-weight: 900;
	line-height: .86;
	margin: 0;
	text-transform: uppercase;
}
.intro { color: #d2cfc8; font-size: 19px; line-height: 1.5; margin: 18px 0 36px; max-width: 34ch; }
/* Cadastro: título curto, para o formulário aparecer sem precisar rolar a página. */
main:has(.form-title) { padding-top: 24px; }
h1.form-title { font-size: clamp(32px, 8vw, 44px); line-height: 1; margin-bottom: 20px; }

/* Campos */
.field { display: block; margin: 0 0 26px; }
.field-label { color: var(--paper); display: block; font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.field-hint { color: var(--muted); font-size: 15px; font-weight: 400; }
input {
	appearance: none;
	background: var(--campo-fundo);
	border: 2px solid var(--campo-fundo);
	border-radius: 0;
	color: var(--campo-texto);
	font: 600 24px/1 var(--body);
	min-height: var(--alvo);
	outline: none;
	padding: 0 18px;
	width: 100%;
}
input::placeholder { color: var(--campo-dica); font-weight: 500; opacity: 1; }
input:focus { border-color: var(--cor-destaque); box-shadow: 0 0 0 3px var(--cor-destaque); }
input[aria-invalid="true"] { border-color: var(--cor-destaque); }

/* Botões */
.button {
	align-items: center;
	background: var(--cor-destaque);
	border: 0;
	border-radius: 0;
	color: var(--texto-sobre-destaque);
	cursor: pointer;
	display: inline-flex;
	font: 700 20px/1 var(--body);
	gap: 10px;
	justify-content: center;
	min-height: var(--alvo);
	padding: 0 28px;
	transition: filter .2s ease;
}
.button:hover { filter: brightness(1.1); }
.button:disabled { cursor: progress; filter: saturate(.4) brightness(.8); }
.button-block { width: 100%; }
.button-ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--paper); color: var(--paper); }
.button-ghost:hover { box-shadow: inset 0 0 0 2px var(--cor-destaque); filter: none; }

/* Mensagens de erro e status: vermelho de destaque, em negrito, com área reservada */
.error, .status { color: var(--cor-destaque); font-size: 17px; font-weight: 600; line-height: 1.4; margin: 0 0 18px; min-height: 24px; }

/* Cadastro: prévia da gravação */
.engraving-preview {
	background: color-mix(in srgb, var(--cor-destaque) 10%, transparent);
	border: 1px solid var(--cor-destaque-suave);
	margin: 6px 0 22px;
	padding: 16px 18px;
}
.engraving-label { color: var(--cor-destaque); display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.engraving-value {
	color: var(--paper);
	display: block;
	font-family: var(--display);
	font-size: 32px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1.05;
	min-height: 34px;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}
.time-preview { color: var(--muted); display: block; font-size: 15px; margin-top: 8px; min-height: 22px; }
#runner-name { text-transform: uppercase; }

/* Cadastro: tempo em três caixas (horas : minutos : segundos) */
.time-field { border: 0; margin: 0 0 26px; min-width: 0; padding: 0; }
.time-field legend { padding: 0; }
.time-inputs { align-items: end; display: grid; gap: 8px; grid-template-columns: 1fr auto 1fr auto 1fr; }
.time-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.time-box span { color: var(--paper); font-size: 16px; font-weight: 600; }
.time-box input {
	font-family: var(--display);
	font-size: 44px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	min-height: 76px;
	padding: 0 8px;
	text-align: center;
}
.time-box input::placeholder { color: #a09d96; }
.time-sep { color: var(--paper); font-family: var(--display); font-size: 44px; font-weight: 800; line-height: 76px; }

/* Cadastro: confirmação depois de salvo */
.result {
	border: 2px solid var(--cor-destaque);
	display: none;
	margin-top: 36px;
	padding: 32px 22px 34px;
	position: relative;
	text-align: center;
}
.result.is-visible { display: block; }
.result::before { background: var(--laser); box-shadow: 0 0 18px 2px rgba(237, 27, 47, .6); content: ""; height: 4px; left: -2px; position: absolute; right: -2px; top: -2px; }
.result-label { color: var(--cor-destaque); font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.result .code {
	color: var(--paper);
	font-family: var(--display);
	font-size: clamp(120px, 40vw, 220px);
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	line-height: .9;
	margin: 0 0 22px;
}
/* Número da camisa pode ter até 6 dígitos; com 4 ou mais, o tamanho acima estoura a largura do celular. */
.result .code.is-long { font-size: clamp(72px, 22vw, 150px); }
.result-details { border-top: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin: 0 auto 24px; max-width: 420px; padding-top: 20px; }
.result-details dt { color: var(--muted); font-size: 15px; margin-bottom: 2px; }
.result-details dd {
	color: var(--paper);
	font-family: var(--display);
	font-size: 34px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
	margin: 0;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}
.result p { color: #d2cfc8; font-size: 17px; line-height: 1.5; margin: 0 auto; max-width: 36ch; }
.result .result-message { color: var(--paper); font-weight: 600; }
.follow { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px; }
.result .follow-label { color: var(--muted); font-size: 15px; margin: 0 0 12px; }
.follow-link { align-items: center; box-shadow: inset 0 0 0 2px var(--line); color: var(--paper); display: inline-flex; font-size: 18px; font-weight: 600; gap: 10px; min-height: 52px; padding: 0 18px; }
.follow-link:hover, .follow-link:focus-visible { box-shadow: inset 0 0 0 2px var(--cor-destaque); }
.follow-link img { display: block; height: 28px; width: 28px; }

/* Gravador: busca. Título menor que no cadastro para nome e tempo caberem na tela sem rolar. */
main:has(#search-form) h1 { font-size: clamp(44px, 10vw, 72px); }
main:has(#search-form) .intro { margin-bottom: 24px; }
.search-row { align-items: end; display: grid; gap: 14px; grid-template-columns: 1fr auto; }
.search-row .field { margin: 0; }
#search-form input {
	font-family: var(--display);
	font-size: 40px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: .04em;
	min-height: 76px;
}
#search-form .button { min-height: 76px; padding: 0 36px; }
#search-form .status { margin-top: 14px; }

/* Gravador: dados para gravar. Nome e tempo do tamanho de título, para ler de longe. */
.runner-card { border-top: 4px solid var(--laser); display: none; margin-top: 22px; padding: 24px 0 8px; }
.runner-card.is-visible { display: block; }
.card-label { color: var(--cor-destaque); font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.runner-name {
	color: #ffffff;
	font-family: var(--display);
	font-size: clamp(56px, 16vw, 128px);
	font-weight: 900;
	line-height: .9;
	margin: 0 0 18px;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}
.runner-time {
	color: var(--cor-destaque);
	font-family: var(--display);
	font-size: clamp(56px, 16vw, 128px);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: .9;
	margin: 0;
}

footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; padding: 22px 0 32px; }

@media (max-width: 620px) {
	:root { --header-h: 68px; }
	.brand { font-size: 21px; }
	.search-row { grid-template-columns: 1fr; }
	#search-form .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.back-link::after { transition: none; }
	.button { transition: none; }
}