/**
 * Success Stories — listing styles.
 *
 * Loaded only on the "Success Stories" page template (inc/success-stories.php).
 * Every selector is namespaced under .ss so nothing here reaches the rest of
 * the site, and nothing from Bootstrap 4 / latest-styles.css is relied on
 * (the global stylesheet justifies every <p>; that is undone below).
 *
 * Values are transcribed from the iciec-success-stories-v1 prototype: a
 * 4/3/2-column card grid, a slide-in filters drawer (bottom sheet on phones),
 * applied-filter chips and edge-anchored pagination. Logical properties keep
 * the Arabic (RTL) page correct without a separate stylesheet; only the
 * directional icons are mirrored.
 */

.ss {
	/* Brand palette only — the same tokens the search page, the home
	   testimonials and the newsletter v3 module use (Figma foundation). */
	--ss-green: #61a34a;            /* brand green: borders, icons, accents, checkbox accent */
	--ss-green-ink: #3f6c31;        /* brand green for text and links (6.2:1 on white) */
	--ss-green-fill: #4e833c;       /* brand green under white text (4.5:1): badge, Apply */
	--ss-green-fill-hover: #3f6c31;
	--ss-green-400: #056623;        /* Figma Green/400: pill and highlight text */
	--ss-green-tint: #e6f4eb;       /* Figma green tint: pills, search highlight */
	--ss-ink: #1c1c1c;              /* Figma Ink/700 */
	--ss-body: #3b3b3b;             /* Figma Ink/500 */
	--ss-muted: #575757;            /* Figma Ink/300: 6.4:1 on the wash, 8.6:1 on white */
	--ss-muted-soft: #757575;       /* Figma Neutral/G100: disabled options, placeholders */
	--ss-line: #dedede;             /* Figma Neutral/G40 */
	--ss-wash: #f5f5f5;             /* Figma surface-muted */
	--ss-shadow: rgba(28, 28, 28, .14);
	--ss-scrim: rgba(28, 28, 28, .35);
	--ss-radius: 8px;

	display: flex;
	flex-direction: column;
	padding-block: 72px 96px;
	scroll-margin-top: 160px; /* the site header is position: fixed */
	color: var(--ss-ink);
	font-size: 16px;
	line-height: 1.5;
}

.ss *,
.ss *::before,
.ss *::after {
	box-sizing: border-box;
}

/* Element resets at class-level specificity (:where), so every component
   rule below wins by source order. The theme justifies <p>, underlines and
   recolours <a>, and bevels <button>. */
.ss :where(p) {
	margin: 0;
	text-align: start;
}

.ss :where(a) {
	color: inherit;
	text-decoration: none;
}

.ss :where(ul) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss :where(fieldset) {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ss :where(legend) {
	padding: 0;
}

/* :where() keeps this reset at class-level specificity, so the component
   rules below (Apply, close, Retry) win without extra selectors. */
.ss :where(button) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	cursor: pointer;
}

/* Focus rings. The theme's bundled stylesheet ships
   `a:active,a:focus,a:visited{outline:none!important}`, so links need
   !important; Bootstrap paints a ring on mouse-clicked buttons, dropped with
   :not(:focus-visible). Green-ink (5.2:1 on white) rather than the brand green. */
.ss :focus-visible {
	outline: 2px solid var(--ss-green-ink);
	outline-offset: 2px;
}

.ss a:focus-visible {
	outline: 2px solid var(--ss-green-ink) !important;
	outline-offset: 2px;
}

.ss button:focus:not(:focus-visible),
.ss a:focus:not(:focus-visible) {
	outline: 0;
}

.ss :where(a):hover {
	text-decoration: none;
}

.ss-main:focus {
	outline: none;
}

.ss-icon {
	display: block;
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

[dir="rtl"] .ss-icon--arrow,
[dir="rtl"] .ss-icon--prev,
[dir="rtl"] .ss-icon--next {
	transform: scaleX(-1);
}

/* ==========================================================================
   Toolbar
   ========================================================================== */

.ss-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 24px;
}

.ss-heading {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ss-ink);
}

.ss-heading:focus {
	outline: none;
}

.ss-tools {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.ss-tbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--ss-ink);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.ss-tbtn:hover {
	border-color: var(--ss-green);
	color: var(--ss-ink);
}

.ss-count {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--ss-green-fill);
	color: #fff;
	font-size: 11.5px;
	line-height: 20px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.ss-count[hidden] {
	display: none;
}

.ss-views {
	display: flex;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	overflow: hidden;
}

