/*
 * BragDev Talent UI. Inherits Astra's design system: colors come ONLY from Astra's
 * global palette variables (fallbacks = the site's palette as of 2026-10-04), and
 * typography is inherited from the theme. Change the look in Astra Pro, not here.
 */
.bdt {
	--bdt-primary: var(--ast-global-color-0, #1c3c6d);
	--bdt-accent: var(--ast-global-color-1, #1c90d0);
	--bdt-heading: var(--ast-global-color-2, #616d8c);
	--bdt-text: var(--ast-global-color-3, #364151);
	--bdt-tint: var(--ast-global-color-4, #e7f6ff);
	--bdt-surface: var(--ast-global-color-5, #ffffff);
	--bdt-border: var(--ast-global-color-6, #d1dae5);
	--bdt-muted: var(--ast-global-color-2, #616d8c); /* 5.15:1 on white; the palette's Extra color (#839cb5) is only 2.84:1 */
	--bdt-error: #b42318;
	--bdt-success: #067647;
	--bdt-radius: 0; /* Owner rule (2026-10-05): square corners on every button, card and field. */
	color: var(--bdt-text);
	max-width: 860px;
	margin-inline: auto;
}

.bdt *, .bdt *::before, .bdt *::after { box-sizing: border-box; }

.bdt-card, .bdt-fieldset {
	background: var(--bdt-surface);
	border: 1px solid var(--bdt-border);
	border-radius: var(--bdt-radius);
	padding: 1.5rem;
	margin: 0 0 1.5rem;
}
.bdt-fieldset legend { font-weight: 600; color: var(--bdt-primary); padding: 0 .5rem; }

.bdt-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.bdt-field { margin-bottom: 1rem; }
.bdt-field label { display: block; font-weight: 600; margin-bottom: .35rem; }
.bdt-field input, .bdt-field select, .bdt-field textarea,
.bdt-skill-row select, .bdt-skill-row input {
	width: 100%;
	padding: .65rem .75rem;
	border: 1px solid var(--bdt-border);
	border-radius: var(--bdt-radius);
	background: var(--bdt-surface);
	color: var(--bdt-text);
	font: inherit;
	min-height: 44px; /* touch target */
}
.bdt-field input:focus, .bdt-field select:focus, .bdt-field textarea:focus,
.bdt-skill-row select:focus, .bdt-skill-row input:focus {
	outline: 2px solid var(--bdt-accent);
	outline-offset: 1px;
	border-color: var(--bdt-accent);
}
/* The browser's own select arrow sits flush against the right border and cannot be moved, so draw
 * a chevron with room around it, the same size as the native one (about 9 × 5px, thin stroke).
 * Two strokes in currentColor keep it on the palette (an SVG data URI could not read the CSS variables). */
.bdt select:not([multiple]) {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.75rem;
	background-image:
		linear-gradient(45deg, transparent calc(50% - .6px), currentColor calc(50% - .6px), currentColor calc(50% + .6px), transparent calc(50% + .6px)),
		linear-gradient(135deg, transparent calc(50% - .6px), currentColor calc(50% - .6px), currentColor calc(50% + .6px), transparent calc(50% + .6px));
	background-size: 5px 5px;
	background-position: calc(100% - 1rem - 4px) 50%, calc(100% - 1rem) 50%;
	background-repeat: no-repeat;
}
.bdt-field--checkbox label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.bdt-field--checkbox input { width: 1.2rem; height: 1.2rem; min-height: 0; margin-top: .2rem; flex: none; }
/* Square checkbox (the native one is drawn rounded). Border uses the muted text colour (5.15:1)
 * because a control's outline needs 3:1; the white tick is drawn on the brand fill. */
.bdt input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	padding: 0;
	border: 1px solid var(--bdt-muted);
	border-radius: 0;
	background: var(--bdt-surface);
	cursor: pointer;
}
.bdt input[type="checkbox"]:checked {
	border-color: var(--bdt-primary);
	background: var(--bdt-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.bdt input[type="checkbox"]:focus-visible { outline: 2px solid var(--bdt-accent); outline-offset: 2px; }

.bdt-required { color: var(--bdt-error); }
.bdt-help { color: var(--bdt-muted); font-size: .9em; margin: .35rem 0 0; }
.bdt-error { color: var(--bdt-error); font-size: .9em; margin: .35rem 0 0; font-weight: 600; }
.bdt-field--invalid input, .bdt-field--invalid select, .bdt-field--invalid textarea { border-color: var(--bdt-error); }

.bdt-skills { display: grid; gap: .75rem; margin-bottom: 1rem; }
.bdt-skill-row { display: grid; gap: .75rem; grid-template-columns: 2fr 1.5fr .8fr; align-items: start; }
.bdt-skill-row label span { display: block; font-size: .85em; color: var(--bdt-muted); margin-bottom: .2rem; }

.bdt-button {
	display: inline-block;
	background: var(--bdt-primary);
	color: var(--bdt-surface);
	border: 0;
	border-radius: var(--bdt-radius);
	/* Same size as the site's buttons (Astra/Spectra): 10 × 20px, Lato 15px regular, uppercase. */
	padding: 10px 20px;
	font: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
}
.bdt-button:hover, .bdt-button:focus-visible { background: var(--bdt-heading); color: var(--bdt-surface); } /* 5.15:1, as the site's buttons; white on accent is only 3.53:1 */
.bdt a.bdt-button, .bdt a.bdt-button:hover, .bdt a.bdt-button:focus-visible { text-decoration: none; } /* Link-buttons: no theme underline. */
.bdt-button--secondary { background: transparent; color: var(--bdt-primary); border: 1px solid var(--bdt-primary); }
.bdt-button--secondary:hover { color: var(--bdt-surface); }
.bdt-button--link { background: none; color: var(--bdt-error); padding: .25rem; min-height: 0; text-decoration: underline; }
.bdt-button--link:hover { background: none; color: var(--bdt-error); }

.bdt-alert { border-radius: var(--bdt-radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; background: var(--bdt-tint); border: 1px solid var(--bdt-border); }
.bdt-alert--error { background: #fef3f2; border-color: #fecdca; color: var(--bdt-error); }
.bdt-alert--success, .bdt-success { background: #ecfdf3; border-color: #abefc6; }

.bdt-badge { display: inline-block; border-radius: 999px; padding: .25rem .8rem; font-weight: 600; font-size: .85em; background: var(--bdt-tint); color: var(--bdt-primary); margin: 0; }
.bdt-badge--fully_vetted, .bdt-badge--proven, .bdt-badge--active { background: #ecfdf3; color: var(--bdt-success); }

.bdt-portal__header { margin-bottom: 1.5rem; }

/* Open roles (network opportunities): one card per role; meta and skills as quiet inline lists. */
.bdt-role { margin-bottom: 1.5rem; }
.bdt .bdt-role__title { margin: .75rem 0 .5rem; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.25; } /* Card title: H3-sized, not the page's 42px H2. */
.bdt .bdt-role__title a { color: var(--bdt-primary); text-decoration: none; } /* Beats the theme's content-link underline. */
.bdt .bdt-role__title a:hover, .bdt .bdt-role__title a:focus-visible { text-decoration: underline; }
.bdt .bdt-role__meta { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; color: var(--bdt-muted); font-size: .95em; }
.bdt .bdt-role__skills { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.bdt .bdt-role__skills li { margin: 0; background: var(--bdt-tint); color: var(--bdt-primary); padding: .2rem .6rem; font-size: .9em; border-radius: var(--bdt-radius); }
.bdt-role__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 1.5rem 0 1rem; }
.bdt-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.bdt-list__item { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--bdt-border); }
.bdt-details summary { cursor: pointer; font-weight: 600; color: var(--bdt-primary); margin-bottom: 1rem; }

/* Honeypot: off-screen rather than display:none, so naive bots still fill it in. */
.bdt-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.bdt-portal-main { padding: 2rem 0 3rem; }

@media (max-width: 600px) {
	.bdt-card, .bdt-fieldset { padding: 1rem; }
	.bdt-skill-row { grid-template-columns: 1fr 1fr; }
	.bdt-skill-row .bdt-skill-field:first-child { grid-column: 1 / -1; }
	.bdt-list__item { flex-direction: column; }
}

[hidden] { display: none !important; }

/* Interviewer scoring: 1–5 rating options as large, touch-friendly choices. */
.bdt-rating { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .75rem; }
.bdt-rating label {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .75rem;
	min-height: 44px;
	border: 1px solid var(--bdt-border);
	border-radius: var(--bdt-radius);
	background: var(--bdt-surface);
	cursor: pointer;
}
.bdt-rating input { width: 1.1rem; height: 1.1rem; margin: 0; }
.bdt-rating label:focus-within { outline: 2px solid var(--bdt-accent); outline-offset: 1px; }
.bdt-rating label:has(input:checked) { border-color: var(--bdt-primary); background: var(--bdt-tint); font-weight: 600; }