/* Steel City AFOL Badges: shared accessible front-end styling. */
:root {
	color-scheme: light;
	--afol-theme: #f5a623; --afol-interest: #1c9c8f; --afol-skill: #7b5cd6; --afol-event-community: #ef6c53; --afol-admin-role: #556270; --afol-ink: #273444;
	--afol-surface: #fff; --afol-surface-muted: #f4f6f8; --afol-text: var(--afol-ink); --afol-border: color-mix(in srgb, var(--afol-text) 22%, transparent); --afol-focus: #005fcc;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --afol-surface: #20252b; --afol-surface-muted: #2b333c; --afol-text: #f3f5f7; --afol-border: color-mix(in srgb, var(--afol-text) 35%, transparent); --afol-focus: #ffd166; } }
:root[data-theme="dark"] { color-scheme: dark; --afol-surface: #20252b; --afol-surface-muted: #2b333c; --afol-text: #f3f5f7; --afol-border: color-mix(in srgb, var(--afol-text) 35%, transparent); --afol-focus: #ffd166; }

/* Icon primitives and the shared circular chip. */
.afol-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.15em; overflow: visible; }
.afol-icon use { vector-effect: non-scaling-stroke; }
.afol-icon-fallback { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--afol-interest); color: #fff; font-size: .62em; font-weight: 700; line-height: 1; vertical-align: middle; }
.afol-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.afol-chip {
	--afol-chip-size: 24px;
	--afol-chip-ring: var(--afol-admin-role);
	position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	width: var(--afol-chip-size); height: var(--afol-chip-size); border-radius: 50%;
	background:
		radial-gradient(circle at 30% 25%, rgb(255 255 255 / 55%), rgb(255 255 255 / 0) 55%),
		linear-gradient(160deg, color-mix(in srgb, var(--afol-chip-ring) 14%, var(--afol-surface)), var(--afol-surface) 62%);
	overflow: hidden; flex: 0 0 auto; vertical-align: middle;
	border: max(1px, calc(var(--afol-chip-size) / 22)) solid var(--afol-chip-ring);
	box-shadow:
		inset 0 1px 1px rgb(255 255 255 / 80%),
		inset 0 -2px 4px color-mix(in srgb, var(--afol-chip-ring) 32%, transparent),
		0 1px 2px rgb(0 0 0 / 20%),
		0 4px 10px color-mix(in srgb, var(--afol-chip-ring) 24%, transparent);
	transition: transform .12s ease, box-shadow .12s ease;
}
.afol-chip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, rgb(255 255 255 / 35%), rgb(255 255 255 / 0) 45%); pointer-events: none; }
a:hover > .afol-chip, button:hover > .afol-chip, .sc-afol-badges-add-toggle:hover .afol-chip { transform: translateY(-1px) scale(1.04); box-shadow: inset 0 1px 1px rgb(255 255 255 / 80%), 0 2px 4px rgb(0 0 0 / 24%), 0 8px 18px color-mix(in srgb, var(--afol-chip-ring) 34%, transparent); }
.afol-chip .afol-chip-icon { width: 100%; height: 100%; display: block; }
.afol-chip img.afol-chip-icon { object-fit: cover; }
.afol-chip svg.afol-chip-icon { width: 88%; height: 88%; }
.afol-chip .afol-icon-fallback { width: 100%; height: 100%; }
.sc-afol-badges-cloud-item .afol-chip { background: linear-gradient(160deg, color-mix(in srgb, var(--afol-chip-ring) 22%, var(--afol-surface)), var(--afol-surface-muted) 62%); }

