/* Árnyék-AI lelet. One typeface family, hairline rules, no cards.
   The only ornament is the shadow bar, which is the finding itself. */

:root {
	--ink: #14161a;
	--halvany: #5d6470;
	--vonal: #d7dae0;
	--lap: #ffffff;
	--jelzo: #b4361f;      /* the shadow, the thing the leader does not know about */
	--rendben: #1f5c46;
	--sav: 2.4rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--lap);
	color: var(--ink);
	font-family: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.55;
	font-variant-numeric: tabular-nums;
}

main {
	max-width: 62rem;
	margin: 0 auto;
	padding: 1.6rem 1.1rem 4rem;
}

h1 {
	font-size: clamp(1.7rem, 6vw, 2.6rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0.2rem 0 0.9rem;
}

h2 {
	font-size: 1.02rem;
	letter-spacing: 0.01em;
	font-weight: 700;
	margin: 0 0 0.7rem;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid var(--ink);
}

p { margin: 0 0 0.8rem; }

a { color: var(--ink); }

.uzem {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--halvany);
	margin: 0 0 0.5rem;
}

.halvany { color: var(--halvany); }

.fejlec {
	border-bottom: 3px solid var(--ink);
	padding-bottom: 1.1rem;
	margin-bottom: 1.6rem;
}

.bevezeto { max-width: 40rem; color: var(--halvany); }

.blokk { margin: 0 0 2.2rem; }

/* --- forms --- */

.urlap label {
	display: block;
	font-weight: 600;
	margin: 0 0 1rem;
}

.urlap input[type="text"],
.urlap input[type="number"],
.urlap input[type="email"] {
	display: block;
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.65rem 0.7rem;
	font: inherit;
	color: inherit;
	background: var(--lap);
	border: 1px solid var(--vonal);
	border-bottom-width: 2px;
	border-radius: 0;
}

.urlap input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

button {
	font: inherit;
	font-weight: 700;
	color: var(--lap);
	background: var(--ink);
	border: 0;
	border-radius: 0;
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	min-height: 2.9rem;
}

