/**
 * CBYOS portal — front-end member/staff door.
 * Scoped to the standalone portal template (.cbyos-portal-body).
 */

.cbyos-portal-body {
	margin: 0;
	min-height: 100vh;
	background: #f6f7f9;
	color: #1d2327;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
}
/* Brand-font weights: light headings, semibold labels, regular body. */
.cbyos-portal__h1 {
	font-weight: 300;
}
.cbyos-card__title,
.cbyos-section__title,
.cbyos-portal__brand-text {
	font-weight: 600;
}

.cbyos-portal {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px 48px;
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* Brand bar */
.cbyos-portal__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 24px 0;
}
.cbyos-portal__brand-mark {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: contain;
}
.cbyos-portal__brand-text {
	font-size: 18px;
	font-weight: 600;
}

/* Logged-in top bar */
.cbyos-portal__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 10px;
}
.cbyos-portal__who {
	display: flex;
	align-items: center;
	gap: 10px;
}
.cbyos-portal__greeting {
	font-weight: 600;
	font-size: 18px;
}
.cbyos-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: #c9e6f7;
	color: #256a97;
	font-size: 12px;
	font-weight: 600;
}
.cbyos-portal__signout {
	color: #256a97;
	text-decoration: none;
	font-weight: 600;
}
.cbyos-portal__signout:hover {
	text-decoration: underline;
}

/* Main */
.cbyos-portal__main {
	flex: 1 0 auto;
	padding-top: 28px;
}
.cbyos-portal__main--narrow {
	max-width: 420px;
	margin: 0 auto;
	width: 100%;
}
.cbyos-portal__h1 {
	font-size: 20px;
	margin: 0 0 20px;
}

/* Cards */
.cbyos-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
/* Student cards stretch to fill the row and divide it evenly by student count:
   1 student = full width (matching the billing box), 2 = halves, 3 = thirds,
   4 = quarters, and so on. They wrap to a new row — and stack on phones — only
   when they'd otherwise get too narrow. */
