/* LoudMemories — register. Page-only rules; the design system and chrome live
   in core/css/lm-base.css, which also carries the login modal the design drew
   on this page — it opens from every migrated page, so it cannot live here.
   Token ladder from the design export (LoudMemoriesClaudeDesign/register.css). */

:root {
	--lm-max: 1200px;

	--h1: 2.125rem;
	--reg-cols: minmax(0, 1fr);
	--reg-gap: 2rem;
	--list-cols: minmax(0, 1fr);
	--lab-cols: 1fr;
}
@media (min-width: 480px) { :root { --h1: 2.625rem; --list-cols: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { :root { --h1: 3.25rem; --lab-cols: 9rem minmax(0, 1fr); } }
@media (min-width: 1024px) { :root { --h1: 4rem; --reg-cols: minmax(0, 1fr) 20rem; --reg-gap: 2.5rem; } }
@media (min-width: 1280px) { :root { --h1: 4.5rem; --reg-cols: minmax(0, 1fr) 22rem; } }

/* --------------------------------------------------------------- shell */

.rg-main { position: relative; }
.rg-tint,
.rg-grain { position: absolute; inset: 0; pointer-events: none; }
.rg-tint {
	background:
		radial-gradient(90% 60% at 20% 0%, rgba(var(--lm-green-dk-rgb), .4), transparent 64%),
		radial-gradient(70% 50% at 95% 8%, rgba(var(--lm-gold-dk-rgb), .28), transparent 66%);
}
.rg-grain {
	opacity: .45;
	background-image: repeating-linear-gradient(45deg, rgba(var(--lm-ink-rgb), .03) 0 1px, transparent 1px 5px);
}

.rg-in {
	position: relative;
	max-width: var(--lm-max);
	margin: 0 auto;
	padding: clamp(2rem, 6vw, 3.5rem) var(--lm-gutter) clamp(2.5rem, 7vw, 4rem);
}

.rg-intro { max-width: 44rem; }
.rg-title {
	margin: 0;
	font-family: var(--lm-sans);
	font-size: var(--h1);
	font-weight: 700;
	line-height: .92;
	letter-spacing: -.01em;
	text-transform: uppercase;
	text-wrap: balance;
}
.rg-title span { color: var(--lm-green-lt); }
.rg-lead {
	margin: 18px 0 0;
	max-width: 36rem;
	font-size: clamp(0.9375rem, 2.4vw, 1.0625rem);
	line-height: 1.6;
	color: var(--lm-muted);
	text-wrap: pretty;
}

.rg-cols {
	display: grid;
	grid-template-columns: var(--reg-cols);
	gap: var(--reg-gap);
	align-items: start;
	margin-top: clamp(1.75rem, 5vw, 2.75rem);
}
.rg-main-col { min-width: 0; }

/* ------------------------------------------------------ what you keep */

/* -------------------------------------------- a review waiting to be claimed

   Printed above .rg-keeps for somebody who arrived from the offer under a
   guest review they have just written. Solid where .rg-keeps below is dashed,
   and filled rather than washed, because it is about something that already
   exists rather than about what a journal could hold.

   The same three tokens as .cc-claim on the concert page - gold border,
   gold-dk ground, on-gold text - so the two ends of one flow look like one
   flow. --lm-muted is redeclared for the same reason it is there. */
.rg-claim {
	--lm-muted: var(--lm-on-gold);
	border: 1px solid var(--lm-gold);
	border-radius: 3px;
	padding: clamp(1rem, 3vw, 1.5rem);
	margin-bottom: clamp(1rem, 3vw, 1.5rem);
	background: var(--lm-gold-dk);
	color: var(--lm-on-gold);
}
.rg-claim-eyebrow {
	margin: 0 0 6px;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lm-on-gold);
}
.rg-claim h2 {
	margin: 0 0 8px;
	font-family: var(--lm-sans);
	font-weight: 600;
	font-size: clamp(1.125rem, 3.5vw, 1.5rem);
	line-height: 1.2;
	color: var(--lm-on-gold);
}
.rg-claim p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--lm-on-gold); }

.rg-keeps {
	border: 1px dashed rgba(var(--lm-gold-rgb), .5);
	border-radius: 3px;
	padding: clamp(1rem, 3vw, 1.5rem);
	background: rgba(var(--lm-panel-rgb), .7);
}
.rg-keeps h2 {
	margin: 0 0 14px;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lm-muted);
}
.rg-keeps ul {
	display: grid;
	grid-template-columns: var(--list-cols);
	gap: 10px clamp(1rem, 3vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--lm-ink);
}
.rg-keeps li { display: flex; gap: 10px; align-items: baseline; }
.rg-keeps li span { flex: 0 0 auto; font-family: var(--lm-mono); font-size: 0.75rem; color: var(--lm-green-lt); }
.rg-keeps p {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px dashed var(--lm-line-strong);
	font-family: var(--lm-mono);
	font-size: 0.75rem;
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--lm-muted);
}
.rg-keeps p a { color: var(--lm-gold); border-bottom: 1px solid rgba(var(--lm-gold-rgb), .5); }
.rg-keeps p a:hover { color: var(--lm-ink); border-bottom-color: var(--lm-ink); }

