/* ===================== Authentication styling =====================
   Built on the calculator's existing CSS variables so the auth pages inherit
   whatever interface colour and theme the user has chosen. */

.authPage {
	min-height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 2.5em 1em 3em 1em;
	box-sizing: border-box;
}

.authCard {
	width: 100%;
	max-width: 400px;
	/* slightly translucent so the code rain reads behind it without competing
	   with the form, which stays fully legible on top */
	background-color: var(--menu-bg-accent);
	background-color: color-mix(in srgb, var(--menu-bg-accent) 93%, transparent);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border: 1px solid var(--border-dark-accent);
	padding: 1.6em 1.6em 1.4em 1.6em;
	box-sizing: border-box;
	flex: 0 0 auto;
}

/* the card sits beside the perks on wide screens, above them on narrow */
.authPageWide {
	gap: 1.6em;
	flex-wrap: wrap;
}

.authPerks {
	width: 100%;
	max-width: 360px;
	align-self: center;
	background-color: color-mix(in srgb, var(--menu-bg-accent) 82%, transparent);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	border: 1px solid var(--border-dark-accent);
	padding: 1.4em 1.5em;
	box-sizing: border-box;
}
.authPerksTitle {
	font-size: 115%;
	font-weight: 600;
	color: var(--font-white-1);
	margin-bottom: 0.9em;
}
.authFree {
	color: hsl(140 60% 60%);
	font-weight: 700;
	letter-spacing: 0.03em;
}
.authPerksList {
	list-style: none;
	margin: 0;
	padding: 0;
}
.authPerksList li {
	font-size: 88%;
	color: var(--font-white-2);
	line-height: 1.5em;
	padding: 0em 0em 0.9em 1.9em;
	position: relative;
	/* keeps a short paragraph from dropping one orphan word onto its own line */
	text-wrap: pretty;
	text-wrap: balance;
	hyphens: auto;
}
.authPerksList li b { color: var(--font-white-1); font-weight: 600; }
.authPerkIcon {
	position: absolute;
	left: 0;
	top: 0.05em;
	font-size: 105%;
	line-height: 1.3em;
}
.authPerksFoot {
	/* was --font-white-4, too faint to read against the rain */
	font-size: 83%;
	color: var(--font-white-2);
	border-top: 1px solid var(--separator-accent2);
	padding-top: 0.85em;
	margin-top: 0.2em;
	line-height: 1.5em;
	text-wrap: pretty;
	text-wrap: balance;
}
.authPerksFoot b { color: hsl(140 60% 65%); font-weight: 700; }

/* Wordmark, not an icon: it is a wide landscape lockup, so it is sized on
   width and given no border-radius or circular crop. */
.authLogo {
	display: block;
	max-width: 280px;
	width: 78%;
	height: auto;
	margin: 0 auto 1.1em auto;
}

/* Back to the calculator, pinned top-left, flashes green on click */
.authBackBtn {
	position: absolute;
	top: 0.9em;
	left: 0.9em;
	z-index: 5;
	font-size: 85%;
	font-weight: 500;
	color: var(--font-white-2);
	background-color: var(--btn-bg-accent);
	border: 1px solid var(--border-accent);
	border-bottom: 1px solid var(--border-accent) !important;
	padding: 0.4em 0.85em;
	text-decoration: none;
}
/* green on the way in as well as on the click, so the button reads as the way
   out of here rather than as another grey control */
