/* Student portal. Colours follow the theme's brand variables so the portal
   tracks the Customizer palette instead of hardcoding the crest colours. */

.bca-portal {
	--bca-brand: var(--it-theme-1, #E08A2E);
	--bca-deep: var(--it-theme-2, #A32826);
	--bca-line: #e6e2dc;
	--bca-ink: #2f2a26;
	--bca-muted: #7a716a;
	/* Ink dark enough to read on the saffron ground, and still of it. */
	--bca-on-brand: #3A2418;

	color: var(--bca-ink);
}

.bca-portal--login {
	max-width: 420px;
	background: #fff;
	border: 1px solid var(--bca-line);
	border-radius: 8px;
	padding: 32px 28px;
	box-shadow: 0 6px 24px rgba(58, 36, 24, 0.07);
	text-align: left;
}

.bca-portal__crest {
	display: block;
	width: 56px;
	height: auto;
	margin: 0 0 16px;
}

/* The theme leaves core login inputs unstyled, so they render as invisible
   boxes. Give them a visible field of their own. */
.bca-portal input[type="text"],
.bca-portal input[type="password"],
.bca-portal input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #cfc7bd;
	border-radius: 6px;
	background: #fff;
	color: var(--bca-ink);
	font-size: 16px;
	line-height: 1.4;
}

.bca-portal input[type="text"]:focus,
.bca-portal input[type="password"]:focus,
.bca-portal input[type="email"]:focus {
	border-color: var(--bca-brand);
	outline: 2px solid rgba(224, 138, 46, 0.25);
	outline-offset: 1px;
}

.bca-portal .login-username,
.bca-portal .login-password {
	margin-bottom: 16px;
}

.bca-portal .login-username label,
.bca-portal .login-password label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.bca-portal .login-remember {
	margin-bottom: 16px;
}

.bca-portal .login-submit input[type="submit"],
.bca-portal #wp-submit {
	width: 100%;
	background: var(--bca-brand);
	color: var(--bca-on-brand);
	border: 0;
	border-radius: 6px;
	padding: 13px 20px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.bca-portal .login-submit input[type="submit"]:hover,
.bca-portal #wp-submit:hover {
	background: var(--bca-deep);
}

.bca-portal h2,
.bca-portal h3 {
	color: var(--bca-deep);
	margin-top: 0;
}

.bca-muted {
	color: var(--bca-muted);
	font-weight: 400;
	font-size: 0.85em;
}

.bca-btn {
	display: inline-block;
	background: var(--bca-brand);
	color: var(--bca-on-brand);
	border: 0;
	border-radius: 6px;
	padding: 10px 20px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

.bca-btn:hover,
.bca-portal .login-submit input[type="submit"]:hover,
.bca-portal #wp-submit:hover {
	background: var(--bca-deep);
	color: #fff;
}

/* --- header ------------------------------------------------------------- */

.bca-hero {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	border: 1px solid var(--bca-line);
	border-radius: 8px;
	background: #fff;
}

.bca-hero__photo {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--bca-brand);
	flex: none;
}

.bca-hero h2 {
	margin: 0 0 4px;
}

.bca-hero__meta {
	margin: 0;
	color: var(--bca-muted);
}

.bca-signout {
	margin-left: auto;
	align-self: flex-start;
	font-size: 0.9em;
}

/* --- tabs --------------------------------------------------------------- */

.bca-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 20px 0 0;
	border-bottom: 2px solid var(--bca-line);
}

.bca-tab {
	padding: 10px 18px;
	text-decoration: none;
	color: var(--bca-muted);
	font-weight: 600;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}

.bca-tab.is-active,
.bca-tab:hover {
	color: var(--bca-deep);
	border-bottom-color: var(--bca-brand);
}

/* --- panels ------------------------------------------------------------- */

.bca-panel {
	background: #fff;
	border: 1px solid var(--bca-line);
	border-radius: 8px;
	padding: 24px;
	margin: 20px 0;
}

.bca-details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 10px 28px;
	margin: 0;
}

.bca-details dt {
	font-weight: 600;
	color: var(--bca-muted);
}

.bca-details dd {
	margin: 0;
}

.bca-big {
	font-size: 2.4em;
	font-weight: 700;
	color: var(--bca-deep);
	margin: 0 0 16px;
	line-height: 1.1;
}

.bca-big .bca-muted {
	display: block;
	font-size: 0.35em;
	font-weight: 400;
}

/* --- tables ------------------------------------------------------------- */

.bca-table {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 0;
}

.bca-table th,
.bca-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--bca-line);
}

