/*
 * CILI: the vendor's icon-font glyphs drawn as the app's line icons (roadmap F10, Q79, Q80, ADR-0023 D6).
 *
 * assets/js/line-icons.js names each glyph's line icon in `data-lcr-icon`; here the element loses its font glyph and
 * becomes a mask of the per-glyph SVG file (assets/icons/, generated from lane 5's docs/design/icons), in the text's
 * colour, at the icon size. Three names are shapes of the tokens, not icons: `ring` (Utillz's spinner, which keeps its
 * own rotation), `radio-on` and `radio-off` (Utillz's radio buttons), `dot`; `none` hides a glyph whose meaning the
 * line icons do not have (its text stays). Neither icon font loads (cili/layout.php): a glyph the script has not
 * named, before it runs or because the map lacks it, shows nothing. Every value a token.
 */

html body [data-lcr-icon] {
	display: inline-block;
	width: var(--lcr-icon-size, var(--lcr-space-20));
	height: var(--lcr-icon-size, var(--lcr-space-20));
	flex: none;
	font-size: 0 !important; /* the glyph's own sizes, some with `!important` (Utillz's `.ulz-preloader`) */
	line-height: 0;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: var(--lcr-glyph) center / contain no-repeat;
	mask: var(--lcr-glyph) center / contain no-repeat;
}

/* Font Awesome draws its glyph in ::before. */
html body [data-lcr-icon]::before,
html body [data-lcr-icon]::after {
	content: none !important; /* Font Awesome's `.fa-*::before { content: "\f…" }` */
}

html body [data-lcr-icon="back"] { --lcr-glyph: url("../icons/back.svg"); }
html body [data-lcr-icon="bell"] { --lcr-glyph: url("../icons/bell.svg"); }
html body [data-lcr-icon="bookmark"] { --lcr-glyph: url("../icons/bookmark.svg"); }
html body [data-lcr-icon="camera"] { --lcr-glyph: url("../icons/camera.svg"); }
html body [data-lcr-icon="check"] { --lcr-glyph: url("../icons/check.svg"); }
html body [data-lcr-icon="clock"] { --lcr-glyph: url("../icons/clock.svg"); }
html body [data-lcr-icon="close"] { --lcr-glyph: url("../icons/close.svg"); }
html body [data-lcr-icon="download"] { --lcr-glyph: url("../icons/download.svg"); }
html body [data-lcr-icon="eye"] { --lcr-glyph: url("../icons/eye.svg"); }
html body [data-lcr-icon="eye-off"] { --lcr-glyph: url("../icons/eye-off.svg"); }
html body [data-lcr-icon="file"] { --lcr-glyph: url("../icons/file.svg"); }
html body [data-lcr-icon="filter"] { --lcr-glyph: url("../icons/filter.svg"); }
html body [data-lcr-icon="flag"] { --lcr-glyph: url("../icons/flag.svg"); }
html body [data-lcr-icon="forward"] { --lcr-glyph: url("../icons/forward.svg"); }
html body [data-lcr-icon="grid"] { --lcr-glyph: url("../icons/grid.svg"); }
html body [data-lcr-icon="home"] { --lcr-glyph: url("../icons/home.svg"); }
html body [data-lcr-icon="image"] { --lcr-glyph: url("../icons/image.svg"); }
html body [data-lcr-icon="images"] { --lcr-glyph: url("../icons/images.svg"); }
html body [data-lcr-icon="lock"] { --lcr-glyph: url("../icons/lock.svg"); }
html body [data-lcr-icon="logout"] { --lcr-glyph: url("../icons/logout.svg"); }
html body [data-lcr-icon="menu"] { --lcr-glyph: url("../icons/menu.svg"); }
html body [data-lcr-icon="message-square-text"] { --lcr-glyph: url("../icons/message-square-text.svg"); }
html body [data-lcr-icon="more"] { --lcr-glyph: url("../icons/more.svg"); }
html body [data-lcr-icon="person"] { --lcr-glyph: url("../icons/person.svg"); }
html body [data-lcr-icon="play"] { --lcr-glyph: url("../icons/play.svg"); }
html body [data-lcr-icon="plus"] { --lcr-glyph: url("../icons/plus.svg"); }
html body [data-lcr-icon="search"] { --lcr-glyph: url("../icons/search.svg"); }
html body [data-lcr-icon="send"] { --lcr-glyph: url("../icons/send.svg"); }
html body [data-lcr-icon="settings"] { --lcr-glyph: url("../icons/settings.svg"); }
html body [data-lcr-icon="share"] { --lcr-glyph: url("../icons/share.svg"); }
html body [data-lcr-icon="verified"] { --lcr-glyph: url("../icons/verified.svg"); }
html body [data-lcr-icon="edit"] { --lcr-glyph: url("../icons/edit.svg"); }
html body [data-lcr-icon="trash"] { --lcr-glyph: url("../icons/trash.svg"); }
html body [data-lcr-icon="star"] { --lcr-glyph: url("../icons/star.svg"); }
html body [data-lcr-icon="star-filled"] { --lcr-glyph: url("../icons/star-filled.svg"); }
html body [data-lcr-icon="minus"] { --lcr-glyph: url("../icons/minus.svg"); }
html body [data-lcr-icon="chevron-down"] { --lcr-glyph: url("../icons/chevron-down.svg"); }
html body [data-lcr-icon="upload"] { --lcr-glyph: url("../icons/upload.svg"); }

/* Without Material Icons' stylesheet a glyph is its ligature as plain text ("lock"), and without Font Awesome's an
   empty element: until the script names it, and for a ligature the map lacks, the text is not shown. */
