/**
 * Sign in, registration and first-run setup.
 *
 * From design_handoff_teachvic_auth (AUTH.md, "Shell", "Palette and type").
 * The card with the navy panel, the field treatment, the pills, the I-am
 * cards, the strength meter and the step rail. Scoped to .tvx-auth so nothing
 * here can reach the board or the dashboard.
 *
 * Values are the design's: card 1080 max, grid minmax(0,318px) minmax(0,1fr),
 * radius 20, one column under 900 with the panel BELOW the form, 18px side
 * padding under 820.
 */

.tvx-auth {
	--auth-navy: #0B2A5C;
	--auth-navy-deep: #071A3C;
	--auth-link: #1B4A96;
	--auth-amber: #F6A02A;
	--auth-amber-hover: #ffb44e;
	--auth-border: #DCE8FA;
	--auth-tint: #F6F9FE;
	--auth-ring: #EAF2FE;
	--auth-rule: #F0F5FD;
	--auth-muted: #556580;
	--auth-muted-2: #8593A8;
	--auth-error: #C0392B;
	--auth-onnavy-muted: #9FC0F0;
	--auth-onnavy-body: #DCE8FA;

	max-width: 1080px;
	margin: 0 auto;
	padding: 44px 28px 90px;
	font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--auth-navy-deep);
	line-height: 1.55;
}

/* The theme gives every .tvj block in the content column a 1440px measure
   (.entry-content > .tvj), which outranks .tvx-auth alone. The design's
   shell is 1080. Named with the parent so it wins on specificity. */
.entry-content > .tvx-auth.tvj,
.wp-block-post-content > .tvx-auth.tvj,
.is-layout-constrained > .tvx-auth.tvj { max-width: 1080px; }

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

/* --- The card ----------------------------------------------------------- */

.tvx-auth__card {
	display: grid;
	grid-template-columns: minmax(0, 318px) minmax(0, 1fr);
	background: #fff;
	border: 1px solid var(--auth-border);
	border-radius: 20px;
	box-shadow: 0 22px 50px rgba(7, 26, 60, 0.10);
	overflow: hidden;
}

.tvx-auth__main {
	padding: 36px 38px 40px;
	min-width: 0;
}

.tvx-auth__form { max-width: 440px; display: flex; flex-direction: column; gap: 22px; }
.tvx-auth__form--register { max-width: 480px; }
.tvx-auth__form--setup { max-width: 520px; }

/* --- The navy panel ----------------------------------------------------- */

.tvx-auth__panel {
	background: var(--auth-navy);
	color: #fff;
	padding: 36px 30px 30px;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.tvx-auth__panel-top { display: flex; flex-direction: column; gap: 10px; }

.tvx-auth__eyebrow {
	margin: 0;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--auth-link);
}
.tvx-auth__eyebrow--onnavy { color: var(--auth-amber); }
.tvx-auth__eyebrow--help { font-size: 9px; letter-spacing: 0.16em; color: var(--auth-onnavy-muted); }

.tvx-auth__panel-title {
	margin: 0;
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #fff;
}

.tvx-auth__panel-body {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--auth-onnavy-body);
}

.tvx-auth__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tvx-auth__points li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
}
.tvx-auth__dot {
	flex: 0 0 6px;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--auth-amber);
	margin-top: 8px;
}