.bca-table thead th {
	background: #faf7f2;
	color: var(--bca-deep);
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bca-table tfoot th {
	font-weight: 700;
	border-top: 2px solid var(--bca-brand);
	border-bottom: 0;
}

.bca-marksheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.bca-grade {
	background: var(--bca-brand);
	color: var(--bca-on-brand);
	border-radius: 999px;
	padding: 4px 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bca-print {
	margin: 16px 0 0;
}

@media (max-width: 600px) {
	.bca-hero {
		flex-wrap: wrap;
	}

	.bca-details {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.bca-details dd {
		margin-bottom: 12px;
	}

	.bca-table {
		font-size: 0.9em;
	}

	.bca-table th,
	.bca-table td {
		padding: 8px 6px;
	}
}

@media print {
	.bca-tabs,
	.bca-signout,
	.bca-print,
	.bca-hero .bca-signout {
		display: none;
	}

	.bca-panel {
		border: 0;
		padding: 0;
	}
}

/* --- numerals ------------------------------------------------------------ */

/* Marks, money, days and percentages sit in columns that are read down, so the
   figures are right-aligned and the digits are fixed-width. Proportional
   numerals make a column of totals ripple. */
.bca-table th.bca-num,
.bca-table td.bca-num,
.bca-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.bca-big {
	font-variant-numeric: tabular-nums;
}

/* --- fee status ----------------------------------------------------------- */

/* Three stable meanings: settled, part-settled, nothing received. Colour is
   backed by the word itself, so it never carries the meaning alone. */
.bca-status {
	display: inline-block;
	font-weight: 600;
	font-size: 0.9em;
}

.bca-status--paid {
	color: #2f6b3f;
}

.bca-status--partly-paid {
	color: #8a5a12;
}

.bca-status--unpaid {
	color: var(--bca-deep);
}

/* --- focus ---------------------------------------------------------------- */

/* The portal is a form-led surface reached by keyboard as often as not, and
   the browser default ring disappears against the saffron. */
.bca-portal a:focus-visible,
.bca-portal button:focus-visible,
.bca-portal input:focus-visible,
.bca-tab:focus-visible,
.bca-btn:focus-visible {
	outline: 2px solid var(--bca-deep);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.bca-portal * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* --- attendance calendar -------------------------------------------------- */

.bca-months {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
}

.bca-months__link {
	display: inline-flex;
	flex-direction: column;
	gap: 1px;
	padding: 7px 14px;
	border: 1px solid var(--bca-line);
	border-radius: 6px;
	text-decoration: none;
	color: var(--bca-ink);
	font-weight: 600;
	font-size: 0.9em;
	line-height: 1.2;
}

.bca-months__link:hover {
	border-color: var(--bca-brand);
	color: var(--bca-deep);
}

.bca-months__link.is-active {
	background: var(--bca-brand);
	border-color: var(--bca-brand);
	color: var(--bca-on-brand);
}

.bca-months__pc {
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	opacity: 0.8;
}

.bca-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
	max-width: 440px;
}

.bca-cal__dow {
	text-align: center;
	font-size: 0.72em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bca-muted);
	border: 0;
	text-decoration: none;
	padding-bottom: 2px;
}

.bca-cal__pad {
	aspect-ratio: 1;
}

/* A square per day. The number stays legible on every state, so the colour is
   a second signal rather than the only one. */
.bca-cal__day {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 6px;
	font-size: 0.85em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--bca-line);
	color: var(--bca-ink);
	background: #fff;
	cursor: default;
}

.bca-cal__day.is-present {
	background: #e7f2ea;
	border-color: #b9d8c3;
	color: #214c2d;
}

.bca-cal__day.is-absent {
	background: #fae9e8;
	border-color: #e8bbb8;
	color: #8f201e;
}

.bca-cal__day.is-late {
	background: #fdf1dd;
	border-color: #ecd0a0;
	color: #6b4409;
}

.bca-cal__day.is-leave {
	background: #eef0f2;
	border-color: #d2d6da;
	color: #434a50;
}

.bca-cal__day.is-closed {
	background: #f7f5f2;
	border-style: dashed;
	color: var(--bca-muted);
}

.bca-cal__key {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 16px 0 0;
	font-size: 0.85em;
	color: var(--bca-muted);
}

.bca-cal__keyitem {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bca-cal__swatch {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	border: 1px solid var(--bca-line);
}

.bca-cal__swatch.is-present { background: #e7f2ea; border-color: #b9d8c3; }
.bca-cal__swatch.is-absent  { background: #fae9e8; border-color: #e8bbb8; }
.bca-cal__swatch.is-late    { background: #fdf1dd; border-color: #ecd0a0; }
.bca-cal__swatch.is-leave   { background: #eef0f2; border-color: #d2d6da; }
.bca-cal__swatch.is-closed  { background: #f7f5f2; border-style: dashed; }

@media (max-width: 600px) {
	.bca-cal__grid {
		gap: 4px;
	}
}

/* The second action on the marksheet: same shape, less weight, so the
   download reads as the primary one. */
.bca-btn--quiet {
	background: transparent;
	color: var(--bca-deep);
	box-shadow: inset 0 0 0 1px var(--bca-line);
}

.bca-btn--quiet:hover {
	background: var(--bca-deep);
	color: #fff;
	box-shadow: none;
}

.bca-print {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* --- children switcher ---------------------------------------------------- */

.bca-children {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.bca-children__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 16px 6px 6px;
	border: 1px solid var(--bca-line);
	border-radius: 999px;
	background: #fff;
	color: var(--bca-ink);
	font-weight: 600;
	text-decoration: none;
}

.bca-children__item img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.bca-children__item:hover {
	border-color: var(--bca-brand);
	color: var(--bca-deep);
}

.bca-children__item.is-active {
	border-color: var(--bca-brand);
	background: #fdf4e8;
	color: var(--bca-deep);
}

/* --- one-line result of the last action ---------------------------------- */

.bca-flash {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 8px;
	font-weight: 500;
}

.bca-flash--ok {
	background: #e7f2ea;
	color: #214c2d;
}

.bca-flash--error {
	background: #fae9e8;
	color: #8f201e;
}

/* --- change requests ------------------------------------------------------ */

.bca-changes {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--bca-line);
}

.bca-changes h3 {
	margin: 0 0 4px;
}

.bca-changes > .bca-muted {
	margin: 0 0 16px;
}

.bca-changes__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-changes__item {
	padding: 12px 0;
	border-bottom: 1px solid var(--bca-line);
}

.bca-changes__item:last-child {
	border-bottom: 0;
}

.bca-changes__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
}

.bca-changes__label {
	flex: 0 0 150px;
	color: var(--bca-muted);
	font-weight: 600;
}

.bca-changes__value {
	flex: 1 1 200px;
	min-width: 0;
}

.bca-changes__photo {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	vertical-align: middle;
}

.bca-pill {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 0.82em;
	font-weight: 600;
}

.bca-pill--pending {
	background: #fdf1dd;
	color: #6b4409;
}

.bca-changes__ask {
	margin-top: 6px;
}

.bca-changes__ask summary {
	display: inline-block;
	color: var(--bca-deep);
	font-weight: 600;
	font-size: 0.9em;
	cursor: pointer;
	list-style: none;
}

.bca-changes__ask summary::-webkit-details-marker {
	display: none;
}

.bca-changes__ask summary::after {
	content: " \203A";
}

.bca-changes__ask[open] summary::after {
	content: " \2039";
}

.bca-changes__form {
	display: grid;
	gap: 6px;
	max-width: 420px;
	margin-top: 12px;
	padding: 16px;
	border-radius: 8px;
	background: #fbf7f1;
}

.bca-changes__form label {
	font-weight: 600;
	font-size: 0.9em;
}

.bca-changes__form label + input,
.bca-changes__form label + textarea {
	margin-bottom: 8px;
}

.bca-changes__form textarea,
.bca-changes__form input[type="date"],
.bca-changes__form input[type="tel"],
.bca-changes__form input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #cfc7bd;
	border-radius: 6px;
	background: #fff;
	font: inherit;
}

.bca-changes__form .bca-btn {
	justify-self: start;
}

.bca-changes__history-title {
	margin: 24px 0 8px;
	font-size: 0.95em;
}

.bca-changes__history {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.92em;
}

.bca-changes__history li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding: 6px 0;
}

@media (max-width: 600px) {
	.bca-changes__label {
		flex-basis: 100%;
	}
}

.bca-section-title {
	margin: 0 0 14px;
	font-size: 1.1em;
}

/* --- fees ----------------------------------------------------------------- */

.bca-demo-note {
	display: inline-block;
	margin: 0 0 20px;
	padding: 6px 12px;
	border-radius: 6px;
	background: #fdf1dd;
	color: #6b4409;
	font-size: 0.88em;
	font-weight: 500;
}

.bca-months-wrap {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.bca-months-wrap legend {
	margin-bottom: 12px;
	padding: 0;
	font-weight: 600;
	font-size: 1em;
}

.bca-months-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
}

.bca-month {
	position: relative;
}

/* The tile is the checkbox's label, so the whole month is the tap target. */
.bca-month label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--bca-line);
	border-radius: 8px;
	background: #fff;
	cursor: default;
}

.bca-month .bca-month__pick {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	z-index: 1;
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	accent-color: var(--bca-deep);
	cursor: pointer;
}

.bca-month.is-due label {
	cursor: pointer;
	border-color: #e8c89a;
}

.bca-month.is-due .bca-month__pick:checked + label {
	border-color: var(--bca-brand);
	background: #fdf4e8;
	box-shadow: inset 0 0 0 1px var(--bca-brand);
}

.bca-month__name {
	font-weight: 700;
}

.bca-month__amount {
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	color: var(--bca-muted);
}

.bca-month__state {
	margin-top: 4px;
	font-size: 0.74em;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.bca-month.is-paid label {
	background: #f1f7f2;
	border-color: #cfe3d4;
}

.bca-month.is-paid .bca-month__state { color: #2f6b3f; }
.bca-month.is-review .bca-month__state { color: #8a5a12; }
.bca-month.is-due .bca-month__state { color: var(--bca-deep); }

.bca-month.is-review label {
	background: #fdf8ef;
	border-style: dashed;
	border-color: #e2c48f;
}

.bca-month.is-upcoming label {
	opacity: 0.55;
}

.bca-month__note {
	display: block;
	margin-top: 4px;
	color: var(--bca-deep);
	font-size: 0.72em;
	font-weight: 600;
}

/* Two steps, side by side on a wide screen: pay, then prove it. */
.bca-pay {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 20px;
	margin-bottom: 28px;
}

.bca-pay__step {
	padding: 20px;
	border: 1px solid var(--bca-line);
	border-radius: 10px;
	background: #fff;
}

.bca-pay__step h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 1.05em;
}

.bca-pay__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--bca-brand);
	color: var(--bca-on-brand);
	font-size: 0.85em;
	font-weight: 700;
}

.bca-pay__qr {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: flex-start;
}

.bca-pay__qr img {
	flex: none;
	width: 180px;
	height: 180px;
	border-radius: 8px;
	border: 1px solid var(--bca-line);
	object-fit: contain;
	background: #fff;
}

.bca-pay__how {
	flex: 1 1 200px;
	min-width: 0;
}

.bca-pay__how p {
	margin: 0 0 10px;
}

.bca-pay__amount strong {
	font-size: 1.35em;
	color: var(--bca-deep);
	font-variant-numeric: tabular-nums;
}

.bca-pay__ref code {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 4px;
	background: #fdf4e8;
	color: var(--bca-ink);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.bca-copy {
	margin-left: 4px;
	padding: 3px 10px;
	border: 1px solid var(--bca-line);
	border-radius: 4px;
	background: #fff;
	color: var(--bca-deep);
	font-size: 0.82em;
	font-weight: 600;
	cursor: pointer;
}

.bca-copy:hover {
	border-color: var(--bca-brand);
}

.bca-pay__step label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
}

.bca-pay__step input[type="text"],
.bca-pay__step input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 6px;
	padding: 10px 12px;
	border: 1px solid #cfc7bd;
	border-radius: 6px;
	background: #fff;
	font: inherit;
}

.bca-pay__step input[name="utr"] {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.bca-pay__step .bca-muted {
	margin: 0 0 14px;
}

.bca-pay__step .bca-btn {
	margin: 4px 0 10px;
}

.bca-history-title {
	margin-top: 8px;
}

/* --- account -------------------------------------------------------------- */

.bca-account .bca-details {
	margin-bottom: 28px;
}

.bca-account__child {
	display: block;
}

.bca-account__child + .bca-account__child {
	margin-top: 4px;
}

.bca-account__form {
	display: grid;
	gap: 6px;
	max-width: 380px;
}

.bca-account__form label {
	font-weight: 600;
}

.bca-account__form .bca-muted {
	margin: 0 0 8px;
}

.bca-account__form .bca-btn {
	justify-self: start;
	margin-top: 8px;
}

@media (max-width: 780px) {
	.bca-months-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bca-pay {
		grid-template-columns: 1fr;
	}
}

/* --- tables that become cards on a phone ---------------------------------- */

@media (max-width: 600px) {
	.bca-table--stack thead {
		display: none;
	}

	.bca-table--stack,
	.bca-table--stack tbody,
	.bca-table--stack tr {
		display: block;
		width: 100%;
	}

	.bca-table--stack tr {
		padding: 10px 0;
		border-bottom: 1px solid var(--bca-line);
	}

	.bca-table--stack td,
	.bca-table.bca-table--stack td.bca-num {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 4px 0;
		border: 0;
		text-align: right;
	}

	.bca-table--stack td::before {
		content: attr(data-label);
		flex: none;
		color: var(--bca-muted);
		font-weight: 600;
		text-align: left;
	}
}

/* Any other table is never allowed to push the page sideways. */
.bca-panel {
	min-width: 0;
	overflow-x: auto;
}

/* The theme colours inline code pink; in the portal a code is a number to
   read out or copy, so it takes the ink. */
.bca-portal code {
	color: var(--bca-ink);
	background: #f6f1ea;
	padding: 1px 6px;
	border-radius: 4px;
	font-variant-numeric: tabular-nums;
}

/* --- feedback before the marksheet --------------------------------------- */

.bca-feedback {
	margin: 20px 0 0;
	padding: 20px;
	border-radius: 10px;
	background: #fbf7f1;
	border: 1px solid var(--bca-line);
}

.bca-feedback__title {
	margin: 0 0 16px;
	font-size: 1em;
	color: var(--bca-ink);
}

.bca-feedback__q {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.bca-feedback__q legend {
	margin-bottom: 8px;
	padding: 0;
	font-weight: 600;
	font-size: 0.95em;
}

/* Five answers as one segmented row; on a phone they wrap rather than shrink
   below a comfortable tap size. */
.bca-feedback__scale {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bca-feedback .bca-feedback__input {
	position: absolute !important;
	opacity: 0;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	pointer-events: none;
}

.bca-feedback__opt {
	padding: 8px 14px;
	border: 1px solid #d9cfc3;
	border-radius: 999px;
	background: #fff;
	color: var(--bca-ink);
	font-size: 0.9em;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
}

.bca-feedback__opt:hover {
	border-color: var(--bca-brand);
}

.bca-feedback__input:checked + .bca-feedback__opt {
	border-color: var(--bca-brand);
	background: var(--bca-brand);
	color: var(--bca-on-brand);
	font-weight: 700;
}

.bca-feedback__input:focus-visible + .bca-feedback__opt {
	outline: 2px solid var(--bca-deep);
	outline-offset: 2px;
}

.bca-feedback__label {
	display: block;
	margin: 4px 0 6px;
	font-weight: 600;
	font-size: 0.95em;
}

.bca-feedback textarea {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 14px;
	padding: 10px 12px;
	border: 1px solid #cfc7bd;
	border-radius: 6px;
	background: #fff;
	font: inherit;
}

/* --- complaints and feedback ---------------------------------------------- */

.bca-talk__form {
	display: grid;
	gap: 6px;
	max-width: 560px;
	margin-bottom: 8px;
}

.bca-talk__form > label {
	margin-top: 6px;
	font-weight: 600;
}

.bca-talk__form input[type="text"],
.bca-talk__form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #cfc7bd;
	border-radius: 6px;
	background: #fff;
	font: inherit;
}

.bca-talk__form .bca-btn {
	justify-self: start;
	margin-top: 10px;
}

.bca-talk__kinds {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
}

.bca-talk__kinds legend {
	float: left;
	margin-right: 10px;
	padding: 0;
	font-weight: 600;
}

.bca-talk__kinds .bca-feedback__input {
	position: absolute !important;
	opacity: 0;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	pointer-events: none;
}

.bca-talk__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-talk__item {
	padding: 14px 0;
	border-bottom: 1px solid var(--bca-line);
}

.bca-talk__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.bca-talk__message {
	margin: 8px 0 0;
	white-space: normal;
}

.bca-talk__reply {
	margin-top: 10px;
	padding: 12px 14px;
	border-radius: 8px;
	background: #f1f7f2;
}

.bca-talk__reply p {
	margin: 4px 0 0;
}

.bca-talk__from {
	color: #2f6b3f;
	font-size: 0.85em;
	font-weight: 700;
}

.bca-pill--done {
	background: #e7f2ea;
	color: #214c2d;
}

/* The theme sets legends at heading size. In the portal a legend is a field
   label and reads like one; the feedback form already won this with its own
   rule, the complaints form needs it too. */
.bca-portal .bca-talk__kinds legend {
	float: none;
	width: 100%;
	margin: 0 0 8px;
	font-size: 1em !important;
	line-height: 1.4;
	font-weight: 600;
	color: var(--bca-ink);
}

/* More room above a heading than below it: the list of earlier messages is a
   new section, not a footnote to the button. */
.bca-talk .bca-history-title {
	margin-top: 36px;
}

/* The theme indents lists; these are content rows aligned to the panel. */
.bca-portal .bca-talk__list,
.bca-portal .bca-changes__list,
.bca-portal .bca-changes__history,
.bca-portal .bca-tr__list,
.bca-portal .bca-tm__list,
.bca-portal .bca-tm__sheetlist,
.bca-portal .bca-th__list,
.bca-portal .bca-tc__list,
.bca-portal .bca-apps__list,
.bca-portal .bca-pick {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

.bca-portal .bca-talk__item,
.bca-portal .bca-changes__item {
	margin-left: 0 !important;
}

/* --- registration --------------------------------------------------------- */

.bca-register-page {
	max-width: 560px;
}

.bca-register h2 {
	margin: 0 0 6px;
}

.bca-register > .bca-muted {
	margin: 0 0 20px;
}

.bca-register__form,
.bca-register__code {
	display: grid;
	gap: 14px;
}

.bca-field {
	display: grid;
	gap: 6px;
}

.bca-field label,
.bca-register__code label {
	font-weight: 600;
}

.bca-field input,
.bca-field textarea,
.bca-register__code input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	border: 1px solid #cfc7bd;
	border-radius: 6px;
	background: #fff;
	color: var(--bca-ink);
	font: inherit;
}

.bca-field .bca-muted {
	margin: 0;
}

/* The code box: six digits, set large and spaced, because it is read off
   another screen and typed in. */
.bca-register__code input[name="code"] {
	max-width: 220px;
	font-size: 1.6em;
	letter-spacing: 0.4em;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.bca-register__form .bca-btn,
.bca-register__code .bca-btn {
	justify-self: start;
	margin-top: 4px;
}

.bca-register__resend {
	margin-top: 12px;
}

.bca-linkbtn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--bca-deep);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.bca-register__login,
.bca-login__register {
	margin-top: 18px;
}

/* The field only robots see. */
.bca-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- homework ------------------------------------------------------------- */

.bca-homework .bca-section-title {
	margin-top: 8px;
}

.bca-homework .bca-section-title + .bca-hw {
	margin-bottom: 28px;
}

.bca-portal .bca-hw {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.bca-hw__item {
	margin: 0 0 10px !important;
	padding: 14px 16px;
	border: 1px solid var(--bca-line);
	border-radius: 8px;
	background: #fff;
}

.bca-hw__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.bca-hw__subject {
	color: var(--bca-deep);
}

.bca-hw__details {
	margin: 8px 0 0;
}

.bca-pill--due {
	background: #f3efe9;
	color: var(--bca-ink);
}

.bca-pill--soon {
	background: #fae9e8;
	color: #8f201e;
}

/* --- notices -------------------------------------------------------------- */

.bca-portal .bca-noticeboard {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.bca-noticeboard__item {
	margin: 0 !important;
	padding: 16px 0;
	border-bottom: 1px solid var(--bca-line);
}

.bca-noticeboard__item:last-child {
	border-bottom: 0;
}

.bca-noticeboard__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
}

.bca-noticeboard__item p {
	margin: 8px 0 0;
}

.bca-pill--important {
	background: var(--bca-deep);
	color: #fff;
}

/* The week's important notice: one line above the tabs, the whole of it a
   link to the notice board. */
.bca-banner {
	display: block;
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 8px;
	background: #fdf1dd;
	color: var(--bca-ink);
	text-decoration: none;
}

.bca-banner strong {
	color: var(--bca-deep);
}

.bca-banner:hover {
	background: #fbe8c9;
}

/* The list reset above zeroes list margins, so the gap between homework
   groups is carried by the heading that starts the next group. */
.bca-homework .bca-hw + .bca-section-title {
	margin-top: 30px;
}

/* Clicking a choice focuses its hidden radio, and the browser scrolls to the
   focused element. Absolutely positioned against a distant ancestor, the
   radio sat far from its label and the page jumped there. Anchoring each row
   of choices makes the hidden radio sit on the row itself. */
.bca-feedback__scale,
.bca-talk__kinds {
	position: relative;
}

.bca-feedback .bca-feedback__input,
.bca-talk__kinds .bca-feedback__input {
	top: 0 !important;
	left: 0 !important;
	clip-path: inset(50%);
}

/* --- who the message is from and about -------------------------------------- */

.bca-talk__who {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 8px;
}

.bca-talk__field {
	display: grid;
	gap: 6px;
	align-content: start;
}

.bca-talk__field label {
	font-weight: 600;
}

.bca-talk__field input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #cfc7bd;
	border-radius: 6px;
	background: #fff;
	font: inherit;
}

/* Fixed to the chosen child: shown as a field, read as settled. */
.bca-talk__field input[readonly] {
	background: #f6f1ea;
	color: var(--bca-ink);
	font-weight: 600;
	cursor: default;
}

.bca-talk__field .bca-muted {
	margin: 0;
	font-size: 0.85em;
}

@media (max-width: 600px) {
	.bca-talk__who {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Phones
   Families use the portal from a phone far more than from a computer, so on a
   narrow screen it behaves like an app screen: the page chrome steps back,
   navigation moves to the bottom where the thumb is, and every control is a
   comfortable tap.
   ========================================================================== */

/* The theme's page-load animation holds the screen for a few seconds on every
   visit. On a tool a parent opens daily - often on mobile data - that is pure
   waiting, so the portal pages skip it. */
.bca-app #it-loading {
	display: none !important;
}

.bca-bottomnav {
	display: none;
}

.bca-icon {
	flex: none;
	display: block;
}

@media (max-width: 782px) {

	/* --- page chrome around the portal --------------------------------- */

	/* The decorative page-title band is 300px tall on a phone; a portal page
	   only needs to say where you are. */
	.bca-app .it-breadcrumb-area:not(.d-none) {
		height: auto !important;
		padding: 26px 0 22px !important;
	}

	.bca-app .it-breadcrumb-content {
		margin-bottom: 0 !important;
	}

	.bca-app .it-breadcrumb-area [class*="it-breadcrumb-shape"] {
		display: none !important;
	}

	.bca-app .it-breadcrumb-title {
		font-size: 24px !important;
		line-height: 1.2 !important;
	}

	.bca-app .it-breadcrumb-title-box {
		margin-bottom: 6px !important;
	}

	.bca-app .it-breadcrumb-list,
	.bca-app .it-breadcrumb-list span {
		font-size: 14px !important;
	}

	.bca-app .page-area {
		padding-top: 16px !important;
		padding-bottom: 32px !important;
	}

	/* The theme's scroll-to-top button would sit on the bottom bar. */
	.bca-app--signed-in .scroll-top {
		display: none !important;
	}

	/* --- the portal itself ------------------------------------------------ */

	.bca-app--signed-in .bca-portal {
		padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}

	/* The tabs give way to the bottom bar. */
	.bca-app--signed-in .bca-tabs {
		display: none;
	}

	/* Photo beside the name, so the child is named in one short row. */
	.bca-portal .bca-hero {
		flex-wrap: nowrap;
		gap: 14px;
		padding: 14px;
	}

	.bca-portal .bca-hero > div {
		min-width: 0;
	}

	.bca-portal .bca-hero__photo {
		width: 56px;
		height: 56px;
		border-width: 2px;
	}

	.bca-portal .bca-hero h2 {
		font-size: 1.25em;
		overflow-wrap: anywhere;
	}

	/* Sign-out lives in More on a phone. */
	.bca-app--signed-in .bca-portal .bca-signout {
		display: none;
	}

	.bca-portal .bca-panel {
		padding: 18px 16px;
		margin: 14px 0;
	}

	.bca-portal .bca-banner {
		margin-top: 12px;
	}

	/* Children side by side, scrolling sideways if there are many. They run to
	   the screen edges: the page gutter is 15px on a phone. */
	.bca-children {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-left: -15px;
		margin-right: -15px;
		padding: 0 15px 4px;
		scrollbar-width: none;
	}

	.bca-children::-webkit-scrollbar {
		display: none;
	}

	.bca-children__item {
		flex: none;
		min-height: 44px;
	}

	/* --- the bottom bar ------------------------------------------------------ */

	.bca-app--signed-in .bca-bottomnav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--bca-line);
		box-shadow: 0 -4px 18px rgba(58, 36, 24, 0.08);
	}

	.bca-bottomnav__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 52px;
		padding: 4px 2px;
		border-radius: 10px;
		color: var(--bca-muted);
		font-size: 11.5px;
		font-weight: 600;
		line-height: 1.15;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		list-style: none;
		-webkit-tap-highlight-color: transparent;
	}

	.bca-bottomnav__item span {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.bca-bottomnav__item::-webkit-details-marker {
		display: none;
	}

	.bca-bottomnav__item.is-active {
		color: var(--bca-deep);
	}

	/* The active tab carries a soft saffron ground behind its icon - colour
	   only, nothing moves. */
	.bca-bottomnav__item.is-active .bca-icon {
		border-radius: 999px;
		background: #fdecd6;
		box-shadow: 0 0 0 5px #fdecd6;
	}

	.bca-bottomnav__item:focus-visible {
		outline: 2px solid var(--bca-deep);
		outline-offset: -2px;
	}

	/* --- More: a sheet that rises from the bar ---------------------------- */

	.bca-more {
		position: static;
	}

	.bca-more__sheet {
		position: fixed;
		left: 8px;
		right: 8px;
		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
		z-index: 9991;
		display: grid;
		gap: 2px;
		padding: 8px;
		border-radius: 16px;
		background: #fff;
		border: 1px solid var(--bca-line);
		box-shadow: 0 -6px 30px rgba(58, 36, 24, 0.18);
	}

	.bca-more:not([open]) .bca-more__sheet {
		display: none;
	}

	.bca-more__item {
		display: flex;
		align-items: center;
		gap: 14px;
		min-height: 52px;
		padding: 0 14px;
		border-radius: 10px;
		color: var(--bca-ink);
		font-size: 16px;
		font-weight: 600;
		text-decoration: none;
	}

	.bca-more__item .bca-icon {
		color: var(--bca-muted);
	}

	.bca-more__item.is-active {
		background: #fdf4e8;
		color: var(--bca-deep);
	}

	.bca-more__item.is-active .bca-icon {
		color: var(--bca-deep);
	}

	.bca-more__item--out {
		margin-top: 4px;
		border-top: 1px solid var(--bca-line);
		border-radius: 0 0 10px 10px;
		color: var(--bca-muted);
	}

	/* --- comfortable taps ---------------------------------------------------- */

	.bca-changes__ask summary {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.bca-copy {
		min-height: 44px;
		padding: 0 16px;
	}

	.bca-portal .login-remember label {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
	}

	.bca-portal .login-remember input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}

	.bca-portal--login .bca-muted a,
	.bca-login__register a,
	.bca-register__login a {
		display: inline-block;
		padding: 12px 0;
	}

	.bca-btn,
	.bca-portal #wp-submit {
		min-height: 48px;
	}

	.bca-month__state,
	.bca-month__note {
		font-size: 13px;
	}

	.bca-month__amount {
		font-size: 13px;
	}

	/* Text fields at 16px so a phone never zooms the page on focus. */
	.bca-portal input,
	.bca-portal textarea,
	.bca-portal select {
		font-size: 16px;
	}
}

/* --- home ------------------------------------------------------------------ */

.bca-home__lead {
	margin: 18px 0 14px;
	color: var(--bca-muted);
	font-size: 1em;
}

.bca-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

/* Each card is one large tap target: icon, what it is about, the answer in
   big type, a plain-words line under it, and where tapping takes you. */
.bca-card-link {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 96px;
	padding: 16px;
	border: 1px solid var(--bca-line);
	border-radius: 14px;
	background: #fff;
	color: var(--bca-ink);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.bca-card-link:hover {
	border-color: var(--bca-brand);
	color: var(--bca-ink);
}

.bca-card-link:focus-visible {
	outline: 2px solid var(--bca-deep);
	outline-offset: 2px;
}

.bca-card-link__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #fdf1e2;
	color: var(--bca-deep);
}

.bca-card-link__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.bca-card-link__label {
	color: var(--bca-muted);
	font-size: 0.85em;
	font-weight: 600;
}

.bca-card-link__value {
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.bca-card-link__note {
	color: var(--bca-muted);
	font-size: 0.9em;
	line-height: 1.4;
}

.bca-card-link .bca-pill {
	margin-top: 6px;
}

.bca-card-link__go {
	flex: none;
	color: #c4b6a6;
}

.bca-card-link__action {
	flex: none;
	align-self: center;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--bca-brand);
	color: var(--bca-on-brand);
	font-size: 0.95em;
	font-weight: 700;
	white-space: nowrap;
}

/* Tone: money owed and things needing attention are marked by colour and by
   their words, never by colour alone. */
.bca-card-link.is-due {
	border-color: #ecc58f;
	background: #fffaf3;
}

.bca-card-link.is-due .bca-card-link__value {
	color: var(--bca-deep);
}

.bca-card-link.is-alert .bca-card-link__icon {
	background: #fae9e8;
	color: #8f201e;
}

.bca-card-link.is-good .bca-card-link__icon {
	background: #e7f2ea;
	color: #2f6b3f;
}

.bca-card-link.is-good .bca-card-link__value {
	color: #2f6b3f;
}

@media (max-width: 782px) {
	.bca-cards {
		grid-template-columns: 1fr;
	}

	.bca-home__lead {
		margin-top: 14px;
	}
}

/* --- language ---------------------------------------------------------------- */

/* Three choices, each written in its own script, so a parent who reads only
   Bengali can still find Bengali. */
.bca-lang {
	display: flex;
	justify-content: flex-end;
	gap: 4px;
	margin: 0 0 12px;
}

.bca-lang__opt {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--bca-line, #e6e2dc);
	border-radius: 999px;
	background: #fff;
	color: var(--bca-ink, #2f2a26);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}

.bca-lang__opt:hover {
	border-color: var(--it-theme-1, #E08A2E);
	color: var(--bca-ink, #2f2a26);
}

.bca-lang__opt.is-active {
	border-color: var(--it-theme-1, #E08A2E);
	background: #fdf1e2;
	color: var(--it-theme-2, #A32826);
}

.bca-lang--card {
	margin: 0 0 14px;
}

.bca-register-page + .bca-lang--card,
.bca-lang--card + .bca-register-page {
	margin-top: 0;
}

/* Bengali and Hindi set taller than Latin; give the cards room to breathe. */
:lang(bn) .bca-portal,
:lang(hi) .bca-portal {
	line-height: 1.7;
}

@media (max-width: 782px) {
	.bca-lang {
		justify-content: flex-start;
	}

	.bca-lang__opt {
		min-height: 44px;
		flex: 1 1 0;
		justify-content: center;
	}
}

/* --- admission form --------------------------------------------------------- */

.bca-admission__intro h2 {
	margin: 0 0 8px;
}

.bca-admission__intro p {
	margin: 0 0 6px;
}

/* Progress: a thin bar and the step's name, so a parent always knows how
   far there is to go. */
.bca-steps {
	display: none;
	margin: 18px 0 8px;
}

.is-stepped .bca-steps {
	display: block;
}

.bca-steps__bar {
	height: 6px;
	border-radius: 999px;
	background: #f1e7da;
	overflow: hidden;
}

.bca-steps__bar span {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: 999px;
	background: var(--bca-brand);
	/* Scaled, not widened: a transform is composited, a width re-runs layout. */
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease;
}

.bca-steps__label {
	margin: 8px 0 0;
	color: var(--bca-muted);
	font-weight: 600;
	font-size: 0.92em;
}

.bca-step {
	margin: 14px 0;
	padding: 22px 20px;
	border: 1px solid var(--bca-line);
	border-radius: 12px;
	background: #fff;
	min-width: 0;
}

.bca-portal .bca-step__title {
	float: none;
	width: auto;
	margin: 0 0 6px;
	padding: 0 10px;
	font-size: 1.3em !important;
	font-weight: 700;
	color: var(--it-heading-primary, var(--bca-deep));
}

.bca-step__note {
	margin: 0 0 16px;
	color: var(--bca-muted);
}

.bca-step__note--warn {
	padding: 10px 14px;
	border-radius: 8px;
	background: #fdf1dd;
	color: #6b4409;
	font-weight: 500;
}

.bca-admission .bca-field {
	display: grid;
	gap: 6px;
	margin: 0 0 16px;
}

.bca-admission .bca-field > label {
	font-weight: 600;
}

.bca-req {
	color: var(--bca-deep);
}

.bca-admission .bca-field input:not([type="checkbox"]):not([type="file"]),
.bca-admission .bca-field select,
.bca-admission .bca-field textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 11px 13px;
	border: 1px solid #cfc7bd;
	border-radius: 8px;
	background: #fff;
	color: var(--bca-ink);
	font: inherit;
	font-size: 16px;
}

.bca-admission .bca-field select {
	appearance: auto;
}

.bca-admission .bca-field input[type="file"] {
	padding: 10px 0;
	font-size: 15px;
}

.bca-admission .bca-field .bca-muted {
	margin: 0;
	font-size: 0.88em;
}

/* A missing answer is marked by colour and by the box itself, and the step
   says why it will not move on. */
.bca-admission .bca-field.is-invalid input:not([type="checkbox"]),
.bca-admission .bca-field.is-invalid select,
.bca-admission .bca-field.is-invalid textarea {
	border-color: #b32d2e;
	background: #fffafa;
}

.bca-admission .bca-field.is-invalid > label,
.bca-admission .bca-field.is-invalid .bca-check span {
	color: #8f201e;
}

/* Ticks with the whole sentence as the tap target. */
.bca-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	font-weight: 500;
	line-height: 1.45;
	cursor: pointer;
}

.bca-check input {
	flex: none;
	width: 22px !important;
	height: 22px !important;
	margin: 1px 0 0 !important;
	accent-color: var(--bca-deep);
}

.bca-field--declare {
	margin-top: 22px;
	padding: 14px;
	border-radius: 10px;
	background: #fbf7f1;
}

.bca-photo-preview {
	width: 96px;
	height: 96px;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid var(--bca-line);
}

/* --- step buttons ------------------------------------------------------------ */

.bca-step__nav {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 22px;
}

.bca-step__nav .bca-btn {
	min-height: 48px;
	padding: 0 26px;
}

.bca-step__nav .bca-btn:only-child {
	margin-left: auto;
}

/* --- review ------------------------------------------------------------------- */

.bca-review__group {
	margin: 0 0 14px;
	padding: 14px 16px;
	border-radius: 10px;
	background: #fbf7f1;
}

.bca-review__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.bca-review__head h3 {
	margin: 0;
	font-size: 1.05em;
}

.bca-review dl {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 6px 14px;
	margin: 0;
}

.bca-review dt {
	color: var(--bca-muted);
	font-size: 0.9em;
}

.bca-review dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.bca-review dd.is-empty {
	color: #b6a999;
	font-weight: 400;
}

/* --- done ------------------------------------------------------------------- */

.bca-appno {
	display: inline-block;
	margin: 4px 0 12px;
	padding: 10px 18px;
	border-radius: 10px;
	background: #fdf1e2;
	color: var(--bca-deep);
	font-size: 1.5em;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.bca-step {
		padding: 18px 14px;
	}

	.bca-review dl {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.bca-review dd {
		margin-bottom: 8px;
	}

	.bca-step__nav .bca-btn {
		flex: 1 1 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bca-steps__bar span {
		transition: none;
	}
}

/* Native selects on school forms, whatever the theme's dropdown script does. */
.bca-portal select {
	display: block !important;
}

.bca-portal .nice-select {
	display: none !important;
}

@media (max-width: 782px) {
	/* The theme's floating scroll-to-top button sat on top of form fields. */
	.bca-app .scroll-top {
		display: none !important;
	}
}

/* ==========================================================================
   Family accounts: sign-up, family details, choosing the child, applications
   ========================================================================== */

/* --- sign-in that leads to sign-up --------------------------------------- */

.bca-btn--block {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	box-sizing: border-box;
	text-align: center;
}

.bca-login__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 6px;
	color: var(--bca-muted);
	font-size: 0.9em;
}

.bca-login__or::before,
.bca-login__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--bca-line);
}

/* --- sign-up: who you are to the child ----------------------------------- */

.bca-register__relation {
	margin: 0;
	padding: 0;
	border: 0;
}

.bca-register__relation legend {
	margin: 0 0 8px;
	padding: 0;
	font-size: 1em;
	font-weight: 600;
}

.bca-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* The radio sits under its own label, so tapping the label never scrolls the
   page to a box parked off screen. */
.bca-choice {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.bca-choice input {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	opacity: 0;
}

.bca-choice span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid #d9cfc3;
	border-radius: 999px;
	background: #fff;
	font-weight: 600;
}

.bca-choice input:checked + span {
	border-color: var(--bca-brand);
	background: var(--bca-brand);
	color: var(--bca-on-brand);
}

.bca-choice input:focus-visible + span {
	outline: 2px solid var(--bca-deep);
	outline-offset: 2px;
}

.bca-register__form select,
.bca-register__form input {
	min-height: 48px;
	font-size: 16px;
}

/* --- the call to apply --------------------------------------------------- */

.bca-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 14px 0;
	padding: 18px 20px;
	border-radius: 12px;
	background: var(--bca-brand);
	color: var(--bca-on-brand);
	text-decoration: none;
}

.bca-cta strong {
	display: block;
	font-size: 1.15em;
}

.bca-cta:hover,
.bca-cta:focus-visible {
	background: var(--bca-deep);
	color: #fff;
}

.bca-cta__arrow {
	font-size: 1.6em;
	line-height: 1;
}

/* A family account has no bottom bar until a child is at the school, so
   signing out stays on the page. */
.bca-portal--family .bca-signout {
	display: inline-flex !important;
}

/* --- applications -------------------------------------------------------- */

.bca-apps__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-apps__item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--bca-line);
}

.bca-apps__item:first-child {
	border-top: 0;
}

.bca-apps__item > span:first-child {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.bca-apps__note {
	font-size: 0.9em;
}

.bca-apps__status {
	flex: none;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f3ece3;
	font-size: 0.85em;
	font-weight: 700;
	white-space: nowrap;
}

.bca-apps__status--accepted {
	background: #e3f1e6;
	color: #24573a;
}

.bca-apps__status--rejected {
	background: #f6e6e4;
	color: #8f201e;
}

/* --- family details ------------------------------------------------------ */

.bca-fam__intro .bca-muted {
	margin: 0;
}

.bca-fam__kids .bca-muted {
	margin: 0 0 10px;
}

/* Each child, parent and the address is a row that opens to its form. */
.bca-fam__kid,
.bca-fam__section {
	border: 1px solid var(--bca-line);
	border-radius: 10px;
	background: #fff;
}

.bca-fam__kid {
	margin: 0 0 10px;
}

.bca-fam__kid > summary,
.bca-fam__section > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 10px 14px;
	list-style: none;
	cursor: pointer;
}

.bca-fam__section > summary {
	padding: 0;
}

.bca-fam__kid > summary::-webkit-details-marker,
.bca-fam__section > summary::-webkit-details-marker {
	display: none;
}

.bca-fam__kid > summary img,
.bca-fam__section > summary img {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--bca-brand);
}

