/*
 * #331 - Styles for the public profile editor.
 *
 * Self-contained on purpose: styles.css is a file several tickets edit at once,
 * and a stale branch rewriting a block there has silently deleted other
 * people's work before. Nothing here leaks out of the profile page.
 *
 * The controls follow the rest of the app - #f0f0f0 panels, 1px #ccc borders,
 * 8px radii, bold grey buttons. The preview is the exception: it is dark
 * because the public page is, and the point of a preview is to look like the
 * thing it previews.
 */

/* Row layout.
   styles.css gives .title flex-basis:200px and product.css 20%, but in both
   cases the column may still shrink - so a row whose content has a wide
   minimum (a long help line, the avatar) squeezed its label narrower than its
   neighbours and every field started at a different x. Pinning the label
   column and letting the content column shrink instead lines every row up. */
.profile-page .field {
	align-items: flex-start;
}

.profile-page .field > .title {
	flex: 0 0 190px;
	max-width: 190px;
	padding-top: 5px; /* sit the label on the first line of the control */
}

.profile-page .field > .content {
	min-width: 0;
}

.profile-intro {
	margin: 0 0 10px 0;
	line-height: 1.5;
}

.profile-help {
	color: #666;
	font-size: 12px;
	line-height: 1.45;
	display: block;
}

/* "Not on your plan": an explanation, not an error - the user has done nothing
   wrong, so it reads like the help text beside it with a warmer edge. */
.profile-locked {
	display: block;
	color: #8a6d3b;
	background-color: #fcf8e3;
	border: 1px solid #faebcc;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 12px;
	line-height: 1.45;
	width: fit-content;
	max-width: 420px;
}

.profile-count {
	color: #999;
	white-space: nowrap;
	margin-left: 4px;
}

.profile-error {
	color: #b22222;
	font-size: 12px;
	display: block;
	min-height: 1.1em;
}

/* .content > * is forced to 30px tall by styles.css, so anything with more than
   one line lives inside a .spacer. These are the pieces that go in one. */
.profile-publish-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.profile-publish-state {
	font-weight: bold;
}

.profile-state-on {
	color: #2e7d32;
}

.profile-state-off {
	color: #777;
}

.profile-url-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.profile-url-row a {
	font-family: monospace;
	word-break: break-all;
}

.profile-url-row button {
	width: fit-content;
}

.profile-view-link {
	width: fit-content;
	font-size: max(12px, 0.9em); /* #562: 12px on phones, where the text around is 12px */
}

/* Switch. A checkbox underneath, so it keeps keyboard focus and the label
   click target for free. */
.profile-switch {
	position: relative;
	display: inline-block;
	width: 46px;
	height: 24px;
	flex: 0 0 auto;
}

.profile-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.profile-switch-slider {
	position: absolute;
	inset: 0;
	cursor: pointer;
	background-color: #ccc;
	border: 1px solid #bbb;
	border-radius: 24px;
	transition: background-color 0.15s ease;
}

.profile-switch-slider::before {
	content: "";
	position: absolute;
	height: 18px;
	width: 18px;
	left: 2px;
	top: 2px;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	transition: transform 0.15s ease;
}

.profile-switch input:checked + .profile-switch-slider {
	background-color: #4caf50;
	border-color: #43a047;
}

.profile-switch input:checked + .profile-switch-slider::before {
	transform: translateX(22px);
}

.profile-switch input:focus-visible + .profile-switch-slider {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

/* Not allowed by the plan. The stored setting stays on - so the section returns
   by itself if they subscribe - but the switch has to read as off, because off
   is what the page actually does. Both selectors are written out so this wins
   over the :checked rules above whatever order the file ends up in. */
.profile-switch input:disabled + .profile-switch-slider,
.profile-switch input:checked:disabled + .profile-switch-slider {
	background-color: #e0e0e0;
	border-color: #d5d5d5;
	cursor: not-allowed;
}

.profile-switch input:disabled + .profile-switch-slider::before,
.profile-switch input:checked:disabled + .profile-switch-slider::before {
	transform: none;
	box-shadow: none;
}

/* #526: the "Profile online" switch is also turned off while a save is on its way (profile.js setSaveOnItsWay), and
   must still show then whether the page is online: the rules above would draw it as off. Only then: the demo
   account's switch, turned off for good, keeps its look. */
.profile-switch #publishToggle[data-save-locked]:checked:disabled + .profile-switch-slider {
	background-color: #4caf50;
	border-color: #43a047;
	opacity: 0.6;
}

.profile-switch #publishToggle[data-save-locked]:checked:disabled + .profile-switch-slider::before {
	transform: translateX(22px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Completion meter */
.profile-meter {
	width: 100%;
	max-width: 320px;
	height: 10px;
	background-color: #ddd;
	border: 1px solid #ccc;
	border-radius: 6px;
	overflow: hidden;
}

.profile-meter-fill {
	height: 100%;
	width: 0;
	background-color: #4caf50;
	transition: width 0.2s ease;
}

/* Text inputs inside the profile fields. The app leaves these to the browser,
   so this only sets the width they should take in a .spacer column - one width
   for all of them, so their right edges line up as well as their left ones. */
.profile-page input[type="text"],
.profile-page input[type="url"],
.profile-page textarea {
	max-width: 420px;
	width: 100%;
	box-sizing: border-box;
}

.profile-page #bio {
	font-family: inherit;
	font-size: inherit;
	resize: vertical;
}

/* Links */
.profile-link-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.profile-link-row label {
	font-weight: bold;
	font-size: max(12px, 0.9em);
}

/* Avatar */
.profile-avatar-row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.profile-avatar-preview {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #e8e8e8;
}

.profile-avatar-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.profile-avatar-initial {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.4em;
	font-weight: bold;
	color: #888;
}

