/*
 * CILI: what the global styles left open on the account, dashboard and listings pages (roadmap F10, ADR-0023 D1, D7;
 * lane R1, 2026-10-08; the integrator's decision of 2026-10-08, which refines D1 for these pages).
 *
 * These pages keep the global styles (design.css: the grays of WooCommerce and of the chart) and the line icons
 * (line-icons.css: the glyphs of the vendors' pseudo-elements). Here only the shape of two controls, as the artist's
 * type filter (layout-artist.css), and two boxes that ran out of their place at phone width (D7, WCAG 1.4.10). Every
 * value a token; `html body` first; `!important` never.
 */

/* ------------------------------------------------------------------------------------------- the selects */

/* The section selector the account shows on a phone (Heilz's `.ulz-archive-dropdown`; its chevron is line-icons.css's):
   a pill field of the fill gray. */
html body .ulz-archive-dropdown select {
	min-height: var(--lcr-size-field);
	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-body-font-size);
}

/* The listings page's filters: the same pill, its chevron drawn from the tokens, two diagonal lines of the ink, since a
   select has no pseudo-element. Heilz's rule drew the chevron from an image at a third-party address
   (`http://74.208.50.53/…/select-bg.svg`), which this site never loads; the shorthand here replaces the whole value, so
   that address is no longer requested. */
html body .woocommerce-MyAccount-content form.posts-filter select {
	height: var(--lcr-size-field);
	padding: 0 var(--lcr-space-40) 0 var(--lcr-space-16);
	border: 0;
	border-radius: var(--lcr-radius-pill);
	background:
		linear-gradient(to bottom left, transparent calc(50% - var(--lcr-size-hairline)), var(--lcr-color-ink) calc(50% - var(--lcr-size-hairline)), var(--lcr-color-ink) calc(50% + var(--lcr-size-hairline)), transparent calc(50% + var(--lcr-size-hairline)))
			no-repeat right calc(var(--lcr-space-16) + var(--lcr-space-8)) center / var(--lcr-space-8) var(--lcr-space-8),
		linear-gradient(to bottom right, transparent calc(50% - var(--lcr-size-hairline)), var(--lcr-color-ink) calc(50% - var(--lcr-size-hairline)), var(--lcr-color-ink) calc(50% + var(--lcr-size-hairline)), transparent calc(50% + var(--lcr-size-hairline)))
			no-repeat right var(--lcr-space-16) center / var(--lcr-space-8) var(--lcr-space-8),
		var(--lcr-color-fill);
	box-shadow: none;
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-body-font-size);
}

html body .woocommerce-MyAccount-content form.posts-filter input.button.filter-btn {
	border-radius: var(--lcr-radius-pill);
}

/* ------------------------------------------------------------------------------------------- the member ID */

/* The Account details page's "Member ID" line (woocommerce/myaccount/form-edit-account.php; ADR-0038 D10): a label in the
   muted gray and the member's code in the ink, on one row, a line of text and no field. */
html body .cili-account-member-id {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--lcr-space-12);
}

html body .cili-account-member-id .cili-account-member-id-label {
	color: var(--lcr-color-muted);
	font-size: var(--lcr-web-type-small-font-size);
	line-height: var(--lcr-web-type-small-line-height);
}

html body .cili-account-member-id .cili-account-member-id-code {
	color: var(--lcr-color-ink);
	font-size: var(--lcr-web-type-body-font-size);
	font-weight: var(--lcr-web-type-label-font-weight);
}

/* ------------------------------------------------------------------------------------------- phone */

@media (max-width: 767.98px) {

	/* The dashboard's stat tiles keep the room of their icon (97px at the left, Heilz's `.ulz--has-icon`), which leaves
	   35px of a 156px tile: "Today earnings" and "$0.00" ran out of their tiles. As the artist's stat panels on a
	   phone: no icon, the panel's padding. */
	html body.woocommerce-dashboard .ulz-dashboard-row .ulz--box.ulz--has-icon {
		padding: var(--lcr-space-16);
	}

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

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

	/* "Top listings": Utillz keeps a table at least 768px wide inside a box that scrolls sideways, which put the
	   "No data yet." row, whose one cell spans the whole table, out of view; the dashboard's two columns fit the box. */
	html body.woocommerce-dashboard .ulz-boxes-table table {
		min-width: 0;
	}

	html body.woocommerce-dashboard .ulz-boxes-table table tr td.ulz-text-center {
		background-color: transparent; /* Utillz's `.ulz-boxes-table table tr td { background-color: #ddd }` */
	}
}

/* ------------------------------------------------------------------------------------------- Submit Art */