html body .material-icons:not([data-lcr-icon]) {
	display: none;
}

/* A glyph with no line icon of its meaning (commerce, the map, moods): nothing; its text stays. */
html body [data-lcr-icon="none"] {
	display: none !important; /* whatever display the vendor gives the glyph */
}

/* The shapes: no mask, a border or a fill of the tokens. */
html body [data-lcr-icon="ring"],
html body [data-lcr-icon="radio-on"],
html body [data-lcr-icon="radio-off"],
html body [data-lcr-icon="dot"] {
	box-sizing: border-box;
	border-radius: var(--lcr-radius-pill);
	background-color: transparent;
	-webkit-mask: none;
	mask: none;
}

html body [data-lcr-icon="ring"] {
	border: calc(2 * var(--lcr-size-hairline)) solid currentColor;
	border-right-color: transparent;
}

html body [data-lcr-icon="radio-off"] {
	--lcr-icon-size: var(--lcr-space-18);
	border: calc(2 * var(--lcr-size-hairline)) solid currentColor;
}

html body [data-lcr-icon="radio-on"] {
	--lcr-icon-size: var(--lcr-space-18);
	border: calc(2 * var(--lcr-size-hairline)) solid currentColor;
	box-shadow: inset 0 0 0 var(--lcr-space-4) var(--lcr-color-background);
	background-color: currentColor;
}

html body [data-lcr-icon="dot"] {
	--lcr-icon-size: var(--lcr-size-dot);
	background-color: currentColor;
}

/* The submission's type picker: each type's icon set in wp-admin, the inline SVG of templates/submission/listing-type.php
   (cili/type-icons.php) in the text's colour, between the type's ring and its name, without Utillz's square tile (the
   owner's requests of 2026-10-11). A glyph neither that nor the line icons draw goes, and the icon's box with it; a
   type's picture, when wp-admin gives it one, stays (the template prints either in `.ulz--image`). */
html body form[name="ulz-submit-type"] :is(i, span)[class*="fa-"]:not([data-lcr-icon]),
html body form[name="ulz-submit-type"] [data-lcr-icon="none"],
html body form[name="ulz-submit-type"] .material-icons:not([data-lcr-icon]),
html body form[name="ulz-submit-type"] .ulz--image:not(:has(.ulz--img, .lcr-type-icon, [data-lcr-icon]:not([data-lcr-icon="none"]))) {
	display: none;
}

html body form[name="ulz-submit-type"] .ulz--type .ulz--image:has(.ulz-dummy-image) {
	display: flex;
	flex: none;
	align-items: center;
}

html body form[name="ulz-submit-type"] .ulz-dummy-image {
	display: flex;
	width: auto;
	padding-top: 0 !important; /* Utillz's inline `padding-top: 100%`, the square tile */
	background: none !important; /* Utillz's `--dummy-background` tile */
	color: inherit;
}

html body form[name="ulz-submit-type"] .ulz-dummy-image :is(.lcr-type-icon, [data-lcr-icon]) {
	--lcr-icon-size: var(--lcr-space-24);
	position: static;
	transform: none;
}

html body form[name="ulz-submit-type"] .ulz-dummy-image .lcr-type-icon {
	width: var(--lcr-space-24);
	height: var(--lcr-space-24);
}

/* The pseudo-elements the vendors draw with a glyph's `content` (a character of a font that no longer loads shows as
   a box), where no markup is there to name: the account's section selector (Heilz's `.ulz-archive-dropdown::after`,
   Font Awesome's chevron) is the chevron's mask, and the submission's radio buttons, of its packages and of its type
   picker (Utillz's `.ulz--radio span::after`, the circle and the dot-circle), are the radio shapes of the tokens. */
html body .ulz-archive-dropdown::after {
	content: "";
	width: var(--lcr-space-20);
	height: var(--lcr-space-20);
	margin-top: calc(-0.5 * var(--lcr-space-20));
	background-color: currentColor;
	-webkit-mask: url("../icons/chevron-down.svg") center / contain no-repeat;
	mask: url("../icons/chevron-down.svg") center / contain no-repeat;
	font-size: 0; /* the glyph's own size */
}

html body .ulz-packages .ulz-package .ulz--radio span::after,
html body .ulz-submission-types .ulz--type .ulz--radio span::after {
	content: "";
	display: block;
	box-sizing: border-box;
	width: var(--lcr-space-28);
	height: var(--lcr-space-28);
	border: calc(2 * var(--lcr-size-hairline)) solid currentColor;
	border-radius: var(--lcr-radius-pill);
	background-color: transparent;
	color: var(--lcr-color-dashed-outline);
	font-size: 0; /* the glyph's own size, `32px` and `26px` on a phone */
}

/* Checked: the ring and its dot, in ink on a package (Utillz's `#58dc4e`, design.css's ink) and in white on the chosen
   submission type, whose tile is ink. */
html body .ulz-packages .ulz-package .ulz--radio input:checked + span::after {
	content: ""; /* Utillz's `content: "\F192"` */
	background-color: currentColor;
	box-shadow: inset 0 0 0 var(--lcr-space-6) var(--lcr-color-background);
	color: var(--lcr-color-ink);
}

html body .ulz-submission-types .ulz--type .ulz--radio input:checked + span::after {
	content: ""; /* Utillz's `content: "\F192"` */
	background-color: currentColor;
	box-shadow: inset 0 0 0 var(--lcr-space-6) var(--lcr-color-ink);
	color: var(--lcr-color-on-ink);
}