.cbyos-cards > .cbyos-card {
	flex: 1 1 220px;
	min-width: 0;
}
@media (max-width: 560px) {
	.cbyos-cards > .cbyos-card {
		flex-basis: 100%;
	}
}
.cbyos-card {
	display: block;
	border: 2px solid transparent;
	border-radius: 10px;
	padding: 20px;
	/* Gradient border: white fills the padding box, the brand gradient the border box. */
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(160deg, #c9e6f7 0%, #e6dbf8 50%, #c9e6f7 100%) border-box;
}
.cbyos-card--login {
	margin-top: 24px;
}
.cbyos-card--link {
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cbyos-card--link:hover {
	box-shadow: 0 4px 14px rgba(136, 203, 237, .3);
}
.cbyos-card--soon {
	opacity: .7;
}
.cbyos-card__title {
	margin: 0 0 6px;
	font-size: 15px;
}
/* Student names (cards in the students grid) a touch larger. */
.cbyos-cards .cbyos-card__title {
	font-size: 17px;
}
.cbyos-card__lead {
	margin: 0;
	color: #50575e;
}
.cbyos-card__links {
	margin: 16px 0 0;
	font-size: 14px;
}
.cbyos-card__links a {
	color: #6a1b9a;
}

/* Sections */
.cbyos-section {
	margin-top: 32px;
}
.cbyos-section:first-of-type {
	margin-top: 8px;
}
.cbyos-section__title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6e7781;
	margin: 0 0 12px;
}
.cbyos-badge--muted {
	background: #eef0f2;
	color: #6e7781;
	margin-left: 6px;
	vertical-align: middle;
}
.cbyos-badge--notice {
	background: #fdf3d3;
	color: #8a6d00;
	margin-left: 6px;
	vertical-align: middle;
}

/* Lessons list (per student) */
.cbyos-lessons,
.cbyos-subs,
.cbyos-payments {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cbyos-lesson {
	padding: 8px 0;
	border-top: 1px solid #f0f1f3;
}
.cbyos-lesson:first-child {
	border-top: 0;
}
.cbyos-lesson__name {
	display: block;
	font-weight: 600;
}
.cbyos-lesson__slot {
	color: #50575e;
	font-size: 14px;
}
.cbyos-lesson__teacher {
	color: #8c8f94;
	font-size: 14px;
}
.cbyos-lesson__teacher::before {
	content: " · ";
	color: #c3c4c7;
}
/* An enrolment serving its withdrawal notice: the program details grey out so
   parents see it is winding down, while the "On notice" pill and the amber
   "notice ends on …" line stay fully legible to explain why it still shows.
   Dim with colour (not opacity) so the nested pill keeps its own colours. */
.cbyos-lesson--notice .cbyos-lesson__name {
	color: #9aa0a6;
}
.cbyos-lesson--notice .cbyos-lesson__slot,
.cbyos-lesson--notice .cbyos-lesson__teacher {
	color: #b0b4b8;
}
.cbyos-lesson__notice {
	display: block;
	margin-top: 2px;
	color: #8a6d00;
	font-size: 13px;
}

/* Lesson rows (staff "today" list: time + body) */
.cbyos-lesson--row {
	display: flex;
	gap: 14px;
	align-items: baseline;
}
.cbyos-lesson__time {
	min-width: 72px;
	font-weight: 600;
	white-space: nowrap;
}
.cbyos-lesson__body {
	flex: 1;
}
.cbyos-lesson__meta {
	display: block;
	color: #8c8f94;
	font-size: 14px;
}
/* "Move a lesson online" — Join buttons on staff lesson rows / agenda cards. */
.cbyos-lesson__join,
.cbyos-agenda__join {
	display: block;
	margin-top: 8px;
}
/* Parent "Move a lesson online" list: keep the Join + Switch-back tidy. */
.cbyos-online-list {
	margin-top: 18px;
	border-top: 1px solid #e6e9ee;
	padding-top: 6px;
}
.cbyos-online-list__title {
	font-size: 15px;
	margin: 12px 0 4px;
}
/* Stack each booked-online row (date → name → Join → note → switch-back)
   instead of squeezing it into the tight 3-column payment layout, which
   collided the wide Join button + note and wrapped the name into a column. */
.cbyos-online-item {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 12px 0;
}
.cbyos-online-item .cbyos-payment__date {
	min-width: 0;
}
.cbyos-online-item .cbyos-payment__desc {
	flex: 0 1 auto;
}
.cbyos-online-item .cbyos-abs-report__end {
	flex-direction: column;
	align-items: flex-start;
	white-space: normal;
	width: 100%;
	gap: 6px;
	margin-top: 6px;
}
.cbyos-online-item .cbyos-payment__desc {
	color: #21323d;
	font-weight: 600;
}
.cbyos-online-item .cbyos-join-note {
	margin-top: 0;
}
/* The Join button matches the "Request online lesson" gradient button exactly.
   Until the room opens it stays non-clickable, but keep the gradient visible
   (just softened) rather than the washed-grey global treatment. */
.cbyos-online-item .cbyos-join.is-disabled {
	opacity: 0.6;
	filter: none;
}

/* Billing */
.cbyos-billing__total {
	margin: 0 0 12px;
	font-size: 18px;
}
.cbyos-sub,
.cbyos-payment {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid #f0f1f3;
}
.cbyos-sub:first-child,
.cbyos-payment:first-child {
	border-top: 0;
}
.cbyos-sub__amt,
.cbyos-payment__amt {
	font-weight: 600;
	white-space: nowrap;
}
.cbyos-payment__amt--refund {
	color: #1a7f37;
}
.cbyos-payment__tag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #e7f5ec;
	color: #1a7f37;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	vertical-align: middle;
}
.cbyos-payment__date {
	color: #8c8f94;
	font-size: 14px;
	white-space: nowrap;
	min-width: 90px;
}
.cbyos-payment__desc {
	flex: 1;
	color: #50575e;
}
/* Payment-type pill (Tuition / Registration / Prorated tuition / Drop-in …). */
.cbyos-payment__cat {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	vertical-align: middle;
	background: #eef0f2;
	color: #50575e;
}
.cbyos-payment__cat--tuition { background: #e7f0fb; color: #1c5aa6; }
.cbyos-payment__cat--registration { background: #efe9fb; color: #5b3fa6; }
.cbyos-payment__cat--proration { background: #e6f5f3; color: #0f766e; }
.cbyos-payment__cat--dropin { background: #fdeede; color: #b45309; }
.cbyos-payment__cat--refund { background: #e6f4ea; color: #1e7a3d; }
.cbyos-billing__note {
	margin: 14px 0 0;
	color: #8c8f94;
	font-size: 13px;
}

/* Back link */
.cbyos-back {
	margin: 0 0 8px;
	font-size: 14px;
}
.cbyos-back a {
	color: #256a97;
	text-decoration: none;
}
.cbyos-back a:hover {
	text-decoration: underline;
}

/* Forms */
.cbyos-field {
	margin: 0 0 16px;
}
.cbyos-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}
.cbyos-field select,
.cbyos-field textarea,
.cbyos-field input[type="text"],
.cbyos-field input[type="email"],
.cbyos-field input[type="tel"],
.cbyos-field input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
}
/* Two fields side by side (collapses on narrow screens). */
.cbyos-field-row {
	display: flex;
	gap: 16px;
}
.cbyos-field-row .cbyos-field {
	flex: 1;
	min-width: 0;
}
@media (max-width: 480px) {
	.cbyos-field-row {
		display: block;
	}
}
.cbyos-field__hint {
	display: block;
	margin-top: 6px;
	color: #8c8f94;
	font-size: 13px;
}
.cbyos-field__opt {
	color: #8c8f94;
	font-weight: 400;
}
.cbyos-field-group {
	margin: 22px 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: #21323d;
}
/* Shared control style for portal forms (Add-a-program, etc.). Matches the
   Poppins/brand look of .cbyos-field controls and replaces the native select
   chrome with a custom chevron so dropdowns don't look old-fashioned. */
.cbyos-input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	border: 1px solid #cfd8e0;
	border-radius: 8px;
	background: #fff;
	color: #21323d;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cbyos-input::placeholder {
	color: #9aa4ae;
	font-family: inherit;
}
.cbyos-input:hover {
	border-color: #b6c2cd;
}
.cbyos-input:focus {
	outline: none;
	border-color: #88cbed;
	box-shadow: 0 0 0 3px rgba(136, 203, 237, .28);
}
select.cbyos-input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2321323d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 16px 16px;
}
select.cbyos-input:disabled {
	background-color: #f2f3f5;
	color: #8c95a0;
	cursor: not-allowed;
	opacity: 1;
}
textarea.cbyos-input {
	resize: vertical;
	min-height: 76px;
}
.cbyos-input--readonly {
	background: #f2f3f5;
	color: #6e7781;
	cursor: not-allowed;
}
.cbyos-btn {
	display: inline-block;
	padding: 11px 20px;
	background: linear-gradient(135deg, #88cbed 0%, #d5bff2 100%);
	color: #21323d;
	border: 0;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}
.cbyos-btn:hover {
	background: linear-gradient(135deg, #6fbde6 0%, #c6abee 100%);
}
.cbyos-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}
.cbyos-btn:disabled:hover {
	background: linear-gradient(135deg, #88cbed 0%, #d5bff2 100%);
}
/* Ghost + small button variants (used on the dashboard "add a program" link). */
.cbyos-btn--ghost {
	background: #fff;
	border: 1px solid #cfd8e0;
	color: #21323d;
}
.cbyos-btn--ghost:hover {
	background: #f4f8fb;
	border-color: #88cbed;
}
.cbyos-btn--sm {
	padding: 7px 14px;
	font-size: 14px;
}

/* =========================================================================
   Absence form v2 — children checklist, mode/date, 24-hour summary
   ========================================================================= */
.cbyos-abs-block {
	margin: 0 0 22px;
}
.cbyos-abs-legend {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 10px;
}
.cbyos-abs-child {
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 8px;
}
.cbyos-abs-child-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	cursor: pointer;
}
.cbyos-abs-lessons {
	margin: 10px 0 2px 26px;
	display: grid;
	gap: 7px;
}
.cbyos-abs-lesson {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #3d4a55;
	cursor: pointer;
}
.cbyos-abs-modes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-bottom: 12px;
}
.cbyos-abs-modes label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	cursor: pointer;
}
.cbyos-abs-single > label,
.cbyos-abs-range label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}
.cbyos-abs-range-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.cbyos-abs-range-row label {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cbyos-portal-body input[type="date"],
.cbyos-portal-body input[type="month"] {
	padding: 9px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	box-sizing: border-box;
}
.cbyos-field input[type="month"] {
	width: 100%;
	max-width: 240px;
}
.cbyos-abs-single input[type="date"] {
	width: 100%;
	max-width: 240px;
}
.cbyos-abs-notice {
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 14px;
	margin: 0 0 18px;
}
.cbyos-abs-notice--ok {
	background: #eaf6fd;
	border: 1px solid #a9d9f2;
	color: #1c5b86;
}
.cbyos-abs-notice--warn {
	background: #fff6e6;
	border: 1px solid #f0c987;
	color: #8a5a12;
}
.cbyos-field__error {
	margin: 8px 0 0;
	color: #b32d2e;
	font-size: 14px;
	font-weight: 600;
}
.cbyos-btn--disabled,
.cbyos-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}
.cbyos-abs-tag {
	display: inline-block;
	align-self: center; /* don't stretch to the (possibly 2-line) row height */
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}
/* When a status pill links straight to the feedback screen (teacher's turn). */
a.cbyos-abs-tag {
	text-decoration: none;
}
.cbyos-abs-tag--video_feedback {
	background: #d9ecfb;
	color: #0b4f86;
}
.cbyos-abs-tag--forfeit {
	background: #fbdada;
	color: #9a2c2c;
}
.cbyos-abs-tag--credit_used {
	background: #d9f6e2;
	color: #17663a;
}
/* Video Feedback v2 — teacher slot delivery-mode badges. */
.cbyos-abs-tag--review {
	background: #e6defb;
	color: #4a2c86;
}
.cbyos-abs-tag--record {
	background: #fdeecf;
	color: #8a5a12;
}
.cbyos-abs-tag--live {
	background: #d9ecfb;
	color: #0b4f86;
}
/* Small "Join" button beside a live-online slot badge. */
.cbyos-btn--sm.cbyos-join {
	display: inline-block;
	align-self: center;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	background: #1a7f37;
	color: #fff;
}
/* Absence launch gate: fade the form behind a notice until term opens. */
.cbyos-abs-gate {
	position: relative;
}
.cbyos-abs-gate.is-locked .cbyos-abs-gate__body {
	opacity: 0.45;
	filter: grayscale(0.4);
	pointer-events: none;
	user-select: none;
}
.cbyos-abs-lock {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 12px;
	pointer-events: none;
}
.cbyos-abs-lock__badge {
	position: sticky;
	top: 16px;
	max-width: 34em;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 12px;
	padding: 16px 20px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #21323d;
	text-align: center;
}

