/* =========================================================
   Login and registration — /account/login, /account/reset-password
   Transcribed from design_files/auth.html.

   HivePress renders these routes itself, inside the theme's
   header and footer, so the chrome is hidden here rather than
   skipped — the design's "back to site" link is what replaces
   the nav.
   ========================================================= */

body.tr-auth .site-head,
body.tr-auth .site-foot,
body.tr-auth .foot-cta { display: none; }

/* HivePress's narrow page puts its content in hp-col-sm-4 with a matching
   offset — a third of a twelve-column grid, centred. That is right for a
   login form on a normal page and wrong for a full-bleed split panel, so
   every wrapper between the body and .auth is flattened here. Each of these
   selectors is more specific than the grid class it overrides, so none of it
   needs !important. */
body.tr-auth #content,
body.tr-auth .content-area > .hp-page,
body.tr-auth .hp-page,
body.tr-auth .hp-page__container,
body.tr-auth .hp-page__columns,
body.tr-auth .hp-row,
body.tr-auth .hp-page__content,
body.tr-auth .wrap,
body.tr-auth .section {
	max-width: none;
	width: 100%;
	flex: 1 1 100%;
	margin: 0;
	padding: 0;
}

body.tr-auth .hp-page__header,
body.tr-auth .hp-page__title,
body.tr-auth .hp-menu--breadcrumb { display: none; }

.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

.brand-side { background: var(--char); color: #fff; padding: 40px 56px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.brand-side::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(220, 242, 74, .16), transparent 65%); pointer-events: none; }
.brand-side .bs-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 1; }
.brand-side .back { font-size: 13px; font-weight: 700; color: #BFC1C8; text-decoration: none; white-space: nowrap; }
.brand-side .back:hover { color: #fff; }
.brand-side .bs-mid { margin: auto 0; max-width: 30ch; position: relative; z-index: 1; }
.brand-side h2 { font-family: var(--anton); text-transform: uppercase; font-size: clamp(34px, 4vw, 52px); line-height: .92; letter-spacing: .01em; margin: 0 0 18px; }
.brand-side h2 .hl { color: var(--hivis); }
.brand-side p { font-size: 16px; color: #BFC1C8; line-height: 1.6; margin: 0; }
.brand-side .bs-stats { display: flex; gap: 30px; margin-top: 34px; flex-wrap: wrap; }
.brand-side .bs-stats .v { font-family: var(--anton); font-size: 26px; line-height: 1; }
.brand-side .bs-stats .l { font-size: 11.5px; color: var(--muted-2); font-weight: 600; margin-top: 5px; }
.brand-side .bs-foot { font-size: 12px; color: var(--muted-2); position: relative; z-index: 1; }

.form-side { background: var(--concrete); display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 40px; width: 100%; max-width: 430px; box-shadow: var(--shadow-lg); }
.auth .form-card h1, .auth .form-card h2 { font-family: var(--anton); text-transform: uppercase; font-size: 30px; margin: 0 0 6px; letter-spacing: .01em; }
.auth .form-card .fc-sub { font-size: 14px; color: var(--muted); margin: 0 0 26px; line-height: 1.5; }
.auth .tr-notice { font-size: 13px; margin-bottom: 22px; }

/* Which view is showing.
   Both forms are in the page and the query string picks one, so the link
   between them is a real URL that works before any script runs. The script
   only saves the round trip. */
.auth .bs-register,
.auth .hp-form--user-register { display: none; }
.auth.is-register .bs-register,
.auth.is-register .hp-form--user-register { display: block; }
.auth.is-register .bs-login,
.auth.is-register .hp-form--user-login,
.auth.is-register .hp-form--user-password-request { display: none; }

/* HivePress's radio field, wearing the design's segmented toggle.
   Its markup is a div > ul > li > label > input + span, so the ul is the
   track and each label is a segment. The input stays in the page and stays
   focusable — it is what actually submits — and is simply not drawn. */
.auth .hp-field--radio ul { display: flex; gap: 6px; background: var(--concrete); border-radius: 10px; padding: 5px; margin: 0; list-style: none; }
.auth .hp-field--radio li { flex: 1; margin: 0; }
.auth .hp-field--radio label { display: block; position: relative; font-weight: 700; font-size: 13px; padding: 10px; border-radius: 7px; color: var(--muted); text-align: center; cursor: pointer; transition: background .12s, color .12s; }
.auth .hp-field--radio input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.auth .hp-field--radio label:has( input:checked ) { background: #fff; color: var(--char); box-shadow: var(--shadow); }
.auth .hp-field--radio label:has( input:focus-visible ) { outline: 2px solid var(--char); outline-offset: 2px; }

/* The field's own label sits above the toggle rather than inside it. */
.auth .hp-form__field--radio > label { font-weight: 700; font-size: 13px; margin-bottom: 7px; display: block; }

/* Belt and braces for the links the block filter removes. If HivePress ever
   moves those parts in its tree the filter stops matching silently, and a
   duplicate link that opens a modal is worse than a missing one. */
.auth .hp-form__action--user-register,
.auth .hp-form__action--user-login { display: none; }

.auth .divider-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.auth .divider-or::before, .auth .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth .alt { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 24px; }
.auth .link { font-weight: 700; color: var(--char); text-decoration: none; }
.auth .link:hover { text-decoration: underline; }
.auth .legal-fine { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 16px; text-align: center; }
.auth .legal-fine a { color: var(--char); font-weight: 600; text-decoration: underline; }

/* HivePress's own form chrome, which the card replaces. */
.auth .hp-form { border: 0; padding: 0; margin: 0; max-width: none; }
.auth .hp-form__button, .auth .hp-form button[type='submit'] { width: 100%; }

@media (max-width: 900px) {
	.auth { grid-template-columns: 1fr; min-height: 0; }
	.brand-side { padding: 24px 20px 30px; }
	.brand-side .bs-mid { margin: 24px 0; }
	.brand-side .bs-stats, .brand-side .bs-foot { display: none; }
	.form-side { padding: 24px 16px; }
	.auth .form-card { padding: 28px 22px; }
}