Template:UI/guides library/styles.css

/* TemplateStyles for {{UI/guides_library}} — curated Guides library
   page. Sections: header (heading + lead + stats) and filtered
   guides list (SRF format=filtered + entry row partial). The SRF
   filter sidebar styles itself via its own resource module; we only
   style the wrapper plus the per-entry row card.

   Sanitizer constraints (MW 1.44.5 / css-sanitizer 5.5.0): var() is
   accepted in `background`, `color`, and `border` shorthand, but
   rejected in `border-color` longhand, `border-radius`, `box-shadow`,
   `padding`, `margin`, and most numeric properties. Same convention
   the publications + faqs libraries follow — geometry stays literal,
   color tokens go through var(). */

.guides-library {
	margin: 0 0 2em 0;
}

.guides-library-lead {
	font-size: 1.05rem;
	color: var(--labki-text-muted, #5a6a7a);
	margin: 0 0 1em 0;
	max-width: 60em;
}

.guides-library-stats {
	margin-bottom: 1.25em;
}

/* ---------- Filtered guides feed ---------- */

.guides-library-feed {
	margin-top: 1.5em;
}

.guides-library-entry {
	padding: 0.9em 0;
	border-bottom: 1px solid var(--labki-border, #d8dde2);
}

.guides-library-entry:last-child {
	border-bottom: none;
}

.guides-library-entry-title {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 0.25em;
}

/* Format chip next to the title — Tutorial / Assembly guide / etc.
   Same visual register as the Publications library's Has-publication-type
   kicker chip (uppercase, small, outlined). Restating the full `border:`
   shorthand instead of `border-color: var(...)` per the sanitizer
   constraint above. */
.guides-library-entry-format {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--labki-text-muted, #5a6a7a);
	font-weight: 500;
	padding: 1px 6px;
	border: 1px solid var(--labki-border, #d8dde2);
	border-radius: 3px;
	margin-left: 0.4em;
	vertical-align: middle;
	white-space: nowrap;
}

.guides-library-entry-format a,
.guides-library-entry-format a:visited {
	color: inherit;
	text-decoration: none;
}

/* Kicker line — date and audience-level above the lead. */
.guides-library-entry-kicker {
	font-size: 0.8rem;
	color: var(--labki-text-muted, #5a6a7a);
	margin-bottom: 0.3em;
}

.guides-library-entry-level {
	font-style: italic;
}

/* Lead paragraph — Has description, line-clamped at ~2 lines via
   max-height. Avoids -webkit-line-clamp because css-sanitizer 5.5.0
   rejects `display: -webkit-box` (see upcoming_events_featured/styles.css
   for the same workaround rationale). */
.guides-library-entry-lead {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--labki-text, #2c2c2c);
	margin-bottom: 0.4em;
	max-height: 3em;
	overflow: hidden;
}

/* ---------- Topic chip strip ---------- */

.guides-library-entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	font-size: 0.75rem;
}

.guides-library-entry-tag {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--labki-bg-subtle, #f4f6f8);
	border: 1px solid var(--labki-border, #d8dde2);
	color: var(--labki-text, #2c2c2c);
	white-space: nowrap;
}

.guides-library-entry-tag a,
.guides-library-entry-tag a:visited {
	color: inherit;
	text-decoration: none;
}

/* Topic chip — accent-bordered to read as the primary tag. Same
   border: shorthand workaround as Category/FAQ/styles.css for the
   var()-in-border-color sanitizer rejection. */
.guides-library-entry-tag-topic {
	background: var(--labki-bg-subtle, #f4f6f8);
	border: 1px solid var(--labki-accent, #2774AE);
	color: var(--labki-accent, #2774AE);
	font-weight: 500;
}

.guides-library-empty {
	padding: 1em;
	color: var(--labki-text-muted, #5a6a7a);
	font-style: italic;
	text-align: center;
	background: var(--labki-bg-subtle, #f4f6f8);
	border-radius: 4px;
}