.bca-fam__who {
	display: grid;
	flex: 1;
	gap: 2px;
	min-width: 0;
}

.bca-fam__who .bca-muted {
	margin: 0;
	font-size: 0.9em;
}

.bca-fam__edit {
	flex: none;
	color: var(--bca-deep);
	font-weight: 700;
	font-size: 0.9em;
}

details[open] > summary .bca-fam__edit {
	visibility: hidden;
}

.bca-fam__plus {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fbf1e4;
	color: var(--bca-deep);
	font-size: 1.6em;
	font-weight: 700;
}

.bca-fam__kid--new {
	border-style: dashed;
}

.bca-fam__form {
	display: grid;
	gap: 14px;
	padding: 6px 14px 16px;
}

.bca-fam__section .bca-fam__form {
	padding: 16px 0 4px;
}

.bca-fam__form > .bca-btn,
.bca-fam__actions {
	justify-self: start;
}

.bca-fam__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bca-fam__remove {
	padding: 0 14px 14px;
}

.bca-linkbtn--danger {
	color: #8f201e;
	font-size: 0.9em;
}

/* The family form asks the admission form's questions, laid out the same. */
.bca-fam .bca-field input:not([type="checkbox"]):not([type="file"]),
.bca-fam .bca-field select,
.bca-fam .bca-field textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 11px 13px;
	border: 1px solid #cfc7bd;
	border-radius: 8px;
	background: #fff;
	color: var(--bca-ink);
	font: inherit;
	font-size: 16px;
}