/* A Join button that isn't open yet: greyed out and not clickable. */
.cbyos-join.is-disabled {
	opacity: 0.5;
	filter: grayscale(0.4);
	pointer-events: none;
	cursor: default;
}
/* The "opens 15 min before / room open" note under a family Join button. */
.cbyos-join-note {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #50575e;
}
.cbyos-join-note--open {
	color: #1a7f37;
	font-weight: 600;
}
.cbyos-abs-tag--ineligible {
	background: #eef0f2;
	color: #6e7781;
}

/* Breathing room between the cards on the Report-an-absence page. */
.cbyos-portal--absence .cbyos-card {
	margin-bottom: 22px;
}

/* Reported-absence row: pill + cancel, right-aligned. */
.cbyos-abs-report__end {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	white-space: nowrap;
}
.cbyos-abs-cancel-form {
	margin: 0;
}
.cbyos-abs-cancel {
	background: none;
	border: 0;
	padding: 0;
	color: #9a2c2c;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
	font-family: inherit;
}

/* Alerts */
.cbyos-alert {
	padding: 10px 14px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-size: 14px;
}
.cbyos-alert--error {
	background: #fcebea;
	border: 1px solid #f3b2ad;
	color: #8a1f1a;
}
.cbyos-alert--success {
	background: #e6f5ea;
	border: 1px solid #a3d9b5;
	color: #1c6b3a;
}
.cbyos-alert--info {
	background: #eaf4fb;
	border: 1px solid #a9d3ee;
	color: #1c4c6b;
}

