/*
 * The community's log in, join, forgot-password, new-password and login-link pages.
 * Colors come from tokens printed inline by Login::styles(), from the community's accent.
 * Left: the host's card on a soft panel. Right: one column, a 52px two-line heading,
 * labels above 52px boxes, a 56px button. Phones: the form only, with a small logo row.
 */
:root {
	--bg: #ffffff;
	--surface: #ffffff;
	--text: #16181d;
	--text-2: #5d6370;
	--line: #e7e9ec;
	--soft: #f0f2f5;
	--danger: #b42318;
	--danger-bg: #fdf1ef;
	--ok: #1f7a49;
	--ok-bg: #e3f5ea;
	--field: #d5d9df;
	--grey: #e6e9ee;
	--box: #b8bdc6;
	--panel: color-mix(in srgb, var(--accent) 16%, #fff);
	--shadow: 0 20px 50px rgb(16 24 40 / 16%);
	--ring: var(--accent-text); /* the keyboard ring: the main color's text shade, so a light main color (lime) still shows */
	color-scheme: light;
}
/* Dark only when this browser's member picked it (see Login::scheme): .mb-dark, or .mb-auto on a dark device. */
:root.mb-dark {
	--bg: #111214;
	--surface: #1b1c20;
	--text: #eceef1;
	--text-2: #a2a7b0;
	--line: #2c2e33;
	--or: #8b909b; /* the "or" between buttons, 5:1 on the dark page */
	--soft: #222327;
	--danger: #ff8a80;
	--danger-bg: #3a1d1b;
	--ok: #7fd8a4;
	--ok-bg: #16301f;
	--field: #3a3d44;
	--grey: #2a2c31;
	--box: #5a5e66;
	--panel: color-mix(in srgb, var(--accent) 12%, #16171a);
	--shadow: 0 20px 50px rgb(0 0 0 / 45%);
	color-scheme: dark;
}
/* White words on a bright marker are hard to read: a dimmer one in the dark. */
:root.mb-dark .hl { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--accent) 45%, transparent) 58%); }
@media (prefers-color-scheme: dark) {
	:root.mb-auto {
		--bg: #111214;
		--surface: #1b1c20;
		--text: #eceef1;
		--text-2: #a2a7b0;
		--line: #2c2e33;
		--or: #8b909b; /* the "or" between buttons, 5:1 on the dark page */
		--soft: #222327;
		--danger: #ff8a80;
		--danger-bg: #3a1d1b;
		--ok: #7fd8a4;
		--ok-bg: #16301f;
		--field: #3a3d44;
		--grey: #2a2c31;
		--box: #5a5e66;
		--panel: color-mix(in srgb, var(--accent) 12%, #16171a);
		--shadow: 0 20px 50px rgb(0 0 0 / 45%);
		color-scheme: dark;
	}
	/* White words on a bright marker are hard to read: a dimmer one in the dark. */
	:root.mb-auto .hl { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--accent) 45%, transparent) 58%); }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
	background: var(--bg);
	color: var(--text);
	font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 100vh; }

/* ---------- The host's side ---------- */
.brand-side { position: sticky; top: 0; height: 100vh; min-height: 640px; padding: 24px; }
.host-panel { position: relative; height: 100%; overflow: clip; display: grid; place-items: center; padding: 40px; border-radius: 28px; background: var(--panel); }
.host-panel::before { content: ""; position: absolute; right: -90px; top: -90px; width: 380px; height: 380px; border-radius: 50%; background: var(--accent); filter: blur(80px); opacity: 0.55; }
.live-top { position: absolute; right: 26px; top: 26px; z-index: 3; }
.host { position: relative; width: min(380px, 100%); margin: 0; }
.portrait { display: block; width: 100%; height: min(420px, 52vh); border-radius: 28px; object-fit: cover; object-position: center 25%; box-shadow: 0 30px 70px rgb(16 24 40 / 22%); }
/* No photo yet: the logo, or the community's initials, on its color. */
.portrait.mark { display: grid; place-items: center; height: min(300px, 40vh); overflow: hidden; background: var(--accent); color: var(--accent-ink); font-size: 96px; font-weight: 800; letter-spacing: -2px; }
.portrait.mark img { width: 100%; height: 100%; object-fit: cover; }
.card { position: relative; display: flex; flex-direction: column; gap: 14px; width: calc(100% + 20px); margin: -44px 0 0 -36px; padding: 22px 24px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.qm { fill: var(--accent); }
.quote { margin: 0; font-size: 21px; line-height: 1.35; font-weight: 650; letter-spacing: -0.3px; }
.by { display: flex; align-items: center; gap: 10px; line-height: 1.3; }
.qm ~ .by, .card > .faces { padding-top: 12px; border-top: 1px solid var(--line); }
.by small { color: var(--text-2); font-size: 14px; }
.pill { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 28%, var(--surface)); color: var(--text); font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; }
.faces { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 15px; }
.faces b { color: var(--text); }
.stack { display: flex; padding-left: 10px; }
.stack img { width: 36px; height: 36px; margin-left: -10px; border: 3px solid var(--surface); border-radius: 50%; object-fit: cover; }