.tvx-auth__help {
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.tvx-auth__help-line { margin: 6px 0 10px; font-size: 13px; line-height: 1.6; color: var(--auth-onnavy-body); }
.tvx-auth__help-link { font-size: 13px; font-weight: 600; color: var(--auth-amber); text-decoration: none; }
.tvx-auth__help-link:hover { color: var(--auth-amber-hover); }

/* The step rail, setup only. */
.tvx-auth__rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tvx-auth__rail-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 14px;
	color: var(--auth-onnavy-muted);
}
.tvx-auth__rail-item.is-current { background: rgba(246, 160, 42, 0.16); color: #fff; font-weight: 600; }
.tvx-auth__rail-item.is-done { color: #fff; }
.tvx-auth__rail-badge {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
}
.tvx-auth__rail-item.is-current .tvx-auth__rail-badge { background: var(--auth-amber); color: var(--auth-navy-deep); }
.tvx-auth__rail-item.is-done .tvx-auth__rail-badge { background: var(--auth-link); color: #fff; }

/* --- Headings and copy in the form column ------------------------------- */

.tvx-auth__head { display: flex; flex-direction: column; gap: 8px; }

.tvx-auth__title {
	margin: 0;
	font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--auth-navy-deep);
}
.tvx-auth__title--serif {
	font-family: Newsreader, Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-size: 34px;
	letter-spacing: -0.01em;
}
.tvx-auth__title:focus { outline: none; }
.tvx-auth__title:focus-visible { box-shadow: 0 0 0 3px var(--auth-ring); border-radius: 6px; }

.tvx-auth__lead { margin: 0; font-size: 15px; line-height: 1.6; color: var(--auth-muted); }
.tvx-auth__email { color: var(--auth-navy-deep); font-weight: 600; }

.tvx-auth__back {
	display: inline-block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--auth-link);
	text-decoration: none;
}
.tvx-auth__back:hover { text-decoration: underline; }

.tvx-auth__notice,
.tvx-auth__alert {
	margin: 0;
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
}
.tvx-auth__notice { background: var(--auth-tint); border: 1px solid var(--auth-border); color: var(--auth-navy-deep); }
.tvx-auth__alert { background: #FBECEC; border: 1px solid #F3C9C6; color: #8A2620; }

/* --- Fields ------------------------------------------------------------- */

.tvx-auth__fields { display: flex; flex-direction: column; gap: 18px; }

.tvx-auth__field { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tvx-auth__field[hidden] { display: none; }

.tvx-auth__field > label,
.tvx-auth__field > legend,
.tvx-auth__label-row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--auth-navy-deep);
	padding: 0;
}
.tvx-auth__field > legend { margin-bottom: 7px; float: left; width: 100%; }
.tvx-auth__field > legend + * { clear: both; }

.tvx-auth__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.tvx-auth input[type="text"],
.tvx-auth input[type="email"],
.tvx-auth input[type="password"],
.tvx-auth input[type="file"],
.tvx-auth select {
	width: 100%;
	margin: 0;
	padding: 14px 15px;
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
	color: var(--auth-navy-deep);
	background: #fff;
	border: 1px solid var(--auth-border);
	border-radius: 10px;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}
.tvx-auth select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%231B4A96' stroke-width='2' stroke-linecap='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 15px center;
	padding-right: 40px;
}
.tvx-auth input[type="file"] { padding: 12px 15px; cursor: pointer; }
.tvx-auth input::placeholder { color: var(--auth-muted-2); opacity: 1; }

.tvx-auth input:focus,
.tvx-auth select:focus,
.tvx-auth textarea:focus {
	outline: none;
	border-color: var(--auth-link);
	box-shadow: 0 0 0 3px var(--auth-ring);
}
.tvx-auth input.is-invalid,
.tvx-auth select.is-invalid { border-color: var(--auth-error); }

.tvx-auth__hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--auth-muted-2); }
.tvx-auth__error { margin: 0; font-size: 12px; line-height: 1.5; color: var(--auth-error); }
.tvx-auth__check { flex-wrap: wrap; }
/* A flex item's hypothetical size is its max-content width, so with wrap on
   the sentence dropped under the box. Let it shrink to what is left. */