.ss-view {
	width: 40px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ss-muted);
	transition: background .15s, color .15s;
}

.ss-view + .ss-view {
	border-inline-start: 1px solid var(--ss-line);
}

.ss-view:hover {
	background: var(--ss-wash);
	color: var(--ss-ink);
}

/* Selected view: a filled block (not a tint) so the state is visible without colour perception. */
.ss-view.is-active {
	background: var(--ss-green-fill);
	color: #fff;
}

.ss-view:focus-visible {
	outline-offset: -2px !important;
}

/* ==========================================================================
   Chips
   ========================================================================== */

.ss-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
}

.ss-chips__list {
	display: contents;
}

.ss-chips[hidden] {
	display: none;
}

.ss-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding-inline: 14px 8px;
	border-radius: 16px;
	background: var(--ss-wash);
	font-size: 13px;
	color: var(--ss-ink);
}

.ss-chip__group {
	font-weight: 500;
	color: var(--ss-muted);
}

.ss-chip__remove {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ss-muted);
}

.ss-chip__remove:hover {
	background: #fff;
	color: var(--ss-ink);
}

.ss-chip__remove .ss-icon {
	width: 10px;
	height: 10px;
	stroke-width: 2.5;
}

.ss-chips__clear {
	margin-inline-start: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ss-green-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ss-chips__clear:hover {
	color: var(--ss-ink);
	text-decoration: underline;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.ss-results {
	transition: opacity .15s;
}

.ss-results[aria-busy="true"] {
	opacity: .5;
	pointer-events: none;
}

.ss-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 20px;
	margin-top: 32px;
}

.ss-grid__item {
	display: flex;
	min-width: 0;
}

.ss-card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.ss-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	overflow: hidden;
	background: var(--ss-wash);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ss-muted);
}

.ss-card__media--empty .ss-icon {
	width: 40px;
	height: 40px;
	stroke-width: 1.5;
}

.ss-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.ss-card:hover .ss-card__image {
	transform: scale(1.04);
}

.ss-card__pill {
	position: absolute;
	inset-inline-start: 12px;
	bottom: 12px;
	padding: 3px 11px;
	border-radius: 14px;
	background: var(--ss-green-tint);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: var(--ss-green-400);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	max-width: calc(100% - 24px);
	overflow: hidden;
	text-overflow: ellipsis;
}

.ss-card__title {
	margin: 16px 0 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ss-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .15s;
}

.ss-card:hover .ss-card__title {
	color: var(--ss-green-ink);
}

.ss-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* One ring around the whole card for any focused link inside it (reference);
   browsers without :has() keep the link's own ring. */
@supports selector(.ss-card:has(a)) {
	.ss-card a:focus-visible {
		outline: none !important;
	}

	.ss-card:has(a:focus-visible) {
		outline: 2px solid var(--ss-green-ink);
		outline-offset: 4px;
		border-radius: 4px;
	}
}

.ss-card__meta {
	display: flex;
	flex-wrap: wrap;
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ss-muted);
}

/* The separator is decoration: the "/ """ gives it no alternative text. */
.ss-card__meta-part + .ss-card__meta-part::before {
	content: "·" / "";
	margin: 0 6px;
}

.ss-card__source {
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ss-muted);
}

.ss-card__source a {
	position: relative;
	z-index: 1;
	color: var(--ss-green-ink);
}

.ss-card__source a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ss-card__more {
	align-self: flex-start;
	margin-top: auto;
	padding-top: 18px;
	position: relative;
	z-index: 1;
}

.ss-card__more a,
.ss-table__more a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--ss-green-ink);
	font-size: 14px;
	font-weight: 600;
	color: var(--ss-green-ink);
	transition: color .15s, border-color .15s;
}

.ss-card__more a:hover,
.ss-table__more a:hover {
	color: var(--ss-ink);
	border-color: var(--ss-green);
}

.ss-card__more .ss-icon,
.ss-table__more .ss-icon {
	width: 14px;
	height: 14px;
	stroke-width: 2.2;
	transition: transform .15s;
}

.ss-card__more a:hover .ss-icon,
.ss-table__more a:hover .ss-icon {
	transform: translateX(2px);
}

[dir="rtl"] .ss-card__more a:hover .ss-icon,
[dir="rtl"] .ss-table__more a:hover .ss-icon {
	transform: scaleX(-1) translateX(2px);
}

/* ==========================================================================
   Table
   ========================================================================== */

.ss-tablewrap {
	margin-top: 32px;
	overflow-x: auto;
	border-top: 1px solid var(--ss-ink);
	-webkit-overflow-scrolling: touch;
}