/* The next live call */
.live { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: 0 10px 26px rgb(16 24 40 / 10%); font-size: 15px; line-height: 1.35; }
.live > span:last-child > span { color: var(--text-2); }
.cal { flex: none; width: 44px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: center; }
.cal small { display: block; padding: 1px 0; background: #d92d20; color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.cal b { display: block; padding: 1px 0; font-size: 17px; }

/* ---------- The form ---------- */
.form-side { display: flex; align-items: center; justify-content: center; padding: 32px 64px; }
.panel { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 420px; }
.big { margin: 0; font-size: 52px; line-height: 1; font-weight: 750; letter-spacing: -2px; overflow-wrap: anywhere; }
.hl { padding: 0 4px; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--accent) 85%, transparent) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.intro { display: flex; flex-direction: column; gap: 6px; }
.lead { margin: 0; color: var(--text-2); font-size: 18px; line-height: 1.55; }
.small-lead { font-size: 16px; }
.lead strong, .lead b { color: var(--text); }
.small { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.small a, .foot a, .msg a, .field-error a { color: var(--text); font-weight: 700; text-decoration: underline; }
.terms { font-size: 13px; }
form { display: flex; flex-direction: column; gap: 18px; }
.msg { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.msg.error { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.msg.error a { color: inherit; }
.msg.ok { gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--ok-bg); color: var(--ok); }
.msg.ok b { color: inherit; }
.warn-mark { flex: none; margin-top: 1px; }
.ok-mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: var(--bg); }

/* A field: its label above, then a 52px box. */
.field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0; color: var(--text); font-size: 15px; font-weight: 700; }
.label a { color: var(--text); font-size: 14px; }
.label small { color: var(--text-2); font-size: 14px; font-weight: 400; }
.field input, .field select, .box { width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--field); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; outline: none; }
.field input:focus, .field select:focus, .box:focus-within { border-color: var(--ring); box-shadow: 0 0 0 1.5px var(--ring); }
.has-error input, .has-error input:focus { border-color: var(--danger); }
.has-error input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }
.field-error { color: var(--danger); font-size: 14px; font-weight: 600; line-height: 1.4; }
.field-error a { color: inherit; }
.box { display: flex; align-items: center; padding-right: 6px; }
.box input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; box-shadow: none !important; background: none; }
.show { height: 40px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.show:hover { background: var(--soft); color: var(--text); }

/* Keep me logged in */
.check { position: relative; display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 15px; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.tick { flex: none; width: 22px; height: 22px; border: 2px solid var(--box); border-radius: 6px; }
.check input:checked + .tick { position: relative; border-color: var(--text); background: var(--text); }
.check input:checked + .tick::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--bg); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.check input:focus-visible + .tick { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ring); }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: inherit; font-size: 17px; font-weight: 800; text-decoration: none; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn:hover { filter: brightness(0.96); }
.btn:focus-visible, .show:focus-visible, a:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.btn.outline { min-height: 52px; border: 1.5px solid var(--field); background: transparent; color: var(--text); font-size: 16px; box-shadow: none; }
.btn.outline:hover { background: var(--soft); filter: none; }
.btn.grey { background: var(--grey); color: var(--text); box-shadow: none; }
.or { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--or, #646973); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.site-first { display: grid; gap: 14px; margin: 4px 0 18px; } /* Log in opened from the website: Join comes first */
.site-first .small { margin: 0; font-weight: 700; }
.foot { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 15px; text-align: center; }

/* Join: what you get */
.gets { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gets li { display: flex; gap: 12px; align-items: center; font-size: 15px; line-height: 1.35; }
.gets li > span:last-child { color: var(--text-2); }
.gets b { color: var(--text); }
.gi { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); }
.gets.narrow { display: none; }

/* Phones only: the logo row, the host's line on Join, the live call under the form */
.brand-row, .host-row, .live-under { display: none; }
.brand-row { align-items: center; gap: 10px; margin: 0; font-size: 16px; }
.logo { display: grid; place-items: center; flex: none; width: 38px; height: 38px; overflow: hidden; border-radius: 11px; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 900; }
.logo img { width: 100%; height: 100%; object-fit: cover; }
.host-row { align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--panel); font-size: 15px; line-height: 1.4; }
.host-row img, .host-row .logo { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

@media (max-width: 1100px) {
	.form-side { padding: 32px 40px; }
	.card { width: 100%; margin-left: 0; }
}
@media (max-width: 900px) {
	.page { display: block; }
	.brand-side { display: none; }
	.form-side { display: block; padding: 28px 22px 32px; }
	.panel { gap: 16px; margin: 0 auto; }
	.big { font-size: 38px; letter-spacing: -1.3px; }
	.lead { font-size: 16px; }
	.brand-row, .host-row { display: flex; }
	.live-under { display: block; }
	.live-under .live { box-shadow: none; border: 1px solid var(--line); }
	.gets.wide { display: none; }
	.gets.narrow { display: flex; }
	/* A theme that brings its own side keeps it, above the form. */
	.brand-side:has(> :not(.host-panel)) { display: block; height: auto; min-height: 0; position: static; padding: 16px 16px 0; }
}

/* Sign-up */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.birthday .label small { margin-left: 6px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }