/*
 * CR Chart Database: login, register, reset and account pages.
 * Inputs and buttons inherit the theme's own styling; this file only handles layout and messages.
 * Uses the Cosmic Roadmaps theme variables when present, with the same values as fallbacks.
 */
.cr-acct {
	--g: var(--cr-gold, #C4A049);
	--line: var(--cr-gold-line, rgba(196, 160, 73, .24));
	--edge: var(--cr-gold-edge, rgba(196, 160, 73, .65));
	--cream: var(--cr-cream, #f7f2e8);
	--muted: var(--cr-muted, #b9bfce);
	--panel: var(--cr-panel, rgba(255, 255, 255, .03));
	--bad: #f0a3a3;
}

/* Forms sit in a narrow centred column; the account page uses the full reading width. */
.cr-acct--login, .cr-acct--register, .cr-acct--lost-password, .cr-acct--reset-password {
	max-width: 460px;
	margin: 0 auto;
}

.cr-acct h1 { margin-bottom: .5em; }
.cr-acct h2 { margin: 2em 0 .6em; font-size: clamp(1.3rem, 3vw, 1.6rem); }
.cr-lede { color: var(--muted); }

/* ---- forms ---- */
.cr-form { margin: 1.2em 0 0; }
.cr-field { margin: 0 0 1.1em; }
.cr-field label { display: block; }
.cr-field input { display: block; width: 100%; box-sizing: border-box; }
.cr-hint { display: block; margin: .4em 0 0; color: var(--muted); font-size: .85rem; }
p.cr-hint { margin: 0 0 1em; }
.cr-check { margin: 0 0 1.2em; }
.cr-check label { margin: 0; font-weight: 400; }
.cr-form button { width: 100%; }
.cr-links { margin: 1.4em 0 0; color: var(--muted); }

/* Honeypot: invisible to people, present for bots. */
.cr-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- messages ---- */
.cr-notice {
	margin: 0 0 1.4em;
	padding: 12px 16px;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-left-width: 4px;
	border-radius: 10px;
}

.cr-notice--error { border-color: var(--bad); color: var(--bad); }
.cr-notice--preview { border-style: dashed; }
.cr-field-error { display: block; margin-top: .4em; color: var(--bad); font-size: .9rem; }
.cr-field input[aria-invalid="true"] { border-color: var(--bad); }

/* ---- account page ---- */
.cr-cards { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.cr-card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
}

/* The whole card is one link to the chart page. */
.cr-card > a {
	display: grid;
	gap: 4px;
	padding: 16px 18px;
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
}

.cr-card > a:hover, .cr-card > a:focus-visible { background: rgba(196, 160, 73, .08); outline-offset: -2px; }
.cr-card-title { font-size: 1.15rem; font-weight: 700; }
.cr-card-meta { color: var(--muted); font-size: .9rem; }
.cr-card-go { margin-top: 6px; color: var(--g); font-weight: 600; }

.cr-muted { color: var(--muted); }

.cr-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0 0 1.4em; }

.cr-details > div {
	padding: 14px 16px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
}

.cr-details dt { color: var(--g); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cr-details dd { margin: .25em 0 0; overflow-wrap: anywhere; }

.cr-inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cr-inline-form button, .cr-inline-form .button { width: auto; }

/* ---- settings page ---- */
.cr-back { margin: 0 0 1.4em; }
.cr-set { margin: 0 0 2.6em; max-width: 520px; }
.cr-set h2 { margin-top: 0; }
.cr-set--danger { padding-left: 16px; border-left: 3px solid var(--bad); }
.cr-set--danger h2 { color: var(--bad); }
.cr-notice .cr-inline-form { margin-top: .6em; }