/* Profile and author-card badge groups. */
.afol-profile-badges { margin: 1rem 0; }.afol-profile-badges h3 { margin: 0 0 .5rem; }.afol-profile-badges-list { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.afol-profile-badge, .afol-profile-badges-more { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }.afol-profile-badges-more { padding: 0 .65rem; }
.lug-badge-afol { display: inline-flex; align-items: center; opacity: .78; color: inherit; text-decoration: none; vertical-align: middle; }.lug-badge-afol:hover { opacity: 1; }.afol-badge-more { font-size: 11px; cursor: pointer; }.afol-user-badges { --afol-author-icon-size: 14px; display: grid; grid-template-columns: repeat(5, var(--afol-author-icon-size)); grid-template-rows: repeat(2, var(--afol-author-icon-size)); gap: 2px; align-items: center; justify-content: start; max-width: calc(5 * var(--afol-author-icon-size) + 8px); overflow: hidden; vertical-align: middle; }.afol-user-badges>a.lug-badge-afol { width: var(--afol-author-icon-size) !important; height: var(--afol-author-icon-size) !important; min-width: var(--afol-author-icon-size) !important; min-height: var(--afol-author-icon-size) !important; max-width: var(--afol-author-icon-size) !important; max-height: var(--afol-author-icon-size) !important; padding: 0 !important; margin: 0 !important; line-height: var(--afol-author-icon-size) !important; }.afol-user-badges .afol-chip { --afol-chip-size: var(--afol-author-icon-size); width: var(--afol-author-icon-size) !important; height: var(--afol-author-icon-size) !important; min-width: var(--afol-author-icon-size) !important; min-height: var(--afol-author-icon-size) !important; max-width: var(--afol-author-icon-size) !important; max-height: var(--afol-author-icon-size) !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; box-shadow: 0 1px 2px rgb(0 0 0 / 18%); }.afol-user-badges .afol-chip img, .afol-user-badges .afol-chip svg { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; }.afol-user-badges .afol-badge-more { font-size: 10px; white-space: nowrap; }

/* Shared page, detail, directory, and member cards. */
.sc-afol-badges-directory, .sc-afol-badges-landing { max-width: 960px; margin: 2rem auto; padding: 0 1rem; color: var(--afol-text); background: var(--afol-surface); }
.sc-afol-badges-landing { box-sizing: border-box; }
@media (min-width: 1000px) { .sc-afol-badges-landing { max-width: 1400px; width: 94vw; margin-left: calc(50% - 47vw); margin-right: calc(50% - 47vw); } }
.sc-afol-badges-directory a { color: inherit; }.sc-afol-badges-back { margin-bottom: 1.5rem; }.sc-afol-badges-page-nav { display: flex; flex-wrap: wrap; gap: .45rem .8rem; align-items: center; margin: 0 0 1.25rem; font-size: .92em; font-weight: 700; }.sc-afol-badges-manage-link { font-size: .9em; font-weight: 700; }.sc-afol-badges-detail-header, .sc-afol-badges-member-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; padding: 1.5rem; border: 1px solid var(--afol-border); border-radius: 1rem; background: var(--afol-surface-muted); box-shadow: 0 12px 24px rgb(0 0 0 / 8%), 0 2px 5px rgb(0 0 0 / 6%); }.sc-afol-badges-detail-icon { display: grid; place-items: center; min-width: 112px; }
.sc-afol-badges-category { margin: 0 0 .35rem; color: color-mix(in srgb, var(--afol-text) 65%, transparent); font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.sc-afol-badges-detail h1, .sc-afol-badges-member-list h1 { margin: 0; line-height: 1.1; }.sc-afol-badges-retired, .sc-afol-badges-admin-note { font-size: .9em; font-style: italic; }.sc-afol-badges-detail-copy { max-width: 680px; margin: 0 auto 2rem; }.sc-afol-badges-detail-copy > p:first-child { color: color-mix(in srgb, var(--afol-text) 72%, transparent); font-size: 1.08em; line-height: 1.6; }.sc-afol-badges-member-count { font-weight: 700; }
.sc-afol-badges-detail { max-width: none; }.sc-afol-badges-member-grid, .sc-afol-badges-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; width: 100%; }.sc-afol-badges-member { aspect-ratio: 1 / 1; flex-direction: column; justify-content: center; text-align: center; }.sc-afol-badges-member, .sc-afol-badge-card { display: flex; align-items: center; gap: .85rem; min-height: 76px; padding: 1rem; border: 1px solid var(--afol-border); border-radius: .75rem; background: var(--afol-surface); box-shadow: 0 7px 16px rgb(0 0 0 / 7%), 0 1px 3px rgb(0 0 0 / 6%); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }.sc-afol-badges-member:hover, .sc-afol-badge-card:hover, .sc-afol-badges-member:focus-visible, .sc-afol-badge-card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--afol-focus) 55%, var(--afol-border)); box-shadow: 0 12px 24px rgb(0 0 0 / 11%), 0 2px 5px rgb(0 0 0 / 7%); }.sc-afol-badges-member-avatar { flex: 0 0 auto; border-radius: 50%; }.sc-afol-badges-member .sc-afol-badges-member-avatar { width: 72px; height: 72px; }.sc-afol-badge-card span { display: grid; gap: .25rem; min-width: 0; }.sc-afol-badge-card strong { font-size: 1.03em; }.sc-afol-badge-card small { color: color-mix(in srgb, var(--afol-text) 66%, transparent); font-size: .85em; line-height: 1.35; }
.sc-afol-badges-detail-action { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }.sc-afol-badges-detail-add { min-height: 44px; padding: .55rem .9rem; cursor: pointer; }.sc-afol-badges-detail-add:disabled { cursor: default; opacity: .72; }.sc-afol-badges-detail-status { font-size: .9em; }
.sc-afol-badges-pagination { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.25rem 0; }.sc-afol-badges-pagination a { min-width: 2.2em; padding: .45rem .6rem; border: 1px solid var(--afol-border); border-radius: .35rem; text-align: center; text-decoration: none; }.sc-afol-badges-pagination a.current { background: var(--afol-ink); color: var(--afol-surface); border-color: var(--afol-ink); }