.ss-table {
	width: 100%;
	min-width: 820px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ss-body);
	margin: 0;
}

/* Column headers only: the story cell is a row header (<th scope="row">)
   and must wrap like a normal cell. */
.ss-table thead th {
	padding: 14px 12px;
	text-align: start;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ss-muted);
	border-bottom: 1px solid var(--ss-line);
	white-space: nowrap;
}

.ss-table tbody th {
	white-space: normal;
}

/* The story column takes the width the design gives it; the others stay compact. */
.ss-table .ss-table__story {
	width: 46%;
	min-width: 320px;
}

.ss-table td,
.ss-table tbody th {
	padding: 16px 12px;
	border-bottom: 1px solid var(--ss-line);
	vertical-align: top;
	text-align: start;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ss-body);
}

.ss-tablewrap:focus-visible {
	outline: 2px solid var(--ss-green-ink);
	outline-offset: 2px;
}

.ss-table__num {
	text-align: end;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ss-table tbody tr:hover {
	background: var(--ss-wash);
}

.ss-table td a,
.ss-table tbody th a {
	font-weight: 500;
	color: var(--ss-ink);
}

.ss-table td a:hover,
.ss-table tbody th a:hover {
	color: var(--ss-green-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ss-table__thumb {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.ss-table__thumb img {
	width: 56px;
	height: 56px;
	border-radius: 4px;
	object-fit: cover;
	flex: none;
}

.ss-table small {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--ss-muted);
}

.ss-table__more {
	white-space: nowrap;
}

/* Outranks `.ss-table td a` so the action link is brand green like the cards. */
.ss-table .ss-table__more a {
	font-weight: 600;
	color: var(--ss-green-ink);
}

.ss-table .ss-table__more a:hover {
	color: var(--ss-ink);
	text-decoration: none;
}

/* ==========================================================================
   Empty state, errors
   ========================================================================== */

.ss-empty {
	margin-top: 32px;
	padding: 72px 24px;
	border-radius: 4px;
	background: var(--ss-wash);
	text-align: center;
}

.ss-empty__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 440px;
	margin: 0 auto;
}

.ss-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: #fff;
	color: var(--ss-green-ink);
	box-shadow: 0 1px 2px rgba(28, 28, 28, .06);
}

.ss-empty__icon .ss-icon {
	width: 24px;
	height: 24px;
	stroke-width: 1.75;
}

.ss-empty__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ss-ink);
	text-align: center;
}

/* Beats the explorer's `.ss p { text-align: start }` reset. */
.ss .ss-empty__text {
	margin: 8px 0 0;
	color: var(--ss-muted);
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}

.ss-empty__actions {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.ss-empty__action,
.ss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 20px;
	border: 1px solid var(--ss-green-ink);
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	color: var(--ss-green-ink);
	transition: background .15s, color .15s;
}

.ss .ss-empty__action:hover,
.ss .ss-btn:hover,
.ss .ss-btn:focus {
	border-color: var(--ss-green-ink);
	background: var(--ss-green-ink);
	color: #fff;
}

.ss-error {
	margin-top: 32px;
	padding: 24px;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	background: var(--ss-wash);
}

.ss-error p + p {
	margin-top: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.ss-error a,
.ss-error a:hover {
	color: var(--ss-green-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.ss-pager {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	align-items: center;
	margin-top: 56px;
}

.ss-pager[hidden] {
	display: none;
}

.ss-pager__arrow {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ss-line);
	border-radius: 6px;
	color: var(--ss-ink);
	transition: border-color .15s;
}

.ss-pager__arrow:hover {
	border-color: var(--ss-green);
}

.ss-pager__arrow.is-disabled {
	color: var(--ss-line);
	cursor: default;
}

.ss-pager__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ss-pager__page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	border-radius: 6px;
	font-size: 14px;
	color: var(--ss-ink);
	font-variant-numeric: tabular-nums;
	transition: background .15s;
}

.ss-pager__page:hover {
	background: var(--ss-wash);
}

.ss-pager__page.is-current {
	background: var(--ss-wash);
	font-weight: 600;
}

/* ==========================================================================
   Filters form / drawer
   ========================================================================== */

.ss-scrim {
	position: fixed;
	inset: 0;
	z-index: 1000000000; /* above the chat widget's 999999999 container */
	background: var(--ss-scrim);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, visibility .25s;
}

.ss-scrim[hidden] {
	display: none;
}

.ss-drawer {
	display: flex;
	flex-direction: column;
	background: #fff;
	color: var(--ss-ink);
	margin: 0;
}

.ss-drawer__form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
}

