/*!
 * BRCOffice sign-in page. Scoped to .brc-auth; same palette as the client portal.
 */
.brc-auth {
	--a-ink: var(--brand-navy, #14213D);
	--a-text: var(--brand-text, #1F2937);
	--a-muted: #5B6577;
	--a-dim: #8A93A3;
	--a-line: #E2E5EA;
	--a-surface: #F6F7F9;
	--a-accent: var(--brand-accent, #B8621B);
	--a-accent-hover: var(--brand-accent-dark, #9C5215);
	--a-accent-wash: var(--brand-accent-wash, #FBF1E6);
	--a-red: #B42318;
	--a-red-wash: #FEF3F2;
	--a-green: #067647;
	--a-green-wash: #ECFDF3;
	--a-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	container-type: inline-size;
	max-width: 960px; margin: clamp(8px, 4vw, 48px) auto; padding: 0;
	color: var(--a-text); font: 15px/1.55 var(--a-sans);
}
.brc-auth *, .brc-auth *::before, .brc-auth *::after { box-sizing: border-box; }
.brc-login-page .entry-header, .brc-login-page .page-header, .brc-login-page .wp-block-post-title { display: none; }

.brc-auth__card {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	background: #fff; border: 1px solid var(--a-line); border-radius: 20px; overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 33, 61, .04), 0 12px 32px -12px rgba(20, 33, 61, .16);
	animation: brc-auth-in .35s ease-out both;
}
@keyframes brc-auth-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Left: brand panel ---------- */
.brc-auth__aside {
	position: relative; display: flex; flex-direction: column; gap: 32px; padding: 40px 36px;
	color: #E8ECF4;
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(184, 98, 27, .28), transparent 60%),
		radial-gradient(90% 70% at 0% 100%, rgba(46, 91, 216, .22), transparent 60%),
		var(--a-ink);
}
.brc-auth__aside::after { /* faint grid, like a floor plan */
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07;
	background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
	background-size: 28px 28px;
	-webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 70%); mask-image: linear-gradient(160deg, #000 10%, transparent 70%);
}
.brc-auth__brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: .01em; color: #fff; }
.brc-auth__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }
.brc-auth__pitch { position: relative; z-index: 1; margin-top: auto; }
.brc-auth__lead { margin: 0 0 20px; font-size: 26px; line-height: 1.25; font-weight: 650; color: #fff; letter-spacing: -.01em; text-wrap: balance; }
.brc-auth__aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.brc-auth__aside li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: #C9D1E0; }
.brc-auth__aside li svg { flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 2px; border-radius: 50%; background: rgba(184, 98, 27, .35); color: #FFD7AE; }
.brc-auth__fine { position: relative; z-index: 1; margin: 0; font-size: 12.5px; color: #93A0B8; }

/* ---------- Right: forms ---------- */
.brc-auth__body { padding: 44px clamp(24px, 5cqi, 52px) 36px; display: flex; flex-direction: column; justify-content: center; min-height: 520px; }
.brc-auth__body > * { animation: brc-auth-in .3s ease-out both; }
.brc-auth .brc-auth__title { margin: 0 0 6px; font: 700 28px/1.2 var(--a-sans); letter-spacing: -.015em; color: var(--a-ink); }
.brc-auth__sub { margin: 0 0 22px; color: var(--a-muted); }
.brc-auth__sub b { color: var(--a-text); font-weight: 600; word-break: break-word; }
.brc-auth__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 14px; background: var(--a-accent-wash); color: var(--a-accent); }
.brc-auth__icon svg { width: 26px; height: 26px; }
.brc-auth__icon--warn { background: #FFFAEB; color: #B54708; }

.brc-auth__note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 11px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.brc-auth__note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.brc-auth__note--bad { background: var(--a-red-wash); color: var(--a-red); border: 1px solid #FECDCA; }
.brc-auth__note--ok { background: var(--a-green-wash); color: var(--a-green); border: 1px solid #ABEFC6; }

/* Segmented switch: Password | Email me a link */
.brc-auth__switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 0 0 20px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px; }
.brc-auth__switch::before {
	content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px;
	background: #fff; box-shadow: 0 1px 2px rgba(20, 33, 61, .1), 0 0 0 1px rgba(20, 33, 61, .04);
	transition: transform .25s cubic-bezier(.3, .7, .3, 1);
}
.brc-auth__switch:has([data-auth-tab="link"][aria-selected="true"])::before { transform: translateX(100%); }
.brc-auth .brc-auth__switch a { position: relative; z-index: 1; display: block; padding: 8px 10px; text-align: center; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--a-muted); text-decoration: none; transition: color .2s; }
.brc-auth .brc-auth__switch a[aria-selected="true"] { color: var(--a-ink); }
.brc-auth .brc-auth__switch a:hover { color: var(--a-ink); text-decoration: none; }
.brc-auth__switch a:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 1px; }

.brc-auth__form { display: grid; gap: 16px; margin: 0; }
.brc-auth__form[hidden] { display: none; }
.brc-auth__form.is-entering { animation: brc-auth-in .25s ease-out both; }
.brc-auth__field { display: grid; gap: 6px; }
.brc-auth__field label, .brc-auth__label-row label { font-size: 14px; font-weight: 600; color: var(--a-text); margin: 0; }
.brc-auth__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.brc-auth__label-row a { font-size: 13.5px; font-weight: 500; }
.brc-auth a { color: var(--a-accent); text-decoration: none; }
.brc-auth a:hover { color: var(--a-accent-hover); text-decoration: underline; text-underline-offset: 2px; }

.brc-auth input[type="email"], .brc-auth input[type="password"], .brc-auth input[type="text"]:not([hidden]) {
	width: 100%; height: 46px; margin: 0; padding: 0 14px;
	border: 1px solid #D0D5DD; border-radius: 10px; background: #fff; color: var(--a-text);
	font: 15.5px var(--a-sans); box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
	transition: border-color .15s, box-shadow .15s;
}
.brc-auth input:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 4px rgba(184, 98, 27, .14); }
.brc-auth__pass { position: relative; }
.brc-auth__pass input { padding-right: 48px !important; }
.brc-auth__peek {
	position: absolute; top: 3px; right: 3px; bottom: 3px; width: 42px; display: grid; place-items: center;
	border: 0; border-radius: 8px; background: transparent; color: var(--a-dim); cursor: pointer; padding: 0;
}
.brc-auth__peek:hover, .brc-auth__peek:focus, .brc-auth__peek:active { color: var(--a-text); background: var(--a-surface); }
.brc-auth__peek[aria-pressed="true"] { color: var(--a-accent); }
.brc-auth__peek:focus-visible { outline: 2px solid var(--a-accent); }

.brc-auth__check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--a-muted); cursor: pointer; margin: -2px 0 0; }
.brc-auth__check input { width: 17px; height: 17px; margin: 0; accent-color: var(--a-accent); }
.brc-auth__hint { margin: 0; font-size: 13.5px; color: var(--a-muted); line-height: 1.5; }
.brc-auth__body > .brc-auth__hint { margin: -8px 0 22px; }

.brc-auth .brc-auth__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin: 4px 0 0; padding: 0 20px;
	border: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
	background: var(--a-accent); color: #fff; font: 600 15.5px var(--a-sans); letter-spacing: .005em;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .1), inset 0 -1px 0 rgba(0, 0, 0, .12);
	transition: background .15s, transform .08s;
}
.brc-auth .brc-auth__btn:hover { background: var(--a-accent-hover); color: #fff; text-decoration: none; }
.brc-auth .brc-auth__btn:active { transform: translateY(1px); }
.brc-auth .brc-auth__btn:focus-visible { outline: 2px solid var(--a-accent); outline-offset: 3px; }
.brc-auth .brc-auth__btn--quiet { background: #fff; color: var(--a-text); border: 1px solid #D0D5DD; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.brc-auth .brc-auth__btn--quiet:hover { background: var(--a-surface); color: var(--a-text); }
.brc-auth .brc-auth__btn.is-busy { opacity: .75; cursor: progress; }
.brc-auth .brc-auth__btn.is-busy::after { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: brc-auth-spin .7s linear infinite; }
@keyframes brc-auth-spin { to { transform: rotate(360deg); } }

.brc-auth__meter { height: 4px; margin-top: 4px; border-radius: 4px; background: var(--a-line); overflow: hidden; }
.brc-auth__meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--a-red); transition: width .25s, background .25s; }
.brc-auth__meter[data-level="2"] span { background: #DC6803; }
.brc-auth__meter[data-level="3"] span { background: #079455; }

.brc-auth__foot { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--a-line); font-size: 14px; color: var(--a-muted); text-align: center; }
.brc-auth__foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.brc-auth__foot svg { width: 16px; height: 16px; }

/* ---------- Narrow: brand becomes a slim header ---------- */
@container (max-width: 760px) {
	.brc-auth__card { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
	.brc-auth__aside { padding: 18px 22px; gap: 0; }
	.brc-auth__pitch, .brc-auth__fine { display: none; }
	.brc-auth__body { min-height: 0; padding: 28px 22px 26px; }
	.brc-auth .brc-auth__title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.brc-auth__card, .brc-auth__body > *, .brc-auth__form.is-entering { animation: none; }
	.brc-auth__switch::before, .brc-auth__meter span { transition: none; }
}
.brc-auth input[aria-invalid="true"] { border-color: var(--a-red); box-shadow: 0 0 0 4px rgba(180, 35, 24, .1); }