/* Landing controls and selected badges. */
.sc-afol-badges-section, .sc-afol-badges-suggest { margin: 0 0 2rem; }.sc-afol-badges-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }.sc-afol-badges-section h2 { margin-bottom: .6rem; }.sc-afol-badges-counter { font-weight: 600; }.sc-afol-badges-selected { display: grid; gap: .65rem; }.sc-afol-badges-selected-item { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; min-height: 64px; padding: .65rem .85rem; border: 1px solid var(--afol-border); border-radius: .75rem; background: var(--afol-surface); box-shadow: 0 6px 14px rgb(0 0 0 / 6%), 0 1px 3px rgb(0 0 0 / 5%); }.sc-afol-badges-selected-name { flex: 1 1 6rem; min-width: 0; font-weight: 700; }.sc-afol-badges-selected-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .3rem; margin-left: auto; }.sc-afol-badges-drag-handle { cursor: grab; user-select: none; font-size: 1.4rem; opacity: .55; }.sc-afol-badges-remove, .sc-afol-badges-move-up, .sc-afol-badges-move-down, .sc-afol-badges-category-filter, .sc-afol-badges-add-toggle { min-height: 44px; }
.sc-afol-badges-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); align-items: start; gap: .55rem; margin-top: 1rem; }.sc-afol-badges-add-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--afol-border); border-radius: .65rem; background: var(--afol-surface); box-shadow: 0 5px 12px rgb(0 0 0 / 7%), 0 1px 3px rgb(0 0 0 / 5%); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }.sc-afol-badges-add-card:hover, .sc-afol-badges-add-card:focus-within { transform: translateY(-2px); border-color: color-mix(in srgb, var(--afol-focus) 55%, var(--afol-border)); box-shadow: 0 10px 18px rgb(0 0 0 / 11%), 0 2px 5px rgb(0 0 0 / 7%); }.sc-afol-badges-add-toggle, .sc-afol-badges-add-card-content { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: .15rem .5rem; align-content: start; align-items: start; flex: 0 1 auto; width: 100%; min-height: 0; padding: .55rem .55rem .35rem; border: 0; background: transparent; text-align: left; color: inherit; }.sc-afol-badges-add-toggle strong, .sc-afol-badges-add-card-content strong { align-self: center; font-size: .92em; line-height: 1.2; }.sc-afol-badges-add-toggle small, .sc-afol-badges-add-card-content small { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: color-mix(in srgb, var(--afol-text) 66%, transparent); font-size: .8em; line-height: 1.3; }.sc-afol-badges-add-card.is-admin-only { opacity: .6; }.sc-afol-badges-holder-preview { display: flex; flex-wrap: wrap; align-items: center; min-height: 26px; padding: 0 .55rem .2rem; font-size: .72em; }.sc-afol-badges-holder-avatar { display: inline-flex; width: 26px; height: 26px; margin-left: -7px; overflow: hidden; border: 2px solid var(--afol-surface); border-radius: 50%; background: var(--afol-surface-muted); }.sc-afol-badges-holder-avatar:first-child { margin-left: 0; }.sc-afol-badges-holder-avatar-image { width: 100%; height: 100%; object-fit: cover; }.sc-afol-badges-holder-count { margin-left: .45rem; color: color-mix(in srgb, var(--afol-text) 70%, transparent); white-space: nowrap; }.sc-afol-badges-add-card-details { display: block; margin-top: auto; padding: .2rem .55rem .45rem; font-size: .74em; color: inherit; text-decoration: underline; }.sc-afol-badges-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }.sc-afol-badges-sort { display: block; min-width: 10rem; margin-top: .25rem; }.sc-afol-badges-category-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }.sc-afol-badges-category-filter.is-active { background: var(--afol-ink); color: var(--afol-surface); font-weight: 700; }.sc-afol-badges-status, .sc-afol-badges-near-duplicate { min-height: 1.5em; }
@media (min-width: 1000px) { .sc-afol-badges-add-grid { grid-template-columns: repeat(auto-fit, minmax(148px, 180px)); justify-content: center; } }
.sc-afol-badges-suggest { padding: .75rem; border: 1px solid var(--afol-border); border-radius: .5rem; }.sc-afol-badges-suggest-form { display: grid; gap: .45rem; margin-top: 1rem; }.sc-afol-badges-suggest-form input, .sc-afol-badges-suggest-form select, .sc-afol-badges-suggest-form textarea, .sc-afol-badges-search { max-width: 100%; padding: .55rem; }
.sc-afol-badges-add-toggle, .sc-afol-badges-add-card-content { background: var(--afol-surface) !important; color: var(--afol-text) !important; }
.sc-afol-badges-selected-description { flex: 1 0 100%; margin: 0; color: color-mix(in srgb, var(--afol-text) 68%, transparent); font-size: .9em; line-height: 1.35; }