/* Listings' "Submit Art" (templates/account/heading.php): the header's pill with the plus line icon, beside the title
   (the owner's request of 2026-10-11: at the row's far end it sat too far from it). */
html body .ulz-account-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline; /* the pill's text on the title's line, whatever margin Heilz gives the title */
	gap: var(--lcr-space-16);
}

html body .ulz-account-heading .lcr-account-submit {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--lcr-space-6);
}

html body .ulz-account-heading .lcr-account-submit .lcr-icon {
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
}

/* The listing type's image on the Submit Art page, on the form's heading (templates/page-templates/submission.php) and in
   the type picker (templates/submission/listing-type.php): the vendors set it with an inline `background-image`; the
   copies pass the address as a custom property, since a style attribute may set only those. */
html body .ulz-submission :is(.ulz--top, .ulz-submission-types) .ulz--img {
	background-image: var(--lcr-type-image);
}

/* Without an image, the type's icon set in wp-admin (cili/type-icons.php) in the middle of Utillz's ink circle, the
   image's size: the template prints the circle without Utillz's inline `padding-top: 100%`, and the box is square by
   its ratio, not by Utillz's `padding-top: 65%`. */
html body .ulz-submission .ulz--top .ulz-dummy-image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	height: auto;
	padding: 0;
	color: var(--lcr-color-on-ink);
}

html body .ulz-submission .ulz--top .ulz-dummy-image .lcr-type-icon {
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
}

/* The wizard's mark of a step reached (Heilz's `.ulz-wizard li.ulz-active::after`, Font Awesome's circled check, which no
   longer loads and showed as an empty square; the owner's report of 2026-10-11): the app's check line icon, in the text's
   colour, where Heilz puts it. */
html body .ulz-wizard li::after {
	content: "";
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
	background-color: currentColor;
	-webkit-mask: url("../icons/check.svg") center / contain no-repeat;
	mask: url("../icons/check.svg") center / contain no-repeat;
	font-size: 0;
	border-radius: 0;
}

/* ------------------------------------------------------------------------------------------- payments */

/* The dashboard's "Artist enrollment" section and My artworks' "Promote" (cili/account/payments.php; ADR-0029 D9, D14,
   roadmap P7): the panel gray, pill buttons of the control height, the status in the ink. */
html body .cili-enrollment {
	margin-bottom: var(--lcr-space-24);
	padding: var(--lcr-space-20);
	border-radius: var(--lcr-radius-tile);
	background-color: var(--lcr-color-panel);
}

html body .cili-enrollment h3 {
	margin: 0 0 var(--lcr-space-8);
	color: var(--lcr-color-ink);
	font-size: var(--lcr-type-title-font-size);
	font-weight: var(--lcr-type-title-font-weight);
	line-height: var(--lcr-type-title-line-height);
}

html body .cili-enrollment .cili-enrollment-status {
	color: var(--lcr-color-ink);
	font-weight: var(--lcr-font-weight-semibold);
}

html body :is(.cili-enrollment, .cili-promote) :is(button.ulz-button, .ulz-button) {
	min-height: var(--lcr-size-control);
	border-radius: var(--lcr-radius-pill);
}

html body .cili-payments-message {
	margin: var(--lcr-space-8) 0 0;
	color: var(--lcr-color-muted);
	font-size: var(--lcr-type-small-font-size);
	line-height: var(--lcr-type-small-line-height);
}

html body .cili-promote-panel[hidden] {
	display: none;
}

html body .cili-promote-panel {
	margin-top: var(--lcr-space-8);
	padding: var(--lcr-space-14);
	border-radius: var(--lcr-radius-tile);
	background-color: var(--lcr-color-panel);
}

html body .cili-promote-panel fieldset {
	margin: 0 0 var(--lcr-space-8);
	padding: 0;
	border: 0;
}

html body .cili-promote-panel label {
	display: flex;
	align-items: center;
	gap: var(--lcr-space-8);
	min-height: var(--lcr-size-control-small);
	color: var(--lcr-color-ink);
}

html body .cili-promoted-until {
	margin: 0;
	color: var(--lcr-color-ink);
	font-weight: var(--lcr-font-weight-semibold);
}

html body .cili-submission-enrollment .ulz--content {
	text-align: center;
}

/* ------------------------------------------------------------------------------------------- Saved */

/* The Saved page's empty and failed notes (templates/account/saved.php; the owner's decision of 2026-10-20): the sentence on the
   title's left edge, then its pill (Explore, or Try again), in the grays of the page. The cards are the lists' own. */
html body .lcr-saved .lcr-saved-note p {
	margin: 0 0 var(--lcr-space-16);
	padding: 0;
}

html body .lcr-saved .lcr-saved-note[hidden] {
	display: none;
}