/* Familie Stamboom — persoon-centraal weergave
 * Mobile-first: verticaal scrollen i.p.v. pinch-to-zoom, grote
 * tapbare kaarten, tappen op een naam maakt die het nieuwe
 * middelpunt (sectie 9 van het functioneel ontwerp).
 */

#fst-viewer-root {
	max-width: 480px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.4;
	box-sizing: border-box;
}

#fst-viewer-root * {
	box-sizing: border-box;
}

.fst-hidden {
	display: none !important;
}

.fst-v-zoek-wrap {
	padding: 8px 4px 24px;
}

.fst-v-logo {
	display: block;
	width: 92px;
	height: 92px;
	margin: 0 auto 14px;
}

.fst-v-logo-klein {
	width: 56px;
	height: 56px;
	margin: 0 auto 12px;
}

.fst-v-titel {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 12px;
	text-align: center;
}

.fst-v-help {
	font-size: 14px;
	color: #666;
	margin-bottom: 16px;
}

.fst-v-input {
	width: 100%;
	font-size: 18px;
	padding: 14px 16px;
	border: 2px solid #ccc;
	border-radius: 10px;
	margin-bottom: 12px;
	-webkit-appearance: none;
	appearance: none;
}

.fst-v-input:focus {
	border-color: #2d6a4f;
	outline: none;
}

.fst-v-resultaat-lijst {
	margin-top: 8px;
}

.fst-v-resultaat-kaart {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: #fafafa;
	border: 2px solid #e0e0e0;
	border-radius: 10px;
	padding: 10px 14px;
	margin-bottom: 8px;
	font-size: 16px;
	min-height: 56px;
}

.fst-v-resultaat-kaart img,
.fst-v-resultaat-kaart .fst-v-avatar-placeholder {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: #ddd;
}

/* --- Persoonweergave zelf --------------------------------------------- */
.fst-v-scherm {
	padding: 8px 4px 32px;
}

.fst-v-uitleg {
	background: #f4f8f6;
	border: 2px solid #cddcd4;
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 16px;
	font-size: 14px;
	color: #333;
}

.fst-v-uitleg-sluiten {
	background: #2d6a4f;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	min-height: 40px;
}

.fst-v-uitleg-icoon {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f4f8f6;
	border: 2px solid #cddcd4;
	color: #2d6a4f;
	font-weight: 700;
	font-size: 15px;
	margin: 0 0 12px;
}

.fst-v-terug {
	background: none;
	border: none;
	color: #2d6a4f;
	font-size: 15px;
	font-weight: 600;
	padding: 8px 0;
	margin-bottom: 8px;
}

.fst-v-zoek-opnieuw {
	display: block;
	width: 100%;
	background: #2d6a4f;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 600;
	padding: 14px;
	min-height: 50px;
}

.fst-v-sectie-label {
	font-size: 13px;
	font-weight: 600;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 20px 0 8px;
	text-align: center;
}

/* Subkop binnen een sectie, bijv. 'Kant van vader' onder 'Grootouders' —
 * lichter dan de sectielabel zelf, maar nog steeds duidelijk gescheiden. */
.fst-v-subkop {
	font-size: 12px;
	font-weight: 600;
	color: #2d6a4f;
	text-align: center;
	margin: 10px 0 6px;
}

/* Simpele, vaste verticale lijn tussen ouders/middelpunt/kinderen — geen
 * losse lijntjes naar elk kaartje (breekt bij het omklappen van rijen op
 * smalle schermen), maar één rechte lijn die altijd correct staat. */
.fst-v-lijn {
	width: 2px;
	height: 20px;
	background: #cddcd4;
	margin: 0 auto;
}

.fst-v-rij {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
}

/* Omkaderd vak met titelbalk voor "Broers en zussen" en "Kinderen" — elk
 * met een eigen, subtiele kleur, zodat de twee groepen in één oogopslag
 * te onderscheiden zijn, ook zonder de titel te lezen. */
.fst-v-sectievak {
	border-radius: 12px;
	border: 1px solid;
	margin: 20px 0;
	overflow: hidden;
}

.fst-v-sectievak-titel {
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
}

.fst-v-sectievak-inhoud {
	padding: 14px 10px;
}

.fst-v-sectievak-broerzus {
	border-color: #c7dbee;
	background: #f6fafd;
}

.fst-v-sectievak-broerzus .fst-v-sectievak-titel {
	background: #e5f0fa;
	color: #35618c;
}

.fst-v-sectievak-kind {
	border-color: #c9e2d3;
	background: #f5fbf7;
}