/* -------------------------------------------------------------- alerts */

.rg-alert {
	margin: clamp(1.25rem, 4vw, 1.75rem) 0 0;
	padding: 11px 13px;
	border-left: 3px solid var(--lm-red);
	/* The -dk tint behind, and --lm-on-red in front, the way .li-flash.is-bad
	   in lm-base.css does it — this is the same panel under another name. A
	   wash made of --lm-red with --lm-red written on it measured 6.92:1 on the
	   dark theme, under the 7:1 the palette holds to. */
	background: rgba(var(--lm-red-dk-rgb), .35);
	font-family: var(--lm-mono);
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--lm-on-red);
}
.rg-submit-block .rg-alert { margin: 0 0 14px; }
.rg-alert[hidden] { display: none; }

/* ------------------------------------------------- the confirmed panel */

.rg-done {
	margin-top: clamp(1.25rem, 4vw, 1.75rem);
	border: 1px solid var(--lm-green);
	border-radius: 3px;
	background: rgba(var(--lm-green-dk-rgb), .32);
	padding: clamp(1.25rem, 4vw, 2rem);
}
.rg-done[hidden] { display: none; }
.rg-done-eyebrow {
	margin: 0 0 10px;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lm-green-lt);
}
.rg-done h2 {
	margin: 0;
	font-family: var(--lm-sans);
	font-weight: 600;
	text-transform: uppercase;
	font-size: clamp(1.375rem, 4.5vw, 1.875rem);
	line-height: 1.05;
	color: var(--lm-ink);
	overflow-wrap: anywhere;
}
.rg-done-body {
	margin: 14px 0 0;
	max-width: 34rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--lm-on-green);
	text-wrap: pretty;
}
.rg-done-email { font-family: var(--lm-mono); font-size: 0.875rem; color: var(--lm-ink); overflow-wrap: anywhere; }
.rg-done-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ---------------------------------------------------------- the form */

.rg-form {
	margin-top: clamp(1.25rem, 4vw, 1.75rem);
	border: 1px solid rgba(var(--lm-ink-rgb), .16);
	border-radius: 3px;
	background: var(--lm-panel);
	/* The rows are transparent, so this is the ground an autofilled field is
	   painted over with — the label cell beside it is --lm-panel-2, but the
	   input's own cell has nothing of its own and shows this. */
	--lm-field-fill: var(--lm-panel);
	overflow: hidden;
}
.rg-form[hidden] { display: none; }
.rg-form-h {
	margin: 0;
	padding: 16px clamp(1rem, 3vw, 1.5rem);
	border-bottom: 1px solid rgba(var(--lm-ink-rgb), .14);
	background: var(--lm-panel-2);
	font-family: var(--lm-sans);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lm-ink);
}

.rg-rows { display: flex; flex-direction: column; }
.rg-row {
	display: grid;
	grid-template-columns: var(--lab-cols);
	align-items: stretch;
	border-bottom: 1px solid var(--lm-line);
}
.rg-row > label {
	display: flex;
	align-items: center;
	padding: 12px clamp(1rem, 3vw, 1.25rem);
	background: var(--lm-panel-2);
	font-family: var(--lm-sans);
	font-size: 0.75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lm-ink);
}
.rg-row > div { padding: 10px clamp(1rem, 3vw, 1.25rem) 12px; min-width: 0; }

.rg-row input[type="text"],
.rg-row input[type="email"],
.rg-row input[type="password"] {
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--lm-line-strong);
	border-radius: 0;
	padding: 9px 0;
	min-height: 2.75rem;
	color: var(--lm-ink);
	font-family: var(--lm-serif);
	font-size: 1rem;
	transition: border-color .16s;
}
.rg-row input::placeholder { color: rgba(var(--lm-muted-rgb), .6); }
.rg-row input:focus { outline: none; border-bottom-color: var(--lm-ink); }
/* The invitation carries the address it was sent to, and that field is not
   yours to change. Styled as settled rather than as an empty box you have not
   filled in yet — a readonly input that looks editable reads as a mistake. */
.rg-row input[readonly] {
	color: var(--lm-muted);
	border-bottom-style: dashed;
	cursor: default;
}
.rg-row input[readonly]:focus { border-bottom-color: var(--lm-line-strong); }
.rg-row.is-good input { border-bottom-color: var(--lm-green); }
.rg-row.is-weak input { border-bottom-color: rgba(var(--lm-gold-rgb), .7); }
.rg-row.is-bad input { border-bottom-color: var(--lm-red); }

.rg-hint {
	margin: 7px 0 0;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--lm-muted);
}
.rg-row.is-good .rg-hint { color: var(--lm-green-lt); }
.rg-row.is-weak .rg-hint { color: var(--lm-on-gold); }
.rg-row.is-bad .rg-hint { color: var(--lm-red); }

