/* ─────────────────────────────────────────────────────────────────────────
   property.macgeorge.co.nz · sign-in
   Mirrored from events.macgeorge.co.nz, which in turn mirrors the LMS
   design system, so all three sign-in pages read as one product.
   A local copy of the MacGeorge LMS design system (macgeorge_lms.css), so the
   two sign-in pages read as one product. Copied rather than linked: the LMS
   runs on a different host, and a cross-origin stylesheet would take this page
   down with it. Keep the two in step by hand — the tokens below are the whole
   contract, and they are small on purpose.
   ───────────────────────────────────────────────────────────────────────── */
/* Self-hosted rather than the LMS's Google Fonts @import: this vhost sends a
   Content-Security-Policy the LMS does not, and `style-src 'self'` drops the
   import silently. */
@import url('/_gate/assets/vendor/fonts/fonts.css');

:root {
	--color-white: #fff;
	--color-black: #000;
	--color-darker-gray: #15171a;
	--color-dark-gray: #444;
	--color-mid-gray: #ccc;
	--color-light-gray: #e6e6e6;
	--color-lighter-gray: rgba(0, 0, 0, .05);
	--color-primary-text: var(--color-darker-gray);
	--color-secondary-text: rgba(0, 0, 0, .55);
	--color-border: rgba(0, 0, 0, .08);
	--color-dark-border: rgba(0, 0, 0, .55);
	--color-brand: #0050a3;

	--container-width: 1320px;
	--container-gap: clamp(24px, 1.7032rem + 1.9355vw, 48px);

	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-serif: 'EB Garamond', Georgia, Times, serif;
	--font-mono: 'JetBrains Mono', Menlo, Consolas, Monaco, monospace;
}

/* ── Base reset ───────────────────────────────────────────────────────────
   Without border-box, `width: 100%` on the button and on the inputs resolves
   to different total widths, because their horizontal padding differs (24px
   against 16px). That is exactly why the button did not line up with the
   fields — it is the reset doing the work, not any rule on the button. */
*, *::before, *::after { box-sizing: border-box; }

/* 62.5% makes 1rem = 10px, which is what every size below assumes. */
html { font-size: 62.5%; }

body.mg-page {
	font-family: var(--font-sans);
	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--color-primary-text);
	background: var(--color-white);
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
}

.mg-page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.mg-card-page {
	display: flex; align-items: center; justify-content: center;
	flex: 1; padding: 40px var(--container-gap);
}
.mg-card { width: 100%; max-width: 480px; }
.mg-card-header { text-align: center; margin-bottom: 40px; }
.mg-page h1, .mg-page h2, .mg-page h3 {
	font-family: var(--font-sans);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-primary-text);
	letter-spacing: -0.02em;
}
.mg-card-header h1 { font-size: 2.8rem; margin: 16px 0 8px; }
.mg-card-header p { color: var(--color-secondary-text); font-size: 1.6rem; margin: 0; }

.mg-form-group { margin-bottom: 24px; }
.mg-label {
	display: block; font-size: 1.4rem; font-weight: 600;
	color: var(--color-primary-text); margin-bottom: 8px;
}
.mg-input {
	width: 100%; padding: 12px 16px;
	font-family: var(--font-sans); font-size: 1.6rem;
	color: var(--color-primary-text); background: var(--color-white);
	border: 1px solid var(--color-dark-border); border-radius: 6px;
	outline: none; transition: border-color .2s;
}
.mg-input:focus {
	border-color: var(--color-brand);
	box-shadow: 0 0 0 3px rgba(0, 80, 163, .12);
}
.mg-input::placeholder { color: var(--color-mid-gray); }

.mg-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 24px; width: 100%;
	font-family: var(--font-sans); font-size: 1.6rem; font-weight: 600;
	border-radius: 6px; border: none; cursor: pointer; text-decoration: none;
	transition: opacity .2s, background .2s;
}
.mg-btn-primary { background: var(--color-brand); color: var(--color-white); }
.mg-btn-primary:hover { opacity: .88; }
.mg-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.mg-alert { padding: 14px 18px; border-radius: 6px; font-size: 1.5rem; margin-bottom: 24px; }
.mg-alert-error { background: #fdf2f2; color: #9b1c1c; border: 1px solid #f5c6c6; }
.mg-alert-success { background: #f0f9f0; color: #1a6e1a; border: 1px solid #b7dfb7; }

.mg-footer {
	border-top: 1px solid var(--color-border); padding: 32px 0; margin-top: auto;
	color: var(--color-secondary-text); font-size: 1.4rem;
}
.mg-footer a { color: var(--color-secondary-text); text-decoration: none; }
.mg-footer a:hover { color: var(--color-primary-text); }
.mg-container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-gap); }
.mg-footer-inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
}

/* ── page-specific ─────────────────────────────────────────────────────── */
.mg-code-hint { font-size: 1.3rem; color: var(--color-secondary-text); margin-top: 6px; }
.mg-divider { border: none; border-top: 1px solid var(--color-border); margin: 32px 0; }
.mg-sent-state { display: none; text-align: center; }
.mg-sent-state svg { margin-bottom: 16px; color: #1a6e1a; }
.mg-sent-state h2 { font-size: 2.4rem; margin: 0 0 12px; }
.mg-sent-state p { color: var(--color-secondary-text); margin: 0; }
.mg-spinner {
	display: inline-block; width: 18px; height: 18px;
	border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
	border-radius: 50%; animation: mg-spin .7s linear infinite;
	margin-right: 8px; vertical-align: middle;
}
@keyframes mg-spin { to { transform: rotate(360deg); } }
#event_code { text-transform: uppercase; }
#event_code::placeholder { text-transform: none; }