/* =========================================================================
   Add-a-program request form (parent portal)
   ========================================================================= */
.cbyos-card__add {
	margin: 14px 0 0;
}
.cbyos-ae-field {
	display: block;
	margin: 0 0 16px;
}
.cbyos-ae-label {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
	color: #21323d;
}
.cbyos-ae-detail {
	margin: 4px 0 16px;
	padding: 14px 16px;
	background: #f7fafc;
	border: 1px solid #e3e9ef;
	border-radius: 10px;
}
.cbyos-ae-sub {
	font-weight: 600;
	color: #21323d;
	margin-bottom: 10px;
}
.cbyos-ae-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: 8px;
	background: #fff;
	border: 1px solid #d7dee5;
	border-radius: 8px;
	cursor: pointer;
	font-size: 15px;
}
.cbyos-ae-opt:hover {
	border-color: #88cbed;
}
.cbyos-ae-opt.is-full {
	opacity: .6;
	cursor: not-allowed;
}
.cbyos-ae-full {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: #fcebea;
	color: #8a1f1a;
	font-size: 12px;
	font-weight: 600;
}
.cbyos-ae-fixed {
	font-size: 15px;
	color: #21323d;
}
.cbyos-ae-note-box {
	font-size: 15px;
	color: #4a5560;
	line-height: 1.5;
}
.cbyos-ae-err {
	color: #8a1f1a;
	font-size: 14px;
	margin: 0 0 8px;
}
.cbyos-ae-reassure {
	margin: 10px 0 0;
	color: #6e7781;
	font-size: 13px;
}