button:hover { background: #000; }

.soros { margin-top: 1.2rem; }

.kerdoiv { counter-reset: kerdes; }

.kerdes {
	border: 0;
	border-top: 1px solid var(--vonal);
	margin: 0 0 1.4rem;
	padding: 1rem 0 0;
	/* A hidden fieldset generates no box, so it does not take a number either:
	   the visible questions stay 1, 2, 3 without a gap. */
	counter-increment: kerdes;
}

.kerdes legend {
	font-weight: 700;
	padding: 0;
	margin-bottom: 0.5rem;
}

.kerdes legend::before {
	content: counter(kerdes) ".";
	display: inline-block;
	min-width: 1.6rem;
	color: var(--halvany);
	font-weight: 600;
}

.segito { font-size: 0.9rem; color: var(--halvany); margin: -0.2rem 0 0.7rem; }

.urlap label.opcio {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	margin: 0 0 0.45rem;
	padding: 0.35rem 0;
	cursor: pointer;
}

.opcio input { margin-top: 0.35rem; width: 1.05rem; height: 1.05rem; flex: none; }

/* Selector has to out-weigh .urlap input[type="text"] above, otherwise the
   indented field is 100% wide and pushes the page sideways on a phone. */
.urlap input.szabad { display: block; width: calc(100% - 1.65rem); margin: 0.2rem 0 0.7rem 1.65rem; max-width: 22rem;
	padding: 0.5rem; font: inherit; border: 1px solid var(--vonal); border-radius: 0; }

.hiba {
	border-left: 4px solid var(--jelzo);
	background: #fdf3f1;
	padding: 0.7rem 0.9rem;
	margin: 0 0 1.2rem;
	font-weight: 600;
}

.ok { color: var(--rendben); font-weight: 700; }

.link-doboz {
	border: 1px solid var(--vonal);
	border-left: 4px solid var(--ink);
	padding: 0.7rem 0.8rem;
	word-break: break-all;
	font-size: 0.95rem;
}

/* --- the shadow bar --- */

.sav {
	display: flex;
	height: var(--sav);
	border: 1px solid var(--ink);
	overflow: hidden;
	margin: 0 0 0.6rem;
}

.sav span { display: block; height: 100%; }
.sav-jova { background: var(--ink); }
.sav-arnyek {
	background: repeating-linear-gradient(135deg, var(--jelzo) 0 6px, #f2c9c0 6px 12px);
}
.sav-nem { background: var(--lap); }

.sav-jelmagyarazat {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	padding: 0;
	margin: 0 0 1.1rem;
	font-size: 0.88rem;
	color: var(--halvany);
}

.sav-jelmagyarazat i {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	margin-right: 0.4rem;
	vertical-align: -1px;
	border: 1px solid var(--ink);
}

.j-jova { background: var(--ink); }
.j-arnyek { background: repeating-linear-gradient(135deg, var(--jelzo) 0 3px, #f2c9c0 3px 6px); }
.j-nem { background: var(--lap); }

/* --- numbers with their provenance --- */

.szamlista { list-style: none; padding: 0; margin: 0 0 1rem; }

.szamlista li {
	border-top: 1px solid var(--vonal);
	padding: 0.6rem 0;
}

.szamlista strong, .kiemelt strong, .nagy-szam {
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -0.01em;
	margin-right: 0.35rem;
}

.nagy-szam { font-size: clamp(2.4rem, 12vw, 4rem); display: block; margin: 0 0 0.6rem; }

.honnan {
	display: block;
	font-size: 0.78rem;
	color: var(--halvany);
	margin-top: 0.2rem;
}

.kiemelt {
	border-left: 4px solid var(--jelzo);
	padding: 0.6rem 0 0.6rem 0.8rem;
	margin: 1rem 0;
}

.kuszob { border-left: 4px solid var(--ink); padding-left: 1rem; }

/* --- inventory table --- */

.tabla-gorgo { overflow-x: auto; margin: 0 0 0.8rem; }

table { border-collapse: collapse; width: 100%; min-width: 48rem; font-size: 0.9rem; }

th, td {
	text-align: left;
	vertical-align: top;
	padding: 0.6rem 0.7rem 0.6rem 0;
	border-bottom: 1px solid var(--vonal);
}

thead th { border-bottom: 2px solid var(--ink); font-size: 0.8rem; }

/* On a narrow screen the seven columns stack instead of scrolling off the edge:
   a cut-off table reads as broken, and the numbers are the whole point here. */
@media (max-width: 45.99rem) {
	table, tbody, tr, td { display: block; width: 100%; }
	thead { display: none; }
	table { min-width: 0; }
	.tabla-gorgo { overflow-x: visible; }
	tr { border-bottom: 2px solid var(--ink); padding: 0.8rem 0 0.6rem; }
	td { border: 0; padding: 0.15rem 0 0.5rem; }
	td::before {
		content: attr(data-cimke);
		display: block;
		font-size: 0.72rem;
		font-weight: 700;
		color: var(--halvany);
	}
	td.eszkoz-nev { font-size: 1.1rem; font-weight: 700; }
}

.besorolas { font-weight: 700; }
.besorolas.b-minimális { color: var(--rendben); }
.besorolas.b-korlátozott { color: #8a5a00; }
.besorolas.b-magas { color: var(--jelzo); }

.zaro { border-top: 3px solid var(--ink); padding-top: 1.2rem; }

.lablec {
	border-top: 1px solid var(--vonal);
	margin-top: 2.4rem;
	padding-top: 1.2rem;
	font-size: 0.92rem;
	color: var(--halvany);
}

@media (min-width: 46rem) {
	main { padding: 2.4rem 2rem 5rem; }
	.urlap input[type="text"],
	.urlap input[type="number"],
	.urlap input[type="email"] { max-width: 26rem; }
}