.bca-fam .bca-field select {
	appearance: auto;
}

.bca-fam .bca-field input[type="file"] {
	padding: 10px 0;
	font-size: 15px;
}

.bca-fam .bca-field .bca-muted {
	font-size: 0.88em;
}

.bca-fam .bca-field.is-invalid input {
	border-color: #b32d2e;
}

/* --- choosing the child on the admission form ------------------------------ */

.bca-pick {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-pick__item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 72px;
	padding: 10px 14px;
	border: 1px solid var(--bca-line);
	border-radius: 12px;
	background: #fff;
	color: var(--bca-ink);
	text-decoration: none;
}

.bca-pick__item:hover,
.bca-pick__item:focus-visible {
	border-color: var(--bca-brand);
	color: var(--bca-ink);
}

.bca-pick__item img {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--bca-brand);
}

.bca-pick__item > span:last-child {
	display: grid;
	gap: 2px;
}

.bca-pick__item--new {
	border-style: dashed;
}

.bca-pick__plus {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fbf1e4;
	color: var(--bca-deep);
	font-size: 1.6em;
	font-weight: 700;
}

/* A photo the family already gave, reused unless another is chosen. */
.bca-photo-kept {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.bca-photo-kept img {
	width: 72px;
	height: 72px;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid var(--bca-line);
}

.bca-photo-kept figcaption {
	color: var(--bca-muted);
	font-size: 0.9em;
}

/* The Firebase code step says what is happening as it happens. */
.bca-register__state {
	min-height: 1.5em;
	margin: 0 0 6px;
	color: var(--bca-muted);
}

.bca-register__state.is-error {
	color: #8f201e;
	font-weight: 600;
}

/* ==========================================================================
   Teacher portal
   ========================================================================== */

.bca-children__item--class {
	padding: 0 16px;
	font-weight: 700;
}

/* The nudge to replace the password the office handed over. */
.bca-banner--nudge {
	display: block;
	margin: 12px 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: #fff4e3;
	color: var(--bca-ink);
	text-decoration: none;
}

.bca-banner--nudge strong {
	display: block;
	color: var(--bca-deep);
}

/* --- date stepper -------------------------------------------------------- */

.bca-datestep {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
}

.bca-datestep__arrow {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--bca-line);
	border-radius: 50%;
	background: #fff;
	color: var(--bca-deep);
	font-size: 1.6em;
	line-height: 1;
	text-decoration: none;
}