.fst-v-sectievak-kind .fst-v-sectievak-titel {
	background: #e3f3ea;
	color: #2d6a4f;
}

/* Kleine kaart, gebruikt voor ouders/broers-zussen/kinderen. Expliciet
 * als kolom-flexbox met align-items:flex-start, zodat de foto altijd
 * bovenaan op dezelfde hoogte staat — ook als de naam van een ander
 * kaartje in de rij over twee of meer regels loopt. */
.fst-v-kaart {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100px;
	text-align: center;
	background: none;
	border: none;
	padding: 4px;
}

.fst-v-kaart-foto,
.fst-v-kaart-placeholder {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 6px;
	display: block;
	background: #e0e0e0;
	border: 2px solid #e0e0e0;
}

/* Kleurcodering ouder ↔ grootouder: dezelfde rand-kleur maakt in één
 * oogopslag duidelijk bij welke ouder een grootouder hoort, ook als
 * "vader"/"moeder" niet geregistreerd staat. */
.fst-v-kaart-foto.fst-v-kleur-0,
.fst-v-kaart-placeholder.fst-v-kleur-0 {
	border-color: #4a90d9;
	border-width: 3px;
}

.fst-v-kaart-foto.fst-v-kleur-1,
.fst-v-kaart-placeholder.fst-v-kleur-1 {
	border-color: #d9834a;
	border-width: 3px;
}

.fst-v-kleur-tekst-0 {
	color: #4a90d9;
}

.fst-v-kleur-tekst-1 {
	color: #d9834a;
}

.fst-v-kaart-naam {
	font-size: 13px;
	font-weight: 600;
	color: #333;
	line-height: 1.25;
}

.fst-v-kruisje {
	color: #888;
	font-size: 0.85em;
}

/* Grote, centrale kaart voor de huidige persoon. */
.fst-v-middelpunt {
	text-align: center;
	margin: 20px 0;
	padding: 20px 16px;
	border: 2px solid #e6f0eb;
	border-radius: 16px;
	background: #fbfdfc;
}

.fst-v-rol-label {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: #2d6a4f;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 8px;
}

.fst-v-middelpunt-foto,
.fst-v-middelpunt-placeholder {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 12px;
	display: block;
	background: #e0e0e0;
	border: 3px solid #2d6a4f;
}

.fst-v-middelpunt-naam {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 4px;
}

.fst-v-middelpunt-detail {
	font-size: 14px;
	color: #666;
}

.fst-v-leeg {
	text-align: center;
	color: #888;
	font-size: 14px;
	padding: 8px 0;
}

.fst-v-fout {
	text-align: center;
	color: #b3261e;
	padding: 24px 12px;
}

/* Kwaliteiten en 'bekend om' als aparte, gelabelde groepjes — zonder
 * label was niet meer te zien waar een woord vandaan kwam. */
.fst-v-woorden-groep {
	margin-top: 12px;
}

.fst-v-woorden-label {
	font-size: 11px;
	font-weight: 700;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

.fst-v-woorden {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.fst-v-woord-tegel {
	display: inline-block;
	background: #e6f0eb;
	color: #2d6a4f;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 12px;
}

.fst-v-woord-tegel-bekendvan {
	background: #f5f0e8;
	color: #8a6d3b;
}

.fst-v-contact {
	margin-top: 24px;
}

.fst-v-contact-openen {
	display: block;
	width: 100%;
	background: none;
	border: 2px dashed #cddcd4;
	border-radius: 10px;
	color: #2d6a4f;
	font-size: 14px;
	font-weight: 600;
	padding: 14px;
	min-height: 50px;
}

.fst-v-contact-inhoud {
	margin-top: 12px;
}

.fst-v-contact-bericht {
	resize: vertical;
	font-family: inherit;
}

/* Duidelijk afgebakend kader rond de vragen-sectie — eigen kleur en
 * ruimte t.o.v. het zoekgedeelte erboven, zodat in één oogopslag
 * duidelijk is dat dit een ander onderdeel van het scherm is. */
.fst-v-vragen-kader {
	margin-top: 32px;
	padding: 18px 16px;
	background: #f5f0e8;
	border: 2px solid #e3d5b8;
	border-radius: 14px;
}

.fst-v-vraag {
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 10px;
}

.fst-v-vraag-tekst {
	font-size: 14px;
	color: #333;
	margin-bottom: 8px;
}

.fst-v-vraag-weet-antwoord {
	background: none;
	border: 2px solid #2d6a4f;
	color: #2d6a4f;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	min-height: 40px;
}

.fst-v-vraag-antwoordvorm {
	margin-top: 10px;
}