/* Kraynak Reunion: module screens (same markup in /portal/ and wp-admin) */
.kfrm {
	--m-ink: #231b16;
	--m-ink2: #5e5147;
	--m-line: #c4c9be;
	--m-mount: #fbfaf5;
	--m-wall: #e4e6df;
	--m-red: #a3231b;
	--m-red2: #7e1812;
	--m-walnut: #6b3a22;
	--m-green: #3e5b3a;
	--m-gold: #d6a032;
	color: var(--m-ink);
	font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.5;
}
.kfrm *, .kfrm *::before, .kfrm *::after { box-sizing: border-box; }
.kfrm-h1 { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: 2rem; line-height: 1.2; margin: .25rem 0 .5rem; color: var(--m-ink); padding: 0; }
.kfrm-sub { color: var(--m-ink2); margin: 0 0 1.25rem; max-width: 70ch; font-size: 1.0625rem; }
.kfrm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: .25rem; }
.kfrm-head__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.kfrm .kfrm-btn {
	display: inline-flex; align-items: center; justify-content: center;
	font: inherit; font-weight: 700; font-size: 1rem;
	min-height: 46px; padding: .55rem 1.1rem;
	border-radius: 8px;
	border: 2px solid var(--m-walnut);
	background: #fff; color: var(--m-walnut);
	text-decoration: none; cursor: pointer;
}
.kfrm .kfrm-btn:hover { background: var(--m-mount); color: var(--m-walnut); }
.kfrm .kfrm-btn--red { background: var(--m-red); border-color: var(--m-red); color: #fff; }
.kfrm .kfrm-btn--red:hover { background: var(--m-red2); border-color: var(--m-red2); color: #fff; }
.kfrm-btn--wide { width: 100%; }
.kfrm .kfrm-btn--quiet { border-color: transparent; background: none; color: var(--m-ink2); font-weight: 400; text-decoration: underline; padding-left: 0; }
.kfrm .kfrm-btn--quiet:hover { color: var(--m-red); background: none; }
.kfrm-btn:focus-visible, .kfrm-link:focus-visible, .kfrm a:focus-visible { outline: 3px solid var(--m-gold); outline-offset: 2px; }
.kfrm-link { color: var(--m-walnut); font-weight: 700; }
.kfrm :where(a) { color: var(--m-walnut); }

.kfrm-flash { background: #edf3e8; border-left: 5px solid var(--m-green); padding: .8rem 1rem; margin: 0 0 1.25rem; border-radius: 0 8px 8px 0; font-weight: 700; }
.kfrm-flash--warn { background: #f8e9e6; border-left-color: var(--m-red); }
.kfrm-note { background: var(--m-mount); border: 1px solid var(--m-line); border-radius: 10px; padding: .25rem 1.25rem; margin-bottom: 1.25rem; max-width: 70ch; }
.kfrm-empty { background: var(--m-mount); border: 1px dashed var(--m-line); border-radius: 10px; padding: 1.25rem 1.5rem; }
.kfrm-empty h1 { font-family: "Young Serif", Georgia, serif; font-weight: 400; }

/* Filters and fields */
.kfrm-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin: 1rem 0; }
.kfrm-field { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem; }
.kfrm-filters .kfrm-field { margin: 0; }
.kfrm-field--grow { flex: 1 1 260px; }
.kfrm-field > span { font-weight: 700; font-size: .95rem; }
.kfrm input[type="text"], .kfrm input[type="search"], .kfrm input[type="email"], .kfrm input[type="tel"], .kfrm input[type="password"], .kfrm select, .kfrm textarea {
	font: inherit; font-size: 1.0625rem; color: var(--m-ink);
	background: #fff; border: 2px solid var(--m-line); border-radius: 8px;
	padding: .55rem .75rem; min-height: 46px; width: 100%; max-width: none; box-shadow: none;
}
.kfrm textarea { min-height: 0; }
.kfrm input:focus, .kfrm select:focus, .kfrm textarea:focus { outline: 3px solid var(--m-gold); outline-offset: 1px; border-color: var(--m-walnut); box-shadow: none; }
.kfrm-check { display: flex; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.kfrm-form { max-width: 820px; }
.kfrm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.kfrm-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: .5rem; }
.kfrm-danger { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--m-line); max-width: 820px; }

/* Table */
.kfrm-count { color: var(--m-ink2); margin: .25rem 0 .5rem; }
.kfrm-tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--m-line); border-radius: 10px; }
.kfrm-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.kfrm-table th { text-align: left; font-size: .9rem; color: var(--m-ink2); background: var(--m-mount); padding: .7rem .9rem; border-bottom: 1px solid var(--m-line); white-space: nowrap; }
.kfrm-table td { padding: .8rem .9rem; border-bottom: 1px solid #e3e6de; vertical-align: top; }
.kfrm-table tr:last-child td { border-bottom: 0; }
.kfrm-table td strong { display: block; }
.kfrm-small { display: block; font-size: .9rem; color: var(--m-ink2); margin-top: .15rem; }
.kfrm-muted { color: #8a7f76; }
.kfrm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kfrm-people { margin: 0; padding: 0; list-style: none; }
.kfrm-people li { padding: .1rem 0; }
.kfrm-chip { display: inline-block; font-size: .8rem; font-weight: 700; padding: .1rem .5rem; border-radius: 99px; background: #ece8e1; color: var(--m-ink); margin-top: .2rem; }
.kfrm-chip--yes, .kfrm-chip--planning { background: #dfe9d9; color: #28401f; }
.kfrm-chip--hoping, .kfrm-chip--trying { background: #f5e6c4; color: #5a4108; }
.kfrm-chip--no { background: #eee; color: #5e5147; }

/* Tiles */
.kfrm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin: 1rem 0; }
.kfrm-tile { background: #fff; border: 1px solid var(--m-line); border-radius: 10px; padding: 1rem 1.1rem; display: flex; align-items: center; gap: .9rem; }
.kfrm-tile__n { font-family: "Young Serif", Georgia, serif; font-size: 2.4rem; line-height: 1; color: var(--m-ink); }
.kfrm-tile__l { font-weight: 700; line-height: 1.25; }
.kfrm-tile__l small { font-weight: 400; color: var(--m-ink2); font-size: .85rem; }
.kfrm-tile--go { border-left: 6px solid var(--m-green); }
.kfrm-tile--maybe { border-left: 6px solid var(--m-gold); }
.kfrm-ages { margin: 0 0 1rem; line-height: 2; }
.kfrm-ages b { font-family: "Young Serif", Georgia, serif; font-weight: 400; font-size: 1.15rem; margin-left: .2rem; }
.kfrm-sep { display: inline-block; width: 1px; height: 1em; background: var(--m-line); margin: 0 .8rem; vertical-align: middle; }

@media (max-width: 760px) {
	.kfrm-grid2 { grid-template-columns: 1fr; }
	.kfrm-table thead { display: none; }
	.kfrm-table, .kfrm-table tbody, .kfrm-table tr, .kfrm-table td { display: block; width: 100%; }
	.kfrm-table tr { border-bottom: 1px solid var(--m-line); padding: .5rem 0; }
	.kfrm-table td { border: 0; padding: .3rem .9rem; }
	.kfrm-table td[data-label]:empty { display: none; }
	.kfrm-table td[data-label]::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 700; color: var(--m-ink2); }
	.kfrm-h1 { font-size: 1.65rem; }
}