.bca-datestep__arrow.is-off {
	opacity: 0.35;
}

.bca-datestep__form {
	display: grid;
	flex: 1;
	gap: 4px;
	justify-items: center;
	text-align: center;
}

.bca-datestep__form label {
	display: grid;
	line-height: 1.3;
}

.bca-datestep__form input[type="date"] {
	min-height: 40px;
	padding: 4px 10px;
	border: 1px solid #cfc7bd;
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
}

.bca-closed {
	padding: 14px;
	border-radius: 10px;
	background: #fbf7f1;
	text-align: center;
}

.bca-closed h3 {
	margin: 0 0 6px;
}

/* --- the register -------------------------------------------------------- */

.bca-tr__counts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0 0 4px;
	font-variant-numeric: tabular-nums;
}

.bca-count strong {
	font-size: 1.15em;
}

.bca-count--present strong { color: #2f6b3f; }
.bca-count--absent strong  { color: #b32d2e; }
.bca-count--late strong    { color: #8a5a12; }
.bca-count--leave strong   { color: #50575e; }

.bca-tr__hint {
	margin: 0 0 12px;
	font-size: 0.9em;
}

.bca-tr__list,
.bca-tm__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-tr__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 12px;
	padding: 10px 0;
	border-top: 1px solid var(--bca-line);
}

.bca-tr__who {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.bca-tr__roll {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	margin-right: 4px;
	border-radius: 8px;
	background: #f3ece3;
	font-size: 0.85em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.bca-tr__name {
	font-weight: 600;
}

/* Four answers side by side; each radio sits under its own label, so a tap
   never scrolls the page to a box parked off screen. */
.bca-tr__seg {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 4px;
}

.bca-tr__seg .bca-seg__input {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	opacity: 0;
}

.bca-tr__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	min-height: 44px;
	padding: 0 8px;
	border: 1px solid #d9cfc3;
	border-radius: 8px;
	background: #fff;
	font-size: 0.88em;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
}

.bca-seg__input:checked + .bca-tr__opt--present { border-color: #2f6b3f; background: #2f6b3f; color: #fff; }
.bca-seg__input:checked + .bca-tr__opt--absent  { border-color: #b32d2e; background: #b32d2e; color: #fff; }
.bca-seg__input:checked + .bca-tr__opt--late    { border-color: #8a5a12; background: #8a5a12; color: #fff; }
.bca-seg__input:checked + .bca-tr__opt--leave   { border-color: #50575e; background: #50575e; color: #fff; }

.bca-seg__input:focus-visible + .bca-tr__opt {
	outline: 2px solid var(--bca-deep);
	outline-offset: 2px;
}

/* A child marked anything but present stands out in the list. */
.bca-tr__row:has(.bca-seg__input:checked:not([value="present"])) .bca-tr__name {
	color: #8f201e;
}

/* Save comes after the last child: mark the exceptions going down the roll,
   then save. (A floating bar sat over the rows on short phone screens.) */
.bca-tr__save {
	margin: 16px 0 0;
}

/* --- chips: exams and subjects ------------------------------------------- */

.bca-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 14px;
}

.bca-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid #d9cfc3;
	border-radius: 999px;
	background: #fff;
	color: var(--bca-ink);
	font-weight: 600;
	text-decoration: none;
}

.bca-chip:hover,
.bca-chip:focus-visible {
	border-color: var(--bca-brand);
	color: var(--bca-ink);
}

.bca-chip.is-active {
	border-color: var(--bca-brand);
	background: var(--bca-brand);
	color: var(--bca-on-brand);
}

/* A subject with marks in already carries a green dot. */
.bca-chip.is-done::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2f6b3f;
}

/* --- marks --------------------------------------------------------------- */

.bca-tm__exam {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 0;
}

.bca-tm__other {
	display: grid;
	gap: 6px;
	margin-top: 6px;
}

.bca-tm__other label {
	font-weight: 600;
}

.bca-tm__otherrow {
	display: flex;
	gap: 8px;
}

.bca-tm__otherrow input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0 12px;
	border: 1px solid #cfc7bd;
	border-radius: 8px;
	font: inherit;
	font-size: 16px;
}

.bca-tm__max {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 6px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fbf7f1;
	font-weight: 600;
}

.bca-tm__max input,
.bca-tm__row input {
	width: 96px;
	min-height: 48px;
	padding: 0 10px;
	border: 1px solid #cfc7bd;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.bca-tm__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--bca-line);
}

.bca-tm__row label {
	display: flex;
	align-items: center;
	min-width: 0;
	font-weight: 600;
}

.bca-tm__sheets {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid var(--bca-line);
}

.bca-tm__sheets summary,
.bca-tt__done > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--bca-deep);
	font-weight: 700;
	cursor: pointer;
}

.bca-tm__sheetlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-tm__sheetlist li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--bca-line);
}