/* Without JavaScript: an ordinary panel under the toolbar. */
html:not(.ss-js) .ss-drawer {
	margin-top: 24px;
	border: 1px solid var(--ss-line);
	border-radius: 12px;
}

html:not(.ss-js) .ss-filters-btn {
	display: none;
}

/* With JavaScript: a slide-in panel from the end edge. */
.ss-js .ss-drawer {
	position: fixed;
	z-index: 1000000001; /* above the scrim and the chat widget */
	top: calc(20px + env(safe-area-inset-top, 0px));
	inset-inline-end: 20px;
	bottom: 20px;
	width: min(480px, calc(100% - 40px));
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(28, 28, 28, .18);
	transform: translateX(calc(100% + 40px));
	visibility: hidden;
	transition: transform .3s ease, visibility .3s;
}

.ss-js[dir="rtl"] .ss-drawer {
	transform: translateX(calc(-100% - 40px));
}

.ss-js .ss-drawer.is-open {
	transform: none;
	visibility: visible;
}

.ss-js .ss-scrim.is-open {
	opacity: 1;
	visibility: visible;
}

body.ss-filters-open {
	overflow: hidden;
}

.ss-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 28px 32px 20px;
}

.ss-drawer__title {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ss-muted);
}

.ss-drawer__close {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	color: var(--ss-ink);
}

/* The bundled theme CSS recolours button borders on hover/focus (#aaa). */
.ss .ss-drawer__close:hover,
.ss .ss-drawer__close:focus {
	border-color: var(--ss-line);
	background: #fff;
}

.ss-drawer__close[hidden] {
	display: none;
}

.ss-drawer__close .ss-icon {
	width: 18px;
	height: 18px;
}

.ss-drawer__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 4px 32px 24px;
}

.ss-find {
	position: relative;
	display: block;
	margin: 0;
}

.ss-find__field {
	position: relative;
	display: block;
	margin: 0;
}

.ss input[type="text"],
.ss input[type="text"]:focus,
.ss-find__input {
	width: 100%;
	height: 44px;
	padding-inline: 14px 38px;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--ss-ink);
	-webkit-appearance: none;
	appearance: none;
}

.ss-find__input::placeholder {
	color: var(--ss-muted-soft);
}

.ss input[type="text"]:focus-visible,
.ss .ss-find__input:focus-visible {
	outline: 2px solid var(--ss-green-ink);
	outline-offset: 1px;
}

.ss-find__field .ss-icon {
	position: absolute;
	inset-inline-end: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

/* Search suggestions (combobox listbox) */
.ss-suggest {
	position: absolute;
	z-index: 5;
	inset-inline: 0;
	top: calc(100% + 6px);
	max-height: 340px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--ss-line);
	border-radius: var(--ss-radius);
	box-shadow: 0 12px 32px var(--ss-shadow);
	-webkit-overflow-scrolling: touch;
}

.ss-suggest[hidden] {
	display: none;
}

.ss-suggest__list {
	list-style: none;
	margin: 0;
	padding: 6px;
}

.ss-suggest__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
}

.ss-suggest__item.is-active {
	background: var(--ss-wash);
	outline: 2px solid var(--ss-green-ink); /* 5.7:1 on the wash; kept in forced-colours mode */
	outline-offset: -2px;
}

.ss-suggest__thumb {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	object-fit: cover;
	flex: none;
	background: var(--ss-wash);
	display: block;
}

.ss-suggest__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: start;
}

.ss-suggest__title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ss-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ss-suggest__title mark {
	padding: 0;
	border-radius: 2px;
	background: var(--ss-green-tint);
	color: var(--ss-green-400);
}

.ss-suggest__meta {
	font-size: 12px;
	line-height: 1.4;
	color: var(--ss-muted);
}

.ss-suggest__amount {
	flex: none;
	padding: 2px 8px;
	border-radius: 10px;
	background: var(--ss-green-tint);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: var(--ss-green-400);
	white-space: nowrap;
}

.ss-suggest__foot {
	padding: 10px 16px;
	border-top: 1px solid var(--ss-line);
	font-size: 12.5px;
	color: var(--ss-muted);
	text-align: center;
}

.ss-suggest__foot[hidden] {
	display: none;
}

.ss-suggest__empty {
	padding: 14px 10px;
	font-size: 14px;
	color: var(--ss-muted);
	text-align: start;
}