.profile-avatar-search {
	position: relative;
	flex: 1 1 260px;
	min-width: 220px;
}

.profile-avatar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	flex-wrap: wrap;
}

.profile-avatar-actions button {
	width: fit-content;
}

.profile-autocomplete {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	max-width: 420px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	max-height: 240px;
	overflow-y: auto;
}

.profile-autocomplete-item {
	padding: 6px 10px;
	cursor: pointer;
}

.profile-autocomplete-item:hover {
	background-color: #f0f0f0;
}

/* What the page will show. Read-only: the switch itself lives on the home
   page, so this is a report rather than a control. */
.profile-decks {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.profile-list-group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}

.profile-list-heading {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #666;
	margin-right: 4px;
}

.profile-list-item {
	border: 1px solid #ccc;
	border-radius: 999px;
	padding: 2px 10px;
	background-color: #fff;
	font-size: max(12px, 0.9em);
}

/* #368 DK-FE-1: a chip that is also a link to the deck's public page. It keeps
   the chip shape and only gains the affordances of a link. */
a.profile-list-item.profile-list-link {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

a.profile-list-item.profile-list-link:hover {
	border-color: #888;
	text-decoration: underline;
}

.profile-list-item.profile-list-private {
	background-color: transparent;
	border-style: dashed;
	color: #777;
}

/* Not a list, so not a chip: plain text where the chips would be. */
.profile-list-item.profile-list-none {
	border: none;
	background-color: transparent;
	padding-left: 0;
	color: #777;
	font-style: italic;
}

/* Preview - deliberately the dark look of the public pages. */
.profile-preview {
	background-color: #0f0f14;
	color: #d0d0d0;
	border: 1px solid #333;
	border-radius: 12px;
	padding: 18px;
	line-height: 1.5;
}

.preview-header {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.preview-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	background-color: #21212b;
}

.preview-avatar-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8em;
	font-weight: bold;
	color: #7a7a86;
}

.preview-identity {
	flex: 1 1 220px;
	min-width: 0;
}

.preview-name {
	color: #fff;
	font-size: 1.5em;
	font-weight: 800;
	line-height: 1.2;
	word-break: break-word;
}

.preview-handle {
	color: #e0a83a;
	font-family: monospace;
}

.preview-meta {
	color: #a0a0aa;
	font-size: max(12px, 0.9em);
	margin-top: 2px;
}

.preview-bio {
	margin-top: 8px;
	white-space: pre-line;
	word-break: break-word;
}

.preview-section {
	margin-top: 16px;
	border-top: 1px solid #2a2a33;
	padding-top: 12px;
}

.preview-section h4 {
	color: #e0a83a;
	margin: 0 0 6px 0;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.preview-section ul {
	margin: 0;
	padding-left: 18px;
}

.preview-tiles {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.preview-tiles b {
	color: #fff;
}

.preview-empty {
	margin: 0;
	color: #7a7a86;
	font-style: italic;
}

/* Save bar */
.profile-save-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	flex-wrap: wrap;
	/* The pinned look below adds only colour, so pinning moves nothing. */
	padding: 6px 0;
	border-top: 1px solid transparent;
}

/* #514: the app's own grey button, sized for a finger (it was 53x24px). */
.profile-save-bar button {
	width: fit-content;
	min-width: 120px;
	min-height: 44px;
	padding: 0 24px;
}

/* #514: while something is unsaved, the bar also stays at the bottom of the
   screen. Sticky rather than fixed: it keeps its place at the end of the page,
   so it never covers the last lines there, and it takes no room at all until
   there is something to save. Same grey as the box it sits in, with a line on
   top so the text sliding under it reads as passing behind. */
.profile-save-bar.profile-save-pending {
	position: sticky;
	bottom: 0;
	z-index: 15;   /* under the avatar suggestions (20) and the menu */
	background-color: #f0f0f0;
	border-top-color: #ccc;
	box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.08);
}

/* A field the browser scrolls to (keyboard Tab, a tap near the bottom) stops
   above the bar instead of under it. */
html:has(.profile-save-pending) {
	scroll-padding-bottom: 72px;
}

/* Under 200px of page is a phone held sideways with its keyboard open, in a
   browser that shrinks the page for the keyboard: the bar would cover a third
   of what is left, so it waits at the end until the keyboard closes. */
@media (max-height: 200px) {
	.profile-save-bar.profile-save-pending {
		position: static;
		border-top-color: transparent;
		box-shadow: none;
	}

	html:has(.profile-save-pending) {
		scroll-padding-bottom: 0;
	}
}

/* Dialogs - same native <dialog> approach as the API key dialogs in config.html */
.profile-dialog {
	max-width: 480px;
	border: 1px solid #999;
	border-radius: 8px;
	padding: 16px;
	line-height: 1.5;
}

.profile-dialog h3 {
	margin-top: 0;
}

.profile-dialog input[type="text"] {
	width: 100%;
	max-width: 320px;
	box-sizing: border-box;
}

.profile-dialog ul {
	padding-left: 20px;
}

.profile-dialog li {
	margin: 4px 0;
}

.profile-url-preview {
	font-family: monospace;
	font-size: max(12px, 0.9em);
	word-break: break-all;
	color: #444;
}

.profile-dialog-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.profile-dialog-actions button {
	width: fit-content;
}

@media (max-width: 768px) {
	fieldset.flex-fieldset.fieldsetSetting {
		text-align: justify !important;
		margin-top: 20px;
		display: block;
	}

	.profile-avatar-row {
		flex-direction: column;
	}

	/* The two-column label/field layout has no room left at phone width. */
	.profile-page .field {
		display: block !important;
	}

	.profile-page .field > .title {
		flex-basis: auto;
		max-width: none;
		padding-top: 0;
	}
}