.bca-tm__sheetlist li > span {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.bca-tm__sheetlist .bca-muted {
	font-size: 0.88em;
	font-variant-numeric: tabular-nums;
}

.bca-btn--small {
	min-height: 40px;
	padding: 0 14px;
	font-size: 0.9em;
}

/* --- homework and notice forms ------------------------------------------- */

.bca-th__form {
	display: grid;
	gap: 14px;
}

.bca-th__form .bca-field input:not([type="checkbox"]):not([type="file"]),
.bca-th__form .bca-field select,
.bca-th__form .bca-field textarea,
.bca-tt__form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 11px 13px;
	border: 1px solid #cfc7bd;
	border-radius: 8px;
	background: #fff;
	color: var(--bca-ink);
	font: inherit;
	font-size: 16px;
}

.bca-th__form .bca-field select {
	appearance: auto;
}

.bca-th__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-th__item {
	padding: 12px 0;
	border-top: 1px solid var(--bca-line);
}

.bca-th__item:first-child {
	border-top: 0;
}

.bca-th__head {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0 0 4px;
}

.bca-th__text {
	margin: 0 0 6px;
}

/* --- class list ----------------------------------------------------------- */

.bca-tc__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bca-tc__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--bca-line);
}

.bca-tc__item:first-child {
	border-top: 0;
}