.rg-pw-line { display: flex; align-items: center; gap: 10px; }
.rg-pw-line input { flex: 1 1 auto; min-width: 0; }
.rg-peek {
	flex: 0 0 auto;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 11px 12px;
	min-height: 2.75rem;
	border-radius: 2px;
	border: 1px solid rgba(var(--lm-ink-rgb), .24);
	background: transparent;
	color: var(--lm-muted);
	cursor: pointer;
}
.rg-peek:hover { color: var(--lm-ink); border-color: var(--lm-ink); }

.rg-strength { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.rg-strength .rg-hint { flex: 0 0 auto; margin: 0; }
.rg-strength-track {
	flex: 1 1 auto;
	display: block;
	height: 3px;
	border-radius: 2px;
	background: rgba(var(--lm-ink-rgb), .14);
	overflow: hidden;
}
.rg-strength-fill { display: block; height: 100%; width: 0; background: var(--lm-muted); transition: width .2s ease, background .2s ease; }
.rg-row.is-good .rg-strength-fill { background: var(--lm-green); }
.rg-row.is-weak .rg-strength-fill { background: var(--lm-gold); }
.rg-row.is-bad .rg-strength-fill { background: var(--lm-red); }

/* ------------------------------------------------- the agreement row
   The rules themselves are /house-rules now; this is the checkbox that
   links to them. */

.rg-rules-block { padding: clamp(1rem, 3vw, 1.5rem); border-bottom: 1px solid var(--lm-line); }

.rg-agree {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	margin-top: 14px;
	padding: 10px 0;
	min-height: 2.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--lm-ink);
	cursor: pointer;
}
/* The first checkbox used to sit under the rules box and needed the gap; now
   it is the first thing in the row, the row's own padding is enough. */
.rg-agree:first-child { margin-top: 0; }
.rg-agree input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; accent-color: var(--lm-green); cursor: pointer; }
.rg-agree a { color: var(--lm-gold); border-bottom: 1px solid rgba(var(--lm-gold-rgb), .5); }
.rg-agree a:hover { color: var(--lm-ink); border-bottom-color: var(--lm-ink); }
#rg-agree-row.is-bad .rg-agree { color: var(--lm-red); }
#rg-agree-row.is-bad .rg-agree input { outline: 2px solid var(--lm-red); outline-offset: 2px; }

/* --------------------------------------------------------- the button */

.rg-submit-block { padding: clamp(1rem, 3vw, 1.5rem); }
.rg-submit {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--lm-sans);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 16px 20px;
	min-height: 3.25rem;
	border-radius: 2px;
	border: 1px solid var(--lm-green);
	background: var(--lm-green);
	color: var(--lm-on-accent);
	cursor: pointer;
	transition: background .16s, border-color .16s, color .16s;
}
.rg-submit:hover { background: var(--lm-green-hi); border-color: var(--lm-green-hi); }
.rg-submit.is-waiting { background: rgba(var(--lm-green-rgb), .22); border-color: rgba(var(--lm-green-lt-rgb), .55); color: var(--lm-on-green); cursor: progress; }
.rg-fineprint {
	margin: 12px 0 0;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	line-height: 1.6;
	letter-spacing: .06em;
	color: var(--lm-muted);
	text-align: center;
}

/* ------------------------------------------------------------- the side */

.rg-side { min-width: 0; display: flex; flex-direction: column; gap: clamp(1rem, 3vw, 1.25rem); }
@media (min-width: 1024px) { .rg-side { position: sticky; top: 5.5rem; } }

.rg-card {
	border: 1px solid rgba(var(--lm-ink-rgb), .16);
	border-radius: 3px;
	background: var(--lm-panel);
	padding: clamp(1rem, 3vw, 1.375rem);
}
.rg-card.is-quiet { border: 1px dashed rgba(var(--lm-green-lt-rgb), .45); background: rgba(var(--lm-green-dk-rgb), .24); }
.rg-card-eyebrow {
	margin: 0 0 4px;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lm-gold);
}
.rg-card.is-quiet .rg-card-eyebrow { margin-bottom: 10px; color: var(--lm-green-lt); }
.rg-card-h {
	margin: 0 0 14px;
	font-family: var(--lm-sans);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.15;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lm-ink);
}
.rg-card-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lm-sans);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 14px 18px;
	min-height: 2.75rem;
	border-radius: 2px;
	border: 1px solid rgba(var(--lm-ink-rgb), .4);
	background: transparent;
	color: var(--lm-ink);
	cursor: pointer;
	transition: border-color .16s, color .16s;
}
.rg-card-btn:hover { border-color: var(--lm-gold); color: var(--lm-gold); }

.rg-figures { display: flex; flex-direction: column; gap: 9px; font-family: var(--lm-mono); font-size: 0.8125rem; line-height: 1.4; color: var(--lm-on-green); }
.rg-figures b { color: var(--lm-ink); font-weight: 700; }