.authBackBtn:hover {
	background-color: hsla(140 55% 40% / 0.45);
	border-color: hsl(140 55% 50%);
	color: #fff;
}
.authBackBtn.authBackFlash { animation: authBackFlash 0.7s ease-out; }
@keyframes authBackFlash {
	0%   { background-color: hsla(140 85% 55% / 0.75); color: #fff; border-color: hsl(140 70% 55%); }
	60%  { background-color: hsla(140 85% 55% / 0.3); }
	100% { background-color: var(--btn-bg-accent); }
}
@media (prefers-reduced-motion: reduce) {
	.authBackBtn.authBackFlash { animation: none; background-color: hsla(140 85% 55% / 0.4); }
}
@media (max-width: 560px) {
	.authBackBtn { position: static; display: inline-block; margin: 0.8em 0em 0em 0.8em; }
}

.authTitle {
	font-size: 150%;
	font-weight: 600;
	color: var(--font-white-1);
	text-align: center;
	margin-bottom: 0.25em;
}
.authSubtitle {
	font-size: 88%;
	color: var(--font-white-3);
	text-align: center;
	margin-bottom: 1.4em;
	line-height: 1.4em;
}

.authField { margin-bottom: 0.9em; }

.authLabel {
	display: block;
	font-size: 82%;
	font-weight: 600;
	color: var(--font-white-3);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.35em;
}

.authInput {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.7em;
	font-size: 100%;
	font-family: var(--font-family), "Arial", sans-serif;
	color: var(--font-white-1);
	background-color: var(--input-bg-accent);
	border: 1px solid var(--border-accent);
	outline: none;
}
.authInput:focus { border-color: var(--focus-outline); }
.authInput.authInputBad { border-color: hsl(5 70% 58%); }

.authFieldErr {
	font-size: 80%;
	color: hsl(5 75% 66%);
	padding-top: 0.3em;
}

.authBtn {
	width: 100%;
	box-sizing: border-box;
	padding: 0.65em 1em;
	font-size: 100%;
	font-weight: 600;
	font-family: var(--font-family), "Arial", sans-serif;
	color: var(--font-white-1);
	background-color: var(--btn-bg-accent);
	border: 1px solid var(--border-accent);
	outline: none;
	cursor: pointer;
	margin-top: 0.4em;
}
.authBtn:hover:not(:disabled) { background-color: var(--btn-hover-accent); }
.authBtn:disabled { opacity: 0.6; cursor: default; }

.authBtnDiscord {
	background-color: #5865F2;
	border-color: #5865F2;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}
.authBtnDiscord:hover:not(:disabled) { background-color: #4752c4; }
.authBtnDiscord svg { width: 18px; height: 18px; fill: currentColor; }

.authDivider {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin: 1.2em 0em 1em 0em;
	color: var(--font-white-4);
	font-size: 80%;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.authDivider::before, .authDivider::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--separator-accent2);
}

.authMsg {
	font-size: 87%;
	padding: 0.6em 0.75em;
	margin-bottom: 1em;
	border: 1px solid transparent;
	line-height: 1.4em;
}
.authMsg-error   { color: hsl(5 80% 74%);   background: hsla(5 70% 40% / 0.15);   border-color: hsl(5 50% 40%); }
.authMsg-success { color: hsl(140 60% 72%); background: hsla(140 60% 35% / 0.15); border-color: hsl(140 40% 35%); }
.authMsg-info    { color: var(--font-white-2); background: hsla(0 0% 50% / 0.12); border-color: var(--border-dark-accent); }

.authFoot {
	text-align: center;
	font-size: 87%;
	color: var(--font-white-3);
	margin-top: 1.2em;
}
.authFoot a, .authLink {
	color: var(--focus-outline);
	border-bottom: 1px solid transparent;
}
.authFoot a:hover, .authLink:hover { border-bottom-color: var(--focus-outline); }

.authHint {
	font-size: 79%;
	color: var(--font-white-4);
	padding-top: 0.3em;
	line-height: 1.35em;
}

/* password strength meter */
.authMeter {
	display: flex;
	gap: 3px;
	margin-top: 0.4em;
}
.authMeterSeg {
	flex: 1;
	height: 3px;
	background: var(--border-dark-accent);
}
.authMeterSeg.on1, .authMeterSeg.on2 { background: hsl(5 70% 55%); }
.authMeterSeg.on3 { background: hsl(40 75% 55%); }
.authMeterSeg.on4, .authMeterSeg.on5 { background: hsl(140 55% 50%); }

.authSpinner {
	display: inline-block;
	width: 11px; height: 11px;
	margin-right: 0.5em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: authSpin 0.7s linear infinite;
	vertical-align: -1px;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

/* ---- nav integration ---- */

#authNavArea {
	display: inline-flex;
	align-items: center;
	gap: 0.15em;
	vertical-align: middle;
}
.authNavLink {
	font-size: 88%;
	font-weight: 500;
	color: var(--font-white-2);
	padding: 0.4em 0.7em;
	border-bottom: none !important;
}
.authNavLink:hover { color: var(--font-white-1); background-color: var(--btn-hover-accent); }
.authNavPrimary { color: var(--focus-outline); }

.authNavUser {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25em 0.5em;
	color: var(--font-white-2);
	border-bottom: none !important;
}
.authNavUser:hover { color: var(--font-white-1); background-color: var(--btn-hover-accent); }
.authNavAvatar {
	width: 20px; height: 20px;
	border-radius: 50%;
	object-fit: cover;
	display: inline-block;
}
.authNavAvatarFallback {
	background: var(--btn-active-accent);
	color: var(--font-white-1);
	font-size: 71%;
	font-weight: 600;
	text-align: center;
	line-height: 20px;
}
.authNavName { font-size: 88%; font-weight: 500; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authNavNote { font-size: 80%; color: var(--font-white-4); padding: 0em 0.6em; }

/* The shared close button sits at right:-29px, outside its panel. The
   astrology and profile panels clip their overflow, which hid it, so those two
   keep it inside the top-right corner instead. */
.astroBG > .closeMenuBtn,
.profileBG > .closeMenuBtn {
	right: 2px !important;
	top: 0px !important;
	z-index: 4;
}

/*              Profile tab panel             */
/* ########################################## */

.profileBG {
	max-width: min(700px, calc(100vw - 1.5em));
	box-sizing: border-box;
	padding-right: 1em;
}
.profileTabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em;
	padding: 0em 0.2em 0.7em 0.2em;
	border-bottom: 1px solid var(--separator-accent2);
	margin-bottom: 0.8em;
}
.intBtn3.profileTab {
	width: auto;
	padding: 0.2em 0.8em;
	font-size: 88%;
	margin: 0;
	opacity: 0.6;
}
.intBtn3.profileTab.profileTabOn {
	opacity: 1;
	background-color: var(--btn-active-accent);
}
.profileBody { min-height: 140px; }
.profileLoading, .profileNote {
	font-size: 84%;
	color: var(--font-white-3);
	padding: 0.5em 0.3em;
	line-height: 1.45em;
}
.profileNote.profileWarn { color: hsl(35 78% 66%); }
.profileNote.profileOk { color: hsl(140 55% 65%); }
.profileNote.profileFoot {
	border-top: 1px solid var(--border-dark-accent);
	margin-top: 0.6em;
	font-size: 79%;
}

.profileSearchRow { display: flex; align-items: center; gap: 0.6em; padding-bottom: 0.6em; }
.profileSearchInput {
	flex: 1;
	box-sizing: border-box;
	padding: 0.45em 0.6em;
	font-size: 95%;
	font-family: var(--font-family), "Arial", sans-serif;
	color: var(--font-white-1);
	background-color: var(--input-bg-accent);
	border: 1px solid var(--border-accent);
	outline: none;
}
.profileSearchInput:focus { border-color: var(--focus-outline); }
.profileCount { font-size: 80%; color: var(--font-white-4); min-width: 3em; text-align: right; }

.profileList {
	max-height: 340px;
	overflow-y: auto;
	border: 1px solid var(--border-dark-accent);
}
.profileRow {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.4em 0.6em;
	border-bottom: 1px solid var(--border-dark-accent);
	font-size: 90%;
}
.profileRow:last-child { border-bottom: none; }
.profileRow:nth-child(odd) { background: var(--table-row-odd); }
.profileRowPhrase {
	flex: 1;
	color: var(--font-white-1);
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.profileRowPhrase:hover { text-decoration: underline; }
.profileRowActions { display: flex; align-items: center; gap: 0.35em; flex: 0 0 auto; }
.profileWhen { font-size: 80%; color: var(--font-white-3); }

.profileMiniBtn {
	font-size: 80%;
	font-family: var(--font-family), "Arial", sans-serif;
	color: var(--font-white-2);
	background-color: var(--btn-bg-accent);
	border: 1px solid var(--border-accent);
	padding: 0.15em 0.55em;
	cursor: pointer;
	outline: none;
}
.profileMiniBtn:hover:not(:disabled) { background-color: var(--btn-hover-accent); color: var(--font-white-1); }
.profileMiniBtn:disabled { opacity: 0.5; cursor: default; }
.profileMiniBtn.profileMiniDanger { color: hsl(5 70% 68%); }
.profileMiniBtn.profileMiniDanger:hover { background-color: hsla(5 60% 45% / 0.3); }
/* the reset sits apart from the naming row below it, so the two are not read
   as one control */
/* Sized to sit on one line at the panel's width. Where it cannot - a phone -
   balance splits it evenly rather than dropping one word onto the second
   line, which is what looked wrong in the first place. */
.profileNoteOneLine {
	text-wrap: pretty;
	text-wrap: balance;
}

.profileDefaultRow {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex-wrap: wrap;
	padding: 0.5em 0 0.9em 0;
	margin-bottom: 0.6em;
	border-bottom: 1px solid var(--separator-accent2);
}
.profileMiniBtn.profileDefaultBtn { padding: 0.25em 0.7em; }
.profilePresetSaveRow { padding-top: 0.2em; }

/* armed: one more click carries it out. Replaces window.confirm, which the
   browser suppresses, so the button has to say so itself. */
.profileMiniBtn.profileArmed {
	background-color: hsl(5 60% 42%);
	border-color: hsl(5 65% 58%);
	color: #fff;
	font-weight: 600;
}

.profileBadge {
	font-size: 78%;
	padding: 0.12em 0.5em;
	border: 1px solid var(--border-accent);
	color: var(--font-white-3);
}
.profileBadge.profileBadgeOk { color: hsl(140 55% 65%); border-color: hsl(140 35% 40%); }

/* The avatar is the control: clicking the circle reveals the options */
.profileAvatarPick {
	position: relative;
	display: inline-block;
	cursor: pointer;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	padding: 0;
	border: none;
	background: none;
	line-height: 0;
}
.profileAvatarOpts { padding-top: 0.2em; }

/* Display name on the welcome page: the one thing worth doing here, so it is
   picked out in green rather than looking like every other field. */
.authNameField {
	border: 1px solid hsl(140 40% 38%);
	background: hsla(140 55% 40% / 0.10);
	padding: 0.8em 0.9em;
	margin-bottom: 0.9em;
}
.authNameField .authLabel { color: hsl(140 60% 70%); }
.authNameField .authInput {
	border-color: hsl(140 35% 42%);
	color: hsl(140 45% 88%);
}
.authNameField .authInput:focus {
	border-color: hsl(140 60% 58%);
	box-shadow: 0 0 0 2px hsla(140 60% 45% / 0.25);
}
.authBtn.authBtnPrimary {
	background-color: hsl(140 45% 32%);
	border-color: hsl(140 40% 45%);
	color: hsl(140 30% 95%);
}
.authBtn.authBtnPrimary:hover:not(:disabled) { background-color: hsl(140 48% 38%); }
.profileAvatarOverlay {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	text-align: center;
	font-size: 72%;
	padding: 0.2em 0;
	color: #fff;
	background: hsla(0 0% 0% / 0.55);
	opacity: 0;
	transition: opacity 0.12s;
}
.profileAvatarPick:hover .profileAvatarOverlay,
.profileAvatarPick:focus-within .profileAvatarOverlay { opacity: 1; }
.profileNameRow { padding-top: 0.9em; }

/* Closing the account. Set apart from the rest of the tab so it cannot be
   mistaken for one of the ordinary settings above it. */
.profileDanger {
	margin-top: 1.2em;
	padding: 0.7em 0.8em;
	border: 1px solid hsl(5 45% 40%);
	background: hsla(5 60% 40% / 0.10);
}
.profileDangerTitle {
	font-weight: 600;
	color: hsl(5 75% 74%);
	padding-bottom: 0.3em;
}
.profileDangerRow {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding-top: 0.5em;
	flex-wrap: wrap;
}
.profileDangerRow .profileSearchInput { flex: 1 1 12em; min-width: 0; }
.profileBadge.profileBadgeBad { color: hsl(5 75% 70%); border-color: hsl(5 50% 45%); }

/* Which cypher a phrase is being published under */
.profileCiphSelect {
	font-family: var(--font-family), "Arial", sans-serif;
	font-size: 78%;
	color: var(--font-white-2);
	background-color: var(--input-bg-accent);
	border: 1px solid var(--border-accent);
	padding: 0.1em 0.2em;
	max-width: 9em;
	outline: none;
}

/* Searchable cipher picker. The menu is parented to <body> and positioned in
   fixed coordinates, because its row lives in a 340px scroll box that would
   otherwise clip it. profileCiphPlace() sets left/top/width/max-height. */
.profileCiphPick { position: relative; display: inline-block; }
.profileCiphInput { width: 9em; }
.profileCiphInput::placeholder { color: var(--font-white-4); }
.profileCiphMenu {
	position: fixed;
	z-index: 40;
	overflow-y: auto;
	background-color: var(--menu-bg-accent, var(--input-bg-accent));
	border: 1px solid var(--border-accent);
	box-shadow: 0 6px 18px hsla(0 0% 0% / 0.45);
	font-size: 78%;
}
.profileCiphGroup {
	padding: 0.25em 0.5em 0.1em;
	color: var(--font-white-4);
	font-size: 88%;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	position: sticky;
	top: 0;
	background-color: var(--menu-bg-accent, var(--input-bg-accent));
}
.profileCiphOpt {
	padding: 0.22em 0.6em;
	color: var(--font-white-2);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.profileCiphOpt b { color: var(--font-white-1); font-weight: 700; }
.profileCiphOpt.profileCiphOn { background-color: var(--btn-hover-accent); color: var(--font-white-1); }
.profileCiphNone { padding: 0.4em 0.6em; color: var(--font-white-4); }
.profileChipTerm { display: block; }
/* The cipher and its value, in that cipher's own colour. Bold because this is
   the reason the phrase was published, not a footnote to it - the grey it used
   to be read as disabled text. The inline colour comes from profileCipherColor. */
.profileChipCiph {
	display: block;
	font-size: 78%;
	font-weight: 700;
	color: var(--font-white-2);
	padding-top: 0.1em;
}
.profileChipVal {
	font-family: var(--font-family-mono), monospace;
	font-weight: 700;
	color: inherit;
}

/* A submission refused by the publishing rules. The row turns red and keeps
   the reason underneath, so it survives the re-render instead of disappearing
   with the notification. */
.profileRow.profileRowRefused {
	flex-wrap: wrap;
	background: hsla(5 60% 40% / 0.16) !important;
	border-left: 2px solid hsl(5 65% 55%);
}
.profileRow.profileRowRefused .profileRowPhrase { color: hsl(5 75% 78%); }
.profileRowWhy {
	flex: 1 0 100%;
	font-size: 84%;
	color: hsl(5 70% 74%);
	padding-top: 0.25em;
}

.profileLbRow { cursor: pointer; }
.profileLbRow:hover { background: var(--btn-hover-accent); }
/* Which name is expanded, so a second click on it reads as "close this" rather
   than doing nothing visible. */
.profileLbRow.profileLbOpen {
	background: var(--btn-hover-accent);
	border-left: 2px solid var(--font-white-3);
}
.profileLbRank {
	font-family: var(--font-family-mono), monospace;
	font-size: 85%;
	color: var(--font-white-4);
	width: 1.6em;
}
.profileLbAvatar {
	width: 22px; height: 22px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.profileLbFallback {
	background: var(--btn-active-accent);
	color: var(--font-white-1);
	font-size: 72%;
	font-weight: 600;
	text-align: center;
	line-height: 22px;
}

.profileContribBox {
	margin-top: 0.8em;
	border: 1px solid var(--border-dark-accent);
	padding: 0.6em 0.7em;
	background: var(--breakdown-bg-accent);
}
.profileContribTitle {
	font-size: 86%;
	font-weight: 600;
	color: var(--font-white-2);
	padding-bottom: 0.5em;
}
.profileChips { display: flex; flex-wrap: wrap; gap: 0.35em; }
.profileChip {
	font-size: 84%;
	padding: 0.2em 0.6em;
	background: var(--btn-bg-accent);
	border: 1px solid var(--border-dark-accent);
	color: var(--font-white-2);
	cursor: pointer;
}
.profileChip:hover { background: var(--btn-hover-accent); color: var(--font-white-1); }

.profileAccountHead { display: flex; align-items: center; gap: 0.8em; padding: 0.2em 0.3em 1em 0.3em; }
.profileBigAvatar {
	width: 46px; height: 46px;
	border-radius: 50%;
	object-fit: cover;
	line-height: 46px;
	font-size: 140%;
}
.profileAccountName { font-size: 115%; font-weight: 600; color: var(--font-white-1); }
.profileAccountSub { font-size: 84%; color: var(--font-white-3); }
.profileAvatarRow { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; padding: 0.2em 0.3em; }
.profileFileInput { font-size: 82%; color: var(--font-white-3); max-width: 100%; }

.profileSignedOut { padding: 1.4em 1em 1.6em 1em; text-align: center; max-width: 30em; }
.profileSignedOutTitle { font-size: 120%; font-weight: 600; color: var(--font-white-1); margin-bottom: 0.5em; }
.profileSignedOutText { font-size: 88%; color: var(--font-white-3); line-height: 1.5em; margin-bottom: 1.1em; }
.profileSignedOutBtns { display: flex; gap: 0.5em; justify-content: center; flex-wrap: wrap; }
.intBtn3.profileCta {
	width: auto;
	padding: 0.35em 1em;
	text-decoration: none;
	border-bottom: none !important;
	display: inline-block;
}
.intBtn3.profileCta.profileCtaPrimary { background-color: var(--btn-active-accent); color: var(--font-white-1); }

/* history sync indicator, sits just before the account links */
.histSyncStatus {
	font-size: 78%;
	color: var(--font-white-4);
	padding: 0em 0.5em;
	vertical-align: middle;
	white-space: nowrap;
}
.histSyncStatus.histSync-busy { color: var(--font-white-3); }
.histSyncStatus.histSync-ok   { color: hsl(140 45% 60%); }
.histSyncStatus.histSync-warn { color: hsl(35 75% 62%); }

/* ---- profile page ---- */

.authProfileRow {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.55em 0em;
	border-bottom: 1px solid var(--border-dark-accent);
	font-size: 90%;
}
.authProfileRow:last-child { border-bottom: none; }
.authProfileKey { color: var(--font-white-3); }
.authProfileVal { color: var(--font-white-1); text-align: right; word-break: break-word; }
.authProfileHead {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin-bottom: 1.2em;
}
.authProfileAvatar {
	width: 52px; height: 52px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--btn-active-accent);
	line-height: 52px;
	text-align: center;
	font-size: 150%;
	font-weight: 600;
	color: var(--font-white-1);
}
.authBadge {
	display: inline-block;
	font-size: 76%;
	padding: 0.15em 0.5em;
	border: 1px solid var(--border-accent);
	color: var(--font-white-3);
	margin-left: 0.4em;
}
.authBadgeOk { color: hsl(140 55% 65%); border-color: hsl(140 35% 40%); }

@media (max-width: 560px) {
	.authPage { padding: 1.2em 0.7em 2em 0.7em; }
	.authCard { padding: 1.2em 1.1em; }
}

/* ---- birth chart tab ---- */
.pcZodiacRow { display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap; padding-bottom: 0.6em; }
.intBtn3.pcZodBtn { width: auto; margin: 0; padding: 0.25em 0.8em; }
.intBtn3.pcZodBtn.pcZodOn { background-color: var(--btn-active-accent); color: var(--font-white-1); font-weight: 600; }
/* One toolbar: the zodiac switch on the left, the print buttons pushed to the
   right with margin-left:auto so they stay right-aligned however the row wraps. */
.pcPrintGroup { display: flex; align-items: center; gap: 0.4em; margin-left: auto; flex-wrap: wrap; }
.pcPrintLab { font-size: 80%; color: var(--font-white-3); font-weight: 600; }
.intBtn3.pcPrintBtn { border-color: var(--font-white-4); }
/* the sentence about the two zodiacs, moved off the toolbar now five controls
   share it */
.pcZodiacNote { padding-bottom: 0.6em; }
@media (max-width: 620px) { /* stacked rather than squeezed */
	.pcPrintGroup { margin-left: 0; padding-top: 0.3em; }
}

.pcFields { padding-bottom: 0.6em; }
/* Time and Place as separate blocks. They used to be four rows in one stack at
   equal spacing, so the tickbox that belonged to Time sat just as close to
   Place as to Time and the two questions read as one. */
.pcBlock { padding-top: 0.45em; margin-top: 0.45em; border-top: 1px solid var(--separator-accent2); }
.pcRowSub { padding-top: 0; } /* a continuation of the row above, not a new one */
.pcRow { display: flex; align-items: center; gap: 0.4em; padding: 0.18em 0; flex-wrap: wrap; }
.pcLab { font-size: 82%; color: var(--font-white-1); font-weight: 600; width: 5em; flex: 0 0 auto; }
.pcIn {
	font-family: var(--font-family), "Arial", sans-serif;
	font-size: 88%;
	color: var(--font-white-1);
	background-color: var(--input-bg-accent);
	border: 1px solid var(--border-accent);
	padding: 0.15em 0.3em;
	width: 4.5em;
	outline: none;
}
.pcIn.pcInY { width: 5em; }
.pcIn.pcInPlace { flex: 1 1 10em; width: auto; min-width: 0; }
.pcChk { font-size: 80%; color: var(--font-white-3); display: inline-flex; align-items: center; gap: 0.4em; cursor: pointer; }
/* These were real checkboxes all along, but styles.css hides every native one
   ("input[type=checkbox] { visibility: hidden }") on the assumption that a
   .custChkBox span follows it. There is none here, so the box was invisible and
   the label read as plain text with no way to tell it was on or off. Rather
   than bolt on the span, the input itself is drawn: same look, one element,
   and the label still toggles it. */
.pcChk input[type=checkbox] {
	visibility: visible;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: 0 0 auto;
	margin: 0;
	width: 15px;
	height: 15px;
	background-color: var(--btn-bg-accent);
	border: 1px solid var(--border-accent);
	cursor: pointer;
}
.pcChk:hover input[type=checkbox] { background-color: var(--btn-hover-accent); }
.pcChk input[type=checkbox]:active { background-color: var(--btn-active-accent); }
.pcChk input[type=checkbox]:checked::after { /* the tick */
	content: "";
	position: absolute;
	left: 4px;
	top: 0px;
	width: 3px;
	height: 8px;
	border: solid var(--font-white-1);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.pcChk input[type=checkbox]:focus-visible { outline: 1px solid var(--font-white-3); outline-offset: 1px; }
.pcUnknown { font-style: italic; }
.pcGeo { padding-bottom: 0.4em; }

.pcCanvasWrap { display: flex; justify-content: center; padding: 0.4em 0 0.6em 0; }
/* The element is square by rule, not by measurement. Setting both dimensions
   in JS meant a later reflow could clamp the width through max-width while the
   inline height stood, and the chart was drawn into a tall rectangle. */
#pcCanvas {
	display: block;
	width: 100%;
	max-width: 440px;
	height: auto;
	aspect-ratio: 1 / 1;
}

.pcSectionTitle {
	font-weight: 600; color: var(--font-white-1);
	border-bottom: 1px solid var(--separator-accent2);
	padding-bottom: 0.25em; margin: 0.6em 0 0.4em 0;
}
/* Transits are a separate reading from the birth chart above them, and the two
   were running together. A rule and real space make the break obvious. */
#pcTransits {
	margin-top: 1.1em;
	padding-top: 0.9em;
	border-top: 2px solid var(--border-accent);
}
#pcTransits .pcSectionTitle { margin-top: 0; }
.pcAngles {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 1px solid var(--separator-accent2);
}
/* chart on the left, the reading beside it; stacks on a narrow panel */
.pcSplit { display: flex; gap: 0.9em; align-items: flex-start; flex-wrap: wrap; }
/* The reading is as wide as its longest line and no wider; the wheel expands
   into whatever is left.
   flex-basis is 0, not the content: with a content basis the wrapper is sized
   by the canvas inside it and the canvas is sized from the wrapper, so each
   waits on the other and the first paint settles on the wrong answer. */
.pcSplit .pcCanvasWrap { flex: 1 1 0; padding: 0; min-width: 180px; justify-content: center; }
/* Sized to its own lines, but capped: the notes underneath are full sentences
   and were stretching the column to 404px, leaving the chart 250px and a
   square drawn into a tall rectangle. */
.pcReading { flex: 0 1 auto; min-width: 0; max-width: 44%; }
/* The notes are sentences; the rows above them are short. Left to itself the
   column takes the width of the longest sentence, which is what was squeezing
   the chart. They wrap to the width the rows need instead. */
.pcReading .profileNote { white-space: normal; max-width: 20em; }
.pcAyan { font-style: italic; }

/* the reading only needs to be as wide as its longest line, so it is sized to
   its content rather than stretching to fill whatever is left */
.pcHouses { display: flex; flex-direction: column; }
.pcHouseBlock {
	border-left: 2px solid var(--border-accent);
	border-bottom: 1px solid var(--separator-accent2);
	padding: 0.3em 0.4em 0.35em 0.5em;
}
.pcHouseBlock:last-child { border-bottom: none; }
.pcHouseHead {
	font-size: 80%; font-weight: 700; letter-spacing: 0.03em;
	color: var(--font-white-1); cursor: help;
}
.pcCell { display: flex; align-items: baseline; gap: 0.35em; font-size: 86%; cursor: help; white-space: nowrap; }
.pcSign { color: var(--font-white-2); cursor: help; }
.pcSign:hover { color: var(--font-white-1); }
.pcAngles { display: flex; gap: 0.9em; font-size: 84%; font-weight: 600; }
.pcAngles span { cursor: help; }

/* one shared hover explanation, following the pointer */
.pcTipBox {
	position: fixed;
	z-index: 4000;
	max-width: 22em;
	font-size: 84%;
	line-height: 1.4em;
	color: var(--font-white-1);
	background-color: var(--menu-bg-accent);
	border: 1px solid var(--border-accent);
	padding: 0.45em 0.6em;
	pointer-events: none;
	box-shadow: 0 2px 10px hsla(0 0% 0% / 0.4);
}

/* number box with its label underneath */
.pcFieldWrap { display: inline-flex; flex-direction: column; align-items: center; }
/* these name the boxes above them, so they have to be read, not sensed */
.pcFieldLab { font-size: 76%; color: var(--font-white-1); padding-top: 0.15em; }
.pcChkBox { padding-left: 0.4em; }
.pcSaveRow { padding-bottom: 0.5em; }
.profileMiniBtn.pcSaveBtn { background-color: hsl(140 40% 30%); border-color: hsl(140 35% 42%); color: hsl(140 25% 92%); }
.profileMiniBtn.pcSaveBtn:hover:not(:disabled) { background-color: hsl(140 44% 36%); }
.pcGlyph { font-size: 115%; }
.pcBody { color: var(--font-white-2); }
.pcPos { color: var(--font-white-2); font-family: var(--font-family-mono), monospace; font-size: 92%; }
.pcRetro { color: hsl(15 70% 62%); font-size: 88%; }
.pcHouse { color: var(--font-white-2); font-size: 84%; }

.pcTransitList { display: flex; flex-direction: column; gap: 0.12em; }
.pcTransit { display: flex; align-items: baseline; gap: 0.35em; font-size: 86%; flex-wrap: wrap; cursor: help; }
.pcAspect { font-weight: 600; }
.pcOrb { color: var(--font-white-2); font-family: var(--font-family-mono), monospace; font-size: 88%; margin-left: auto; }

/* ===================== Friends =====================
   Reuses .profileRow, .profileList and .profileMiniBtn so a friend, a saved
   phrase and a leaderboard entry are visibly the same kind of thing. Only
   what is genuinely new to this tab is defined here. */

.frTabs { display: flex; gap: 0.3em; flex-wrap: wrap; padding-bottom: 0.6em; }
.intBtn3.frTab { width: auto; margin: 0; padding: 0.25em 0.8em; position: relative; }
.intBtn3.frTab.frTabOn { background-color: var(--btn-active-accent); color: var(--font-white-1); font-weight: 600; }

/* the count of requests waiting, on the section button and inline in headings */
.frBadge {
	display: inline-block;
	margin-left: 0.4em;
	min-width: 1.35em;
	padding: 0 0.3em;
	border-radius: 999px;
	background-color: hsl(5 65% 48%);
	color: #fff;
	font-size: 78%;
	font-weight: 700;
	line-height: 1.45em;
	text-align: center;
}
.frBadgeInline { vertical-align: middle; }
/* the Friends tab itself, when something is waiting */
.profileTab.profileTabAlert { border-color: hsl(5 65% 55%); color: hsl(5 80% 78%); }

.frToolbar { display: flex; align-items: center; gap: 0.3em; flex-wrap: wrap; padding-bottom: 0.6em; }
.frToolLab { font-size: 80%; color: var(--font-white-3); font-weight: 600; padding-right: 0.2em; }
.intBtn3.frChip { width: auto; margin: 0; padding: 0.18em 0.7em; font-size: 82%; }
.intBtn3.frChip.frChipOn { background-color: var(--btn-active-accent); color: var(--font-white-1); font-weight: 600; }

.frSectionTitle {
	font-size: 85%;
	font-weight: 600;
	color: var(--font-white-1);
	padding: 0.7em 0 0.4em 0;
}

.frRow { align-items: center; gap: 0.5em; }
.frAvatar {
	width: 26px; height: 26px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	background-color: var(--btn-bg-accent);
}
.frAvatarFallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 80%;
	font-weight: 700;
	color: var(--font-white-2);
}
.frAvatarBig { width: 56px; height: 56px; font-size: 150%; }

.frWho { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.frWho:hover .frName { color: var(--font-white-1); text-decoration: underline; }
.frName { display: block; color: var(--font-white-2); font-weight: 600; }
.frSub { display: block; font-size: 80%; color: var(--font-white-4); }

/* Presence is a timestamp, not a flag, so this is "seen in the last five
   minutes" rather than a state a closed browser could leave stuck on. */
.frDot {
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	margin-left: 0.45em;
	vertical-align: middle;
	background-color: var(--font-white-4);
}
.frDot.frDotOn { background-color: hsl(140 60% 50%); box-shadow: 0 0 5px hsl(140 60% 45%); }

.frActions { display: flex; align-items: center; gap: 0.3em; flex: 0 0 auto; }
.profileMiniBtn.frAdd { background-color: hsl(140 40% 30%); border-color: hsl(140 35% 42%); color: hsl(140 25% 92%); }
.profileMiniBtn.frAdd:hover:not(:disabled) { background-color: hsl(140 44% 36%); }
.profileMiniBtn.frAccept { background-color: hsl(140 40% 30%); border-color: hsl(140 35% 42%); color: hsl(140 25% 92%); }
.profileMiniBtn.frAccept:hover:not(:disabled) { background-color: hsl(140 44% 36%); }

.frBack { padding-bottom: 0.5em; }
.frProfile { padding-bottom: 0.4em; }
.frProfileHead { display: flex; align-items: center; gap: 0.8em; padding-bottom: 0.8em; }
.frProfileWho { flex: 1 1 auto; min-width: 0; }
.frProfileName { font-size: 118%; font-weight: 600; color: var(--font-white-1); }
.frProfileActions { flex: 0 0 auto; display: flex; gap: 0.3em; }

.frStats { display: flex; gap: 0.5em; flex-wrap: wrap; }
.frStat {
	flex: 1 1 5.5em;
	background-color: var(--input-bg-accent);
	border: 1px solid var(--border-dark-accent);
	padding: 0.5em 0.4em;
	text-align: center;
}
.frStatVal { font-family: var(--font-family-mono), monospace; font-size: 125%; font-weight: 700; color: var(--font-white-1); }
/* --font-white-4 is the shade for things you are meant to skip; a stat's label
   is the half that says what the number means */
.frStatLab { font-size: 74%; color: var(--font-white-3); padding-top: 0.15em; }

.frBadgeRow { display: flex; gap: 0.35em; flex-wrap: wrap; }
.frAward {
	font-size: 80%;
	color: var(--font-white-2);
	background-color: var(--btn-bg-accent);
	border: 1px solid var(--border-accent);
	padding: 0.2em 0.55em;
	cursor: help;
}

.frToggleRow { padding: 0.25em 0; }
.frToggleHint { font-size: 78%; color: var(--font-white-4); padding-left: 1.9em; }

/* ---- chat ---- */

.profileMiniBtn.frMsg { background-color: hsl(210 40% 32%); border-color: hsl(210 35% 45%); color: hsl(210 25% 92%); }
.profileMiniBtn.frMsg:hover:not(:disabled) { background-color: hsl(210 44% 38%); }

/* one line of preview, cut rather than wrapped: a thread list is a list of
   people, not a list of messages */
.frPreview {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.frChatHead {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid var(--separator-accent2);
}
.frChatWho { flex: 1 1 auto; font-weight: 600; color: var(--font-white-1); }
.frChatHeadActions { display: flex; gap: 0.3em; flex: 0 0 auto; }

.frChatLog {
	height: 260px;
	overflow-y: auto;
	padding: 0.6em 0.2em;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.frMsgRow { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.frMsgRow.frMsgMine { align-items: flex-end; }

.frBubble {
	max-width: 78%;
	padding: 0.4em 0.65em;
	background-color: var(--btn-bg-accent);
	border: 1px solid var(--border-dark-accent);
	color: var(--font-white-2);
	font-size: 90%;
	line-height: 1.4em;
	/* a long unbroken string is the one way text can still break a layout */
	overflow-wrap: anywhere;
	white-space: normal;
}
.frMsgMine .frBubble {
	background-color: hsl(210 38% 28%);
	border-color: hsl(210 30% 38%);
	color: hsl(210 20% 94%);
}
.frMsgWhen { font-size: 72%; color: var(--font-white-4); padding: 0.1em 0.2em; }

.frChatCompose { display: flex; gap: 0.4em; align-items: flex-end; padding-top: 0.5em; }
.frChatBox {
	flex: 1 1 auto;
	resize: vertical;
	min-height: 2.4em;
	max-height: 8em;
	box-sizing: border-box;
	padding: 0.4em 0.5em;
	font-family: var(--font-family), "Arial", sans-serif;
	font-size: 90%;
	color: var(--font-white-1);
	background-color: var(--input-bg-accent);
	border: 1px solid var(--border-accent);
	outline: none;
}
.frChatBox:focus { border-color: var(--focus-outline); }
.profileMiniBtn.frChatSend { flex: 0 0 auto; align-self: stretch; padding: 0 1em; }

.frChatWarn { font-size: 80%; color: var(--font-white-4); min-height: 1.2em; padding-top: 0.25em; }
.frChatWarn.frChatWarnBad { color: hsl(5 75% 72%); }