.bca-tc__item img {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.bca-tc__who {
	display: grid;
	flex: 1;
	gap: 2px;
	min-width: 0;
}

.bca-tc__who .bca-muted {
	font-size: 0.88em;
}

.bca-tc__call {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 999px;
	background: #e3f1e6;
	color: #24573a;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

/* --- complaints and notices ---------------------------------------------- */

.bca-tt {
	padding: 14px 0;
	border-top: 1px solid var(--bca-line);
}

.bca-tt:first-of-type {
	border-top: 0;
}

.bca-tt h4 {
	margin: 4px 0;
}

.bca-tt__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
}

.bca-tt__msg {
	margin: 6px 0 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fbf7f1;
}

.bca-tt__form {
	display: grid;
	gap: 8px;
}

.bca-tt__form label:not(.bca-check) {
	font-weight: 600;
}

.bca-tt__form .bca-btn {
	justify-self: start;
}

.bca-tt__reply {
	margin: 0;
}

@media (max-width: 782px) {
	.bca-tr__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.bca-tr__opt {
		min-width: 0;
	}

	/* The number is read out; on a phone the green button is the call. */
	.bca-tc__call span {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.bca-tc__call {
		justify-content: center;
		width: 44px;
		padding: 0;
	}
}

/* --- homework by subject (families) ------------------------------------- */

.bca-portal .bca-subjects {
	display: grid;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.bca-subjects__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 72px;
	padding: 12px 14px;
	border: 1px solid var(--bca-line);
	border-radius: 12px;
	background: #fff;
	color: var(--bca-ink);
	text-decoration: none;
}

.bca-subjects__item:hover,
.bca-subjects__item:focus-visible {
	border-color: var(--bca-brand);
	color: var(--bca-ink);
}

.bca-subjects__item.is-new {
	border-color: #e8c99a;
	background: #fffaf2;
}

.bca-subjects__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.bca-subjects__body strong {
	font-size: 1.05em;
}

.bca-subjects__body .bca-muted,
.bca-subjects__latest {
	font-size: 0.88em;
}

.bca-subjects__flags {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	color: var(--bca-muted);
}

.bca-back {
	margin: 0 0 6px;
}

.bca-back a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--bca-deep);
	font-weight: 700;
	text-decoration: none;
}

/* A teacher's section chip says what they are there. */
.bca-children__item--class span {
	display: grid;
	gap: 0;
	line-height: 1.25;
	text-align: left;
}

.bca-children__item--class small {
	color: var(--bca-muted);
	font-size: 0.75em;
	font-weight: 500;
}

/* --- marks: written, oral and the total that follows them ---------------- */

.bca-tm__heads {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 72px 60px 52px;
	gap: 8px;
	margin: 10px 0 2px;
	color: var(--bca-muted);
	font-size: 0.8em;
	font-weight: 700;
	text-align: center;
}

.bca-tm__heads span:first-child {
	text-align: left;
}

.bca-tm__list .bca-tm__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 72px 60px 52px;
	align-items: center;
	gap: 8px;
}

.bca-tm__who {
	display: flex;
	align-items: center;
	min-width: 0;
	font-weight: 600;
}

.bca-tm__row input {
	width: 100%;
	box-sizing: border-box;
}

.bca-tm__total {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.bca-chip--remarks {
	border-style: dashed;
}

/* --- admit cards --------------------------------------------------------- */

.bca-ta__list,
.bca-admit__list {
	display: grid;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.bca-ta__item {
	display: grid;
	gap: 6px;
	padding: 10px 0;
	border-top: 1px solid var(--bca-line);
}

.bca-ta__item .bca-check span {
	display: grid;
	gap: 2px;
}

.bca-ta__item .bca-muted {
	font-size: 0.88em;
}

.bca-ta__note {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid #cfc7bd;
	border-radius: 8px;
	font: inherit;
	font-size: 16px;
}

.bca-admit__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--bca-line);
}