/* WordPress login form tidy-up inside our card */
.cbyos-card .login-username,
.cbyos-card .login-password {
	margin-bottom: 14px;
}
.cbyos-card label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 14px;
}
.cbyos-card input[type="text"],
.cbyos-card input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	font-size: 15px;
}
.cbyos-card .login-remember {
	font-weight: 400;
	margin: 4px 0 14px;
}
.cbyos-card .login-remember label {
	display: inline;
	font-weight: 400;
}
.cbyos-card .login-submit input[type="submit"] {
	width: 100%;
	padding: 11px 16px;
	background: #7b1fa2;
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.cbyos-card .login-submit input[type="submit"]:hover {
	background: #6a1b9a;
}

/* =========================================================================
   myCBY login screen — brand pass (scoped to the login page only)
   Mirrors the CBYOS admin login: soft blue→lavender wash, Poppins Light, and
   the sky-blue gradient sign-in button. Other portal pages are untouched.
   ========================================================================= */

/* Same background as the CBYOS admin login, with a very slow diagonal drift
   (bottom-right → top-left) so the two tints breathe like a gentle wave. */
body.cbyos-portal--login {
	background: linear-gradient(160deg, #c9e6f7 0%, #e6dbf8 50%, #c9e6f7 100%);
	background-size: 220% 220%;
	animation: cbyos-login-wave 17s ease-in-out infinite alternate;
	font-weight: 300;
}
@keyframes cbyos-login-wave {
	from { background-position: 100% 100%; } /* bottom-right */
	to   { background-position: 0% 0%; }     /* top-left */
}
@media (prefers-reduced-motion: reduce) {
	body.cbyos-portal--login {
		animation: none;
		background-position: 50% 50%;
	}
}

/* All Poppins, like CBYOS. */
body.cbyos-portal--login,
body.cbyos-portal--login * {
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Drop the top-left icon + title entirely on the login page. */
body.cbyos-portal--login .cbyos-portal__brand {
	display: none;
}

/* Temporary placeholder wordmark above the login card. */
.cbyos-portal__login-logo {
	display: block;
	max-width: 260px;
	height: auto;
	margin: 8px auto 20px;
}

/* "Coming soon" pill — the myCBY brand gradient. */
.cbyos-portal__soonwrap {
	text-align: center;
	margin: -8px 0 20px;
}
.cbyos-portal__soon {
	display: inline-block;
	background: linear-gradient(135deg, #88cbed 0%, #d5bff2 100%);
	color: #21323d;
	border-radius: 999px;
	padding: .35rem 1.05rem;
	font-size: .85rem;
	font-weight: 600;
	box-shadow: 0 1px 4px rgba(47, 128, 180, .18);
}

body.cbyos-portal--login .cbyos-card__title {
	font-weight: 300;
}

/* Sign-in button: same gradient, colour and font as the CBYOS login button. */
body.cbyos-portal--login .cbyos-card .login-submit input[type="submit"] {
	background: linear-gradient(135deg, #88cbed 0%, #d5bff2 100%);
	border: 1px solid #2f80b4;
	color: #21323d;
	font-weight: 500;
	box-shadow: 0 2px 8px rgba(136, 203, 237, .35);
}
body.cbyos-portal--login .cbyos-card .login-submit input[type="submit"]:hover {
	background: linear-gradient(135deg, #6fbde6 0%, #c6abee 100%);
}

/* Forgot-password link colour. */
body.cbyos-portal--login .cbyos-card__links a {
	color: #97c8e9;
}


/* Footer */
.cbyos-portal__foot {
	flex-shrink: 0;
	padding-top: 32px;
	color: #8c8f94;
	font-size: 13px;
	text-align: center;
}

/* -------------------------------------------------------------------------
   Persistent bottom tab bar (parent portal). Mirrors the staff bar; only
   pages that render it (via $parent_nav_active) reserve the clearance space.
   ------------------------------------------------------------------------- */
.cbyos-portal:has(.cbyos-parentnav) {
	padding-bottom: 92px;
}
.cbyos-parentnav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	justify-content: center;
	background: #fff;
	border-top: 1px solid #e2e4e7;
	box-shadow: 0 -2px 12px rgba(29, 35, 39, .05);
	/* Respect iPhone home-indicator safe area. */
	padding-bottom: env(safe-area-inset-bottom, 0);
}
.cbyos-parentnav__inner {
	display: flex;
	width: 100%;
	max-width: 560px;
}
.cbyos-parentnav__tab {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 9px 0 8px;
	color: #6e7781;
	text-decoration: none;
	font-size: 11px;
	font-weight: 500;
}
.cbyos-parentnav__ico {
	position: relative;
	display: inline-flex;
}
.cbyos-parentnav__tab svg {
	width: 23px;
	height: 23px;
}
.cbyos-parentnav__tab--active {
	color: #256a97;
}
.cbyos-parentnav__badge {
	position: absolute;
	top: -5px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: #d64545;
	color: #fff;
	font-size: 10px;
	line-height: 16px;
	font-weight: 700;
	text-align: center;
}

/* Student profile photo (parent-set, private) */
.cbyos-student__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}
.cbyos-student__head .cbyos-card__title {
	margin: 0;
}
.cbyos-avatar {
	margin: 0;
	flex-shrink: 0;
}
.cbyos-avatar__pick {
	display: block;
	cursor: pointer;
}
/* Frame holds the (clipped) circular ring plus the camera badge, which must
   sit OUTSIDE the ring's overflow:hidden or it gets cut off. */
.cbyos-avatar__frame {
	position: relative;
	display: inline-block;
	line-height: 0;
}
.cbyos-avatar__ring {
	position: relative;
	display: block;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	overflow: hidden;
	background: #e2e4e7;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
	transition: opacity .15s ease;
}
.cbyos-avatar__img,
.cbyos-avatar__default {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Static (display-only) avatar, e.g. the staff student record header. */
.cbyos-avatar--static {
	flex-shrink: 0;
	line-height: 0;
}
.cbyos-avatar__ring--lg {
	width: 80px;
	height: 80px;
}
.cbyos-avatar__ring--sm {
	width: 40px;
	height: 40px;
}
/* Avatar + "Remove photo" stacked in the parent card header. */
.cbyos-avatar-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.cbyos-avatar-remove {
	margin: 0;
}
.cbyos-avatar__remove {
	background: none;
	border: 0;
	padding: 0;
	color: #8c8f94;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
}
.cbyos-avatar__remove:hover {
	color: #b3261e;
}
/* Student rows in a list: small avatar beside the name. */
.cbyos-card--student {
	display: flex;
	align-items: center;
	gap: 12px;
}
/* Little camera badge, bottom-right, to signal "tap to change". Positioned on
   the frame (not the ring) so the white halo isn't clipped. */
.cbyos-avatar__edit {
	position: absolute;
	right: 2px;
	bottom: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #256a97;
	color: #fff;
	box-shadow: 0 0 0 2px #fff;
}
.cbyos-avatar__pick:hover .cbyos-avatar__ring {
	opacity: .9;
}
.cbyos-avatar__pick:focus-within .cbyos-avatar__ring {
	outline: 2px solid #256a97;
	outline-offset: 2px;
}
.cbyos-avatar.is-uploading .cbyos-avatar__ring {
	opacity: .5;
	pointer-events: none;
}
/* Visually-hide the file input but keep it focusable/operable. */
.cbyos-avatar__file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* The no-JS fallback submit button; hidden once JS auto-submits on pick. */
.cbyos-avatar__save {
	margin-top: 8px;
	font-size: 13px;
	padding: 4px 10px;
	border: 1px solid #cfd3d8;
	border-radius: 6px;
	background: #fff;
	color: #256a97;
	cursor: pointer;
}
.cbyos-js .cbyos-avatar__save {
	display: none;
}

/* Inline notices (e.g. photo saved / error) */
.cbyos-notice {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 14px;
}
.cbyos-notice--ok {
	background: #e6f4ea;
	color: #1e7a3d;
}
.cbyos-notice--err {
	background: #fdecea;
	color: #b3261e;
}

/* Persistent "photos are private" note above the student cards. */
.cbyos-avatar-privacy-note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	color: #8c8f94;
	font-size: 13px;
}
.cbyos-avatar-privacy-note svg {
	flex-shrink: 0;
	color: #256a97;
}

/* Danger + link button variants (base .cbyos-btn already exists). */
.cbyos-btn--danger {
	background: #c5221f;
	color: #fff;
	text-decoration: none;
}
.cbyos-btn--danger:hover {
	background: #a51b19;
}
.cbyos-btn--danger:disabled {
	opacity: .6;
	cursor: default;
}
.cbyos-btn--link {
	background: none;
	color: #50575e;
	padding: 11px 12px;
	text-decoration: none;
}
.cbyos-section--withdraw {
	text-align: center;
	margin-top: 4px;
}

/* Withdrawal request — program selection list. */
.cbyos-wd-all {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	padding: 2px 0 12px;
	border-bottom: 1px solid #e2e4e7;
	margin-bottom: 6px;
}
.cbyos-wd-group__student {
	margin: 18px 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: #21323d;
}
.cbyos-wd-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid #f0f1f3;
	cursor: pointer;
}
.cbyos-wd-item input {
	margin-top: 3px;
	flex-shrink: 0;
}
.cbyos-wd-item__name {
	display: block;
	font-weight: 600;
}
.cbyos-wd-item__meta {
	color: #8c8f94;
	font-size: 13px;
}
.cbyos-wd-err {
	color: #b3261e;
	font-size: 14px;
	margin: 12px 0 0;
}

/* Generic confirm modal (used by the withdrawal flow). */
.cbyos-confirm {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(20, 24, 28, .6);
}
.cbyos-confirm[hidden] {
	display: none;
}
.cbyos-confirm__panel {
	width: 100%;
	max-width: 400px;
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
	text-align: center;
}
.cbyos-confirm__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fdecea;
	color: #c5221f;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
	font-size: 26px;
	font-weight: 700;
}
.cbyos-confirm__title {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 600;
	color: #1d2327;
}
.cbyos-confirm__body {
	margin: 0 0 12px;
	font-size: 14px;
	color: #50575e;
}
.cbyos-confirm__list {
	list-style: none;
	margin: 0 0 14px;
	padding: 12px 16px;
	background: #f6f7f7;
	border-radius: 10px;
	text-align: left;
	font-size: 14px;
}
.cbyos-confirm__list li {
	padding: 4px 0;
}
.cbyos-confirm__note {
	margin: 0 0 18px;
	font-size: 13px;
	color: #a15c07;
}
.cbyos-confirm__actions {
	display: flex;
	gap: 10px;
}
.cbyos-confirm__actions .cbyos-btn {
	flex: 1;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Notice board — read-only announcements pinned to the top of the home page.
 * ---------------------------------------------------------------------- */
.cbyos-noticeboard {
	margin-top: 8px;
	/* Breathing room before the "Your CBY portal" heading below. */
	margin-bottom: 36px;
}
.cbyos-noticeboard__title {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #6a1b9a;
}
.cbyos-noticeboard__title svg {
	color: #88cbed;
}
/* Positioned wrapper so the scroll cues (fade + chevron) can pin to the
   visible bottom of the board rather than scroll away with the content. */
.cbyos-notices-scroll {
	position: relative;
}
.cbyos-notices-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* Keep the board a finite box: it shows ~3 of the short row-cards, then
	   scrolls internally (with the fade + "scroll for more" cue) rather than
	   pushing the rest of the home page down. Lowered to suit the compact rows
	   — the taller 340px box rarely overflowed once cards became short strips. */
	max-height: 186px;
	overflow-y: auto;
	/* Reserve gutter space so the scrollbar never overlaps the card borders
	   or the pin, without nudging the cards off-centre. */
	scrollbar-gutter: stable;
	padding-right: 4px;
	/* Always-visible thin scrollbar as a desktop scroll hint. */
	scrollbar-width: thin;
	scrollbar-color: #c3cdd6 transparent;
}
.cbyos-notices-list::-webkit-scrollbar {
	width: 8px;
}
.cbyos-notices-list::-webkit-scrollbar-thumb {
	background: #c3cdd6;
	border-radius: 8px;
}
.cbyos-notices-list::-webkit-scrollbar-track {
	background: transparent;
}
/* Bottom fade — the board's last card dissolves into the page, signalling
   there's more below. Shown only while scrollable and not yet at the bottom
   (toggled by assets/portal-notices.js). */
.cbyos-notices-scroll::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 52px;
	background: linear-gradient(to bottom, rgba(246, 247, 249, 0) 0%, #f6f7f9 82%);
	border-radius: 0 0 10px 10px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
	z-index: 1;
}
.cbyos-notices-scroll__cue {
	position: absolute;
	left: 50%;
	bottom: 6px;
	transform: translateX(-50%);
	/* Sit above the bottom fade so the text stays crisp, not washed out. */
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	/* A solid pill keeps it clearly legible over the fading cards behind it. */
	padding: 4px 12px;
	background: #ffffff;
	border-radius: 999px;
	box-shadow: 0 1px 5px rgba(33, 50, 61, .18);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6a1b9a;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
}
.cbyos-notices-scroll__cue svg {
	animation: cbyos-notice-bounce 1.4s ease-in-out infinite;
}
/* Reveal both cues only when there's more to scroll to. */
.cbyos-notices-scroll.is-scrollable:not(.is-bottom)::after,
.cbyos-notices-scroll.is-scrollable:not(.is-bottom) .cbyos-notices-scroll__cue {
	opacity: 1;
}
@keyframes cbyos-notice-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
	.cbyos-notices-scroll__cue svg {
		animation: none;
	}
}
.cbyos-notice-item {
	position: relative;
	/* Lay the pin, title, body and date out in a single horizontal row so each
	   notice is a short strip rather than a tall stacked card. Wraps only when
	   the content genuinely doesn't fit (long body / narrow phone). */
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 3px 10px;
	border-radius: 10px;
	padding: 11px 16px;
	border: 2px solid transparent;
	/* Brand gradient border with a faint tinted fill so the board reads as one
	   distinct block above everything else on the page. */
	background:
		linear-gradient(#fbfdff, #fbfdff) padding-box,
		linear-gradient(160deg, #88cbed 0%, #d5bff2 100%) border-box;
}
.cbyos-notice-item--pinned {
	background:
		linear-gradient(#fff7ff, #fff7ff) padding-box,
		linear-gradient(160deg, #d5bff2 0%, #88cbed 100%) border-box;
}
.cbyos-notice-item__pin {
	flex: 0 0 auto;
	font-size: 13px;
	line-height: 1.4;
}
.cbyos-notice-item__title {
	flex: 0 0 auto;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #1d2327;
}
.cbyos-notice-item__body {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: #3c434a;
	font-size: 14px;
	line-height: 1.5;
}
.cbyos-notice-item__date {
	flex: 0 0 auto;
	/* Push the date to the far right of the row. */
	margin: 0 0 0 auto;
	padding-left: 8px;
	font-size: 12px;
	color: #8a929b;
	white-space: nowrap;
}