/*
 * CILI: the artist's /u/ page follows the app's artist profile (roadmap F10, ADR-0023 D1, D4: CSS only; ADR-0018 D2).
 *
 * Heilz's author.php prints the page (its own queries; never copied): the artist's cover (avatar, name, biography,
 * "Contact"), three statistics, the type filter and the artwork cards (layout-cards.css). Here: a light panel with
 * the hero's corners instead of the black cover, a round avatar, the name and the biography in the app's type, the
 * contact as the near-black pill; the statistics as panels with round icon discs and the stat type; the filter as a
 * pill field. The statistics' Font Awesome glyphs are the line icons (grid, clock, the filled star) through
 * assets/js/line-icons.js.
 *
 * Scoped to the author archive (`body.author`), since the account's dashboard prints the same `.ulz-dashboard` boxes.
 * Lane 4's `body .ulz-author-cover .ulz--cover { z-index: 0 }` (WEB-406) keeps working: no rule here sets a position
 * or a stacking order on the cover. Every value a token; `html body` first.
 */

/* ------------------------------------------------------------------------------------------- the artist's cover */

html body.author .ulz-author-cover .ulz--cover {
	border-radius: var(--lcr-radius-hero);
	background-color: var(--lcr-color-panel);
	background-image: none;
	color: var(--lcr-color-ink);
}

html body.author .ulz-author-cover .ulz--cover::before,
html body.author .ulz-author-cover .ulz--cover::after {
	background: none;
}

html body.author .ulz-author-cover .ulz--inner {
	padding: var(--lcr-space-32);
}

html body.author .ulz-author-cover .ulz--cover-avatar {
	width: var(--lcr-size-avatar-profile);
	height: var(--lcr-size-avatar-profile);
	padding: 0;
	border-radius: var(--lcr-radius-pill);
	background: none;
	box-shadow: none;
	overflow: hidden;
}

html body.author .ulz-author-cover .ulz--cover-avatar img {
	box-shadow: none;
	width: var(--lcr-size-avatar-profile);
	height: var(--lcr-size-avatar-profile);
	border-radius: var(--lcr-radius-pill);
	object-fit: cover;
}

html body.author .ulz-author-cover .ulz--name {
	margin: var(--lcr-space-16) 0 var(--lcr-space-8);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-headline-font-size);
	font-weight: var(--lcr-web-type-headline-font-weight);
	letter-spacing: var(--lcr-web-type-headline-letter-spacing);
	line-height: var(--lcr-web-type-headline-line-height);
}

html body.author .ulz-author-cover .ulz--bio {
	max-width: var(--lcr-web-container-text);
	margin: 0;
	color: var(--lcr-color-body);
	font-size: var(--lcr-web-type-body-large-font-size);
	font-weight: var(--lcr-web-type-body-large-font-weight);
	line-height: var(--lcr-web-type-body-large-line-height);
}

html body.author .ulz-author-cover .ulz--action .ulz-button {
	display: inline-flex;
	align-items: center;
	min-height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-20);
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-ink);
	box-shadow: none;
	color: var(--lcr-color-on-ink);
	font-size: var(--lcr-web-type-label-font-size);
	font-weight: var(--lcr-font-weight-semibold);
}

/* ------------------------------------------------------------------------------------------- the statistics */

/* The three statistics in one row of three panels, at every width, on the page's edges: Utillz's grid (negative
   margins, cells with their own padding and a share of the width) gives way to a CSS grid of the grid-gap tokens, so the
   row ends where the cover and the cards end (1380px at 1440). */
html body.author .ulz-dashboard {
	margin-top: var(--lcr-space-24);
}

html body.author .ulz-dashboard-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--lcr-web-grid-gap-desktop);
	margin: 0;
}

html body.author .ulz-dashboard-row > div {
	max-width: none;
	padding: 0;
}

html body.author .ulz-dashboard-row .ulz--box {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: var(--lcr-space-24);
	border: 0;
	border-radius: var(--lcr-radius-tile);
	background-color: var(--lcr-color-panel);
	box-shadow: none;
	color: var(--lcr-color-ink);
}

/* The statistics' Font Awesome glyphs are the line icons (grid, clock, the filled star) through assets/js/line-icons.js;
   here only their size and place. */
html body.author .ulz-dashboard-row .ulz--box > i {
	--lcr-icon-size: var(--lcr-size-icon);
	display: block;
	width: var(--lcr-size-icon);
	height: var(--lcr-size-icon);
	order: -2;
	margin: 0 0 var(--lcr-space-16);
	color: var(--lcr-color-ink);
}

/* The number first, the label under it, as the app's stat panels: the markup keeps the label first (the order of
   reading is still right), only the order on the screen changes. */