.tvx-auth__check > span { flex: 1 1 0; min-width: 0; }
.tvx-auth__check .tvx-auth__error { flex-basis: 100%; margin-left: 28px; }
.tvx-auth input.is-invalid:focus,
.tvx-auth select.is-invalid:focus { border-color: var(--auth-error); box-shadow: 0 0 0 3px #FBECEC; }

.tvx-auth__twoup {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
}

/* Checkboxes: the design's own control, not the browser's. */
.tvx-auth__check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--auth-navy-deep);
	cursor: pointer;
}
.tvx-auth__check input[type="checkbox"] {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid var(--auth-border);
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	display: inline-grid;
	place-content: center;
}
.tvx-auth__check input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	transform: scale(0);
	transition: transform .1s;
	background: #fff;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.tvx-auth__check input[type="checkbox"]:checked { background: var(--auth-navy); border-color: var(--auth-navy); }
.tvx-auth__check input[type="checkbox"]:checked::before { transform: scale(1); }
.tvx-auth__check input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--auth-ring); }
.tvx-auth__check--consent { font-size: 13px; color: var(--auth-muted); }
.tvx-auth__check--boxed {
	padding: 14px 16px;
	background: var(--auth-tint);
	border: 1px solid var(--auth-border);
	border-radius: 12px;
	color: var(--auth-muted);
}
.tvx-auth__check--boxed strong { display: block; color: var(--auth-navy-deep); font-weight: 600; }

.tvx-auth__checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; }
.tvx-auth__checks--two { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* The I-am toggle: two cards. */
.tvx-auth__iam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tvx-auth__iam-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	border: 1.5px solid var(--auth-border);
	border-radius: 12px;
	background: #fff;
	color: var(--auth-navy);
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.tvx-auth__iam-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tvx-auth__iam-card.is-selected { background: var(--auth-navy); border-color: var(--auth-navy); color: #fff; }
.tvx-auth__iam-card:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--auth-ring); }
.tvx-auth__iam-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.tvx-auth__iam-sub { font-size: 13px; line-height: 1.4; opacity: 0.75; }

/* The strength meter. */
.tvx-auth__meter { display: flex; align-items: center; gap: 12px; min-height: 14px; }
.tvx-auth__meter-track {
	flex: 1;
	height: 4px;
	border-radius: 999px;
	background: var(--auth-ring);
	overflow: hidden;
}
.tvx-auth__meter-bar {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: transparent;
	transition: width .2s, background-color .2s;
}
.tvx-auth__meter-label {
	flex: 0 0 auto;
	min-width: 0;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	color: var(--auth-muted-2);
}
.tvx-auth__meter[data-strength="weak"] .tvx-auth__meter-bar { width: 28%; background: var(--auth-error); }
.tvx-auth__meter[data-strength="fair"] .tvx-auth__meter-bar { width: 55%; background: var(--auth-amber); }
.tvx-auth__meter[data-strength="good"] .tvx-auth__meter-bar { width: 80%; background: var(--auth-link); }
.tvx-auth__meter[data-strength="strong"] .tvx-auth__meter-bar { width: 100%; background: var(--auth-navy); }
.tvx-auth__meter[data-strength="weak"] .tvx-auth__meter-label { color: var(--auth-error); }
.tvx-auth__meter[data-strength="fair"] .tvx-auth__meter-label { color: var(--auth-amber); }
.tvx-auth__meter[data-strength="good"] .tvx-auth__meter-label { color: var(--auth-link); }
.tvx-auth__meter[data-strength="strong"] .tvx-auth__meter-label { color: var(--auth-navy); }

/* --- Buttons ------------------------------------------------------------ */

.tvx-auth__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 26px;
	border-radius: 999px;
	border: 1px solid transparent;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.tvx-auth__btn:focus { outline: none; }