.ss-acc {
	margin-top: 28px;
	border-top: 1px solid var(--ss-line);
}

.ss-acc__group {
	border-bottom: 1px solid var(--ss-line);
}

.ss-acc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	cursor: pointer;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
	color: var(--ss-ink);
}

.ss-acc__summary::-webkit-details-marker {
	display: none;
}

.ss-acc__sel {
	margin-inline-start: auto;
	font-size: 13px;
	font-weight: 400;
	color: var(--ss-green-ink);
}

.ss-acc__summary .ss-icon {
	width: 18px;
	height: 18px;
	transition: transform .2s;
}

.ss-acc__group[open] .ss-acc__summary .ss-icon {
	transform: rotate(180deg);
}

.ss-acc__opts {
	display: grid;
	gap: 2px;
	padding: 0 0 16px;
}

.ss-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 6px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: var(--ss-ink);
}

.ss-opt:hover {
	background: var(--ss-wash);
}

.ss-opt input {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: none;
	accent-color: var(--ss-green);
}

.ss-opt__count {
	margin-inline-start: auto;
	font-size: 12.5px;
	color: var(--ss-muted);
	font-variant-numeric: tabular-nums;
}

/* Zero-count options are disabled: nothing would match them. */
.ss-opt--zero {
	color: var(--ss-muted-soft);
	cursor: not-allowed;
}

.ss-opt--zero:hover {
	background: none;
}

.ss-opt--zero input,
.ss-opt input:disabled {
	cursor: not-allowed;
	opacity: .5;
}

/* Footer: a quiet "Clear all" text link on the start side, the primary
   "Show N stories" action on the end side (the usual filter-drawer pattern). */
.ss-drawer__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 32px;
	border-top: 1px solid var(--ss-line);
}

.ss-drawer__apply {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	min-width: 180px;
	height: 44px;
	padding: 0 24px;
	border-radius: 6px;
	background: var(--ss-green-fill);
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	text-align: center;
	transition: background .15s;
}

.ss-drawer__apply:hover {
	background: var(--ss-green-fill-hover);
	color: #fff;
}

.ss-drawer__reset {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	font: inherit;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	color: var(--ss-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: color .15s, opacity .15s;
}

.ss-drawer__reset:hover {
	color: var(--ss-green-ink);
	text-decoration: underline;
}

.ss-drawer__reset.is-disabled {
	color: var(--ss-muted);
	opacity: .55;
	pointer-events: none;
	text-decoration: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199px) {
	.ss-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	.ss-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 16px;
	}
}

@media (max-width: 640px) {
	.ss {
		padding-block: 40px 64px;
		scroll-margin-top: 90px;
	}

	.ss-tools {
		width: 100%;
	}

	.ss-tools .ss-tbtn {
		flex: 1;
		justify-content: center;
	}

	.ss-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px 12px;
	}

	.ss-card__title {
		font-size: 14px;
	}

	.ss-card__pill {
		inset-inline-start: 8px;
		bottom: 8px;
		padding: 2px 8px;
		font-size: 11.5px;
	}

	.ss-card__meta {
		font-size: 12px;
	}

	/* The sector stays in the table view and the filters (reference). */
	.ss-card__meta-part--sector {
		display: none;
	}

	.ss-pager__list .ss-far {
		display: none;
	}

	.ss-empty {
		padding: 48px 20px;
	}

	.ss-js .ss-drawer {
		inset: auto 0 0 0;
		top: calc(48px + env(safe-area-inset-top, 0px));
		width: 100%;
		border-radius: 12px 12px 0 0;
		transform: translateY(100%);
	}

	.ss-js[dir="rtl"] .ss-drawer {
		transform: translateY(100%);
	}

	.ss-js .ss-drawer.is-open {
		transform: none;
	}

	.ss-drawer__header,
	.ss-drawer__body,
	.ss-drawer__footer {
		padding-inline: 20px;
	}

	.ss-drawer__apply {
		flex: 1 1 auto;
		min-width: 0;
	}

	html:not(.ss-js) .ss-drawer__header,
	html:not(.ss-js) .ss-drawer__body,
	html:not(.ss-js) .ss-drawer__footer {
		padding-inline: 16px;
	}
}

/* Arabic: no tracking on the uppercase-styled headings (letter joining). */
html[lang="ar"] .ss-table thead th,
html[lang="ar"] .ss-drawer__title {
	letter-spacing: 0;
	text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ss *,
	.ss *::before,
	.ss *::after,
	.ss-scrim,
	.ss-drawer {
		transition: none !important;
	}
}