/* Cloud: size conveys popularity, while the accessible label carries the count. */
.sc-afol-badges-cloud { width: 100%; max-width: none; box-sizing: border-box; }.sc-afol-badges-cloud-header { max-width: 1120px; margin: 2rem auto 1.5rem; }.sc-afol-badges-cloud-header h1 { margin-bottom: .35rem; }.sc-afol-badges-cloud-header p { margin-top: 0; }.sc-afol-badges-cloud-legend { max-width: 1120px; margin: 1.5rem auto; }.sc-afol-badges-cloud-legend h2 { font-size: 1rem; margin-bottom: .5rem; }.sc-afol-badges-cloud-legend ul { display: flex; flex-wrap: wrap; gap: .5rem 1rem; list-style: none; margin: 0; padding: 0; }.sc-afol-badges-cloud-legend li { display: inline-flex; align-items: center; gap: .4rem; }.sc-afol-badges-cloud-swatch { width: .8rem; height: .8rem; border-radius: 50%; }.sc-afol-badges-cloud-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(.65rem, 1.2vw, 1.4rem) clamp(.9rem, 2vw, 2.2rem); width: 100%; min-height: 28rem; box-sizing: border-box; padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 5vw, 6rem); border: 1px solid var(--afol-border); border-radius: 1rem; background: var(--afol-surface-muted); box-shadow: 0 8px 18px rgb(0 0 0 / 6%); }.sc-afol-badges-cloud-item { order: var(--cloud-order, 0); color: var(--badge-color); font-size: clamp(13.6px, calc(13.6px + var(--weight) * 24.8px), 38.4px); font-weight: 700; line-height: 1.2; padding: .25rem .1rem; text-decoration: none; transform: translateY(var(--cloud-shift, 0px)); transition: transform .15s ease, filter .15s ease; }.sc-afol-badges-cloud .sc-afol-badges-cloud-item { color: var(--badge-color); }.sc-afol-badges-cloud-item:hover, .sc-afol-badges-cloud-item:focus-visible { filter: brightness(.86); transform: translateY(calc(var(--cloud-shift, 0px) - 2px)) scale(1.04); }.sc-afol-badges-cloud-empty { margin-top: 2rem; }