.tvx-auth__btn:focus-visible { box-shadow: 0 0 0 3px var(--auth-ring); }
.tvx-auth__btn--block { width: 100%; }
.tvx-auth__btn--primary { background: var(--auth-navy); color: #fff; }
.tvx-auth__btn--primary:hover { background: var(--auth-link); color: #fff; }
.tvx-auth__btn--amber { background: var(--auth-amber); color: var(--auth-navy-deep); }
.tvx-auth__btn--amber:hover { background: var(--auth-amber-hover); color: var(--auth-navy-deep); }
.tvx-auth__btn--secondary { background: #fff; border-color: var(--auth-border); color: var(--auth-link); }
.tvx-auth__btn--secondary:hover { border-color: var(--auth-amber); background: var(--auth-tint); color: var(--auth-link); }
.tvx-auth__btn--text { background: transparent; color: var(--auth-link); padding-left: 12px; padding-right: 12px; }
.tvx-auth__btn--text:hover { text-decoration: underline; }
.tvx-auth__btn--later { background: transparent; color: var(--auth-muted-2); margin-left: auto; padding-left: 0; padding-right: 0; font-weight: 500; }
.tvx-auth__btn--later:hover { color: var(--auth-link); text-decoration: underline; }

.tvx-auth__submit { display: flex; }
.tvx-auth__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.tvx-auth__stepfoot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 22px;
	margin-top: 4px;
	border-top: 1px solid var(--auth-rule);
}

.tvx-auth__textlink { font-size: 13px; font-weight: 600; color: var(--auth-link); text-decoration: none; }
.tvx-auth__textlink:hover { text-decoration: underline; }

.tvx-auth__linkbtn {
	display: inline;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--auth-link);
	cursor: pointer;
}
.tvx-auth__linkbtn:hover { text-decoration: underline; }
.tvx-auth__inline-form { display: inline; }
.tvx-auth__muted { color: var(--auth-muted-2); }

.tvx-auth__switch {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	padding-top: 18px;
	border-top: 1px solid var(--auth-rule);
	font-size: 14px;
	color: var(--auth-muted);
}

.tvx-auth__foot-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--auth-muted-2); }

/* --- Confirmation screens ----------------------------------------------- */

.tvx-auth__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	background: var(--auth-amber);
	color: var(--auth-navy-deep);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.tvx-auth__inset {
	padding: 16px 18px;
	background: var(--auth-tint);
	border: 1px solid var(--auth-border);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.tvx-auth__inset-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--auth-navy-deep); }
.tvx-auth__inset-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--auth-muted); }

/* --- Set password (1.44.0, design_handoff_teachvic_account) --------------- */

.tvx-auth__label { font-size: 13px; font-weight: 600; color: var(--auth-navy-deep); }
.tvx-auth__readonly {
	padding: 14px 15px;
	font-size: 15px;
	line-height: 1.3;
	color: #3c4a63;
	background: var(--auth-tint);
	border: 1px solid var(--auth-border);
	border-radius: 10px;
	overflow-wrap: anywhere;
}
.tvx-auth__showpw { font-size: 13px; }
.tvx-auth__showpw:hover { color: var(--auth-amber); text-decoration: none; }
.tvx-auth__match { margin: 0; min-height: 18px; font-size: 12px; font-weight: 600; color: var(--auth-muted-2); }
.tvx-auth__match.is-ok { color: var(--auth-link); }
.tvx-auth__match.is-bad { color: var(--auth-error); }
.tvx-auth__foot-note--rule { padding-top: 20px; border-top: 1px solid var(--auth-rule); }

/* --- Breakpoints -------------------------------------------------------- */

@media (max-width: 900px) {
	.tvx-auth__card { grid-template-columns: minmax(0, 1fr); }
	.tvx-auth__panel { order: 2; }
	.tvx-auth__main { order: 1; }
	.tvx-auth__form,
	.tvx-auth__form--register,
	.tvx-auth__form--setup { max-width: none; }
}

@media (max-width: 820px) {
	.tvx-auth { padding: 24px 18px 60px; }
	.tvx-auth__main { padding: 28px 22px 30px; }
	.tvx-auth__panel { padding: 28px 22px 26px; }
	.tvx-auth__title { font-size: 26px; }
	.tvx-auth__title--serif { font-size: 30px; }
}

@media (max-width: 480px) {
	.tvx-auth__iam-grid { grid-template-columns: 1fr; }
	.tvx-auth__stepfoot .tvx-auth__btn--amber { width: 100%; }
}