/* Silkie Lab forms: calm, orderly purple UI. */
.sf-wrap {
	--sf-purple: #6d28d9;
	--sf-purple-dark: #5b21b6;
	--sf-line: #e9e4f5;
	--sf-ink: #2b2340;
	--sf-muted: #6b7280;
	max-width: 900px;
	margin: 0 auto;
	color: var(--sf-ink);
}
.sf-wrap *, .sf-wrap *::before, .sf-wrap *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- hero */
.sf-hero {
	background: linear-gradient(135deg, #f8f5ff 0%, #fdfbff 100%);
	border: 1px solid var(--sf-line);
	border-radius: 14px;
	padding: 26px 28px;
	margin-bottom: 28px;
}
.sf-title { font-size: 27px; line-height: 1.25; margin: 0 0 8px; font-weight: 700; }
.sf-lede { color: #55506a; margin: 0; max-width: 62ch; font-size: 15px; }

.sf-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sf-stat {
	flex: 1 1 150px; background: #fff; border: 1px solid var(--sf-line);
	border-radius: 10px; padding: 12px 14px;
}
.sf-stat strong { display: block; font-size: 22px; line-height: 1.1; color: var(--sf-purple); }
.sf-stat span { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #8b7fae; }

/* ------------------------------------------------------------ sections */
.sf-section { margin-bottom: 34px; }
.sf-section-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.sf-subtitle { font-size: 19px; margin: 0 0 14px; font-weight: 700; }
.sf-section-head .sf-subtitle { margin: 0; }
.sf-search {
	min-width: 230px; padding: 9px 12px; border: 1px solid #cfc7e4;
	border-radius: 8px; font-size: 14px; background: #fff;
}
.sf-search:focus { outline: none; border-color: var(--sf-purple); box-shadow: 0 0 0 3px rgba(109,40,217,.12); }

.sf-group { margin-bottom: 20px; }
.sf-group-title {
	font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
	color: #8b7fae; margin: 0 0 8px; font-weight: 700;
}
.sf-test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.sf-test-card {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 14px 16px; border: 1px solid var(--sf-line); border-radius: 10px;
	text-decoration: none; color: var(--sf-ink); background: #fff; font-size: 15px;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sf-test-card:hover {
	border-color: var(--sf-purple); box-shadow: 0 6px 18px rgba(109,40,217,.10);
	transform: translateY(-1px); color: var(--sf-purple);
}
.sf-test-name { font-weight: 600; line-height: 1.3; }
.sf-test-go { color: var(--sf-purple); font-size: 17px; }
.sf-no-results { color: var(--sf-muted); }

/* ----------------------------------------------------------- entries */
.sf-card-list { display: grid; gap: 12px; }
.sf-entry {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
	flex-wrap: wrap; background: #fff; border: 1px solid var(--sf-line);
	border-radius: 12px; padding: 16px 18px;
}
.sf-entry-main { min-width: 240px; flex: 1 1 320px; }
.sf-entry-bird { margin: 8px 0 2px; font-size: 17px; font-weight: 700; }
.sf-entry-meta { margin: 0 0 6px; font-size: 13px; color: var(--sf-muted); }
.sf-entry-results { margin: 0; font-size: 14px; }
.sf-entry-actions { display: flex; gap: 8px; }
.sf-badge {
	display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
.sf-badge-ready { background: #ecfdf5; color: #047857; }
.sf-badge-pending { background: #f5f2fd; color: #6d28d9; }
.sf-pending { color: #9c92b5; font-style: italic; }

/* ------------------------------------------------------------- tables */
.sf-table-block {
	background: #fff; border: 1px solid var(--sf-line); border-radius: 12px;
	overflow: hidden; margin-bottom: 18px;
}
.sf-table-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 18px; border-bottom: 1px solid var(--sf-line);
	background: linear-gradient(135deg, #faf7ff 0%, #fdfbff 100%);
}
.sf-table-title { margin: 0; font-size: 16px; font-weight: 700; }
.sf-table-count {
	font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8b7fae; font-weight: 700;
}
.sf-table-scroll { overflow-x: auto; }
.sf-wrap table.sf-table {
	width: 100%; border-collapse: collapse; margin: 0; font-size: 14px; background: #fff;
}
.sf-wrap table.sf-table th,
.sf-wrap table.sf-table td {
	padding: 11px 16px; text-align: left; border: 0;
	border-bottom: 1px solid var(--sf-line); vertical-align: middle; white-space: nowrap;
}
.sf-wrap table.sf-table thead th {
	font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
	color: #8b7fae; font-weight: 700; background: #faf8ff;
}
.sf-wrap table.sf-table tbody tr:last-child td { border-bottom: 0; }
.sf-wrap table.sf-table tbody tr:hover td { background: #fbf9ff; }
.sf-cell-result { font-weight: 600; }
.sf-dash { color: #b4abc9; font-weight: 400; }
.sf-col-action { text-align: right; }
.sf-btn-sm { padding: 5px 11px; font-size: 13px; }
@media (max-width: 640px) {
	.sf-wrap table.sf-table th,
	.sf-wrap table.sf-table td { padding: 9px 12px; }
}


.sf-btn {
	display: inline-block; padding: 8px 15px; border-radius: 8px; font-size: 14px;
	text-decoration: none; background: var(--sf-purple); color: #fff; border: 1px solid var(--sf-purple);
}
.sf-btn:hover { background: var(--sf-purple-dark); color: #fff; }
.sf-btn-ghost { background: #fff; color: var(--sf-purple); border-color: #d6cdf0; }
.sf-btn-ghost:hover { background: #faf8ff; color: var(--sf-purple-dark); }

.sf-empty-card {
	background: #fff; border: 1px dashed #d8d0ee; border-radius: 12px;
	padding: 24px; text-align: center;
}
.sf-empty-card p { margin: 0 0 4px; }
.sf-empty { color: var(--sf-muted); font-size: 14px; }

/* -------------------------------------------------------------- form */
.sf-back { text-decoration: none; color: var(--sf-purple); font-size: 14px; font-weight: 600; }
.sf-form {
	background: #fff; border: 1px solid var(--sf-line); border-radius: 14px;
	padding: 28px 30px; box-shadow: 0 10px 30px rgba(43,35,64,.05);
}
.sf-form-head { border-bottom: 1px solid var(--sf-line); padding-bottom: 16px; margin-bottom: 22px; }
.sf-form-note { margin: 0; font-size: 13px; color: var(--sf-muted); }

.sf-fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.sf-legend {
	font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
	color: #8b7fae; font-weight: 700; padding: 0; margin-bottom: 12px;
}
.sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
@media (max-width: 640px) { .sf-grid { grid-template-columns: 1fr; } }
.sf-field-wide, .sf-field-textarea, .sf-field-file { grid-column: 1 / -1; }

.sf-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.sf-req { color: #b91c1c; margin-left: 2px; }
.sf-help { font-size: 13px; color: var(--sf-muted); margin: 0 0 6px; }
.sf-field input[type="text"],
.sf-field input[type="email"],
.sf-field input[type="tel"],
.sf-field select,
.sf-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cfc7e4;
	border-radius: 8px;
	font-size: 15px;
	background: #fff;
}
.sf-field input:focus, .sf-field select:focus, .sf-field textarea:focus {
	outline: none; border-color: var(--sf-purple); box-shadow: 0 0 0 3px rgba(109,40,217,.12);
}
.sf-field input[readonly], .sf-field input[disabled] { background: #f7f5fb; color: #6b5f88; }
.sf-field-checkbox { display: flex; align-items: center; gap: 8px; }
.sf-field-checkbox label { margin: 0; order: 2; }

.sf-current-photo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sf-current-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.sf-current-photo span { font-size: 13px; color: var(--sf-muted); }

.sf-results { margin: 8px 0 26px; padding: 18px 20px; background: #f8f5ff; border: 1px solid #e4dbf9; border-radius: 10px; }
.sf-results h3 { margin: 0 0 4px; font-size: 15px; color: var(--sf-purple); }

.sf-submit {
	background: var(--sf-purple); color: #fff; border: 0; padding: 13px 32px;
	border-radius: 9px; font-size: 16px; font-weight: 600; cursor: pointer;
}
.sf-submit:hover { background: var(--sf-purple-dark); }
.sf-submit:disabled { opacity: .65; cursor: default; }

.sf-confirmation { background: #f0fdf4; border: 1px solid #bbf7d0; padding: 16px 20px; border-radius: 10px; margin-bottom: 22px; }
.sf-errors { background: #fef2f2; border: 1px solid #fecaca; padding: 16px 20px; border-radius: 10px; margin-bottom: 22px; }
.sf-errors ul { margin: 8px 0 0 18px; }

/* ------------------------------------------------- theme-proofing (Astra) */
/* Themes underline links and recolour buttons inside content. Lock ours down. */
.sf-wrap a,
.sf-wrap a:hover,
.sf-wrap a:focus,
.sf-wrap a:visited { text-decoration: none !important; box-shadow: none !important; }
.sf-wrap .sf-btn,
.sf-wrap .sf-btn:visited { background: var(--sf-purple) !important; color: #fff !important; border-color: var(--sf-purple) !important; font-weight: 600; }
.sf-wrap .sf-btn:hover { background: var(--sf-purple-dark) !important; color: #fff !important; }
.sf-wrap .sf-btn-ghost,
.sf-wrap .sf-btn-ghost:visited { background: #fff !important; color: var(--sf-purple) !important; border-color: #d6cdf0 !important; }
.sf-wrap .sf-btn-ghost:hover { background: #f7f3ff !important; color: var(--sf-purple-dark) !important; }
.sf-wrap .sf-test-card,
.sf-wrap .sf-test-card:visited { color: var(--sf-ink) !important; }
.sf-wrap .sf-test-card:hover { color: var(--sf-purple) !important; }
.sf-wrap .sf-submit { color: #fff !important; background: var(--sf-purple) !important; }
.sf-wrap input, .sf-wrap select, .sf-wrap textarea { font-family: inherit; color: var(--sf-ink); }

/* ------------------------------------------------------- group accordions */
.sf-group {
	background: #fff; border: 1px solid var(--sf-line); border-radius: 12px;
	margin-bottom: 12px; overflow: hidden;
}
.sf-group > summary.sf-group-title {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	cursor: pointer; list-style: none; padding: 15px 18px; margin: 0;
	font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none;
	color: var(--sf-ink); background: #faf8ff;
}
.sf-group > summary.sf-group-title::-webkit-details-marker { display: none; }
.sf-group > summary.sf-group-title::after {
	content: '\25BE'; color: var(--sf-purple); font-size: 14px; transition: transform .15s ease;
}
.sf-group[open] > summary.sf-group-title::after { transform: rotate(180deg); }
.sf-group-count { font-size: 12px; font-weight: 600; color: #8b7fae; margin-left: auto; }
.sf-group .sf-test-grid { padding: 14px 18px 18px; }
.sf-test-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ------------------------------------------------------------ form layout */
.sf-wrap .sf-form { max-width: 640px; margin: 0 auto; padding: 26px 26px 30px; }
.sf-wrap .sf-grid { grid-template-columns: 1fr; gap: 18px; }
.sf-wrap .sf-fieldset { padding-top: 4px; }
.sf-wrap .sf-legend {
	display: block; width: 100%; padding-bottom: 8px;
	border-bottom: 1px solid var(--sf-line); margin-bottom: 16px;
}
.sf-wrap .sf-field label { font-size: 14px; margin-bottom: 4px; }
.sf-wrap .sf-help { margin: 0 0 8px; line-height: 1.4; }
.sf-wrap .sf-field input[type="file"] {
	width: 100%; padding: 10px 12px; border: 1px dashed #cfc7e4; border-radius: 8px; background: #fbfaff;
}
.sf-wrap .sf-submit { width: 100%; margin-top: 6px; }
.sf-wrap .sf-back { display: inline-block; margin-bottom: 14px; }

/* ------------------------------------------------------------- mobile */
@media (max-width: 782px) {
	.sf-wrap { max-width: 100%; padding: 0 2px; }

	.sf-hero { padding: 18px 16px; border-radius: 12px; margin-bottom: 20px; }
	.sf-title { font-size: 22px; }
	.sf-lede { font-size: 14px; }
	.sf-stats { gap: 8px; }
	.sf-stat { flex: 1 1 100%; padding: 10px 12px; }

	.sf-section-head { flex-direction: column; align-items: stretch; }
	.sf-search { min-width: 0; width: 100%; }

	.sf-group > summary.sf-group-title { padding: 14px 14px; font-size: 15px; }
	.sf-group .sf-test-grid { padding: 12px 14px 16px; grid-template-columns: 1fr; }
	.sf-test-card { padding: 14px; font-size: 15px; }

	/* Tables become stacked cards: no sideways scrolling, no squished text. */
	.sf-table-scroll { overflow-x: visible; }
	.sf-wrap table.sf-table,
	.sf-wrap table.sf-table thead,
	.sf-wrap table.sf-table tbody,
	.sf-wrap table.sf-table tr,
	.sf-wrap table.sf-table td { display: block; width: 100%; }
	.sf-wrap table.sf-table thead { display: none; }
	.sf-wrap table.sf-table tbody tr {
		border-bottom: 1px solid var(--sf-line);
		padding: 6px 0;
	}
	.sf-wrap table.sf-table tbody tr:last-child { border-bottom: 0; }
	.sf-wrap table.sf-table tbody tr:hover td { background: transparent; }
	.sf-wrap table.sf-table td {
		border-bottom: 0;
		padding: 7px 16px;
		white-space: normal;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		text-align: right;
		font-size: 15px;
	}
	.sf-wrap table.sf-table td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		text-align: left;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .06em;
		font-weight: 700;
		color: #8b7fae;
	}
	.sf-wrap table.sf-table td.sf-col-action { justify-content: flex-end; padding-top: 10px; padding-bottom: 12px; }
	.sf-wrap table.sf-table td.sf-col-action::before { display: none; }
	.sf-wrap table.sf-table td.sf-col-action .sf-btn { width: 100%; text-align: center; padding: 11px 14px; }

	.sf-table-head { padding: 12px 16px; }

	.sf-entry { padding: 14px; }
	.sf-entry-actions { width: 100%; }
	.sf-entry-actions .sf-btn { flex: 1; text-align: center; }

	.sf-wrap .sf-form { padding: 18px 16px 22px; border-radius: 12px; }
	.sf-wrap .sf-field input[type="text"],
	.sf-wrap .sf-field input[type="email"],
	.sf-wrap .sf-field input[type="tel"],
	.sf-wrap .sf-field select,
	.sf-wrap .sf-field textarea { font-size: 16px; padding: 12px; } /* 16px stops iOS zoom */
	.sf-wrap .sf-submit { padding: 14px 20px; }
}