/* One consistent keyboard treatment and motion reduction. */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--afol-focus); outline-offset: 3px; }.sc-afol-badges-selected-item[draggable="true"] { cursor: grab; }.sc-afol-badges-selected-item.is-dragging { opacity: .55; }
@media (max-width: 480px) { .sc-afol-badges-detail-header, .sc-afol-badges-member-header { align-items: flex-start; }.sc-afol-badges-detail-icon { min-width: 72px; } }
@media (max-width: 640px) { .sc-afol-badges-add-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .45rem; }.sc-afol-badges-add-toggle, .sc-afol-badges-add-card-content { padding: .45rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Badge manager (front-end /manage/ page). */
.sc-afol-manage { max-width: 1000px; margin: 2rem auto; padding: 0 1rem; color: var(--afol-text); }
.sc-afol-manager-denied { text-align: center; }
.sc-afol-manager .sc-afol-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.sc-afol-manager .sc-afol-filter input[type="search"] { flex: 1 1 220px; padding: .5rem; }
.sc-afol-manager .sc-afol-filter select, .sc-afol-manager .sc-afol-filter button { padding: .5rem; }
.sc-afol-manager .sc-afol-bulk-form { display: flex; align-items: center; gap: .5rem; margin: .75rem 0; }
.sc-afol-catalog-table { overflow-x: auto; }
.sc-afol-catalog-table table { width: 100%; border-collapse: collapse; }
.sc-afol-catalog-table th, .sc-afol-catalog-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--afol-border); text-align: left; vertical-align: middle; }
.sc-afol-catalog-table th a { color: inherit; text-decoration: none; font-weight: 700; }
.sc-afol-catalog-table th a:hover { text-decoration: underline; }
.sc-afol-col-actions { white-space: nowrap; }
.sc-afol-col-actions .button-link, .sc-afol-col-actions button { background: none; border: 0; padding: 0 .35rem; color: var(--afol-focus); cursor: pointer; font: inherit; }
.sc-afol-col-actions .button-link-delete, .sc-afol-col-actions .sc-afol-delete { color: #b32d2e; }
.sc-afol-row-mutation { display: inline; }
.sc-afol-name { text-decoration: none; }
.sc-afol-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1rem 0; }
.sc-afol-pages a, .sc-afol-pages span { display: inline-block; min-width: 2em; padding: .25rem .5rem; text-align: center; border: 1px solid var(--afol-border); border-radius: .25rem; text-decoration: none; }
.sc-afol-pages .current { background: var(--afol-ink); color: var(--afol-surface); border-color: var(--afol-ink); }
.sc-afol-pages .disabled { opacity: .4; }
.sc-afol-badge-form { max-width: 560px; margin: 1rem 0; padding: 1rem; border: 1px solid var(--afol-border); border-radius: .5rem; background: var(--afol-surface-muted); }
.sc-afol-badge-form input, .sc-afol-badge-form select, .sc-afol-badge-form textarea { width: 100%; max-width: 100%; padding: .5rem; }
.sc-afol-badge-form textarea { min-height: 4em; }
.sc-afol-holders { max-width: 560px; margin: 1rem 0; padding: 1rem; border: 1px dashed var(--afol-border); border-radius: .5rem; }
.sc-afol-holder-list { list-style: none; margin: .5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sc-afol-holder-list li { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .5rem; border: 1px solid var(--afol-border); border-radius: 999px; }
.sc-afol-holder-remove { background: none; border: 0; font-size: 1.1em; line-height: 1; cursor: pointer; color: #b32d2e; }
.sc-afol-holder-add { position: relative; }
.sc-afol-holder-search { width: 100%; max-width: 320px; padding: .5rem; }
.sc-afol-holder-results { position: absolute; z-index: 5; left: 0; top: 100%; min-width: 260px; background: var(--afol-surface); border: 1px solid var(--afol-border); border-radius: .35rem; box-shadow: 0 6px 16px rgb(0 0 0 / 18%); }
.sc-afol-holder-results:empty { display: none; }
.sc-afol-holder-pick { display: block; width: 100%; text-align: left; padding: .5rem .6rem; border: 0; background: none; cursor: pointer; font: inherit; }
.sc-afol-holder-pick:hover, .sc-afol-holder-pick:focus { background: var(--afol-surface-muted); }
.sc-afol-holder-none, .sc-afol-holder-empty { display: block; padding: .5rem .6rem; opacity: .7; }
.sc-afol-status.updated { color: #1d6b35; }
.sc-afol-status.error { color: #b32d2e; }
.sc-afol-subnav a.current { font-weight: 700; text-decoration: none; }