.bca-admit__item:first-child {
	border-top: 0;
}

.bca-admit__item > span:first-child {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.bca-admit__note {
	color: #8f201e;
	font-size: 0.9em;
}

.bca-tm__total.is-over {
	color: #b32d2e;
}

/* --- the registration fee at sign-up -------------------------------------- */

.bca-signup-fee {
	display: grid;
	gap: 18px;
}

.bca-signup-fee__qr {
	display: grid;
	justify-items: center;
	gap: 8px;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--bca-line);
	border-radius: 12px;
	background: #fff;
}

.bca-signup-fee__qr img {
	width: 220px;
	height: 220px;
}

.bca-signup-fee__qr figcaption {
	display: grid;
	justify-items: center;
	gap: 2px;
	text-align: center;
}

.bca-signup-fee__qr strong {
	font-size: 1.5em;
	color: var(--bca-deep);
}

.bca-register--pay .bca-field input[type="file"] {
	padding: 10px 0;
}

/* A sign-in that did not go through. */
.bca-notice--error {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid #F1C9C4;
	border-left: 4px solid var(--it-theme-2, #A32826);
	border-radius: 12px;
	background: #FDF1EF;
	color: #6E1C1A;
	font-size: 15px;
	line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   Sign-in card: the full width of the page, in two columns on a wide screen -
   who it is for and how to sign up on the left, the form on the right.
   -------------------------------------------------------------------------- */
.bca-portal.bca-portal--login {
	width: 100%;
	max-width: none;
}

@media (min-width: 992px) {
	.bca-portal.bca-portal--login {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 72px;
		align-items: center;
		padding: 56px 64px;
	}

	.bca-login__intro {
		padding-right: 72px;
		border-right: 1px solid #F0E2CF;
	}

	.bca-login__intro h2 {
		font-size: 40px;
		line-height: 1.15;
	}

	.bca-login__intro .bca-muted {
		font-size: 17px;
		line-height: 1.75;
	}

	.bca-login__intro .bca-btn--block {
		margin-top: 26px;
	}

	.bca-login__form .bca-login__or {
		margin-top: 0;
	}
}

/* The theme gives submit inputs a 58px line-height inside a box of the same
   height plus padding, which sat "Sign in" 13px below centre. */
.bca-portal--login #wp-submit {
	width: 100%;
	height: 56px;
	padding: 0 24px !important;
	line-height: 1.2 !important;
	text-align: center;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Sign-in page: the left column is a warm panel - the school's logo, who the
   door is for, and what is waiting behind it - and signing up is a button,
   not a line of text.
   -------------------------------------------------------------------------- */
.bca-login__logo {
	display: block;
	width: min(280px, 100%);
	height: auto;
	margin: 0 0 26px;
}

.bca-login__perks {
	display: grid;
	gap: 12px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.bca-login__perks li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15.5px;
	font-weight: 600;
	color: #3A2418;
}

.bca-login__perks li::before {
	content: "\2713";
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #FBE3C2;
	color: #A32826;
	font-size: 13px;
	font-weight: 700;
}

.bca-login__register {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid #F0E2CF;
	font-size: 15px;
	color: #5A4A3E;
}

.bca-login__signup {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 24px;
	border: 2px solid #A32826;
	border-radius: 200px;
	color: #A32826 !important;
	font-weight: 700;
	text-decoration: none !important;
	transition: background 0.2s ease, color 0.2s ease;
}

.bca-login__signup:hover {
	background: #A32826;
	color: #fff !important;
}

@media (min-width: 992px) {
	.bca-portal.bca-portal--login {
		align-items: stretch;
		padding: 28px;
		column-gap: 64px;
	}

	.bca-login__intro {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 48px 52px;
		border-right: 0;
		border-radius: 18px;
		background: linear-gradient(155deg, #FFF8EC 0%, #FBEAD2 100%);
	}

	.bca-login__form {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 36px 36px 36px 0;
	}
}

@media (max-width: 991px) {
	.bca-login__intro {
		margin: -4px -4px 26px;
		padding: 26px 22px;
		border-radius: 16px;
		background: linear-gradient(155deg, #FFF8EC 0%, #FBEAD2 100%);
	}

	.bca-login__logo {
		width: min(230px, 100%);
		margin-bottom: 18px;
	}

	.bca-login__signup {
		width: 100%;
	}
}

/* The theme indents every list; this one lines up with the heading. */
.bca-portal .bca-login__perks {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* Sign-up: one column of fields reads best at a set width, so the card is
   centred on the page rather than left against the margin. The language
   buttons follow it to the centre line. */
.bca-portal.bca-register-page {
	width: 100%;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.bca-lang--card:has(+ .bca-register-page) {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Sign-up: the way back to signing in sits apart from the form above it. */
.bca-register-page .bca-register__login {
	margin-top: 28px !important;
	padding-top: 22px;
	border-top: 1px solid #F0E2CF;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Password boxes: an eye to show what was typed; on a new password, a
   strength bar and a checklist that ticks as the person types.
   -------------------------------------------------------------------------- */
.bca-pw {
	position: relative;
	display: block;
}

.bca-pw input {
	width: 100%;
	padding-right: 52px !important;
}

.bca-pw__eye {
	position: absolute;
	top: 50%;
	right: 6px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 !important;
	transform: translateY(-50%);
	border: 0 !important;
	border-radius: 10px !important;
	background: transparent !important;
	color: #8A6A4E !important;
	cursor: pointer;
	box-shadow: none !important;
}

.bca-pw__eye:hover,
.bca-pw__eye[aria-pressed="true"] {
	background: #FBEEDC !important;
	color: #A32826 !important;
}

.bca-pw__eye:focus-visible {
	outline: 2px solid #E08A2E;
	outline-offset: 1px;
}

.bca-pw-help {
	margin: 12px 0 4px;
	padding: 14px 16px;
	border: 1px solid #F0E2CF;
	border-radius: 12px;
	background: #FFFBF5;
}

.bca-pw-meter {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.bca-pw-meter__track {
	flex: 1 1 auto;
	height: 8px;
	overflow: hidden;
	border-radius: 8px;
	background: #F0E2CF;
}

.bca-pw-meter__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 8px;
	transition: width 0.25s ease, background 0.25s ease;
}

.bca-pw-meter__label {
	min-width: 56px;
	font-size: 13px;
	font-weight: 700;
	text-align: right;
}

.bca-pw-meter.is-weak   .bca-pw-meter__fill  { background: #C0392B; }
.bca-pw-meter.is-fair   .bca-pw-meter__fill  { background: #E08A2E; }
.bca-pw-meter.is-good   .bca-pw-meter__fill  { background: #B5A133; }
.bca-pw-meter.is-strong .bca-pw-meter__fill  { background: #2E8B57; }
.bca-pw-meter.is-weak   .bca-pw-meter__label { color: #C0392B; }
.bca-pw-meter.is-fair   .bca-pw-meter__label { color: #B4661A; }
.bca-pw-meter.is-good   .bca-pw-meter__label { color: #8A7A12; }
.bca-pw-meter.is-strong .bca-pw-meter__label { color: #2E7D4F; }

.bca-portal .bca-pw-rules {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 16px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.bca-pw-rules__item {
	position: relative;
	padding-left: 24px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #7A6A5C;
	transition: color 0.2s ease;
}

.bca-pw-rules__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 15px;
	height: 15px;
	border: 2px solid #D8C4A8;
	border-radius: 50%;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.bca-pw-rules__item.is-met {
	color: #2E7D4F;
	font-weight: 600;
}

.bca-pw-rules__item.is-met::before {
	border-color: #2E8B57;
	background: #2E8B57 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.bca-pw-allowed {
	margin: 12px 0 0 !important;
	padding-top: 10px;
	border-top: 1px dashed #EAD7BD;
	font-size: 12.5px;
	line-height: 1.6;
	color: #8A7A6C;
}

.bca-pw-match {
	margin: 8px 0 0 !important;
	font-size: 13.5px;
	font-weight: 600;
}

.bca-pw-match.is-met { color: #2E7D4F; }
.bca-pw-match.is-off { color: #B4661A; }
.bca-pw-match.is-met::before { content: "\2713  "; }

@media (max-width: 480px) {
	.bca-portal .bca-pw-rules {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The tick sits on the label's centre line, not above it. */
.bca-pw-rules__item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-left: 0;
}

.bca-pw-rules__item::before {
	position: static;
	flex: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
}