html body.author .ulz-dashboard-row .ulz--num {
	order: -1;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-stat-font-size);
	font-weight: var(--lcr-web-type-stat-font-weight);
	letter-spacing: var(--lcr-web-type-stat-letter-spacing);
	line-height: var(--lcr-web-type-stat-line-height);
}

html body.author .ulz-dashboard-row .ulz--title {
	margin: var(--lcr-space-4) 0 0;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-web-type-small-font-size);
	font-weight: var(--lcr-web-type-small-font-weight);
	line-height: var(--lcr-web-type-small-line-height);
}

/* ------------------------------------------------------------------------------------------- the artworks' heading */

html body.author .ulz-content h4.ulz-mb-0 {
	font-size: var(--lcr-web-type-section-font-size);
	font-weight: var(--lcr-web-type-section-font-weight);
	letter-spacing: var(--lcr-web-type-section-letter-spacing);
	line-height: var(--lcr-web-type-section-line-height);
}

/* The artworks' heading and the type filter: one row on the page's edges (Utillz's grid again, without its negative
   margin and the cells' padding, which ended the filter 22px before the cover). */
html body.author .ulz-content > .ulz-grid.ulz-align-center {
	flex-wrap: wrap;
	gap: var(--lcr-space-16);
	margin: 0 0 var(--lcr-space-32);
}

html body.author .ulz-content > .ulz-grid.ulz-align-center > div {
	padding: 0;
}

/* The type filter: a pill field of the fill gray, its chevron drawn from the tokens (Font Awesome's goes). */
html body.author .ulz-content .ulz-select select {
	min-height: var(--lcr-size-control);
	padding: 0 var(--lcr-space-40) 0 var(--lcr-space-16);
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background-color: var(--lcr-color-fill);
	box-shadow: none;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-small-font-size);
}

html body.author .ulz-content .ulz-select::after {
	content: "";
	box-sizing: border-box;
	width: var(--lcr-space-8);
	height: var(--lcr-space-8);
	margin-top: calc(-1 * var(--lcr-space-6));
	border-right: calc(2 * var(--lcr-size-hairline)) solid currentColor;
	border-bottom: calc(2 * var(--lcr-size-hairline)) solid currentColor;
	transform: rotate(45deg);
	font-size: 0;
}

/* ------------------------------------------------------------------------------------------- phone and tablet */

@media (max-width: 1199.98px) {

	html body.author .ulz-author-cover .ulz--cover {
		border-radius: var(--lcr-radius-card);
	}

	html body.author .ulz-author-cover .ulz--inner {
		padding: var(--lcr-space-20);
	}

	html body.author .ulz-author-cover .ulz--name {
		font-size: var(--lcr-type-name-font-size);
		letter-spacing: var(--lcr-type-name-letter-spacing);
		line-height: var(--lcr-type-name-line-height);
	}

	html body.author .ulz-author-cover .ulz--bio {
		font-size: var(--lcr-type-body-large-font-size);
		line-height: var(--lcr-type-body-large-line-height);
	}

	/* The cover under the header, not touching it (the app's artist screen leaves 12 to 16 points). */
	html body.author .ulz-author-cover {
		margin-top: var(--lcr-space-16);
	}

	/* The avatar and "Contact" on one row, the name and the biography under them, all from the same left edge
	   (Heilz padded the cover by 16 and its heading by 10px more, and wrapped "Contact" under the avatar). */
	html body.author .ulz-author-cover .ulz--cover {
		padding: 0;
	}

	html body.author .ulz-author-cover .ulz--heading {
		flex-wrap: wrap;
		align-items: flex-end;
		gap: var(--lcr-space-12);
		margin: 0;
	}

	html body.author .ulz-author-cover .ulz--action {
		flex: 0 1 auto;
		max-width: 100%;
		margin: 0;
	}

	/* The three statistics: smaller panels, no icons, the stat type of the app. */
	html body.author .ulz-dashboard-row {
		gap: var(--lcr-space-8);
	}

	html body.author .ulz-dashboard-row .ulz--box {
		padding: var(--lcr-space-12);
	}

	html body.author .ulz-dashboard-row .ulz--box > i {
		display: none;
	}

	html body.author .ulz-dashboard-row .ulz--title {
		font-size: var(--lcr-type-meta-font-size);
		line-height: var(--lcr-type-meta-line-height);
	}

	html body.author .ulz-dashboard-row .ulz--num {
		font-size: var(--lcr-type-stat-font-size);
		letter-spacing: var(--lcr-type-stat-letter-spacing);
		line-height: var(--lcr-type-stat-line-height);
	}

	html body.author .ulz-content h4.ulz-mb-0 {
		font-size: var(--lcr-type-section-font-size);
		line-height: var(--lcr-type-section-line-height);
	}
}