编辑 styles.css - 文件管理器

✏️ 编辑：styles.css

路径：/home/forge/kingkrunch.com/wp/wp-content/plugins/simple-history/css/styles.css

大小：145.4 KB · 修改：2026-09-25 00:42:29 · 权限：0644 · 可写

/**
 * Use SuitCSS based classnames.
 */

@import "./variables.css";

/* clearfix */
.SimpleHistory__cf:before,
.SimpleHistory__cf:after {
	content: "";
	display: table;
}
.SimpleHistory__cf:after {
	clear: both;
}
.SimpleHistory__cf {
	zoom: 1;
} /* For IE 6/7 (trigger hasLayout) */

.SimpleHistoryGuiExample {
	position: relative;
	/* must have a height so "loading..." will be visible in dashboard */
	min-height: 6em;
}

.SimpleHistory__waitingForFirstLoad {
	position: absolute;
	top: 20px;
	left: 20px;
}

.SimpleHistory__waitingForFirstLoad img {
	vertical-align: text-bottom;
}

.SimpleHistory__waitingForFirstLoad--isLoaded {
	display: none;
}

/* wrap around the log items and the pagination */
.SimpleHistoryLogitemsWrap {
	transition: opacity 0.1s ease-out;
}

/* on its own page */
.SimpleHistoryGuiWrap {
	position: relative;
	min-height: 200px;
}

.SimpleHistory--isLoaded .SimpleHistoryGuiWrap {
	background-color: transparent;
}

.SimpleHistoryGuiWrap .SimpleHistoryGui {
	width: 100%;
}

@media only screen and (min-width: 960px) {
	.SimpleHistoryGuiWrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-between;
	}
}

/* Page sidebar styles */
@media only screen and (min-width: 960px) {
	.SimpleHistory__pageSidebar {
		flex: 0 0 25%;
		max-width: 25%;
		width: 100%;
		padding-left: 1rem;
	}
}

/*
The table view takes the whole width, sidebar included.

Measured at three window widths: the sidebar costs 286px at 1280, 326 at 1440
and 398 at 1728 — a steady ~23% of the window. At 1280 the table overflows its
column by 69px with the sidebar in place and has around 217px to spare
without it, and the Message column, the only one that grows, goes from 304px
to roughly 590. A table is the one view here that can actually use the room.

Hidden rather than not printed: the sidebar comes from a PHP dropin outside
the React root, and the view switches without a page load, so the class is
toggled from EventsGui. Display none rather than a width change, so the
sidebar's own boxes never lay out at a size nobody sees.
*/
.SimpleHistoryGuiWrap--hideSidebar .SimpleHistory__pageSidebar {
	display: none;
}

.SimpleHistory__pageSidebar .inside {
	margin-bottom: 0;
}

.SimpleHistory__pageSidebar .metabox-holder {
	padding-top: 0 !important;
}

.SimpleHistory__pageSidebar .postbox .hndle {
	cursor: auto;
}

/*
.SimpleHistoryGui:after {
	content: "\f206";
	font-family: dashicons;
	font-size: 510px;
	position: relative;
	line-height: 1;
	color: #ddd;
	z-index: 0;
}

.SimpleHistory--isLoaded .SimpleHistoryGui:after {
	display: none;
}
*/

/** UL with log items */
.SimpleHistoryLogitems {
	margin: 0;
	background: #fff;
	/* border-top: 1px solid var(--sh-color-separator); */
	border-bottom: 1px solid var(--sh-color-separator);
	opacity: 1;
	transition: all 0.25s ease-out;
}

.SimpleHistoryLogitems.is-loading {
	opacity: 0.5;
}

/* .SimpleHistory--isLoaded .SimpleHistoryLogitems,
.SimpleHistoryGuiExample .SimpleHistoryLogitems {
	opacity: 1;
} */

/**
 * Log items
 * There is always a 4px left border, just with different colors.
 */
.SimpleHistoryLogitem {
	position: relative;
	list-style-type: none;
	margin: 0;
	/* padding: 20px 20px 20px 16px; */
	padding: var(--sh-spacing-medium);
	/* Margin top gets same height as separator */
	/* margin-top: var(--sh-spacing-medium); */
}

.SimpleHistoryLogitem:hover {
	background-color: var(--sh-color-item-hover);
}

/* add border below items */
/* .SimpleHistoryLogitem::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 66px;
	height: 1px;
	right: 0;
	background: rgb(229, 229, 229);
} */

.postbox .SimpleHistoryLogitem::before {
	left: 0;
}

.SimpleHistoryLogitem:last-of-type:before {
	background: none;
}

/* Targets the element before a divider with a label. */
.SimpleHistoryLogitem:has(
		+ .SimpleHistoryLogitem .SimpleHistoryEventSeparator--hasLabel
	) {
	/* outline: 2px solid red; */
	padding-bottom: calc(var(--sh-spacing-medium) * 3);
}

.SimpleHistoryEventSeparator {
	width: calc(100% + var(--sh-spacing-medium) * 2);
	margin-left: calc(var(--sh-spacing-medium) * -1);
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid var(--sh-color-separator);
	margin-top: calc(var(--sh-spacing-medium) * -1);
	min-height: 30px;
	font-weight: 600;
}

/* Divider line, at middle of divider. */

.SimpleHistoryEventSeparator__label {
	display: flex;
	align-items: center;
	max-height: 1em;
	padding: var(--sh-spacing-small) var(--sh-spacing-medium);
	border-radius: 1rem;
	line-height: 1;
	background-color: var(--sh-color-white);
	border: 1px solid var(--sh-color-separator);
	font-size: var(--sh-font-size-small);
	transform: translateY(-50%);
	box-shadow: 0px 3px 3px 0px #f7f7f7;
}

/* The "Sticky" divider puts a pin inside the label (see EventSeparator.jsx).
   @wordpress/icons renders it at 24px, which is twice the height the label's
   max-height: 1em allows, so it spills out of the pill. Match it to the text. */
.SimpleHistoryEventSeparator__label svg {
	width: 1em;
	height: 1em;
	margin-right: var(--sh-spacing-xsmall);
}

/* Text inside event, contains tooltip and SVG icon component */
.SimpleHistoryLogitem--sticky {
	display: inline-block;
	line-height: 1;
	vertical-align: middle;

> svg {
		display: block;
	}
}

/*
Style different log levels.
Tag = the pill with the log level.
*/
.SimpleHistoryLogitem--logleveltag {
	display: inline-block;
	background-color: rgba(238, 238, 238, 1);
	font-size: 10px;
	padding: 3px 4px;
	border-radius: var(--sh-border-radius);
	vertical-align: 1px;
	line-height: 1;
}

.SimpleHistoryLogitem--logleveltag-debug {
	background-color: #cef6d8;
	color: #111;
}

.SimpleHistoryLogitem--logleveltag-info {
	display: none;
}

.SimpleHistoryLogitem--logleveltag-notice {
	background-color: rgb(219, 219, 183);
	color: #111;
}

.SimpleHistoryLogitem--logleveltag-warning {
	background-color: #f7d358;
	color: #111;
}

.SimpleHistoryLogitem--logleveltag-error {
	background-color: #f79f81;
	color: #000;
}

.SimpleHistoryLogitem--logleveltag-critical {
	background-color: #fa5858;
	color: #fff;
}

.SimpleHistoryLogitem--logleveltag-alert {
	background-color: rgb(199, 69, 69);
	color: #eee;
}

.SimpleHistoryLogitem--logleveltag-emergency {
	background-color: #df0101;
	color: #eee;
}

.SimpleHistoryLogitem a,
.SimpleHistoryLogitem .components-external-link,
.SimpleHistoryLogitem .components-button.is-link {
	color: #2271b1;
	text-decoration: none;
}

.SimpleHistoryLogitem a:hover,
.SimpleHistoryLogitem .components-external-link:hover,
.SimpleHistoryLogitem .components-button.is-link:hover {
	color: #135e96;
	text-decoration: none;
}

.SimpleHistoryLogitem__firstcol {
	float: left;
}

.SimpleHistoryLogitem__senderImage {
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	margin-top: 5px;
	width: 32px;
	height: 32px;
}

.SimpleHistoryLogitem__senderImage img {
	display: block;
	max-width: 100%;
	max-height: 100%;
}

.SimpleHistoryLogitem__secondcol {
	margin-left: 50px;
}

.SimpleHistoryLogitem__header {
	line-height: 1.2;
	margin-top: 2px;
}

.SimpleHistoryLogitem__header,
/*.SimpleHistoryLogitem__header time,*/
.SimpleHistoryLogitem__headerEmail {
	color: var(--sh-color-gray-3);
}

/* Event ID shown in surrounding events mode */
.SimpleHistoryLogitem__eventId {
	font-family: monospace;
	font-size: 12px;
	color: var(--sh-color-gray-3);
	margin-right: 0.5em;
}

/* Emphasize event ID on center event */
.SimpleHistoryLogitem--is-center-event .SimpleHistoryLogitem__eventId {
	color: var(--sh-color-blue);
	font-weight: 600;
}

.SimpleHistoryLogitem__text,
.SimpleHistoryLogitem__details,
.SimpleHistoryLogitem__details p {
	line-height: 1.4;
}

.SimpleHistoryLogitem__text {
	margin-top: 0.4em;
	font-size: 15px;
	color: #333;
	/* break long lines so content always fit, even if very long (like very long url from http_api-logger */
	word-break: break-word;
}

.SimpleHistoryLogitem__details p {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}

.SimpleHistoryLogitem__occasions {
	color: var(--sh-color-gray-3);
	margin-top: 0.4em;
	display: flex;
	gap: 1rem;
}

/*
Same negative left margin as .SimpleHistoryLogitem__actionLinks, so the
button's text lines up with the event text above it at rest. The toggle
belongs to the row, unlike the diff toggle which is right-aligned under the
box it expands.
*/
.SimpleHistoryLogitem__occasions .SimpleHistory__disclosureToggle {
	margin-left: calc(var(--sh-spacing-small) * -1);
}

.SimpleHistoryLogitem__occasionsAddOns {
	position: relative;
}

/* Add vertical line | before addons promo text */
.SimpleHistoryLogitem__occasionsAddOns::after {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 3px;
	width: 1px;
	left: -0.5rem;
	background-color: var(--sh-color-gray-2);
}

.SimpleHistoryLogitem__occasionsAddOnsText {
	margin: 0;
	line-height: inherit;
}

.SimpleHistoryLogitem__details {
	margin-top: 0.4em;
}

/* make video embeds responsive */
.SimpleHistoryLogitem__details .wp-video {
	max-width: 100%;
}

/* Structured action links below event details */
.SimpleHistoryLogitem__actionLinks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-spacing-small) var(--sh-spacing-xsmall);
	margin-top: var(--sh-spacing-small);
	margin-bottom: var(--sh-spacing-xsmall);
	margin-left: calc(var(--sh-spacing-small) * -1);
	font-size: var(--sh-font-size-small);
	line-height: 1.4;
}

/* Scoped under the item so this outranks the generic ".SimpleHistoryLogitem a" colour. */
.SimpleHistoryLogitem .SimpleHistoryLogitem__actionLinks__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sh-spacing-xsmall);
	padding: var(--sh-spacing-xsmall) var(--sh-spacing-small);
	/* Grey at rest so a list of similar events does not become a wall of blue
	   links outweighing the event text. Blue once the row is hovered or focused. */
	color: var(--sh-color-gray-3);
	text-decoration: none;
	transition: color 0.15s ease;
}

.SimpleHistoryLogitem:is(:hover, :focus-within)
	.SimpleHistoryLogitem__actionLinks__link {
	color: #2271b1;
}

.SimpleHistoryLogitem .SimpleHistoryLogitem__actionLinks__link:hover,
.SimpleHistoryLogitem .SimpleHistoryLogitem__actionLinks__link:focus-visible {
	color: #135e96;
	background-color: var(--sh-color-gray-4);
	border-radius: var(--sh-border-radius);
}

@media (prefers-reduced-motion: reduce) {
	.SimpleHistoryLogitem .SimpleHistoryLogitem__actionLinks__link {
		transition: none;
	}
}

.SimpleHistoryLogitem__actionLinks__link .sh-Icon {
	--sh-icon-size: 1em;
	top: 0;
	/* Use mask so icon color inherits from link via currentColor. */
	mask-size: 100%;
	-webkit-mask-size: 100%;
	background: currentColor;
}

.SimpleHistoryLogitem__actionLinks__link .sh-Icon--visibility {
	mask-image: url(./icons/visibility_FILL0_wght400_GRAD0_opsz48.svg);
	-webkit-mask-image: url(./icons/visibility_FILL0_wght400_GRAD0_opsz48.svg);
}

.SimpleHistoryLogitem__actionLinks__link .sh-Icon--edit {
	mask-image: url(./icons/edit_FILL0_wght400_GRAD0_opsz48.svg);
	-webkit-mask-image: url(./icons/edit_FILL0_wght400_GRAD0_opsz48.svg);
}

.SimpleHistoryLogitem__actionLinks__link .sh-Icon--preview {
	mask-image: url(./icons/preview_48dp_1F1F1F_FILL0_wght400_GRAD0_opsz48.svg);
	-webkit-mask-image: url(./icons/preview_48dp_1F1F1F_FILL0_wght400_GRAD0_opsz48.svg);
}

.SimpleHistoryLogitem__actionLinks__link .sh-Icon--history {
	mask-image: url(./icons/history_FILL0_wght400_GRAD0_opsz48.svg);
	-webkit-mask-image: url(./icons/history_FILL0_wght400_GRAD0_opsz48.svg);
}

.SimpleHistoryLogitem__actionLinks__link .sh-Icon--details {
	mask-image: url(./icons/info_FILL0_wght400_GRAD0_opsz48.svg);
	-webkit-mask-image: url(./icons/info_FILL0_wght400_GRAD0_opsz48.svg);
}

.SimpleHistoryLogitem__actionLinks__link .sh-Icon--external-link {
	mask-image: url(./icons/open_in_new_FILL0_wght400_GRAD0_opsz48.svg);
	-webkit-mask-image: url(./icons/open_in_new_FILL0_wght400_GRAD0_opsz48.svg);
}

/* Reactions area: inline reaction buttons. */
.SimpleHistoryLogitem__reactions {
	display: flex;
	gap: var(--sh-spacing-xsmall);
	margin-top: var(--sh-spacing-xsmall);
}

.SimpleHistoryLogitem__reactionButton.components-button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border: 1px solid #e0e0e0;
	border-radius: 100px;
	font-size: 13px;
	line-height: 1.4;
	background: #f5f5f5;
	cursor: pointer;
	min-height: 0;
	height: auto;
}

.SimpleHistoryLogitem__reactionButton.components-button:hover {
	border-color: #c4c4c4;
	background: #ebebeb;
}

.SimpleHistoryLogitem__reactionButton--active.components-button,
.SimpleHistoryLogitem__reactionButton--active.components-button.is-pressed,
.SimpleHistoryLogitem__reactionButton--active.components-button.is-pressed:hover:not(
		:disabled
	) {
	border-color: #b3cce8;
	background: #e0efff;
	color: inherit;
}

.SimpleHistoryLogitem__reactionButton--active.components-button:hover {
	border-color: #99bde0;
	background: #d1e5fa;
}

.SimpleHistoryLogitem__reactionEmoji {
	font-size: 14px;
	line-height: 1;
}

.SimpleHistoryLogitem__reactionCount {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--sh-color-text-secondary, #50575e);
}

.SimpleHistoryLogitem__reactionButton--active
	.SimpleHistoryLogitem__reactionCount {
	color: var(--wp-admin-theme-color, #3858e9);
}

/* Inline "+" button shown after reaction pills. */
.SimpleHistoryLogitem__reactionAddInline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px dashed #ddd;
	border-radius: 100px;
	background: transparent;
	color: #a0a0a0;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.SimpleHistoryLogitem__reactions:hover .SimpleHistoryLogitem__reactionAddInline,
.SimpleHistoryLogitem__reactionAddInline:focus-visible,
.SimpleHistoryLogitem__reactionAddInline[aria-expanded="true"] {
	opacity: 1;
}

.SimpleHistoryLogitem__reactionAddInline:hover {
	border-color: #c4c4c4;
	color: #50575e;
	background: #f5f5f5;
}

/* Quick action reaction button — inherits size from .quickActions .components-button. */

/* Reaction emoji picker popover. */
.sh-ReactionPicker .sh-ReactionPicker__content {
	padding: 8px;
	min-width: 180px;
}

/* Free emoji section — prominent, full size. */
.sh-ReactionPicker__freeSection {
	display: flex;
	gap: 2px;
	justify-content: center;
}

.sh-ReactionPicker__emoji {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 6px;
	background: transparent;
	font-size: 22px;
	cursor: pointer;
	transition:
		transform 0.1s ease,
		background 0.1s ease;
}

.sh-ReactionPicker__emoji:hover:not(:disabled) {
	background: var(--sh-color-surface-hover, #f0f0f1);
	transform: scale(1.2);
}

/* Premium teaser section — compact row of dimmed emojis with link. */
.sh-ReactionPicker__premiumSection {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--sh-color-border, #dcdcde);
	text-decoration: none;
	cursor: pointer;
}

.sh-ReactionPicker__premiumSection:hover .sh-ReactionPicker__premiumText {
	color: var(--wp-admin-theme-color, #3858e9);
}

.sh-ReactionPicker__premiumSection:hover .sh-ReactionPicker__premiumEmoji {
	opacity: 0.7;
}

.sh-ReactionPicker__premiumEmojis {
	display: flex;
	gap: 4px;
}

.sh-ReactionPicker__premiumEmoji {
	font-size: 14px;
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

.sh-ReactionPicker__premiumText {
	font-size: 11px;
	color: var(--sh-color-text-secondary, #757575);
	white-space: nowrap;
	transition: color 0.15s ease;
}

/* Reaction pop animation on click. */
@keyframes sh-reaction-pop {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.5);
	}
	100% {
		transform: scale(1);
	}
}

.SimpleHistoryLogitem__reactionButton--animating
	.SimpleHistoryLogitem__reactionEmoji {
	animation: sh-reaction-pop 0.3s ease-out;
}

/* Actions area: all action buttons in a single flex row. */
.SimpleHistoryLogitem__actions {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 2px;
}

/* Shared sizing for all action items (buttons and dropdown wrapper). */
.SimpleHistoryLogitem__actions > .components-button,
.SimpleHistoryLogitem__actions > .components-dropdown-menu {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.SimpleHistoryLogitem__actions > .components-button {
	padding: 6px;
	color: #757575;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.SimpleHistoryLogitem__actions > .components-button:hover {
	color: #1d2327;
}

/* Reaction icon is visually heavier than the outlined icons — size down slightly. */
.SimpleHistoryLogitem__reactionQuickButton.components-button svg {
	width: 21px;
	height: 21px;
}

/* Three-dot dropdown: dimmed by default, button fills wrapper. */
.SimpleHistoryLogitem__actions > .components-dropdown-menu {
	opacity: 0.3;
	transition: opacity 0.15s ease;
}

.SimpleHistoryLogitem__actions
	> .components-dropdown-menu
	> .components-button {
	width: 36px;
	height: 36px;
	padding: 6px;
	color: #757575;
}

.SimpleHistoryLogitem__actions
	> .components-dropdown-menu
	> .components-button:hover {
	color: #1d2327;
}

/* Show all buttons on hover/focus or when a popover is open. */
.SimpleHistoryLogitem:is(:hover, :focus-within)
	.SimpleHistoryLogitem__actions
	> .components-button,
.SimpleHistoryLogitem:is(:hover, :focus-within)
	.SimpleHistoryLogitem__actions
	> .components-dropdown-menu,
.SimpleHistoryLogitem__actions:has([aria-expanded="true"]) > .components-button,
.SimpleHistoryLogitem__actions:has([aria-expanded="true"])
	> .components-dropdown-menu {
	opacity: 1;
	pointer-events: auto;
}

/* Always show everything on touch devices (no hover). */
@media (hover: none) {
	.SimpleHistoryLogitem__actions > .components-button,
	.SimpleHistoryLogitem__actions > .components-dropdown-menu {
		opacity: 1;
		pointer-events: auto;
	}
}

/*
Key-value list for event details (user profile edits, plugin meta, option
changes). Markup is a <dl> with <dt>/<dd> pairs as direct children; the class
name keeps "Table" from the years it was a <table>.

Laid out as a grid so the key column is exactly as wide as the widest key in
that event, never wider. A real table cannot do this: without a min-width a
long value squeezes the key column until short keys wrap, and with one (the
old min-width: 8em) short keys float away from the left edge.

fit-content(min(16em, 45%)) caps runaway keys (WooCommerce setting labels) so
they wrap instead of pushing every value off to the right, and minmax(0, 1fr)
stops long unbreakable values from stealing width from the keys.
*/
.SimpleHistoryLogitem__keyValueTable {
	display: grid;
	grid-template-columns: fit-content(min(16em, 45%)) minmax(0, 1fr);
	column-gap: 1em;
	row-gap: 2px;
	margin: 0;
}

/*
A logger that adds a block of HTML without a key to a key/value group (a RAW
item) outputs it as a direct child of the <dl>. Span both columns, or it is
squeezed into the key column.
*/
.SimpleHistoryLogitem__keyValueTable > :not(dt):not(dd):not(tbody) {
	grid-column: 1 / -1;
}

.SimpleHistoryLogitem__keyValueTable > dt,
.SimpleHistoryLogitem__keyValueTable > dd {
	margin: 0;
	word-break: break-word;
}

.SimpleHistoryLogitem__keyValueTable > dt {
	text-align: right;
	color: #757575;
	overflow-wrap: anywhere;
}

/*
Third-party loggers may still emit the pre-5.33 markup, a <table> with two
<td> per row. Flatten its rows into the same grid so they render identically.
*/
.SimpleHistoryLogitem__keyValueTable > tbody,
.SimpleHistoryLogitem__keyValueTable > tbody > tr {
	display: contents;
}

.SimpleHistoryLogitem__keyValueTable th,
.SimpleHistoryLogitem__keyValueTable td {
	vertical-align: top;
	word-break: break-word;
}

.SimpleHistoryLogitem__keyValueTable > tbody > tr > :first-child {
	text-align: right;
	color: #757575;
	overflow-wrap: anywhere;
}

.SimpleHistoryLogitem__keyValueTable p {
	margin: 0;
}

.SimpleHistoryLogitem__keyValueTable__addedThing {
	text-decoration: none;
	margin-right: 0.5em;
}

.SimpleHistoryLogitem__keyValueTable__removedThing {
	text-decoration: line-through;
	color: #999;
}

/* wrap span.SimpleHistoryLogitem__inlineDivided around things that should have a bullet between them */
.SimpleHistoryLogitem__inlineDivided {
	white-space: nowrap;
}

/*
Long lists of custom field names have no spaces to break at, so let them wrap
anywhere instead of running off the right edge of the log row.
*/
.SimpleHistoryLogitem__inlineDivided--wrap {
	white-space: normal;
	overflow-wrap: anywhere;
}

.SimpleHistoryLogitem__inlineDivided em {
	color: rgb(119, 119, 119);
	font-style: normal;
}

.SimpleHistoryLogitem__inlineDivided:before {
	/* \b7 = middot, \a0 = space */
	content: "\b7\a0";
	color: var(--sh-color-gray-3);
}

.SimpleHistoryLogitem__inlineDivided:first-child:before {
	content: "";
}

/*
Images/thumbs can be styles nicely
*/
.SimpleHistoryLogitemThumbnail {
	display: inline-block;
	margin: 0.5em 0 0 0;
	padding: 5px;
	border: 1px solid #ddd;
	border-radius: 2px;
}

.SimpleHistoryLogitemThumbnailLink {
	display: inline-block;
}

.SimpleHistoryLogitemThumbnail img {
	/*
	photoshop-like background that represents transparency
	so user can see that an image have transparency
	*/
	display: block;
	background-image: url("data:image/gif;base64,R0lGODlhEAAQAIAAAOXl5f///yH5BAAAAAAALAAAAAAQABAAAAIfhG+hq4jM3IFLJhoswNly/XkcBpIiVaInlLJr9FZWAQA7");
	max-width: 200px;
	max-height: 125px;
	height: auto;
}

.SimpleHistoryLogitemThumbnail--small img {
	max-width: 100px;
	max-height: 63px;
}

/* remove border below */
.SimpleHistoryLogitem--occasionsOpened::before {
	opacity: 0;
}

/* when occasions is loaded and have loaded hide the "show occasions"-link*/
.SimpleHistoryLogitem--occasionsOpening .SimpleHistoryLogitem__occasionsLink,
.SimpleHistoryLogitem--occasionsOpened .SimpleHistoryLogitem__occasionsLink {
	display: none;
}

/* hide the "loading" and "loaded occasions" text */
.SimpleHistoryLogitem__occasionsLoading,
.SimpleHistoryLogitem__occasionsLoaded {
	display: none;
}

/* show texts during load and when load is done */
.SimpleHistoryLogitem--occasionsOpening .SimpleHistoryLogitem__occasionsLoading,
.SimpleHistoryLogitem--occasionsOpened .SimpleHistoryLogitem__occasionsLoaded {
	display: block;
}

/* occasions are added to a wrapper element */
.SimpleHistoryLogitem__occasionsItemsWrap {
	margin: 0;
	padding: 0;
}

.SimpleHistoryLogitem__occasionsItems {
	opacity: 0;
	max-height: 0;
	transition:
		opacity 0.25s ease-out 0.5s,
		max-height 2s ease-out 0s,
		margin 0.25s 0s ease-out;
	background-color: white;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
}

.SimpleHistoryLogitem__occasionsItems.haveOccasionsAdded {
	opacity: 1;
	max-height: 3000px;
	margin-left: -5px;
	margin-right: -5px;
}

.SimpleHistoryLogitem--occasion {
	opacity: 0;
	padding-top: 0;
	padding-bottom: 0;
	max-height: 0;
	border-top-width : 0;
	border-bottom-width : 0;
}
*/

/*
.SimpleHistoryLogitem--occasionsOpened:after,
.SimpleHistoryLogitem--occasion:after {
	content: "";
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 20px;
	width: 2px;
	background: rgba(0,0,0,0.3);
	border-radius: 3px / 7px;
}
*/

/* when the occasions log rows have been added show them in some kinda fancy way */
.SimpleHistoryLogitem--occasionAdded {
	max-height: 1000px;
	opacity: 1;
	border-top-width: 1px;
	border-bottom-width: 1px;
	padding-top: 15px;
	padding-bottom: 15px;
}

/*
Customizations for the dashboard,
i.e. the log is inside a .postbox element.
*/
#simple_history_dashboard_widget .postbox-header {
	background-image: url(./simple-history-logo-icon.svg);
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: 12px center;
}

.postbox.closed .sh-Dashboard-settingsLink {
	display: none;
}

.sh-Dashboard-settingsLink {
	background-color: #787c82;
	mask-image: url(./icons/settings_FILL0_wght400_GRAD0_opsz48.svg);
	-webkit-mask-image: url(./icons/settings_FILL0_wght400_GRAD0_opsz48.svg);
	mask-size: 100%;
	-webkit-mask-size: 100%;
}

.sh-Dashboard-settingsLink:focus {
	box-shadow:
		0 0 0 1px #4f94d4,
		0 0 2px 1px rgba(79, 148, 212, 0.8);
	mask-image: none;
	background-color: transparent;
	background-image: url(./icons/settings_FILL0_wght400_GRAD0_opsz48.svg);
}

#simple_history_dashboard_widget .postbox-header h2 {
	margin-left: 25px;
}

#simple_history_dashboard_widget .inside {
	padding: 0;
	margin-top: 0;
}

.postbox .SimpleHistoryLogitem__senderImage {
	width: 24px;
	height: 24px;
}

.postbox
	.SimpleHistoryLogitem--initiator-wp
	.SimpleHistoryLogitem__senderImage:before,
.postbox
	.SimpleHistoryLogitem--initiator-wp_cli
	.SimpleHistoryLogitem__senderImage:before,
.postbox
	.SimpleHistoryLogitem--initiator-web_user
	.SimpleHistoryLogitem__senderImage:before,
.postbox
	.SimpleHistoryLogitem--initiator-other
	.SimpleHistoryLogitem__senderImage:before {
	font-size: 24px;
}

.postbox .SimpleHistoryLogitem__secondcol {
	margin-left: 40px;
}

.postbox .SimpleHistoryLogitem__text {
	font-size: 1em;
}

.postbox .SimpleHistoryLogitem__details p {
	margin-top: 0;
	margin-bottom: 0;
}

.postbox .SimpleHistoryLogitem__text,
.postbox .SimpleHistoryLogitem__details,
.postbox .SimpleHistoryLogitem__details p {
	line-height: 1.5;
}

.postbox .SimpleHistoryPaginationCurrentPage {
	vertical-align: top;
}

/*
	.postbox .SimpleHistoryLogitem__details {
		display: none;
	}
	*/

/* Dashboard widget: match WP core dashboard padding. */
.SimpleHistoryReactRoot.is-dashboard .SimpleHistoryLogitem {
	padding-top: var(--sh-dashboard-padding-y);
	padding-bottom: var(--sh-dashboard-padding-y);
	border-bottom: 1px solid #f0f0f1;
}

.SimpleHistoryReactRoot.is-dashboard .SimpleHistoryLogitem:last-child {
	border-bottom: none;
}

.SimpleHistoryReactRoot.is-dashboard .SimpleHistoryLogitems {
	border-bottom: none;
}

/* Dashboard widget: truncate long header to keep single-line. */
.SimpleHistoryReactRoot.is-dashboard .SimpleHistoryLogitem__header {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Dashboard widget: no extra padding before date separators. */
.SimpleHistoryReactRoot.is-dashboard
	.SimpleHistoryLogitem:has(
		+ .SimpleHistoryLogitem .SimpleHistoryEventSeparator--hasLabel
	) {
	padding-bottom: var(--sh-dashboard-padding-y);
}

/* Dashboard widget: date headings as clean inline labels. */
.SimpleHistoryReactRoot.is-dashboard .SimpleHistoryEventSeparator {
	border-top: none;
	margin-top: 0;
	min-height: auto;
	width: auto;
	margin-left: 0;
	justify-content: flex-start;
}

#dashboard-widgets
	.SimpleHistoryReactRoot.is-dashboard
	.SimpleHistoryEventSeparator__label {
	transform: none;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none;
	padding: 0;
	margin: 4px 0 var(--sh-dashboard-padding-y);
	font-size: var(--sh-font-size-normal);
	font-weight: 600;
	line-height: 1.4;
	max-height: none;
	color: var(--sh-color-gray-3);
}

/* Dashboard widget: tighter action links. */
.SimpleHistoryReactRoot.is-dashboard .SimpleHistoryLogitem__actionLinks {
	gap: var(--sh-spacing-xsmall) 0;
	margin-top: var(--sh-spacing-xsmall);
	margin-right: 0;
	margin-bottom: 0;
	margin-left: calc(var(--sh-spacing-xsmall) * -1);
}

/* The dashboard widget and the compact log both drop the icons: at that
   density a row of small glyphs is noise, and the labels alone read faster. */
:is(
		.SimpleHistoryReactRoot.is-dashboard,
		.SimpleHistoryLogitem--variant-compact
	)
	.SimpleHistoryLogitem__actionLinks__link {
	padding-left: var(--sh-spacing-xsmall);
	padding-right: var(--sh-spacing-xsmall);
}

:is(
		.SimpleHistoryReactRoot.is-dashboard,
		.SimpleHistoryLogitem--variant-compact
	)
	.SimpleHistoryLogitem__actionLinks__link
	.sh-Icon {
	display: none;
}

/* Only the icon-less views need the dot: with icons the labels already have a
   boundary. The separator is a real element rather than a ::before on the
   link, so it stays out of the link's accessible name — see the comment in
   EventActionLinks.jsx. It sits between two paddings, so the hover background
   wraps the label only and never the dot. */
.SimpleHistoryLogitem__actionLinks__item {
	display: inline-flex;
	align-items: center;
	position: relative;
}

.SimpleHistoryLogitem__actionLinks__separator {
	display: none;
}

/* Out of flow, like the ::before this replaced, so the dot is painted in the
   gap between two links and adds no width of its own. In flow it would be a
   third thing the flex gap applies to on both sides. */
:is(
		.SimpleHistoryReactRoot.is-dashboard,
		.SimpleHistoryLogitem--variant-compact
	)
	.SimpleHistoryLogitem__actionLinks__separator {
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	color: var(--sh-color-gray-2);

/* The box spans the whole gap between the two labels — the flex gap plus
	   the padding each link carries — so the centred glyph lands midway
	   between them instead of hard against the one on its left. */
	left: calc(var(--sh-spacing-xsmall) * -1);
	width: var(--sh-spacing-small);
}

/*
 * Compact view of the main event log (issue 240).
 * Same density as the dashboard widget, but kept separate from the
 * .is-dashboard rules so a change to one never moves the other.
 */
/* One value for the row's own padding, because the separator has to cancel it
   exactly: its negative margin and its min-height both read this. Two numbers
   that drifted apart here once already, and the symptom was content glued to
   the hairline below it and floating away from the one above. */
.SimpleHistoryLogitem--variant-compact {
	--sh-compact-row-padding: 6px;

padding-top: var(--sh-compact-row-padding);
	padding-bottom: var(--sh-compact-row-padding);
}

/* The row above a labelled divider gets no extra air: there is no pill sitting
   on the line for it to clear. */
.SimpleHistoryLogitem--variant-compact:has(
		+ .SimpleHistoryLogitem .SimpleHistoryEventSeparator--hasLabel
	) {
	padding-bottom: var(--sh-compact-row-padding);
}

/* Without a label the separator draws nothing but the hairline between two
   rows, so it does not need the 30px the label pill reserves — that height was
   most of a compact row's air. The negative margin puts the line on the row's
   real top edge, and the min-height then gives the content the same air below
   the line as the padding gives it above the next one. Drop the min-height and
   rows lose their top padding entirely: content ends up glued to the line
   below it and floating away from the line above. */
.SimpleHistoryLogitem--variant-compact .SimpleHistoryEventSeparator {
	margin-top: calc(var(--sh-compact-row-padding) * -1);
	min-height: var(--sh-compact-row-padding);
}

/* A day label here is a caption, not a chip — the same treatment the dashboard
   widget already ships (see the .is-dashboard rules above). The centred pill it
   replaces was the only centred thing in a view whose every other element is
   flush left, and it was also the heaviest type on screen: 12px/600 in near
   black, above a 15px message in a lighter weight. Grey it and the label ranks
   below the content it introduces, which is the right way round.

It was expensive too: 30px of reserved height plus 12px of extra padding on
   the row above, so 48px of clear space for one word. This costs 42px, and a
   plain row break in the same list costs 7px.

The hairline stays. It is this row's own rule, full bleed, lining up with the
   rules above and below it — dropping it would leave the day break with nothing
   to sit on. */
.SimpleHistoryLogitem--variant-compact .SimpleHistoryEventSeparator--hasLabel {
	min-height: 0;
	justify-content: flex-start;

/* The separator is full bleed, so its content edge sits a medium step to
	   the left of the row's. Put that step back or the label hangs 16px left
	   of the avatar it introduces. */
	padding-left: var(--sh-spacing-medium);
}

.SimpleHistoryLogitem--variant-compact .SimpleHistoryEventSeparator__label {
	transform: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	max-height: none;

/* Three row-paddings above, one below. The asymmetry is the point: a day
	   label belongs to the day under it, so it has to sit closer to the event
	   it introduces than to the last event of the day before. Equal margins
	   leave it floating between the two, and a smaller bottom margin than this
	   glues it to the avatar line. */
	margin: calc(var(--sh-compact-row-padding) * 3) 0
		var(--sh-compact-row-padding);
	font-weight: 600;
	line-height: 1.4;
	color: var(--sh-color-gray-3);
}

/* The avatar moves into the header line (see EventHeader.jsx), so there is no
   left column to indent past: the avatar, the message and the action links
   all share the row's left edge. */
.SimpleHistoryLogitem--variant-compact .SimpleHistoryLogitem__secondcol {
	margin-left: 0;
}

/* line-height: 0 keeps the box exactly as tall as the avatar. With the
   inherited line-height the span was 23px for an 18px image, and an inline
   box that tall stretches the header's line box — which showed up as more
   air above the message than below it. */
.SimpleHistoryLogitem__headerAvatar {
	display: inline-block;
	vertical-align: middle;
	margin-right: var(--sh-spacing-xsmall);
	line-height: 0;
}

.SimpleHistoryLogitem__headerAvatar
	.sh-UserCard__trigger.components-button.is-link {
	display: block;
	padding: 0;
	height: auto;
	line-height: 0;
}

.SimpleHistoryLogitem__headerAvatar .SimpleHistoryLogitem__senderImage {
	display: block;
}

/* The base rule only drops the middot from a divided item that is the header's
   :first-child, and in this view it never is: the avatar comes first, and in
   surrounding-events mode the "#123" span comes after that. Key it on the
   dividers themselves instead — the first one carries no middot whatever
   undivided elements happen to sit before it. */
.SimpleHistoryLogitem__header
	.SimpleHistoryLogitem__inlineDivided:not(
		:where(
				.SimpleHistoryLogitem__inlineDivided
					~ .SimpleHistoryLogitem__inlineDivided
			)
	):before {
	content: "";
}

.SimpleHistoryLogitem--variant-compact .SimpleHistoryLogitem__senderImage {
	width: 18px;
	height: 18px;
	margin-top: 0;
}

.SimpleHistoryLogitem--variant-compact.SimpleHistoryLogitem--initiator-wp
	.SimpleHistoryLogitem__senderImage:before,
.SimpleHistoryLogitem--variant-compact.SimpleHistoryLogitem--initiator-wp_cli
	.SimpleHistoryLogitem__senderImage:before,
.SimpleHistoryLogitem--variant-compact.SimpleHistoryLogitem--initiator-web_user
	.SimpleHistoryLogitem__senderImage:before,
.SimpleHistoryLogitem--variant-compact.SimpleHistoryLogitem--initiator-other
	.SimpleHistoryLogitem__senderImage:before {
	font-size: 18px;
}

/* The "CLI" overlay is positioned for the 32px avatar. */
.SimpleHistoryLogitem--variant-compact.SimpleHistoryLogitem--initiator-wp_cli
	.SimpleHistoryLogitem__senderImage:after {
	line-height: 18px;
	font-size: 7px;
}

.SimpleHistoryLogitem--variant-compact .SimpleHistoryLogitem__header {
	margin-top: 0;
	line-height: 1.5;
}

/* The date is a link-variant Button, which carries the 30px height every
   WordPress button has. */
.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__header
	.components-button {
	height: auto;
	line-height: 1.5;
}

/* The whole meta line goes grey at rest and blue once the row is hovered or
   focused — the same deal the action links take, and for the same reason.
   Measured over 12 rows, name and timestamp together were 1696px of blue
   text against 3969px of black message, and 1190px of that blue said
   "13 minutes ago" on every row: the loudest colour in the view was carrying
   its least distinguishing datum, right down the path the eye scans. The name
   is a <strong>, so weight already marks it as the who and colour on top of
   that is redundant. Blue now means one thing per row — the objects named in
   the message, which are the things you would click to go somewhere.

Both are still controls (the permalink and the user card), so they keep the
   underline on their own hover. */
.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__header
	.components-button.is-link {
	color: var(--sh-color-gray-3);
	text-decoration: none;
}

.SimpleHistoryLogitem--variant-compact:is(:hover, :focus-within)
	.SimpleHistoryLogitem__header
	.components-button.is-link {
	color: #2271b1;
}

.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__header
	.components-button.is-link:hover,
.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__header
	.components-button.is-link:focus-visible {
	color: #135e96;
	text-decoration: underline;
}

/* 1.4, not the 1.5 this started at: at 15px that was 22.5px of line box, which
   made the message in the *compact* view more loosely leaded than the same
   message in the detailed one (21px). */
.SimpleHistoryLogitem--variant-compact .SimpleHistoryLogitem__text {
	line-height: 1.4;
	margin-top: 1px;
}

/* The links keep their own line under the message, tight against it. The
   negative left margin cancels the link's own padding so the first label
   lines up with the avatar and the message above it. */
.SimpleHistoryLogitem--variant-compact .SimpleHistoryLogitem__actionLinks {
	gap: var(--sh-spacing-xsmall) 0;
	margin-top: 1px;
	margin-bottom: 0;
	margin-left: calc(var(--sh-spacing-xsmall) * -1);
}

.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__actionLinks__link {
	padding-top: 0;
	padding-bottom: 0;
}

/* The details disclosure shares the action links line, so it takes their
   metrics and their colour: grey at rest, blue once the row is hovered or
   focused, rather than the standing blue a disclosure has elsewhere. */
.SimpleHistoryLogitem--variant-compact .SimpleHistoryLogitem__detailsToggle {
	padding: 0 var(--sh-spacing-xsmall);
	color: var(--sh-color-gray-3);
	line-height: inherit;
}

.SimpleHistoryLogitem--variant-compact:is(:hover, :focus-within)
	.SimpleHistoryLogitem__detailsToggle {
	color: #2271b1;
}

.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__detailsToggle:hover,
.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__detailsToggle:focus-visible {
	color: #135e96;
}

/* The details sit under the links they were opened from, not tucked against
   the message the way they are in the detailed row.

They also get a tinted panel, which the detailed row does not need: there,
   the avatar column runs down the side of every row and keeps the details
   attached to the event above them. Compact dropped that column, so an open
   diff would otherwise float between two hairlines with nothing saying which
   event it belongs to. The negative side margins let the panel bleed past the
   text without moving the text off the row's left edge. */
.SimpleHistoryLogitem--variant-compact .SimpleHistoryLogitem__details {
	margin-top: var(--sh-spacing-small);
	margin-bottom: var(--sh-spacing-xsmall);
	margin-left: calc(var(--sh-spacing-medium) * -1);
	margin-right: calc(var(--sh-spacing-medium) * -1);
	padding: var(--sh-spacing-small) var(--sh-spacing-medium);
	border-radius: var(--sh-border-radius);
	/* Lighter than --sh-color-gray-4, which is the hover background for links
	   and buttons: a panel in that same grey would swallow their hover state. */
	background: #f6f7f7;
}

/* Reaction pills are sized for the detailed row, where a 24px pill sits under
   a 32px avatar. In a compact row they are the tallest thing below the message
   and outweigh the links line right above them, so scale them to the same
   order as that line. */
.SimpleHistoryLogitem--variant-compact .SimpleHistoryLogitem__reactions {
	margin-top: 2px;
	gap: 3px;
}

.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__reactionButton.components-button {
	gap: 3px;
	padding: 1px 6px;
}

.SimpleHistoryLogitem--variant-compact .SimpleHistoryLogitem__reactionEmoji {
	font-size: 12px;
}

.SimpleHistoryLogitem--variant-compact .SimpleHistoryLogitem__reactionCount {
	font-size: 11px;
}

.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__reactionAddInline {
	width: 19px;
	height: 19px;
	font-size: 12px;
}

/* A shrink-to-fit key column is sized by the longest key in that one event, so
   two open rows line their values up at two different x. Fix the column and
   they agree. */
.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__details
	.SimpleHistoryLogitem__keyValueTable {
	grid-template-columns: 120px minmax(0, 1fr);
}

/* The occasions disclosure is the same kind of control as the action links
   right above it, so it takes the same metrics and the same grey instead of a
   standing blue at twice the height. */
.SimpleHistoryLogitem--variant-compact .SimpleHistoryLogitem__occasions {
	margin-top: 1px;
	font-size: var(--sh-font-size-small);
	line-height: 1.4;
}

.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__occasions
	.SimpleHistory__disclosureToggle {
	padding: 0 var(--sh-spacing-xsmall);
	margin-left: calc(var(--sh-spacing-xsmall) * -1);
	color: var(--sh-color-gray-3);
	line-height: inherit;
}

.SimpleHistoryLogitem--variant-compact:is(:hover, :focus-within)
	.SimpleHistoryLogitem__occasions
	.SimpleHistory__disclosureToggle {
	color: #2271b1;
}

.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__occasions
	.SimpleHistory__disclosureToggle:hover,
.SimpleHistoryLogitem--variant-compact
	.SimpleHistoryLogitem__occasions
	.SimpleHistory__disclosureToggle:focus-visible {
	color: #135e96;
}

/* Dashboard widget: stats summary row. Fixed min-height prevents shift when skeleton swaps to real content. */
.sh-DashboardWidget-stats {
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-xsmall);
	padding: var(--sh-dashboard-padding-y) var(--sh-dashboard-padding-x);
	min-height: 21px;
	font-size: var(--sh-font-size-normal);
	color: #50575e;
	border-bottom: 1px solid #f0f0f1;
}

.sh-DashboardWidget-stats > svg {
	fill: #787c82;
	flex-shrink: 0;
}

.sh-DashboardWidget-stats__separator {
	margin: 0 0.4em;
	color: #c3c4c7;
}

/* Dashboard widget: clickable stats row — whole row links to activity log. */
a.sh-DashboardWidget-stats--link {
	text-decoration: none;
	color: #50575e;
	cursor: pointer;
}

a.sh-DashboardWidget-stats--link:hover {
	background: #f6f7f7;
}

/* Dashboard widget: search row wrapper. */
.sh-DashboardWidget-searchRow {
	padding: var(--sh-dashboard-padding-y) var(--sh-dashboard-padding-x);
	border-bottom: 1px solid #f0f0f1;
}

.sh-DashboardWidget-searchRow__row {
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-small);
}

.sh-DashboardWidget-search {
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-xsmall);
	flex: 1;
	min-width: 0;
}

.sh-DashboardWidget-search__input {
	flex: 1;
	min-width: 0;
}

.sh-DashboardWidget-searchRow__filtersLink {
	font-size: var(--sh-font-size-small);
	text-decoration: none;
	margin-left: auto;
}

.sh-DashboardWidget-searchRow__filtersLink:hover {
	text-decoration: underline;
}

.sh-DashboardWidget-searchRow__filtersLink.is-placeholder {
	color: #c3c4c7;
	cursor: default;
}

/* Dashboard widget: "View all activity" link — full-width click target. */
.sh-DashboardWidget-viewAll a {
	display: block;
	padding: 12px var(--sh-dashboard-padding-x);
	text-decoration: none;
	font-size: var(--sh-font-size-normal);
}

.sh-DashboardWidget-viewAll a:hover {
	background-color: var(--sh-color-item-hover);
	text-decoration: underline;
}

.sh-DashboardWidget-viewAll {
	border-top: 1px solid #f0f0f1;
}

.sh-DashboardWidget-viewAll__placeholder {
	display: block;
	padding: 12px var(--sh-dashboard-padding-x);
	font-size: var(--sh-font-size-normal);
	color: #c3c4c7;
	cursor: default;
}

/* Dashboard widget: sparse-state notice when few events in the 7-day window. */
.sh-DashboardWidget-sparseNotice {
	margin: 0;
	padding: var(--sh-dashboard-padding-y) var(--sh-dashboard-padding-x);
	font-size: var(--sh-font-size-small);
	color: #646970;
	border-top: 1px solid #f0f0f1;
}

/* Dashboard widget: rotating tip line. */
.sh-DashboardWidget-tip {
	margin: 0;
	padding: var(--sh-dashboard-padding-y) var(--sh-dashboard-padding-x);
	font-size: var(--sh-font-size-small);
	color: #646970;
	border-top: 1px solid #f0f0f1;
}

/*
 * Tip links are underlined rather than coloured, so they stay quiet enough that
 * most tips can carry one. Underline alone is also the accessible cue, since it
 * does not depend on colour.
 */
.sh-DashboardWidget-tipLink {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Dashboard widget: main container. Spacing matches WP core dashboard widgets (12px/8px). */
.sh-DashboardWidget {
	--sh-dashboard-padding-x: 12px;
	--sh-dashboard-padding-y: 8px;
}

/* Dashboard widget: content area. Overflow is managed by JS during height animation only. */
.sh-DashboardWidget-content {
	height: auto;
}

/* Dashboard widget: skeleton shimmer animation. */
@keyframes sh-skeleton-shimmer {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: 400px 0;
	}
}

/* Dashboard widget: skeleton event rows. */
.sh-DashboardWidget-skeleton {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sh-DashboardWidget-skeleton__row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: var(--sh-dashboard-padding-y) var(--sh-dashboard-padding-x);
	border-bottom: 1px solid #f0f0f1;
}

.sh-DashboardWidget-skeleton__row:last-child {
	border-bottom: none;
}

.sh-DashboardWidget-skeleton__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex-shrink: 0;
	background: linear-gradient(90deg, #f0f0f1 25%, #e8e8e9 50%, #f0f0f1 75%);
	background-size: 400px 100%;
	animation: sh-skeleton-shimmer 1.5s infinite linear;
}

.sh-DashboardWidget-skeleton__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
}

.sh-DashboardWidget-skeleton__line {
	height: 12px;
	border-radius: 3px;
	background: linear-gradient(90deg, #f0f0f1 25%, #e8e8e9 50%, #f0f0f1 75%);
	background-size: 400px 100%;
	animation: sh-skeleton-shimmer 1.5s infinite linear;
}

.sh-DashboardWidget-skeleton__line--short {
	width: 55%;
}

.sh-DashboardWidget-skeleton__line--long {
	width: 80%;
}

.sh-DashboardWidget-skeleton__line--stats {
	width: 180px;
	height: 14px;
}

/* Dashboard widget: occasions full-width with subtle background.
   The wrapper lives inside secondcol (margin-left: 40px) inside the event li (padding: 16px).
   Pull the background out by 56px left and 16px right to reach the widget edges. */
.SimpleHistoryLogitem__occasionsItemsWrap.is-dashboard
	.SimpleHistoryLogitem__occasionsItems {
	box-shadow: none;
	background: #f6f7f7;
	margin-left: calc(-40px - var(--sh-spacing-medium));
	margin-right: calc(-1 * var(--sh-spacing-medium));
}

.SimpleHistoryLogitem__occasionsItemsWrap.is-dashboard
	.SimpleHistoryLogitem__occasionsItems
	.SimpleHistoryLogitem {
	padding-top: 6px;
	padding-bottom: 6px;
}

/* // end dashboard */

/*
Styles for filter
*/
/*.simple-history-filters {
	float: left;
	width: 400px;
	margin-left: 50px;
}
*/

.SimpleHistoryLogitems__debug {
	font-family: monospace;
	white-space: pre;
}

/*
Pagination, below logRows
*/
.SimpleHistoryPaginationPages {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	background: white;
}

.postbox .SimpleHistoryPaginationPages {
	padding-top: 8px;
	padding-bottom: 8px;
}

.SimpleHistoryPaginationLinks .SimpleHistoryPaginationLink {
	vertical-align: baseline;
	min-width: 30px;
	min-height: 30px;
	margin: 0;
	padding: 0 4px;
	font-size: 16px;
	line-height: 1.625;
	text-align: center;
}

.SimpleHistoryPaginationLink.SimpleHistoryPaginationLink.disabled {
	color: rgb(170, 170, 170);
	background: rgb(238, 238, 238);
	background: rgba(0, 0, 0, 0.05);
	cursor: default;
}

.SimpleHistoryPaginationCurrentPage {
	margin: 0 2px 0 0;
	font-size: 13px;
	text-align: center;
}

.SimpleHistoryPaginationInput .total-pages {
	margin-right: 2px;
}

/*
animations/effects
*/
.SimpleHistory-isLoadingPage .SimpleHistoryLogitemsWrap {
	opacity: 0.5;
}

/*
Modal window with detailss
*/
.SimpleHistory-modal__background {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: 10;
}

.SimpleHistory-modal__content {
	background: white;
	border-radius: var(--sh-border-radius);
	border: 1px solid rgba(0, 0, 0, 0.2);
	bottom: 60px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	left: 280px; /* admin menu width is 160 px*/
	position: fixed;
	overflow: auto;
	right: 120px;
	top: 60px;
	z-index: 15;
	-webkit-overflow-scrolling: touch;
}

@media only screen and (max-width: 960px) {
	.SimpleHistory-modal__background {
		z-index: 9991; /* #adminmenuwrap has z-index 9990 */
	}

.SimpleHistory-modal__content {
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		z-index: 9991; /* #adminmenuwrap has z-index 9990 */
	}
}

.SimpleHistory-modal__contentInner {
	padding: 15px;
}

.SimpleHistory-modal__contentSpinner {
	margin-left: 20px;
	margin-top: 20px;
}

.SimpleHistory-modal__contentClose {
	position: absolute;
	top: 10px;
	right: 10px;
}

.SimpleHistory-modal__contentClose button {
	cursor: pointer;
}

/* if wp left menu is collapsed .folded is added and menu width is 36 px */
.folded .SimpleHistory-modal__content {
	left: 156px; /* admin menu width is 160 px */
}

@media only screen and (max-width: 850px) {
	.SimpleHistory-modal__content {
		left: 10px; /* admin menu width is 160 px */
	}
}

.SimpleHistory-modal__content--enter {
	transition: all 0.15s ease-out;
	-webkit-transform: scale(0.95);
	transform: scale(0.95);
	opacity: 0;
}

.SimpleHistory-modal__content--enter-active {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.SimpleHistory-modal__content--leave-active {
	opacity: 0;
	-webkit-transform: scale(0.95);
	transform: scale(0.95);
}

.SimpleHistory-modal__leave-active {
	transition:
		all 0.15s 0.15s ease-out,
		visibility 0s 0.3s;

opacity: 0;
	visibility: hidden;
}

.admin-bar .SimpleHistory-modal__content {
	top: 92px; /* admin bar height is 32 px*/
}

@media only screen and (max-width: 960px) {
	.admin-bar .SimpleHistory-modal__content {
		top: 10px;
		z-index: 100000;
	}
}

/* style the logRow a bit more when shown in modal */
.SimpleHistory-modal .SimpleHistoryLogitem__header {
	font-size: 16px;
}

.SimpleHistory-modal .SimpleHistoryLogitem__text,
.SimpleHistory-modal .SimpleHistoryLogitem__details,
.SimpleHistory-modal .SimpleHistoryLogitem__details p,
.SimpleHistory-modal .SimpleHistoryLogitem__moreDetails,
.SimpleHistory-modal .SimpleHistoryLogitem__moreDetails p {
	font-size: 18px;
}

.SimpleHistory-modal .SimpleHistoryLogitem:hover {
	background: inherit;
}

.SimpleHistoryLogitem__moreDetails {
	border-top: 1px solid rgb(229, 229, 229);
	margin-top: 20px;
}

.SimpleHistoryLogitem__moreDetailsHeadline {
	font-size: 14px;
	font-weight: bold;
	padding: 0;
	margin-top: 20px;
	margin-bottom: 0;
}

.SimpleHistory-modal .SimpleHistoryLogitem__moreDetails p {
	font-size: 14px;
}
/**
 * Table with more details.
 * Shown in modal when event details are shown.
 */
.SimpleHistoryLogitem__moreDetailsContext {
	width: 100%;
	font-family: monospace;
	white-space: pre-wrap;
	font-size: 12px;
	border-collapse: collapse;
}

.SimpleHistoryLogitem__moreDetailsContext th,
.SimpleHistoryLogitem__moreDetailsContext td {
	padding: 4px;
	padding-right: 20px;
	text-align: left;
	vertical-align: top;
}

.SimpleHistoryLogitem__moreDetailsContext th:first-child,
.SimpleHistoryLogitem__moreDetailsContext td:first-child {
	width: 300px;
}

.SimpleHistoryLogitem__moreDetailsContext tr:nth-child(odd) {
	background-color: #eee;
}

@media only screen and (max-width: 850px) {
	.SimpleHistoryLogitem__moreDetails {
		margin-left: -60px;
	}

/* make table less table-like on small screens by putting tds below/after each other
	   instead of next to each other */
	.SimpleHistoryLogitem__moreDetailsContext th:first-child,
	.SimpleHistoryLogitem__moreDetailsContext td:first-child {
		display: block;
		font-weight: bold;
	}

.SimpleHistoryLogitem__moreDetailsContext th:nth-child(2),
	.SimpleHistoryLogitem__moreDetailsContext td:nth-child(2) {
		display: block;
		margin-bottom: 1em;
	}
}

.SimpleHistory-modal
	.SimpleHistoryLogitem--initiator-web_user
	.SimpleHistoryLogitem__secondcol {
	margin-left: 0;
}

/* wordpress as initiator = add wordpress icon */
/* anonymous user as initiator = plain user image */
/* other as initiator = admin-generic gear icon */
.SimpleHistoryLogitem--initiator-wp .SimpleHistoryLogitem__senderImage:before,
.SimpleHistoryLogitem--initiator-wp_cli
	.SimpleHistoryLogitem__senderImage:before,
.SimpleHistoryLogitem--initiator-web_user
	.SimpleHistoryLogitem__senderImage:before,
.SimpleHistoryLogitem--initiator-other
	.SimpleHistoryLogitem__senderImage:before {
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font: normal 32px/1 "dashicons";
	vertical-align: top;
	color: #999;
}

.SimpleHistoryLogitem--initiator-wp .SimpleHistoryLogitem__senderImage:before,
.SimpleHistoryLogitem--initiator-wp_cli
	.SimpleHistoryLogitem__senderImage:before {
	content: "\f120";
}

.SimpleHistoryLogitem--initiator-wp_cli
	.SimpleHistoryLogitem__senderImage:after {
	content: "CLI";
	position: absolute;
	background: rgba(255, 255, 255, 0.7);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	line-height: 36px;
	text-align: center;
	font-family: monospace;
	font-size: 12px;
}

.SimpleHistoryLogitem--initiator-web_user
	.SimpleHistoryLogitem__senderImage:before {
	content: "\f110";
}

.SimpleHistoryLogitem--initiator-other
	.SimpleHistoryLogitem__senderImage:before {
	content: "\f223";
}

.SimpleHistoryQuickStats {
	font-size: var(--sh-font-size-medium);
}

.SimpleHistoryQuickStats a {
	text-decoration: none;
}

/**
 * span is used as tooltip. The tooltip is text with dotted underline and the tooltip is shown on hover, using
 * built in browser tooltip.
 */
.sh-Tooltip {
	text-decoration: dotted underline;
	text-underline-offset: 2px;
	cursor: help;
}

/**
 * An icon that is used as tooltip.
 */
.sh-TooltipIcon {
	--sh-icon-size: 1.2em;
	cursor: help;
	top: -0.1em;
	margin-left: 0.25em;
	opacity: 0.6;
}

/* if not hits when using filter function + if ajax error */

.SimpleHistory--hasNoHits .SimpleHistoryLogitems__pagination {
	display: none;
}

.SimpleHistory--hasNoHits .SimpleHistoryLogitems {
	display: none;
}

.SimpleHistoryLogitems__noHits {
	display: none;
}

.SimpleHistory--hasNoHits .SimpleHistoryLogitems__noHits,
.SimpleHistory--ajaxHasErrors .SimpleHistoryLogitems__ajaxError {
	display: block;
	padding: 20px;
}

.SimpleHistory--ajaxHasErrors .SimpleHistoryLogitems__ajaxError {
	max-height: 20em;
	overflow: auto;
}

.postbox .SimpleHistory--hasNoHits .SimpleHistoryLogitems__noHits {
	margin-left: 13px;
	margin-right: 13px;
}

.SimpleHistoryLogitems__ajaxError__infoMessage {
	background: rgb(255, 255, 183);
	padding: 10px;
	font-weight: bold;
}

/* diff contents can be very high sometimes, so we limit the height and add scrollbars in those cases */
.SimpleHistory__diff__contents {
	max-height: 11em;
	overflow: hidden;
	position: relative;
	/* https://github.com/bonny/WordPress-Simple-History/issues/530 */
	scrollbar-gutter: stable both-edges;
}

.SimpleHistory__diff__contents--noContentsCrop {
	max-height: none;
}

.SimpleHistory__diff__contents:hover,
.SimpleHistory__diff__contents:focus {
	overflow-y: auto;
}

/*
Cropping used to be silent — a long diff just stopped, with nothing to say more
existed, which on a long diff can hide most of a recorded change while the row
still looks complete. A fade marks the crop line and a toggle opens the diff in
place. Both are added only to diffs that actually overflow, by
useExpandableDiffs.js.

A mask rather than a gradient overlay, for two reasons. It fades the content
itself, so it works on rows that are not white — newly polled events and the
highlighted permalink target both tint the row behind the diff. And it is
anchored to the element's own box, so it stays at the bottom edge when the user
hovers and scrolls inside the box, instead of drifting up over the text they
are reading.

Kept deliberately shallow. The fade can only ever be a supporting cue: whether
it reads at all depends on what happens to sit at the crop line, and grey markup
on white fades to almost nothing. The button below carries the message.
*/
.SimpleHistory__diff__contents--isCropped {
	-webkit-mask-image: linear-gradient(
		to bottom,
		rgb(0, 0, 0) calc(100% - 1.5em),
		rgba(0, 0, 0, 0) 100%
	);
	mask-image: linear-gradient(
		to bottom,
		rgb(0, 0, 0) calc(100% - 1.5em),
		rgba(0, 0, 0, 0) 100%
	);
}

/*
Expanding lifts the crop to a tall bound rather than removing it. Letting a
long diff grow to its full height pushes the rest of the page — including the
button that collapses it again — far below the viewport, so the action cannot
be undone without hunting for the control. Bounded, the row stays a row and the
scrollbar carries "there is more" on its own.
*/
.SimpleHistory__diff__contents--isExpanded {
	max-height: 40em;
	overflow-y: auto;
}

.SimpleHistory__diff__contents--isCropped.SimpleHistory__diff__contents--isExpanded {
	-webkit-mask-image: none;
	mask-image: none;
}

/*
Shared recipe for a control that toggles more content in place rather than
navigating away: "expand diff" and "show/hide similar events" both use it, so
the next disclosure control gets this for free instead of copying it again.

A chevron rather than one of the sh-Icon sprites, because it has to rotate to
show state and the icon set has no chevron. Drawn from two borders so it takes
currentColor and needs no asset.

Keyed off aria-expanded rather than a class of its own, so the arrow and what
screen readers announce are driven by the same attribute and cannot drift apart.
*/
/*
Both toggles are plain <button>s rather than the @wordpress/components link
Button, so the reset lives here once and nothing from wp-components has to
be out-specified.
*/
.SimpleHistory__disclosureToggle {
	background: none;
	border: 0;
	cursor: pointer;
	color: #2271b1;
	font-size: var(--sh-font-size-small);
	padding: var(--sh-spacing-xsmall) var(--sh-spacing-small);
	text-decoration: none;
}

.SimpleHistory__disclosureToggle:hover,
.SimpleHistory__disclosureToggle:focus-visible {
	background-color: var(--sh-color-gray-4);
	border-radius: var(--sh-border-radius);
	color: #135e96;
}

.SimpleHistory__disclosureToggle::after {
	content: "";
	display: inline-block;
	width: 0.35em;
	height: 0.35em;
	margin-left: 0.5em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.15s ease;
}

.SimpleHistory__disclosureToggle[aria-expanded="true"]::after {
	transform: translateY(0.1em) rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.SimpleHistory__disclosureToggle::after {
		transition: none;
	}
}

/*
Right-aligned on purpose: it sits where the scrollbar appears, which is where
the hand goes when someone realises the diff is cropped. Tucked flush against
the diff above it, and inset from the right edge rather than hanging its
padding past it, so it reads as belonging to the diff rather than to the
action links below.

Styled as a control rather than a link — same hover treatment as the action
links, no resting underline — because it changes this view instead of
navigating away.
*/
.SimpleHistory__diff__expandToggle {
	display: block;
	margin-top: 0;
	margin-left: auto;
	margin-right: var(--sh-spacing-small);
}

.SimpleHistory__diff__contents:focus {
	outline: 1px solid rgb(0, 115, 170);
	box-shadow:
		0 0 0 1px #5b9dd9,
		0 0 2px 1px rgba(30, 140, 190, 0.8);
}

.SimpleHistory__diff.SimpleHistory__diff {
	border-spacing: 1px;
}

.SimpleHistory__diff.SimpleHistory__diff td,
.SimpleHistory__diff.SimpleHistory__diff td:first-child {
	text-align: left;
	white-space: normal;
	font-size: 13px;
	line-height: 1.3;
	padding: 0.25em 0.5em;
	padding: 0.5em 0.5em 0.5em 2em;
	color: rgb(75, 75, 75);
	font-family: "Open Sans", sans-serif;
}

.SimpleHistory__diff.SimpleHistory__diff tbody tr td:nth-child(2) {
	width: auto;
}

/* jfcherng/php-diff side-by-side renderer styles */
.SimpleHistory__diff__contents .diff-html.diff-side-by-side {
	border-collapse: collapse;
	border-spacing: 1px;
	width: 100%;
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	line-height: 1.4;
}

.SimpleHistory__diff__contents .diff-html.diff-side-by-side td {
	text-align: left;
	white-space: normal;
	font-size: 13px;
	line-height: 1.3;
	padding: 0.5em 0.5em 0.5em 2em;
	color: rgb(75, 75, 75);
	font-family: "Open Sans", sans-serif;
	width: 50%;
}

.SimpleHistory__diff__contents .diff-html.diff-side-by-side .change-eq td {
	background: transparent;
}

.SimpleHistory__diff__contents .diff-html.diff-side-by-side .change-ins td.new {
	background: var(--sh-diff-added-background);
}

.SimpleHistory__diff__contents .diff-html.diff-side-by-side .change-del td.old {
	background: var(--sh-diff-removed-background);
}

.SimpleHistory__diff__contents .diff-html.diff-side-by-side .change-rep td.old {
	background: var(--sh-diff-removed-background);
}

.SimpleHistory__diff__contents .diff-html.diff-side-by-side .change-rep td.new {
	background: var(--sh-diff-added-background);
}

.SimpleHistory__diff__contents .diff-html.diff-side-by-side td.none {
	background: #f9f9f9;
}

.SimpleHistory__diff__contents .diff-html.diff-side-by-side ins {
	background: var(--sh-diff-added-inline-background);
	text-decoration: none;
}

/*
Core sets text-decoration:none on its own del, because its rows already carry
a minus glyph. This renderer has no such marker, so the strike-through is the
only non-colour signal that text was removed — keep it, or the distinction
rests on colour alone.
*/
.SimpleHistory__diff__contents .diff-html.diff-side-by-side del {
	background: var(--sh-diff-removed-inline-background);
	text-decoration: line-through;
}

.SimpleHistory__diff__contents .diff-html.diff-side-by-side .skipped td {
	background: #f7f7f7;
	text-align: center;
	color: #999;
	font-style: italic;
}

.sh-ExternalLink::after {
	/* External icon on link */
	content: "\f504";
	font-family: dashicons;
	line-height: 0;
}

/**
 * White page header. Used for plugin title, tab navigation, settings/tools to the right.
 * Based on style uses by core for Site Health and Privacy Policy, to keep things consistent.
 */
.sh-PageHeader {
	margin: 0 0 0 -20px;
	padding: var(--sh-spacing-large);
	background: #fff;
	border-bottom: 1px solid var(--sh-color-gray);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 1rem;
}

/* 
When an admin notice with additional class "inline" is added it is shown above the header,
so add some extra place then to make it look a bit less ugly.
*/
.notice + .sh-PageHeader {
	margin-top: 25px;
}

.sh-PageHeader-titleGroup {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
}

/* Groups the settings gear + feature-discovery bar into one landmark.
   Tighter gap after the gear than between the bar items, so the section
   links read as hanging off the "Settings" anchor. */
.sh-PageHeader-settingsNav {
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-small);
}

.sh-PageHeader-title {
	font-size: 23px;
	font-weight: 400;
	margin: 0;
	line-height: 1;
}

.sh-PageHeader-logo {
	width: 200px;
	height: auto;
}

.sh-PageHeader-titleLink {
	display: block;
	color: inherit;
	text-decoration: none;
}

.sh-PageHeader-rightLink {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sh-spacing-medium);
}

.sh-PageHeader-settingsLinkIcon {
	--sh-icon-size: 25px;
}

/* Shared header button style for Settings / Premium */
.sh-PageHeader-headerBtn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: var(--sh-border-radius);
	text-decoration: none;
	line-height: 1;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease;
}

.sh-PageHeader-headerBtn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
}

/* Settings — gear + label. Anchors the discovery bar in the left title
   group; the left border starts the "settings island" (gear + bar). Bolder
   and darker than the section deep-links so it reads as their parent/anchor,
   not a peer. */
.sh-PageHeader-settingsIcon {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #1d2327;
	font-weight: 600;
	text-decoration: none;
	font-size: var(--sh-font-size-small);
	padding: 4px;
	padding-left: var(--sh-spacing-medium);
	border-left: 1px solid var(--sh-color-gray);
	transition: color 0.15s ease;
}

.sh-PageHeader-settingsIcon .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
}

.sh-PageHeader-settingsIcon:hover {
	color: #2271b1;
}

.sh-PageHeader-settingsIcon:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* Get Premium — text link style */
.sh-PageHeader-headerBtn--getPremium {
	color: #996800;
	border: none;
	background: none;
	padding: 6px 4px;
	text-decoration: none;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.sh-PageHeader-headerBtn--getPremium:hover {
	color: #7a4a00;
	background: none;
	border: none;
	text-decoration: underline;
	text-decoration-color: #996800;
}

.sh-PageHeader-headerBtn--getPremium:focus-visible {
	outline: 2px solid #996800;
	outline-offset: 2px;
}

/* Premium active — subtle status badge */
.sh-PageHeader-headerBtn--premiumActive {
	background: none;
	color: #996800;
	border: 1px solid transparent;
}

.sh-PageHeader-headerBtn--premiumActive .dashicons {
	color: #996800;
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 16px;
}

/* Dev badges container — absolute positioned above log content */
.SimpleHistoryWrap {
	position: relative;
}

.sh-DevBadges {
	position: fixed;
	z-index: 1000;
	bottom: var(--sh-spacing-small);
	right: var(--sh-spacing-small);
	display: flex;
	gap: 6px;
	padding: 4px 8px;
}

/* Base badge styles shared by all header badges */
.sh-PageHeader-badge {
	color: var(--sh-color-white);
	font-size: 9px;
	font-weight: 600;
	padding: var(--sh-spacing-xsmall) var(--sh-spacing-small);
	border-radius: var(--sh-border-radius);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1;
}

/* Dev badge variant */
.sh-PageHeader-badge--dev {
	background-color: #2271b1;
}

/* Shared toggle badge styles */
.sh-PageHeader-badge--toggle {
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--sh-spacing-xsmall);
	vertical-align: middle;
}

.sh-PageHeader-badge--toggle .dashicons {
	font-size: 10px;
	width: 10px;
	height: 10px;
	line-height: 1;
}

.sh-PageHeader-badge--toggle:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* Premium toggle colors */
.sh-PageHeader-badge--premium.is-active {
	background-color: #00a32a;
}

.sh-PageHeader-badge--premium.is-inactive {
	background-color: #d63638;
}

/* Experimental toggle colors */
.sh-PageHeader-badge--experimental.is-active {
	background-color: #9b59b6;
}

.sh-PageHeader-badge--experimental.is-inactive {
	background-color: #888;
}

/* Feature discovery bar — sits inside title group, next to logo */
.sh-HeaderStatus {
	display: flex;
	align-items: center;
	font-size: var(--sh-font-size-small);
	color: var(--sh-color-gray-3);
}

/* On narrow screens, drop below the logo as full-width block */
@media (max-width: 960px) {
	.sh-HeaderStatus {
		margin-top: var(--sh-spacing-small);
		width: 100%;
	}
}

.sh-HeaderStatus-zone {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--sh-spacing-medium);
	row-gap: 3px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sh-HeaderStatus-item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	margin-bottom: 0;
}

/* Shared inner style for icon + text */
.sh-HeaderStatus-item-inner {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--sh-color-gray-3);
	text-decoration: none;
}

.sh-HeaderStatus-item-inner .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 14px;
	color: #50575e;
}

/* Active link hover */
a.sh-HeaderStatus-item-inner:hover {
	color: #2271b1;
}

a.sh-HeaderStatus-item-inner:hover .dashicons {
	color: #2271b1;
}

/* Focus outline on the whole item via :has */
.sh-HeaderStatus-item:has(a.sh-HeaderStatus-item-inner:focus-visible) {
	outline: 1px solid #2271b1;
	outline-offset: 2px;
	border-radius: 2px;
}

.sh-HeaderStatus-item a.sh-HeaderStatus-item-inner:focus-visible {
	outline: none;
	box-shadow: none;
}

.sh-NotificationBar {
	position: relative;
	text-align: center;
	background-color: var(--sh-color-cream);
	padding: var(--sh-spacing-small) var(--sh-spacing-large);
	margin: 0 0 0 calc(var(--sh-spacing-large) * -1);
	font-weight: 600;
	border-bottom: 1px solid var(--sh-color-gray);
	transition: background-color 0.125s ease-out;
}

.sh-NotificationBar-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Base badge styles - shared by all badge types */
.sh-Badge {
	display: inline-flex;
	align-items: center;
	text-transform: uppercase;
	font-size: 0.7em;
	font-weight: 600;
	font-style: normal;
	border-radius: var(--sh-border-radius);
	padding: 0.2em 0.5em;
	line-height: 1;
	margin: 0;
	vertical-align: middle;
}

/* Badge variants */
.sh-Badge--new {
	color: var(--sh-color-white);
	background-color: var(--sh-color-blue);
}

.sh-Badge--premium {
	font-size: 0.8em;
	padding: 0.25em 0.5em;
	color: var(--sh-color-black);
	background-color: var(--sh-color-green-mint);
	opacity: 0.75;
}

/* Prevent nav-tabs with badges from wrapping */
.nav-tab .sh-Badge {
	margin-left: 0.3em;
}

.nav-tab:has(.sh-Badge) {
	white-space: nowrap;
}

/* Sub-navigation tabs - horizontally scrollable on small screens */
.sh-Page-content .nav-tab-wrapper {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 1px; /* Prevent border clipping during scroll */
}

.sh-Page-content .nav-tab-wrapper .nav-tab {
	flex-shrink: 0;
}

/* Beta feature notice - subtle helper text style */
.sh-BetaNotice {
	margin: var(--sh-spacing-large) 0;
	font-size: var(--sh-font-size-small);
	color: var(--sh-color-text-muted, #646970);
}

.sh-BetaNotice a {
	color: inherit;
}

.sh-PremiumFeaturesPostbox {
	--box-bg-color: var(--sh-color-white);
	text-wrap-style: pretty;
	padding: 1rem;
	background-color: var(--box-bg-color);
	border-radius: 10px;
}

.sh-PremiumFeaturesPostbox-preTitleFeaturesBadge {
	margin: 0 0 0.5rem 0;
}

.sh-PremiumFeaturesPostbox-title {
	color: #1d2327;
	font-size: 1.5em;
	margin: 0 0 1em 0;
}

.sh-PremiumFeaturesPostbox-button {
	display: inline-block;
	background-color: var(--sh-color-blue);
	color: white;
	text-decoration: none;
	padding: 0.75em 1.25em;
	border-radius: var(--sh-border-radius);
	display: block;
	text-align: center;
	transition: background-color 0.25s ease-out;
}

.sh-PremiumFeaturesPostbox-button:active,
.sh-PremiumFeaturesPostbox-button:focus,
.sh-PremiumFeaturesPostbox-button:hover {
	color: white;
	/* background-color: var(--sh-color-black); */
}

.sh-PremiumFeaturesPostbox-featuresList {
	list-style: none;
	margin: 1.5rem 0 1.5rem 0;
}
.sh-PremiumFeaturesPostbox-featuresList-item {
	font-size: var(--sh-font-size-medium);
	margin-top: 0.5rem;
	padding-left: 30px;
	line-height: 1.2rem;
	background-image: url(./icons/check_circle_24dp_3F9349_FILL0_wght400_GRAD0_opsz24.svg);
	background-size: 1.1rem;
	background-repeat: no-repeat;
	background-position: 0px 1px;
}

.sh-PremiumFeaturesPostbox-featuresList-item-discrete {
	display: block;
	margin-top: 0.2rem;
	font-size: var(--sh-font-size-small);
	line-height: 1.4;
	font-style: normal;
}

.sh-PremiumFeaturesPostbox-featuresList-item--more {
	background-image: none;
	color: var(--sh-color-black-2);
}

.sh-PremiumFeaturesPostbox-guarantee {
	margin: 0.5rem 0 0;
	text-align: center;
	font-size: var(--sh-font-size-small);
	color: var(--sh-color-black-2);
}

.sh-PremiumFeatureTeaser {
	background: var(--sh-color-cream);
	padding: var(--sh-spacing-medium);
	border-radius: var(--sh-border-radius);
	margin-top: var(--sh-spacing-medium);
	font-size: var(--sh-font-size-medium);
}

/*
Can be overruled by .form-table td p
*/
.sh-PremiumFeatureTeaser-title,
.form-table td .sh-PremiumFeatureTeaser-title {
	display: flex;
	gap: var(--sh-spacing-small);
	font-size: var(--sh-font-size-medium);
	margin-block-start: 0;
	margin-block-end: var(--sh-spacing-medium);
}

.sh-PremiumFeatureTeaser
	p:not(
		.sh-PremiumFeatureTeaser-title,
		.sh-PremiumFeatureTeaser-ctaLinkContainer
	) {
	margin: 0 0 var(--sh-spacing-small);
}

.sh-PremiumFeatureTeaser .sh-Badge--premium {
	font-size: var(--sh-font-size-small);
	vertical-align: middle;
	order: 1;
}

.sh-PremiumFeatureTeaser .button {
	font-size: 0.85em;
}

.sh-PremiumFeatureTeaser-features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--sh-spacing-small) 0;
}

.sh-PremiumFeatureTeaser-features li {
	display: flex;
	align-items: center;
	margin-bottom: 0.25em;
}

.sh-PremiumFeatureTeaser-features .dashicons {
	color: #00a32a;
	margin-inline-end: 0.25em;
}

.sh-PremiumFeatureTeaser-ctaLinkContainer,
.form-table td .sh-PremiumFeatureTeaser-ctaLinkContainer {
	font-size: var(--sh-font-size-medium);
	margin-block-start: var(--sh-spacing-medium);
	margin-block-end: 0;
}

/**
 * Premium Teaser - Disabled Form Pattern
 * Used to show a disabled/grayed out form that teases premium features.
 * Users can see the form fields but cannot interact with them.
 * The `inert` HTML attribute handles non-interactivity and accessibility.
 * pointer-events: none is a fallback for older browsers.
 */
.sh-PremiumTeaser-disabledForm {
	pointer-events: none;
	opacity: 0.75;
}

.sh-PremiumTeaser-disabledForm input,
.sh-PremiumTeaser-disabledForm select {
	background-color: #f0f0f1 !important;
	cursor: not-allowed;
}

/**
 * Radio Options - Generic reusable styles
 * Used by File Channel formatters, Syslog Channel mode, etc.
 */
.sh-RadioOptions {
	display: flex;
	flex-direction: column;
}

.sh-RadioOption {
	display: block;
	margin-bottom: 0.75em;
}

.sh-RadioOption--disabled {
	opacity: 0.75;
	cursor: not-allowed;
}

.sh-RadioOption--disabled input {
	cursor: not-allowed;
}

.sh-RadioOptionDescription {
	display: block;
	margin-left: 24px;
}

.sh-RadioOptions--disabled {
	opacity: 0.6;
}

/**
 * Inline Fields - Generic reusable pattern
 *
 * Use for settings rows with multiple labeled fields side-by-side.
 * Examples: Server (Address/Port/Timeout), Auth (Username/Password),
 * Database (Name/Table), Advanced (Facility/Identity).
 *
 * Structure:
 *   <div class="sh-InlineFields">
 *     <label class="sh-InlineField">
 *       <span class="sh-InlineFieldLabel">Address</span>
 *       <input type="text" />
 *     </label>
 *     <label class="sh-InlineField">
 *       <span class="sh-InlineFieldLabel">Timeout</span>
 *       <span class="sh-InlineFieldInputWithSuffix">
 *         <input type="number" />
 *         <span class="sh-InlineFieldSuffix">sec</span>
 *       </span>
 *     </label>
 *   </div>
 *
 * @since 5.x.0
 */
.sh-InlineFields {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1.5em;
}

.sh-InlineField {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.sh-InlineFieldLabel {
	font-weight: 400;
}

.sh-InlineFieldInputWithSuffix {
	display: flex;
	align-items: center;
	gap: 0.25em;
}

.sh-InlineFieldSuffix {
	color: #666;
}

.sh-FileChannel-fileManagement {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.sh-FileChannel-fileManagement select {
	margin: 0;
}

.sh-FileChannel-fileManagement input[type="number"] {
	width: 70px;
	margin: 0;
}

.sh-FileChannel-folderInfo {
	max-width: 600px;
}

.sh-FileChannel-folderPath {
	display: block;
	padding: 8px 12px;
	background: #f6f7f7;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	word-break: break-all;
}

.sh-FileChannel-folderStatus {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 8px 0;
}

.sh-FileChannel-folderStatus--error,
.sh-FileChannel-folderStatus--success {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.sh-FileChannel-folderStatus--error {
	color: #b32d2e;
}

.sh-FileChannel-folderStatus--success {
	color: #2e7d32;
}

.sh-FileChannel-folderStatus--error .dashicons,
.sh-FileChannel-folderStatus--success .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.sh-FileChannel-folderStats {
	color: #50575e;
}

.sh-FileChannel-securityNote {
	margin: 4px 0 0 0;
	color: #646970;
	font-size: 13px;
}

/* Status Box - info/stats cards (distinct from WP admin notices) */
.sh-StatusBox {
	background: #fff;
	padding: 1rem;
	margin: 1rem 0;
	border: 1px solid #c3c4c7;
	border-radius: var(--sh-border-radius);
}

.sh-StatusBox--success {
	background: #f0fdf4;
	border-color: #86efac;
}

.sh-StatusBox--warning {
	background: #fffbeb;
	border-color: #fcd34d;
}

.sh-StatusBox--error {
	background: #fef2f2;
	border-color: #fca5a5;
}

.sh-StatusBox--info {
	background: #eff6ff;
	border-color: #93c5fd;
}

.sh-StatusBox p:first-child {
	margin-top: 0;
}

.sh-StatusBox p:last-child {
	margin-bottom: 0;
}

.sh-StatusBox ul {
	margin: 0;
}

.sh-StatusBox-deletedInfo {
	margin: 10px 0 0 0;
	color: #b32d2e;
}

/* Developer Tools Box */
.sh-DevToolsBox {
	margin-top: 30px;
	padding: 20px;
	border: 1px solid #c3c4c7;
	border-left: 4px solid #d63638;
	background: #fff;
}

.sh-DevToolsBox-heading {
	margin-top: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.sh-DevToolsBox-heading .dashicons {
	color: #d63638;
}

.sh-DevToolsBox-description {
	margin-bottom: 20px;
}

.sh-DevToolsBox-section {
	margin-top: 20px;
	margin-bottom: 10px;
}

.sh-DevToolsBox-section--bordered {
	margin-top: 25px;
	padding-top: 15px;
	border-top: 1px solid #dcdcde;
}

.sh-DevToolsBox-warning {
	color: #d63638;
}

/* Preview Details Box */
.sh-PreviewDetails {
	background: #f0f0f1;
	padding: 15px;
	margin: 15px 0;
}

.sh-PreviewDetails summary {
	cursor: pointer;
	font-weight: 600;
}

.sh-PreviewDetails-description {
	margin: 10px 0;
}

.sh-PreviewDetails table {
	margin-top: 10px;
}

/* Utility class for right-aligned table cells */
.sh-textRight {
	text-align: right;
}

/* Utility class for auto-width tables */
.sh-tableAuto {
	width: auto;
}

/* Checkbox label utilities */
.sh-CheckboxLabel {
	display: block;
	margin-bottom: 5px;
}

.sh-CheckboxLabel--spaced {
	display: block;
	margin-bottom: 10px;
}

/* Inline checkbox with input field */
.sh-CheckboxLabel--inline,
.sh-DateRangeInput {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

/* Grid layout for checkboxes - 2 columns sized to content */
.sh-CheckboxGrid {
	display: grid;
	grid-template-columns: max-content max-content;
	gap: 0.5rem 3rem;
	margin-bottom: 0.5em;
}

.sh-CheckboxGrid .sh-CheckboxLabel {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.4em;
	margin-bottom: 0;
	line-height: 1.4;
	justify-self: start;
}

.sh-CheckboxGrid .sh-CheckboxLabel input[type="checkbox"] {
	margin: 0.2em 0 0 0;
	flex-shrink: 0;
}

.sh-CheckboxLabel-count {
	font-size: 0.9em;
	color: var(--sh-color-gray-3);
}

/* Select all/none toggle links */
.sh-SelectToggle {
	margin-bottom: 0.5em;
	font-size: 13px;
}

.sh-SelectToggle a {
	cursor: pointer;
	text-decoration: underline;
}

.sh-SelectToggle-separator {
	margin: 0 0.25em;
	color: #999;
}

/* Failed login limit notice — compact flush bar matching dashboard style. */
.sh-FailedLoginLimitNotice {
	display: flex;
	align-items: baseline;
	gap: var(--sh-spacing-xsmall);
	padding: 8px 12px 20px;
	background: #f0f6fc;
	border-bottom: 1px solid #c5d9ed;
	font-size: 13px;
	line-height: 1.5;
}

.sh-FailedLoginLimitNotice-icon {
	flex-shrink: 0;
	color: #72aee6;
}

.sh-FailedLoginLimitNotice-icon .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	position: relative;
	top: 2px;
}

.sh-FailedLoginLimitNotice-content {
	flex: 1;
	min-width: 0;
}

.sh-FailedLoginLimitNotice-heading {
	margin: 0;
	font-size: 13px;
	color: #1d2327;
}

.sh-FailedLoginLimitNotice-details {
	margin-top: var(--sh-spacing-xsmall);
	font-size: 12px;
	color: #646970;
}

.sh-FailedLoginLimitNotice-details summary {
	cursor: pointer;
	color: #646970;
	font-size: 12px;
}

.sh-FailedLoginLimitNotice-details summary:hover {
	color: #1d2327;
}

.sh-FailedLoginLimitNotice-details p {
	margin: var(--sh-spacing-xsmall) 0 0;
	line-height: 1.5;
}

/* Compact failed login throttle notice for dashboard widget. */
.sh-DashboardWidget-throttleNotice {
	display: flex;
	align-items: baseline;
	gap: var(--sh-spacing-xsmall);
	padding: var(--sh-dashboard-padding-y) var(--sh-dashboard-padding-x);
	background: #f0f6fc;
	border-bottom: 1px solid #c5d9ed;
	font-size: var(--sh-font-size-normal);
	line-height: 1.5;
}

.sh-DashboardWidget-throttleNotice .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: #72aee6;
	position: relative;
	top: 2px;
}

.sh-DashboardWidget-throttleNotice p {
	margin: 0;
}

/* Notice in events log. */
.sh-BackfilledNotice {
	margin: var(--sh-spacing-medium);
}

/* Backfill Form */
.sh-BackfillForm {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: var(--sh-border-radius);
	padding: 1rem 1.5rem;
}

.sh-BackfillForm-title {
	margin: 0 0 0.5rem 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
}

.sh-BackfillForm-table {
	margin: 0;
}

.sh-BackfillForm-table th {
	padding: 0.75rem 0.75rem 0.75rem 0;
	width: 100px;
}

.sh-BackfillForm-table td {
	padding: 0.75rem 0;
}

/* Premium Feature Modal */
.sh-PremiumFeatureModal.components-modal__frame,
.components-modal__frame.sh-PremiumFeatureModal {
	background-color: var(--sh-color-cream);
	max-width: 500px;
}

.sh-PremiumFeatureModal .components-modal__content,
.components-modal__frame.sh-PremiumFeatureModal .components-modal__content {
	padding: 2rem;
	background-color: var(--sh-color-cream);
}

.sh-PremiumFeatureModal-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}

.sh-PremiumFeatureModal-icon svg {
	width: 48px;
	height: 48px;
	fill: var(--sh-color-black);
}

.sh-PremiumFeatureModal-title {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 0.75rem 0;
	line-height: 1.3;
}

.sh-PremiumFeatureModal-description {
	text-align: center;
	color: var(--sh-color-black-2);
	margin: 0 0 1.5rem 0;
	font-size: 1rem;
	line-height: 1.5;
}

.sh-PremiumFeatureModal-imageContainer {
	background: linear-gradient(135deg, #d1fae5, #a7f3d0);
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 1.5rem;
}

.sh-PremiumFeatureModal-image {
	width: 100%;
	height: auto;
	border-radius: var(--sh-border-radius);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	display: block;
}

.sh-PremiumFeatureModal-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.sh-PremiumFeatureModal-upgradeButton.components-button.is-primary {
	background-color: var(--sh-color-blue);
	color: var(--sh-color-white);
	padding: 0.75rem 2rem;
	border-radius: var(--sh-border-radius);
	font-size: 1rem;
	font-weight: 500;
	border: none;
}

.sh-PremiumFeatureModal-upgradeButton.components-button.is-primary:hover {
	background-color: #0039cc;
}

.sh-PremiumFeatureModal-later {
	background: none;
	border: none;
	color: var(--sh-color-blue);
	cursor: pointer;
	font-size: 0.875rem;
	padding: 0.5rem;
}

.sh-PremiumFeatureModal-later:hover {
	text-decoration: underline;
}

.sh-PremiumFeatureModal-later:focus-visible {
	outline: 2px solid var(--sh-color-blue, #2271b1);
	outline-offset: 2px;
	border-radius: 2px;
}

.sh-PageNav {
	width: 100%;
	display: flex;
	margin-top: 1rem;
	margin-left: -1rem;
	margin-bottom: -1.5rem;
	gap: 2rem;
}

/* If only one page then we hide the tabs. */
.sh-PageNav--count-1 {
	display: none;
}

.sh-PageNav-tab {
	display: block;
	position: relative;
	text-decoration: none;
	color: inherit;
	padding: 0.5rem 1rem 1rem;
}

.sh-PageNav-tab::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0.5rem;
	right: 0.5rem;
	height: 3px;
	font-weight: 600;
	transition:
		background-color 0.25s ease-in-out,
		height 0.15s ease-in-out;
}

.sh-PageNav-tab:hover::after {
	background-color: #dcdcde;
}

.sh-PageNav-tab.is-active::after {
	background: var(--sh-color-green);
}

.sh-SettingsPage-settingsField {
	/* font-size: 1rem; */
	color: #3c434a;
}

.sh-SettingsPage-settingsSection-wrap {
	padding: var(--sh-spacing-medium) 0;
	margin: var(--sh-spacing-medium) 0;
}

.sh-SettingsPage-settingsSection-wrap h2 {
	margin: 0;
}

.sh-SettingsPage-settingsSection-title,
.sh-SettingsCard-title {
	display: block;
	font-size: 23px;
	font-weight: 400;
	margin: 0;
	padding: 9px 0 4px;
	line-height: 1.3;
}

.sh-SettingsPage-settingsSection-icon {
	--sh-icon-size: 24px;
	width: var(--sh-icon-size);
	height: var(--sh-icon-size);
	display: inline-block;
	background-size: 100%;
	vertical-align: middle;
	margin-right: 0.5em;
	position: relative;
	top: -2px;
}

.sh-SettingsPage-settingsField-icon {
	--sh-icon-size: 20px;
	width: var(--sh-icon-size);
	height: var(--sh-icon-size);
	display: inline-block;
	background-size: 100%;
	vertical-align: middle;
	margin-right: 0.5em;
	position: relative;
	top: -1px;
	left: 2px;
}

/* Highlight settings sections when navigated to via #hash. */
.sh-SettingsPage-settingsSection-wrap td > div:target,
.sh-SettingsPage-settingsSection-wrap:target {
	background-color: lightyellow;
	/* Push target down when navigated to via #hash. */
	scroll-margin-top: 2rem;
}

.sh-SettingsPage-settingsSection-wrap td > div:target {
	padding: 1rem;
}

.sh-SettingsPage-settingsSection-wrap:target {
	padding: 0.5rem 1rem;
	border-radius: var(--sh-border-radius);
}

.sh-PageNav-icon {
	--sh-icon-size: 20px;
	width: var(--sh-icon-size);
	height: var(--sh-icon-size);
	/* background-image: url(./icons/info_FILL0_wght400_GRAD0_opsz48.svg); */
	display: inline-block;
	background-size: 100%;
	vertical-align: middle;
	margin-right: 0.5em;
	position: relative;
	top: -2px;
}

/** Subtabs on settings page */
.sh-SettingsTabs {
	border-bottom: 1px solid rgb(206, 206, 206);
	margin-bottom: 0;
	margin-left: -2.5em;
	padding-left: 2.5em;
}

.sh-SettingsTabs-tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	margin: 0;
	/* border-bottom: 1px solid #dcdcde; */
}

.sh-SettingsTabs-tab {
	flex-shrink: 0;
	margin-bottom: 0;
}

.sh-SettingsTabs-link {
	text-decoration: none;
	display: block;
	padding: 1rem 1.5rem;
	color: inherit;
}

.sh-SettingsTabs-link.is-active {
	font-weight: bold;
	box-shadow: inset 0 -2px #979797;
}

a.sh-SettingsTabs-link:hover {
	color: var(--sh-color-green);
}

.sh-SettingsSection {
	font-size: 1.5rem;
}

.sh-SettingsSectionIntroduction {
	margin-bottom: 1.5em;
}

.sh-SettingsSectionIntroduction p {
	font-size: var(--sh-font-size-large);
}

.sh-mr-0 {
	margin-right: 0px;
}

.sh-mr-1 {
	margin-right: 0.25rem; /* 4px */
}
.sh-mr-2 {
	margin-right: 0.5rem; /* 8px */
}
.sh-mr-3 {
	margin-right: 0.75rem; /* 12px */
}

.sh-LicencesPage-plugin {
	background: var(--sh-color-white);
	border-radius: 8px;
	margin-bottom: 1.5rem;
	padding: 1.5rem;
	border: 1px solid var(--sh-color-gray);
}

.form-table .sh-LicencesPage-plugin-name {
	margin: 0;
	font-weight: bold;
	font-size: 1.25em;
	font-weight: 400;
}

.form-table .sh-LicencesPage-plugin-version {
	color: #888;
	margin-bottom: 1rem;
}

.form-table .sh-LicencesPage-plugin-active {
	margin-bottom: 1rem;
}

/* Licenses tab: expired, disabled or invalid key. Color plus text, never color alone. */
.sh-LicencesPage-plugin-active--problem {
	color: #b32d2e;
}

.sh-LicencesPage-plugin-checked {
	margin-top: 0;
}

.sh-FeedIntroduction {
	background: #f6f7f7;
	border-radius: var(--sh-border-radius);
	padding: 1em;
	display: flex;
	flex-direction: column;
	gap: 1em;
	max-width: 80ch;
	font-size: 15px;
}

.sh-FeedIntroduction img {
	border-radius: 10px;
	width: 1.25rem;
	height: auto;
	line-height: 1;
	vertical-align: text-bottom;
}

.sh-FeedIntroduction-row {
	display: flex;
	gap: 1em;
	margin: 0;
	font-size: 1em;
}

.sh-FeedIntroduction-emoji {
	display: block;
	font-size: 1.5em;
	line-height: 1;
}

.sh-EmailReportOptIn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
}

.sh-FeedIntroduction .sh-EmailReportOptIn {
	margin: 0.75em 0 0;
}

.sh-EmailReportOptIn-description {
	color: #50575e;
	font-size: 13px;
}

@media (max-width: 782px) {
	.sh-EmailReportOptIn-description {
		flex-basis: 100%;
	}
}

/*
 * First purge notice: a premium upsell, so it must never look like the blue
 * "info" notice. Cream background with the green accent used elsewhere for
 * Premium calls to action.
 */
.notice.sh-FirstPurgeNotice {
	background: var(--sh-color-cream);
	border-left-color: var(--sh-color-green-cta);
}

.notice.sh-FirstPurgeNotice a.sh-FirstPurgeNotice-cta,
.notice.sh-FirstPurgeNotice a.sh-FirstPurgeNotice-cta:hover {
	font-weight: 600;
	color: var(--sh-color-green-cta);
}

/*
 * Live thumbnail of the weekly email, to the right of the email report settings.
 * The email renders at its real 640px width in the iframe and is scaled down,
 * so the thumbnail is the email itself rather than a screenshot that can go stale.
 * Shown only when the settings card has room for it next to the form.
 */
.sh-SettingsCard:has(> .sh-EmailReportThumbnail) {
	/* Set on the card, so that the form next to the thumbnail can use them too. */
	--sh-email-thumbnail-scale: 0.45;
	--sh-email-thumbnail-width: calc(640px * var(--sh-email-thumbnail-scale));
	--sh-email-thumbnail-height: calc(1100px * var(--sh-email-thumbnail-scale));
	--sh-email-thumbnail-gap: var(--sh-spacing-xxlarge);
	--sh-email-form-max-width: 700px;

position: relative;
	container-type: inline-size;
}

.sh-EmailReportThumbnail {
	display: none;
}

/*
 * The thumbnail follows the form, a fixed gap after its widest content, so on
 * a wide screen it does not drift off to the far edge of the card. When the
 * card is narrower than that, it sits against the card edge instead.
 */
@container (min-width: 1000px) {
	.sh-EmailReportThumbnail:not([hidden]) {
		display: block;
		position: absolute;
		top: var(--sh-spacing-large);
		inset-inline-start: min(
			calc(
				100% - var(--sh-spacing-large) - var(--sh-email-thumbnail-width)
			),
			calc(
				var(--sh-spacing-large) + var(--sh-email-form-max-width) +
					var(--sh-email-thumbnail-gap)
			)
		);
		width: var(--sh-email-thumbnail-width);
	}

.sh-EmailReportThumbnail:not([hidden]) ~ .form-table {
		width: min(
			calc(
				100% - var(--sh-email-thumbnail-width) -
					var(--sh-email-thumbnail-gap)
			),
			var(--sh-email-form-max-width)
		);
	}
}

.sh-EmailReportThumbnail-label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
}

.sh-EmailReportThumbnail-description {
	margin: 0 0 var(--sh-spacing-small);
	color: #50575e;
	font-size: 12px;
	line-height: 1.5;
}

.sh-EmailReportThumbnail-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.sh-EmailReportThumbnail-frame {
	display: block;
	position: relative;
	overflow: hidden;
	height: var(--sh-email-thumbnail-height);
	border: 1px solid var(--sh-color-separator);
	border-radius: 6px;
	background: #fff4e4;
}

/* Fade out the cut-off bottom edge. */
.sh-EmailReportThumbnail-frame::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 48px;
	background: linear-gradient(rgba(255, 244, 228, 0), #fff4e4);
}

.sh-EmailReportThumbnail-iframe {
	display: block;
	width: 640px;
	height: 1100px;
	border: 0;
	transform: scale(var(--sh-email-thumbnail-scale));
	transform-origin: 0 0;
	pointer-events: none;
}

.sh-EmailReportThumbnail-open {
	display: block;
	margin-top: var(--sh-spacing-small);
	color: var(--wp-admin-theme-color, #2271b1);
	font-size: 12px;
	text-decoration: underline;
}

/* .sh-FeedIntroduction-ps {
	font-size: 13px;
} */

/* Filters, moved from old filter-dropin.css */
/* Compact search row: date dropdown, search input, button, links all inline. */
.SimpleHistory-filters__searchRow {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px;
	border-bottom: 1px solid var(--sh-color-separator);
	flex-wrap: wrap;
	background-color: #f9f9f9;
}

/* Stands in for the search row in the table view, which renders its own
   query bar instead and leaves this panel out of the DOM entirely. Same
   height as the row above — 12px padding either side of a 40px control,
   plus its 1px border — so switching between the views does not move the
   content below. Empty and transparent: it is reserved space, not a
   control, so it carries neither the row's background nor its border.

One case it does not cover: below 782px the real search row wraps onto
   two lines and is taller than this. Switching views on a phone therefore
   still moves a little, which is the narrower case and the smaller cost
   than reserving two rows' height on every desktop. */
.SimpleHistory-filters__reservedSpace {
	box-sizing: border-box;
	height: 65px;
}

/* Chips for event types hidden from the current list. */
.SimpleHistory-hiddenTypes {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--sh-color-separator);
	background-color: #f9f9f9;
	font-size: 13px;
}

.SimpleHistory-hiddenTypes__chip {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px 2px 2px 8px;
	border: 1px solid #c3c4c7;
	border-radius: 2px;
	background: #fff;
	line-height: 1.6;
}

.SimpleHistory-hiddenTypes__chipText {
	max-width: 32em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.SimpleHistory-filters__defaultRow {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

/* Reserve the width the loaded options usually need, so the select does not
   grow when the month options arrive from the API and replace the single
   "Loading…" option. No max-width: locales with long month names may still
   need more room, and clipping the label is worse than a rare resize. */
.SimpleHistory-filters__dateSelect {
	min-width: 180px;
}

/* Search InputControl. */
.SimpleHistory-filters__searchControl {
	width: 400px;
	max-width: 100%;
	line-height: 1;
}

.SimpleHistory-filters__searchShortcut {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 12px;
	line-height: 1;
	padding: 2px 6px;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	color: #787c82;
	background: #f6f7f7;
	margin-right: 8px;
	opacity: 1;
	transition: opacity 0.15s ease;
}

/* Fade out shortcut hint when the input is focused. */
.SimpleHistory-filters__searchControl:focus-within
	.SimpleHistory-filters__searchShortcut {
	opacity: 0;
	pointer-events: none;
}

/* Expanded filters area. */
.SimpleHistory-filters__expandedFilters {
	padding: 12px;
	border-bottom: 1px solid #f0f0f1;
	background-color: #f9f9f9;
}

.SimpleHistory__filters__form select {
	/* width: 100%; */
	width: 310px;
}

.SimpleHistory__filters__form input[type="text"],
.SimpleHistory__filters__form input[type="search"] {
	/* width: 100%; */
	width: 310px !important;
}

.SimpleHistory__filters__filter--date,
.SimpleHistoryFilterDropin-searchInput {
	width: 310px;
}

.SimpleHistory__filters__filterLabel {
	display: inline-block;
	width: 150px;
	vertical-align: middle;
}

.SimpleHistory__filters__filterSubmitWrap {
	margin-left: 150px; /* same width as the label */
}

/* Component FormTokenField always adds element for label */
.SimpleHistory__filters__loglevels__select .components-form-token-field__label {
	display: none;
}

@media (max-width: 782px) {
	.SimpleHistory__filters__filterLabel {
		display: block;
		width: auto;
	}

.SimpleHistory__filters__filterSubmitWrap {
		margin-left: 0;
	}

.SimpleHistory-filters__expandedFilters .components-flex {
		flex-direction: column;
		align-items: stretch;
	}

.SimpleHistory-filters__searchRow {
		flex-wrap: wrap;
	}

.SimpleHistory-filters__defaultRow {
		flex-wrap: wrap;
	}

.SimpleHistory-filters__dateSelect {
		min-width: 100%;
	}

.SimpleHistory-filters__searchControl {
		min-width: 100%;
	}
}

@media (min-width: 600px) {
	/* prevent "jump" during page load because of select elm changing to select2 */
	.SimpleHistoryWrap .SimpleHistory__filters__filterRow {
		height: 41px;
		line-height: 41px;
	}

.SimpleHistoryWrap
		.wp-admin
		select[multiple].SimpleHistory__filters__filter--date {
		height: 2.25em;
		overflow: hidden;
	}
}

/* always label as blocks on dashboard because we don't know the width because of columns */
.postbox .SimpleHistory__filters__filterLabel {
	display: block;
	width: auto;
}
.postbox .SimpleHistory__filters__filterSubmitWrap {
	margin-left: 0;
}

/**
 * Search results in filter
 */
.SimpleHistory__filters__userfilter__gravatar,
.SimpleHistory__filters__userfilter__primary,
.SimpleHistory__filters__userfilter__secondary {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
}

.SimpleHistory__filters__userfilter__primary {
	margin-right: 5px;
}

.SimpleHistory__filters__userfilter__gravatar {
	margin-right: 10px;
}

/* Filters toggle button with funnel icon. */
.SimpleHistory-filters__filtersToggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.SimpleHistory-filters__filtersToggle svg {
	fill: currentColor;
}

.SimpleHistory-filters__filtersToggle.has-active-filters {
	background: #f0f6fc;
	border-color: #2271b1;
	color: #2271b1;
}

/* Chevron rotates 180° when the filters panel is expanded. */
.SimpleHistory-filters__filtersToggleChevron {
	transition: transform 0.2s ease;
}

.SimpleHistory-filters__filtersToggle[aria-expanded="true"]
	.SimpleHistory-filters__filtersToggleChevron {
	transform: rotate(180deg);
}

.SimpleHistoryFilterDropin-clearFilters {
	margin-left: 0;
}

/* more filters are hidden by default */
.SimpleHistory__filters__moreFilters {
	display: none;
	margin-bottom: 20px;
}

.SimpleHistory__filters.is-showingMoreFilters
	.SimpleHistoryFilterDropin-showMoreFilters--first {
	display: none;
}

.SimpleHistory__filters.is-showingMoreFilters
	.SimpleHistory__filters__moreFilters {
	display: block;
}

.SimpleHistory__filters.is-showingMoreFilters
	.SimpleHistoryFilterDropin-doFilterButton--first {
	display: none;
}

/* dashboard */
.postbox .SimpleHistory__filters {
	margin-left: 13px;
	margin-right: 13px;
}

/* day filter */
/* hidden by default, shown by js when selecting "custom range" in dates picker */
.SimpleHistory__filters__filter--dayValuesWrap {
	display: block;
	visibility: hidden;
	opacity: 0;
	margin-left: 155px;
	max-height: 0;
	overflow: hidden;
	transition:
		max-height 0.25s ease-in-out,
		opacity 0.25s ease-in-out,
		visibility 0s 1s;
}

.is-customDateFilterActive .SimpleHistory__filters__filter--dayValuesWrap {
	visibility: visible;
	opacity: 1;
	max-height: 150px;
	margin-top: 1em;
	transition:
		max-height 0.25s ease-in-out,
		opacity 0.25s ease-in-out,
		visibility 0s 0s;
}

.is-customDateFilterActive .SimpleHistory__filters__filterRow--date {
	line-height: inherit;
	height: inherit;
}

.postbox .SimpleHistory__filters__filter--dayValuesWrap {
	margin-left: 0;
}

.SimpleHistory__filters__filter--day {
	display: block;
}

.SimpleHistory__filters__filter--day select {
	width: 200px;
}

/* New events notifier — inline pill in the control bar. */
.SimpleHistoryDropin__NewRowsNotifier {
	display: none;
}

.SimpleHistoryDropin__NewRowsNotifier--haveNewRows {
	display: inline-flex;
	animation: sh-fade-in 0.3s ease-out;
}

@keyframes sh-fade-in {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

to {
		opacity: 1;
		transform: scale(1);
	}
}

.SimpleHistoryDropin__NewRowsNotifier .components-button {
	background: #dce9f7;
	color: #135e96;
	border: 1px solid #b8d4ee;
	border-radius: 100px;
	padding: 2px 12px;
	font-size: 12px;
	min-height: 0;
	height: auto;
	line-height: 1.5;
}

.SimpleHistoryDropin__NewRowsNotifier .components-button:hover {
	background: #c8ddf0;
	color: #104e80;
}

.SimpleHistoryDropin__NewRowsNotifier .components-button:focus {
	color: #135e96;
}

@media (prefers-reduced-motion: reduce) {
	.SimpleHistoryDropin__NewRowsNotifier--haveNewRows {
		animation: none;
	}
}

/* when there is a remote error or server down etc */
.SimpleHistoryDropin__NewRowsNotifier--haveErrorCheck {
	display: inline-flex;
}

.SimpleHistoryDropin__NewRowsNotifier--haveErrorCheck .components-button {
	background: #fef7f1;
	color: #8a6d3b;
	border: 1px solid #e0c6ad;
}

.SimpleHistoryLogitem--newRowSinceReload {
	background: rgba(254, 255, 0, 0.1);
}

/* Center event highlight for surrounding events view */
.SimpleHistoryLogitem--is-center-event {
	background: var(--sh-color-blue-light);
	box-shadow: inset 4px 0 0 0 var(--sh-color-blue);
}

.SimpleHistoryLogitem--is-center-event:hover {
	background: color-mix(
		in srgb,
		var(--sh-color-blue-light),
		var(--sh-color-blue) 10%
	);
}

/* Old styles moved from ip-info-dropin.css */

.SimpleHistoryIpInfoDropin__ipInfoTable {
	width: 100%;
	border-collapse: collapse;
}

.SimpleHistoryIpInfoDropin__ipInfoTable th,
.SimpleHistoryIpInfoDropin__ipInfoTable td {
	vertical-align: top;
	text-align: left;
	padding: var(--sh-spacing-xsmall) var(--sh-spacing-medium);
	border-top: 1px solid var(--sh-color-separator);
}

.SimpleHistoryIpInfoDropin__ipInfoTable tr:first-of-type th,
.SimpleHistoryIpInfoDropin__ipInfoTable tr:first-of-type td {
	border-top: 0;
}

.SimpleHistoryIpInfoDropin__ipInfoTable__mapRow a {
	display: inline-block;
}

.SimpleHistoryIpInfoDropin__ipInfoTable__mapRow td {
	padding: 0;
}

.SimpleHistoryIpInfoDropin__ipInfoTable__key {
	white-space: nowrap;
}

/* New styles for React */
/* Stats bar: events today and last 7 days. */
.sh-EventsStatsBar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	font-size: 13px;
	color: #50575e;
	border-bottom: 1px solid #f0f0f1;
}

.sh-EventsStatsBar > svg {
	fill: #787c82;
	flex-shrink: 0;
}

.sh-EventsStatsBar__separator {
	margin: 0 0.4em;
	color: #c3c4c7;
}

a.sh-EventsStatsBar--link {
	text-decoration: none;
	color: #50575e;
	cursor: pointer;
}

a.sh-EventsStatsBar--link:hover {
	background: #f6f7f7;
}

/* Events control bar: event count + action buttons.

12px, not 16px, and the same 12px as .SimpleHistory-filters__searchRow
   below. Those two sit directly on top of each other in every view, and at
   16px against 12px the action row was inset four pixels further than the
   filter panel under it — a misalignment small enough to read as sloppiness
   rather than as a choice. In the table view the gap was the full 16px
   against a panel that starts at the container edge, which made the
   Export/Share row visibly narrower than everything below it. */
.sh-EventsControlBar-actions {
	padding: 12px;
}

/* End-of-results hint: shown at the bottom of the list on the last page
   when filters are active. Includes a premium-retention upsell for free
   users. Left-aligned, dimmed — orientation, not action. */
.sh-EndOfResultsHint {
	font-size: var(--sh-font-size-small);
	color: var(--sh-color-gray-3);
	line-height: 1.4;
	padding: var(--sh-spacing-small) var(--sh-spacing-medium);
}

.sh-EndOfResultsHint__line {
	margin: 0;
}

/* Premium hint above the events when filtered to one initiator.
   Same quiet look as the end-of-results hint. The extra bottom padding
   leaves room for the first date label, which sits half above its row. */
.sh-InitiatorFilterHint {
	margin: 0;
	font-size: var(--sh-font-size-small);
	color: var(--sh-color-gray-3);
	line-height: 1.4;
	padding: var(--sh-spacing-small) var(--sh-spacing-medium) 20px;
}

.sh-EndOfResultsHint__line + .sh-EndOfResultsHint__line {
	margin-top: var(--sh-spacing-xsmall);
}

/* Inline action buttons group in control bar. */
.sh-ControlBarButtons {
	gap: var(--sh-spacing-xsmall);
}

/* Detailed | Compact view toggle at the end of the control bar (issue 240).
   Built like GitHub's segmented control: the group sits on a grey track and
   the chosen option is a white tile on top of it. The icon is small but the
   button around it keeps a comfortable hit area. */
.sh-EventsViewToggle {
	display: inline-flex;
	gap: 2px;
	margin: 0 0 0 var(--sh-spacing-small);
	padding: 3px;
	border: 0;
	border-radius: 6px;
	background: #f0f0f1;
	list-style: none;
}

.sh-EventsViewToggle__item {
	margin: 0;
	display: inline-flex;
}

.sh-EventsViewToggle__option {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 30px;
	height: 28px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #646970;
	background: transparent;
	cursor: pointer;
}

.sh-EventsViewToggle__option:hover {
	color: #1e1e1e;
}

.sh-EventsViewToggle__option.is-checked {
	background: #fff;
	border-color: #dcdcde;
	color: #1e1e1e;
}

/* Windows High Contrast Mode flattens the background/color swap above, so the
   checked option would look identical to the unchecked ones — add an outline
   so the selection is still visible. */
@media (forced-colors: active) {
	.sh-EventsViewToggle__option.is-checked {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}
}

.sh-EventsViewToggle__option svg {
	fill: currentColor;
}

.sh-EventsViewToggle__option:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
	z-index: 1;
}

/* Table view preview (issue 240), shown when nothing fills
   SimpleHistorySlotTableView.

Laid out like a screenshot: a staged sample of the premium table in full
   colour, fading out at the bottom into one cream premium card. An earlier
   version dimmed the sample to 55% and added a "Nothing below is clickable"
   note, because at full fidelity readers took it for the real table. That sold
   the feature faded and with a warning first. Now the "Example" ribbon and the
   card sitting over the table say it is a preview, and the sample keeps a
   not-allowed cursor for anyone who tries it anyway. */
.sh-TablePreview {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
}

/* Decoration, not a control. aria-hidden in the markup keeps it out of the
   accessibility tree; this keeps it out of reach of the mouse. Children get
   pointer-events: none, which leaves this element the one that is
   hit-tested, so the not-allowed cursor is what the mouse finds over it. */
.sh-TablePreview__sample {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;

/* Room under the table for the card, so it covers the last rows and
	   not the first ones. */
	padding: 16px 16px 290px;
	cursor: not-allowed;
	user-select: none;
}

.sh-TablePreview__sample > * {
	pointer-events: none;
}

.sh-TablePreview__ribbon {
	position: absolute;
	top: 0;
	right: 16px;
	padding: 3px 8px 4px;
	background: #1d2327;
	border-radius: 0 0 3px 3px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

.sh-TablePreview__query {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 6px 10px;
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 3px;
}

.sh-TablePreview__queryText {
	flex: 1;
	font-family: Menlo, Consolas, monaco, monospace;
	font-size: 13px;
	color: #1d2327;
}

.sh-TablePreview__queryApply {
	padding: 2px 10px;
	border: 1px solid #2271b1;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	color: #2271b1;
}

/* A staged week of activity: fixed bars from SAMPLE_CHART, drawn as divs
   because the preview must not ship working chart code. */
.sh-TablePreview__chart {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 60px;
	border-bottom: 1px solid #dcdcde;
}

.sh-TablePreview__chartBar {
	position: relative;
	flex: 1;
	min-height: 2px;
	background: #8f97d6;
}

/* The warning-and-above share, sitting on top of its bar, matching how the
   real chart stacks the two. */
.sh-TablePreview__chartBar-severe {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background: #d98a86;
}

.sh-TablePreview__axis {
	display: flex;
	justify-content: space-between;
	margin-top: -6px;
	font-size: 12px;
	color: #646970;
}

.sh-TablePreview__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 12px;
	color: #3c434a;
}

.sh-TablePreview__swatch {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 5px;
	background: #8f97d6;
	border-radius: 2px;
}

.sh-TablePreview__swatch.is-severe {
	background: #d98a86;
}

.sh-TablePreview__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	color: #646970;
}

.sh-TablePreview__count {
	font-size: 16px;
	font-weight: 600;
	color: #1d2327;
}

.sh-TablePreview__warnings {
	color: #b32d2e;
}

.sh-TablePreview__menus {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-left: auto;
	font-weight: 500;
	color: #3c434a;
}

.sh-TablePreview__table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #c3c4c7;
	font-variant-numeric: tabular-nums;
}

.sh-TablePreview__table th,
.sh-TablePreview__table td {
	padding: 9px 10px;
	text-align: left;
	border-bottom: 1px solid #dcdcde;
	font-size: 13px;
	line-height: 1.5;
	white-space: nowrap;
	color: #3c434a;
}

.sh-TablePreview__table th {
	font-weight: 600;
	color: #1d2327;
}

/* The two ticked rows the toolbar's Compare is about. */
.sh-TablePreview__table tr.is-selected td {
	background: #f0f6fc;
}

.sh-TablePreview__selected {
	font-weight: 400;
	color: #646970;
}

/* Drawn like the secondary buttons the real toolbar shows for a selection. */
.sh-TablePreview__button {
	padding: 3px 10px;
	border: 1px solid #2271b1;
	border-radius: 3px;
	font-size: 12px;
	color: #2271b1;
}

.sh-TablePreview__table td.is-muted {
	color: #646970;
}

.sh-TablePreview__table td.sh-TablePreview__message {
	width: 100%;
	color: #1d2327;
}

.sh-TablePreview__user {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* The user's name as Premium draws it while its filter menu is open. */
.sh-TablePreview__userCell {
	position: relative;
}

.sh-TablePreview__user.is-open {
	margin: -2px -4px;
	padding: 2px 4px;
	background: #f0f0f1;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px #2271b1;
}

/* Drawn like the WordPress components popover the real menu opens in. */
.sh-TablePreview__menu {
	position: absolute;
	top: calc(100% - 4px);
	left: 6px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-width: 220px;
	padding: 8px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 2px;
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.05),
		0 4px 16px rgba(0, 0, 0, 0.1);
}

.sh-TablePreview__menuItem {
	padding: 6px 8px;
	border-radius: 2px;
	color: #1e1e1e;
}

.sh-TablePreview__menuItem.is-active {
	background: #f0f0f1;
}

.sh-TablePreview__avatar {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
}

.sh-TablePreview__level {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sh-TablePreview__level::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #a7aaad;
}

.sh-TablePreview__level.is-warning::before {
	background: #dba617;
}

/* Fades the lower half of the sample into the page, so the card reads as
   sitting on top of a screenshot rather than next to a second table. */
.sh-TablePreview__fade {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 50%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 55%);
	pointer-events: none;
}

.sh-TablePreview__card {
	position: absolute;
	bottom: 24px;
	left: 50%;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: min(920px, calc(100% - 32px));
	padding: 20px 24px;
	background: var(--sh-color-cream);
	border: 1px solid var(--sh-color-premium-cream-edge);
	border-radius: 4px;
	box-shadow: 0 10px 34px rgba(29, 35, 39, 0.14);
	transform: translateX(-50%);
}

.sh-TablePreview__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: #1d2327;
}

.sh-TablePreview__text {
	margin: 0;
	font-size: 14px;
	color: #3c434a;
}

/* Three short lists side by side, each under a heading. */
.sh-TablePreview__groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 24px;
}

.sh-TablePreview__groupHeading {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #646970;
}

.sh-TablePreview__features {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.4;
	color: #3c434a;
}

.sh-TablePreview__features li {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
}

.sh-TablePreview__check {
	flex: none;
	fill: #00a32a;
}

.sh-TablePreview__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
}

.sh-TablePreview__cta {
	display: inline-block;
	padding: 9px 16px;
	background: var(--sh-color-green-cta);
	border-radius: 3px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}

/* WordPress admin colours links on hover and focus; keep the text white on
   the button instead. No hover change of its own, on purpose. */
.sh-TablePreview__cta:hover,
.sh-TablePreview__cta:focus {
	color: #fff;
}

.sh-TablePreview__cta:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* The rest of Premium, named quietly under the actions. */
.sh-TablePreview__also {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--sh-color-premium-cream-edge);
	font-size: 12px;
	color: #646970;
}

/* On narrow screens the card would cover the whole sample, so it drops below
   it instead and the fade goes. */
@media (max-width: 782px) {
	.sh-TablePreview__sample {
		padding-bottom: 16px;
		overflow-x: hidden;
	}

.sh-TablePreview__fade {
		display: none;
	}

.sh-TablePreview__card {
		position: static;
		width: auto;
		margin: 0 12px 12px;
		box-shadow: none;
		transform: none;
	}

.sh-TablePreview__groups {
		grid-template-columns: 1fr;
	}
}

/* Individual control bar button — compact tertiary style, matching action link sizing. */
.sh-ControlBarButton.components-button {
	display: inline-flex;
	align-items: center;
	font-size: var(--sh-font-size-small);
	color: var(--sh-color-gray-3);
	gap: var(--sh-spacing-xsmall);
	white-space: nowrap;
	padding: var(--sh-spacing-xsmall) var(--sh-spacing-small);
}

.sh-ControlBarButton.components-button:hover {
	color: var(--sh-color-black);
	background: var(--sh-color-gray-4);
}

.sh-ControlBarButton.components-button svg {
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
	flex-shrink: 0;
}

/* Sidebar toggle, at the end of the control bar.

Separated from the view switcher by the same 8px the switcher uses to
   separate itself from the action buttons to ITS left. Without it the toggle
   sat 4px from the switcher's grey track — a third of the spacing every other
   group boundary in this row gets — and a 32px button hard against a 34px
   track reads as a fourth segment of the segmented control rather than as a
   separate thing. 4px means "same group" here; 8px plus the row's own gap
   means "next group".

The pressed state is spelled out because @wordpress/components fills any
   button carrying aria-pressed with solid #1e1e1e and a white icon. Nobody
   chose that for this button, and it made a layout preference the heaviest
   element in a bar that also holds Export and Create alert — worst of all in
   the table view, which defaults to hidden and so shows it pressed on
   arrival. Grey fill and a dark icon instead, with the same #dcdcde outline
   the switcher's own selected tile carries, drawn as an inset shadow so
   turning it on does not move anything. The outline is what keeps pressed
   legible while hovered, since the inherited hover is the same grey. */
.sh-EventsSidebarToggle.components-button {
	margin-left: var(--sh-spacing-small);
}

.sh-EventsSidebarToggle.components-button.is-pressed,
.sh-EventsSidebarToggle.components-button.is-pressed:focus {
	color: var(--sh-color-black);
	background: var(--sh-color-gray-4);
	box-shadow: inset 0 0 0 1px #dcdcde;
}

/* Hovering a pressed button has to be spelled out separately: WP has its own
   .is-pressed:hover, and with only the rule above the button went back to
   solid black the moment the pointer touched it — the exact treatment the
   rule above exists to avoid. One step darker than the resting grey, so
   hover still says something. */
.sh-EventsSidebarToggle.components-button.is-pressed:hover {
	color: var(--sh-color-black);
	background: var(--sh-color-gray);
	box-shadow: inset 0 0 0 1px #dcdcde;
}

/* "Copied!" feedback state on share button. */
.sh-ControlBarButton--share.is-copied {
	color: var(--sh-color-green, #3f9349);
}

/* Share view popover. */
.sh-SharePopover-content {
	position: relative;
	padding: 12px 14px;
	width: 250px;
}

.sh-SharePopover-close.components-button {
	position: absolute;
	top: 4px;
	right: 4px;
}

.sh-SharePopover-url input[readonly] {
	font-size: 11px;
	color: var(--sh-color-black-2, #50575e);
	background: #f6f7f7;
	cursor: text;
}

/* Premium star indicator — muted, aspirational, not a badge. */
.sh-PremiumIndicator {
	opacity: 0.5;
	font-size: 0.75em;
	margin-left: 2px;
	line-height: 1;
}

.sh-ControlBarButton.components-button:hover .sh-PremiumIndicator {
	opacity: 0.75;
}

/* Overflow menu for backwards compat with old premium. */
.sh-ControlBarOverflowMenu .components-button {
	color: var(--sh-color-black-2, #50575e);
}

.SimpleHistoryReactRoot {
	flex: 1;
}

.SimpleHistoryReactRoot.is-page {
	background: white;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	border: 1px solid #e0e0e0;
}

.SimpleHistoryReactRoot-loading {
	display: block;
	min-height: 400px;
	padding: var(--sh-spacing-medium);
	color: var(--sh-color-black-2);
}

.SimpleHistoryReactRoot.is-dashboard .SimpleHistory-filters {
	padding: 0 11px;
}

.SimpleHistory__modal {
	min-width: 50vw;
	min-height: 50vh;
}

.sh-PageHeader a,
.sh-NotificationBar a,
.sh-Page-content a {
	text-underline-position: from-font;
}

/*
Styles for plugin update details. Markup looks like this:

<div class="sh-PluginUpdateDetails">
    <h4 class="sh-PluginUpdateDetails-title">What's new in this version</h4>
    <ul class="sh-PluginUpdateDetails-features">
        <li class="sh-PluginUpdateDetails-feature">Feature 1</li>
        <li class="sh-PluginUpdateDetails-feature">Feature 2</li>
    </ul>
    <p class="sh-PluginUpdateDetails-releaseLink">
        <a href="..." target="_blank">Read full release notes</a>
    </p>
</div>
*/

.sh-PluginUpdateDetails {
	margin-bottom: var(--sh-spacing-medium);
}

.sh-PluginUpdateDetails-title {
	font-weight: 500;
	margin-top: var(--sh-spacing-medium);
	margin-bottom: var(--sh-spacing-small);
}

.sh-PluginUpdateDetails-features {
	list-style: disc;
	padding-left: var(--sh-spacing-medium);
	margin: var(--sh-spacing-small) 0;
}

.SimpleHistoryLogitem__details .sh-PluginUpdateDetails-releaseLink {
	margin-top: var(--sh-spacing-small);
	margin-bottom: var(--sh-spacing-small);
}

/* Make chart canvas show pointer cursor to indicate it's clickable */
.SimpleHistory_SidebarChart_ChartCanvas {
	cursor: pointer;
}

/**
 * Settings Page Cards
 * Modern card-based layout for settings sections.
 */
.sh-SettingsCard {
	background: var(--sh-color-white);
	border-radius: 8px;
	padding: var(--sh-spacing-large);
	margin: var(--sh-spacing-medium) 0;
	border: 1px solid var(--sh-color-separator);
}

.sh-SettingsCard .form-table {
	margin-top: 0;
}

.sh-SettingsCard .form-table th {
	padding-top: var(--sh-spacing-medium);
	padding-bottom: var(--sh-spacing-medium);
}

.sh-SettingsCard .form-table td {
	padding-top: var(--sh-spacing-medium);
	padding-bottom: var(--sh-spacing-medium);
}

/* Remove default border from form-table rows inside cards */
/* .sh-SettingsCard .form-table tr {
	border-bottom: 1px solid var(--sh-color-separator);
} */

/* .sh-SettingsCard .form-table tr:last-child {
	border-bottom: none;
} */

/* Make section title inside card more prominent */
.sh-SettingsCard h2 {
	margin-top: 0;
	margin-bottom: var(--sh-spacing-small);
}

/* Override default WordPress form-table width in cards */
.sh-SettingsCard .form-table th {
	width: 220px;
}

@media (max-width: 782px) {
	.sh-SettingsCard .form-table th {
		width: auto;
	}
}

/* Email Promo Card - Promotional card in sidebar for weekly email summary feature */
.sh-EmailPromoCard {
	border: none;
}

.sh-EmailPromoCard-badge {
	padding: 0;
}

.sh-EmailPromoCard-badgeImageLink {
	display: block;
	width: 100px;
	float: right;
	margin-block: var(--sh-spacing-medium);
	margin-inline-start: var(--sh-spacing-medium);
	transform: scale(1) rotate(5deg);
	transition: transform 0.2s ease-in-out;

&:hover {
		transform: scale(1.05) rotate(10deg);
	}
}

.sh-EmailPromoCard-badgeImage {
	width: 100%;
}

.sh-EmailPromoCard-text {
	line-height: 1.3;
}

.sh-EmailPromoCard-text--intro {
	font-size: var(--sh-font-size-medium);
	font-weight: 600;
}

.sh-EmailPromoCard-cta {
	margin-block-start: var(--sh-spacing-large);
	margin-block-end: var(--sh-spacing-medium);
}

/* Increase specificity to override .button-link styles */
.sh-EmailPromoCard .sh-EmailPromoCard-dismiss {
	display: block;
	width: 100%;
	text-align: center;
}

/**
 * Channel Status - Generic status display for channel settings.
 *
 * Displays connection events as a chronological mini-log:
 *   <div class="sh-ChannelStatus">
 *     <h4>Connection Status</h4>
 *     <ul class="sh-ChannelStatus-log">
 *       <li class="sh-ChannelStatus-log-item sh-ChannelStatus-log-item--success">...</li>
 *       <li class="sh-ChannelStatus-log-item sh-ChannelStatus-log-item--error">...</li>
 *     </ul>
 *   </div>
 */
.sh-ChannelStatus {
	padding: 1em;
	background: #f6f7f7;
	border-left: 4px solid #c3c4c7;
}

/* Legacy styles - kept for backward compatibility */
.sh-ChannelStatus--success {
	color: #2e7d32;
}

.sh-ChannelStatus--error {
	color: #b32d2e;
}

.sh-ChannelStatus--errorMessage {
	margin: 0.5em 0 0 0;
	padding: 0.75em;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	font-family:
		Menlo,
		Consolas,
		Monaco,
		Liberation Mono,
		Lucida Console,
		monospace;
	font-size: 12px;
	line-height: 1.5;
	color: #50575e;
	word-break: break-word;
}

/* Mini-log styles */
.sh-ChannelStatus-log {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sh-ChannelStatus-log-item {
	display: flex;
	gap: 1em;
	padding: 0.5em 0;
	border-bottom: 1px solid #dcdcde;
	line-height: 1.4;
}

.sh-ChannelStatus-log-item:last-child {
	border-bottom: none;
}

.sh-ChannelStatus-log-time {
	flex-shrink: 0;
	color: #50575e;
}

.sh-ChannelStatus-log-message {
	word-break: break-word;
}

.sh-ChannelStatus-log-item--success .sh-ChannelStatus-log-message {
	color: #2e7d32;
}

.sh-ChannelStatus-log-item--error .sh-ChannelStatus-log-message {
	color: #b32d2e;
}

.sh-ChannelStatus-log-item--disabled .sh-ChannelStatus-log-message {
	color: #b32d2e;
	font-weight: 600;
}

.sh-ChannelStatus-hint {
	margin: 1em 0 0 0;
	padding: 0.5em 0.75em;
	background: #fff8e5;
	border-left: 3px solid #dba617;
	font-size: 13px;
}

.sh-ChannelStatus--empty {
	color: #50575e;
	font-style: italic;
}

/**
 * Channel Test Connection - Generic test button for channel settings.
 */
.sh-ChannelTestConnection {
	margin-top: 0;
}

.sh-ChannelTestConnection-hint {
	margin-top: 0.5em;
}

.sh-ChannelTestConnection .spinner {
	float: none;
	margin-top: 0;
}

.sh-ChannelTestResult {
	margin-top: 0.75em;
	padding: 0.75em 1em;
	border-radius: 4px;
	line-height: 1.5;
	word-break: break-word;
}

.sh-ChannelTestResult.sh-ChannelTestResult--success {
	background: #edfaef;
	border-left: 4px solid #00a32a;
	color: #1e4620;
}

.sh-ChannelTestResult.sh-ChannelTestResult--error {
	background: #fcf0f1;
	border-left: 4px solid #d63638;
	color: #8a2424;
}

/**
 * Alerts Settings Page Teaser
 * Premium feature promotional page that previews the Alerts settings.
 * Mirrors the premium UI with functional tabs but disabled content (inert).
 */

/* Alerts internal sub-navigation - styled as subtle links, not tabs */
.sh-AlertsTabs {
	margin-bottom: var(--sh-spacing-large);
	border-bottom: none;
}

.sh-AlertsTabs .nav-tab {
	background: none;
	border: none;
	padding: 0.5em 0;
	margin-right: 1.5em;
	color: var(--sh-color-text-muted, #50575e);
	font-weight: 400;
}

.sh-AlertsTabs .nav-tab:hover,
.sh-AlertsTabs .nav-tab:focus {
	background: none;
	color: var(--sh-color-text, #1d2327);
}

.sh-AlertsTabs .nav-tab-active,
.sh-AlertsTabs .nav-tab-active:hover,
.sh-AlertsTabs .nav-tab-active:focus {
	background: none;
	border: none;
	border-bottom: 2px solid var(--sh-color-blue, #2271b1);
	color: var(--sh-color-text, #1d2327);
	font-weight: 400;
}

.sh-AlertsTabs-count {
	font-weight: 400;
	color: var(--sh-color-text-muted, #50575e);
}

.sh-AlertsTabs--teaser {
	display: flex;
	align-items: center;
	margin-bottom: 0;
}

.sh-AlertsTabs-badge {
	margin-left: auto;
}

.sh-AlertsTabs-icon {
	margin-right: 0.35em;
	opacity: 0.7;
}

.sh-AlertsTabs-errorIndicator {
	color: #dba617;
	margin-left: 0.25em;
}

/* Preview Mode Banner - explains this is a non-functional preview */
.sh-AlertsTeaser-banner {
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-medium);
	padding: var(--sh-spacing-medium) var(--sh-spacing-large);
	margin-top: var(--sh-spacing-large);
	margin-bottom: var(--sh-spacing-large);
	background: var(--sh-color-cream);
	border-radius: var(--sh-border-radius);
}

.sh-AlertsTeaser-banner-icon {
	font-size: 24px;
	width: 24px;
	height: 24px;
	line-height: 1;
	color: #00a32a;
}

.sh-AlertsTeaser-banner-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sh-AlertsTeaser-banner-title {
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-small);
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
}

.sh-AlertsTeaser-banner-content > span {
	font-size: 13px;
	color: #3c434a;
}

.sh-AlertsTeaser-banner-content a {
	font-size: 13px;
	margin-top: var(--sh-spacing-xsmall);
}

/* Main teaser container - disabled state */
.sh-AlertsTeaser {
	max-width: 900px;
}

.sh-AlertsTeaser[inert] {
	opacity: 0.55;
	filter: grayscale(30%);
	cursor: not-allowed;
	position: relative;
}

.sh-AlertsTeaser[inert] button,
.sh-AlertsTeaser[inert] input,
.sh-AlertsTeaser[inert] a {
	pointer-events: none;
}

/* Wrapper for sticky CTA positioning */
.sh-AlertsTeaser-wrap {
	position: relative;
	padding-bottom: 180px;
}

/* Shared Card Header - used in destinations and alert rules */
.sh-CardHeader {
	display: flex;
	align-items: flex-start;
	gap: var(--sh-spacing-small);
	margin-bottom: var(--sh-spacing-medium);
}

.sh-CardHeader .dashicons {
	color: var(--sh-color-blue);
	margin-top: 2px;
}

.sh-CardHeader-content {
	display: flex;
	flex-direction: column;
	gap: var(--sh-spacing-xxsmall);
}

.sh-CardHeader-description {
	color: #50575e;
	font-size: 13px;
}

/* Shared Status Icon - used in alert rules and destinations */
.sh-StatusIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	border-radius: 50%;
	flex-shrink: 0;
}

.sh-StatusIcon--ok {
	color: #1e4620;
	background: #d4edda;
}

.sh-StatusIcon--error {
	color: #721c24;
	background: #f8d7da;
}

.sh-StatusIcon--unused {
	color: #646970;
	background: #f0f0f1;
}

/* Destinations */
.sh-Destinations {
	display: flex;
	flex-direction: column;
	gap: var(--sh-spacing-large);
}

/* Remove card margins inside flex containers - gap handles spacing */
.sh-Destinations .sh-SettingsCard,
.sh-PresetCards .sh-SettingsCard {
	margin: 0;
}

.sh-DestinationType-list {
	margin-bottom: var(--sh-spacing-medium);
}

.sh-DestinationType-empty {
	color: #646970;
	font-style: italic;
	margin: 0;
}

/* Destination table - column widths */
.sh-DestinationType .wp-list-table .column-name {
	width: 25%;
}

.sh-DestinationType .wp-list-table .column-status {
	width: 150px;
}

.sh-DestinationType .wp-list-table .column-usedby {
	width: 100px;
}

.sh-DestinationType .wp-list-table .column-details {
	word-break: break-word;
}

/* Destination status indicators */
.sh-DestinationStatus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sh-DestinationStatus--ok {
	color: #1e4620;
}

/* Button with icon - reusable component */
.sh-Button--withIcon {
	display: inline-flex !important;
	align-items: center;
	gap: var(--sh-spacing-xsmall);
}

.sh-Button--withIcon .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
}

/* Alert Presets */
.sh-AlertPresets {
	margin-bottom: var(--sh-spacing-xlarge);
}

.sh-AlertPresets-title {
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-small);
	font-size: 1.25em;
	margin-bottom: var(--sh-spacing-small);
}

.sh-AlertPresets-title .dashicons {
	color: var(--sh-color-blue);
}

.sh-AlertPresets-description {
	margin-bottom: var(--sh-spacing-large);
	color: #50575e;
}

/* Preset Cards */
.sh-PresetCards {
	display: flex;
	flex-direction: column;
	gap: var(--sh-spacing-large);
}

.sh-PresetCard-destinations {
	display: flex;
	flex-direction: column;
	gap: var(--sh-spacing-small);
}

.sh-PresetCard-destinationsLabel {
	font-weight: 500;
	font-size: 13px;
	color: #1d2327;
}

.sh-PresetCard-destinationGroups {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sh-spacing-medium);
}

.sh-PresetCard-destinationGroup {
	min-width: 180px;
}

.sh-PresetCard-destinationGroupLabel {
	display: flex;
	align-items: center;
	gap: 4px;
	text-transform: uppercase;
	font-size: 11px;
	margin-bottom: 6px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--sh-color-gray);
}

.sh-PresetCard-destinationGroupLabel .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.sh-PresetCard-destinationEmpty,
.sh-PresetCard-destinationManage {
	margin: 0;
	font-size: 12px;
}

.sh-PresetCard-destinationManage {
	margin-top: 12px;
}

.sh-PresetCard-destinationEmpty a,
.sh-PresetCard-destinationManage a {
	text-decoration: none;
}

.sh-PresetCard-destinationGroupItems {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sh-PresetCard-destinationItem {
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-xsmall);
	cursor: pointer;
	padding: 4px 8px;
	margin: -4px -8px;
	border-radius: 4px;
}

.sh-PresetCard-destinationName {
	font-size: 13px;
}

.sh-PresetCard-emailRecipients {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #646970;
	font-size: 12px;
	margin-left: 4px;
	padding: 1px 5px 1px 3px;
	background: #f0f0f1;
	border-radius: 10px;
}

.sh-PresetCard-emailRecipients .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.sh-PresetCard-destinationStatus {
	margin-left: 6px;
}

/* Preset Events - Expandable event list using native <details>/<summary> */
.sh-PresetEvents {
	margin-top: var(--sh-spacing-xsmall);
}

.sh-PresetEvents-toggle {
	font-size: 13px;
	color: #2271b1;
	cursor: pointer;
	list-style: none;
}

.sh-PresetEvents-toggle::-webkit-details-marker {
	display: none;
}

.sh-PresetEvents-toggle::after {
	content: " ▶";
	font-size: 9px;
	margin-left: 4px;
	display: inline-block;
	vertical-align: middle;
}

.sh-PresetEvents[open] > .sh-PresetEvents-toggle::after {
	content: " ▼";
}

.sh-PresetEvents-list {
	margin: var(--sh-spacing-xsmall) 0 0 var(--sh-spacing-medium);
	columns: 2;
	list-style-type: disc;
}

.sh-PresetEvents-list li {
	break-inside: avoid;
}

/* Custom Rules */
.sh-CustomRules {
	margin-top: var(--sh-spacing-medium);
}

.sh-CustomRules-empty {
	color: #646970;
	font-style: italic;
}

.sh-CustomRules-actions {
	margin-top: var(--sh-spacing-medium);
}

/* CTA Section - Sticky at bottom */
.sh-AlertsTeaser-cta {
	position: fixed;
	bottom: 0;
	left: 160px;
	right: 0;
	padding: var(--sh-spacing-medium) var(--sh-spacing-large);
	background: var(--sh-color-cream);
	border-top: 1px solid #e0d9c8;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
	z-index: 100;
}

/* Adjust for collapsed admin menu */
.folded .sh-AlertsTeaser-cta {
	left: 36px;
}

/* Mobile responsive */
@media screen and (max-width: 782px) {
	.sh-AlertsTeaser-cta {
		left: 0;
	}
}

.sh-AlertsTeaser-cta-content {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-large);
	flex-wrap: wrap;
}

.sh-AlertsTeaser-cta-content h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-small);
}

.sh-AlertsTeaser-cta-content p {
	margin: 0;
	color: #50575e;
	font-size: 13px;
	flex: 1;
	min-width: 200px;
}

.sh-AlertsTeaser-cta-content a:not(.button) {
	font-size: 13px;
	white-space: nowrap;
}

/**
 * Message Control Settings Page Teaser
 * Premium feature promotional page that previews the Message Control settings.
 * Reuses many styles from Alerts teaser.
 */

/* Wrapper for sticky CTA positioning */
.sh-MessageControlTeaser-wrap {
	position: relative;
	padding-bottom: 180px;
}

/* Main teaser container - disabled state */
.sh-MessageControlTeaser {
	max-width: 900px;
}

.sh-MessageControlTeaser[inert] {
	opacity: 0.55;
	filter: grayscale(30%);
	cursor: not-allowed;
	position: relative;
}

.sh-MessageControlTeaser[inert] button,
.sh-MessageControlTeaser[inert] input,
.sh-MessageControlTeaser[inert] a {
	pointer-events: none;
}

/* Loggers list styling */
.sh-MessageControlTeaser-loggers {
	margin-top: var(--sh-spacing-medium);
}

.sh-MessageControlTeaser-stats {
	margin-bottom: var(--sh-spacing-medium);
	color: #50575e;
}

.sh-MessageControlTeaser-stats strong {
	color: #1d2327;
}

/* Loggers table - similar to premium Message Control */
.sh-MessageControlTeaser .loggers {
	--sh-border-width: 4px;
}

.sh-MessageControlTeaser .loggers .enabled .column-name {
	border-left: var(--sh-border-width) solid #72aee6;
}

.sh-MessageControlTeaser .loggers .disabled .column-name {
	padding-left: calc(3em + var(--sh-border-width));
}

.sh-MessageControlTeaser .loggers .column-name {
	position: relative;
}

.sh-MessageControlTeaser .loggers .column-name strong {
	display: block;
	margin-bottom: 0.2em;
	font-size: 14px;
}

.sh-MessageControlTeaser .loggers .disabled strong {
	font-weight: 400;
}

.sh-MessageControlTeaser .loggers th,
.sh-MessageControlTeaser .loggers td {
	padding: 1.25em 2em 1.25em 3em;
}

.sh-MessageControlTeaser .loggers .enabled th,
.sh-MessageControlTeaser .loggers .enabled td {
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
	background-color: #f0f6fc;
}

.sh-MessageControlTeaser .loggers span[class^="sh-Icon--"] {
	--icon-size: 20px;
	width: var(--icon-size);
	height: var(--icon-size);
	position: absolute;
	background-size: 100%;
	left: 0.8em;
	top: 1.2em;
}

.sh-MessageControlTeaser .loggers .disabled span[class^="sh-Icon--"] {
	left: calc(0.8em + var(--sh-border-width));
}

.sh-MessageControlTeaser .loggers .column-status {
	width: 120px;
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-xsmall);
}

.sh-MessageControlTeaser .loggers .description {
	color: #646970;
	margin: 0;
}

/**
 * Failed Logins Settings Page Teaser
 * Premium feature promotional page that previews the Failed Login settings.
 * Reuses many styles from Alerts teaser.
 */

/* Wrapper for sticky CTA positioning */
.sh-FailedLoginsTeaser-wrap {
	position: relative;
	padding-bottom: 180px;
}

/* Main teaser container - disabled state */
.sh-FailedLoginsTeaser {
	max-width: 900px;
}

.sh-FailedLoginsTeaser[inert] {
	opacity: 0.55;
	filter: grayscale(30%);
	cursor: not-allowed;
	position: relative;
}

.sh-FailedLoginsTeaser[inert] button,
.sh-FailedLoginsTeaser[inert] input,
.sh-FailedLoginsTeaser[inert] a {
	pointer-events: none;
}

/* Settings form styling */
.sh-FailedLoginsTeaser-settings {
	margin-top: var(--sh-spacing-medium);
}

.sh-FailedLoginsTeaser .form-table th {
	padding-left: 0;
}

.sh-FailedLoginsTeaser .form-table td p {
	margin-top: 0;
}

.sh-FailedLoginsTeaser .form-table td label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 0.5em;
}

/**
 * Help & Support Page Styles
 * Styles for the Help & Support page including status bar and system info.
 */

/* Status Bar - shown at top of Help & Support page */
.sh-StatusBar {
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	border: 1px solid #e5e7eb;
	border-radius: var(--sh-border-radius);
	padding: var(--sh-spacing-medium) var(--sh-spacing-large);
	margin-bottom: var(--sh-spacing-large);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sh-spacing-medium);
}

.sh-StatusBar-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.sh-StatusBar-connected {
	color: #1e1e1e;
}

.sh-StatusBar-connected .dashicons {
	color: #00a32a;
}

.sh-StatusBar-version {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
}

.sh-StatusBar-stats {
	color: #50575e;
	padding-left: var(--sh-spacing-medium);
	border-left: 1px solid #e5e7eb;
}

.sh-StatusBar-stats a {
	color: inherit;
}

.sh-StatusBar-error {
	color: #d63638;
	display: flex;
	align-items: center;
	gap: 4px;
}

.sh-StatusBar-error .dashicons {
	color: #d63638;
}

.sh-StatusBar-hasError {
	border-color: #d63638;
	background: #fcf0f1;
}

/* Support info textarea */
.sh-HelpPage-supportInfoTextarea {
	width: 100%;
	font-family:
		Menlo,
		Consolas,
		Monaco,
		Liberation Mono,
		Lucida Console,
		monospace;
	font-size: 12px;
	line-height: 1.5;
	background: #f6f7f7;
	border: 1px solid #c3c4c7;
	border-radius: var(--sh-border-radius);
	padding: var(--sh-spacing-medium);
	resize: vertical;
}

/* Buttons row */
.sh-HelpPage-buttons {
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-small);
	margin-top: var(--sh-spacing-small);
}

/* Copy status message - shown below buttons */
.sh-HelpPage-copyStatus {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	min-height: 24px;
	font-size: 13px;
}

.sh-HelpPage-copyStatus .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Help page grid - Get Help spans 2 rows, Documentation and FAQ stacked on right */
.sh-HelpPage-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: var(--sh-spacing-medium);
}

.sh-HelpPage-getHelp {
	grid-row: span 2;
}

@media (max-width: 782px) {
	.sh-HelpPage-grid {
		grid-template-columns: 1fr;
	}

.sh-HelpPage-getHelp {
		grid-row: auto;
	}
}

/* Help page sponsor section */
.sh-HelpPage-sponsor {
	margin-top: var(--sh-spacing-large);
}

.sh-HelpPage-sponsor-content {
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-large);
	flex-wrap: wrap;
	justify-content: center;
}

.sh-HelpPage-sponsor-logo img {
	height: 40px;
	width: auto;
	display: block;
}

.sh-HelpPage-sponsor-text {
	flex: 1 1 400px;
	text-align: center;
	margin: 0;
}

/* Help page section title adjustment */
.sh-HelpAndSupportPage > .sh-SettingsPage-settingsSection-title {
	margin-bottom: 1rem;
}

/* Sidebar tip */
.sh-SidebarTip {
	padding: 0.75rem 1rem;
}

.sh-SidebarTip-text {
	margin: 0;
	font-size: var(--sh-font-size-medium);
	line-height: 1.5;
	color: var(--sh-color-black-2);
}

.sh-SidebarTip-icon {
	margin-right: 0.25rem;
}

.sh-SidebarTip-label {
	font-weight: 600;
	color: var(--sh-color-black);
}

/* Quiet by design — see .sh-DashboardWidget-tipLink. */
.sh-SidebarTip-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* UserCard popover — shown on avatar/name click */
.sh-UserCard__trigger.components-button.is-link {
	text-decoration: none;
	color: #2271b1;
	cursor: pointer;
}

.sh-UserCard__trigger.components-button.is-link:hover {
	text-decoration: underline;
	color: #135e96;
}

.sh-UserCard__trigger.components-button.is-link:focus {
	box-shadow: none;
	outline: 1px dotted;
	outline-offset: 1px;
}

.SimpleHistoryLogitem__firstcol
	.sh-UserCard__trigger.components-button.is-link {
	display: block;
	padding: 0;
	height: auto;
}

.sh-UserCard__popover .components-popover__content {
	min-width: 360px;
	overflow: visible;
	max-height: none;
}

.sh-UserCard {
	position: relative;
	padding: var(--sh-spacing-medium);
	padding-right: calc(var(--sh-spacing-medium) + 20px);
}

/* Reserve content height during loading so the popover positions correctly
   before the REST call resolves (otherwise it sizes for the identity-only
   shell, then overflows / scrollbars when content fills in).

Two heights because the two card variants have very different sizes:
   - Free  (teaser block with embedded screenshot): ~460px
   - Premium (identity + meta + stats + actions):   ~340px

The body class `sh-has-premium` is set in PHP at admin_body_class time
   so we know which to reserve before any JS runs. Class drops once data
   loads — popover then snaps to natural content height. */
.sh-UserCard--wp-user.sh-UserCard--loading {
	min-height: 460px;
}

body.sh-has-premium .sh-UserCard--wp-user.sh-UserCard--loading {
	min-height: 290px;
}

.sh-UserCard__close.components-button {
	position: absolute;
	top: var(--sh-spacing-xsmall);
	right: var(--sh-spacing-xsmall);
	z-index: 1;
	min-width: 24px;
	min-height: 24px;
	padding: 2px;
}

.sh-UserCard__identity {
	display: flex;
	gap: var(--sh-spacing-medium);
	align-items: flex-start;
}

.sh-UserCard__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	flex-shrink: 0;
}

.sh-UserCard__avatar--placeholder {
	background: var(--sh-color-gray-4);
}

.sh-UserCard__avatar--wp {
	background: #0073aa;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.sh-UserCard__avatar--cli {
	background: #23282d;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.sh-UserCard__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sh-UserCard__name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	word-break: break-word;
	margin: 0 0 2px 0;
}

.sh-UserCard__meta {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sh-UserCard__meta li {
	font-size: 13px;
	color: var(--sh-color-gray-3);
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

/* Meta block rendered below the stats grid (last active, IP+browser).
   Visual continuity with the stats above — no border, just spacing. */
.sh-UserCard__meta--belowStats {
	margin-top: var(--sh-spacing-small);
	padding-top: var(--sh-spacing-small);
}

.sh-UserCard__userId {
	font-size: 12px;
	font-weight: 400;
	color: var(--sh-color-gray-3, #757575);
	margin-left: 6px;
}

.sh-UserCard__meta .sh-UserCard__detail {
	margin-top: 4px;
}

.sh-UserCard__meta .sh-UserCard__detail + .sh-UserCard__detail {
	margin-top: 0;
}

/* Inline icon + value layout for the meta-belowStats rows. Keeps the
   value reading first, with a small muted icon as a wayfinder on the
   left so the eye can scan the three lines (activity / login / session)
   without reading the labels. */
.sh-UserCard__meta--belowStats .sh-UserCard__detail {
	display: flex;
	align-items: center;
	gap: 6px;
}

.sh-UserCard__detailIcon {
	flex-shrink: 0;
	fill: var(--sh-color-gray-3, #757575);
}

.sh-UserCard__statsHeadingIcon {
	margin-right: 4px;
	vertical-align: -2px;
	fill: var(--sh-color-gray-3, #757575);
}

.sh-UserCard__description {
	font-size: 13px;
	color: var(--sh-color-gray-3);
	line-height: 1.4;
	margin: 0 0 4px 0;
}

.sh-UserCard__loading {
	display: flex;
	padding: 8px 0;
	margin-left: calc(64px + var(--sh-spacing-medium));
}

.sh-UserCard__loading .components-spinner {
	margin: 0;
}

.sh-UserCard__actions {
	margin-top: var(--sh-spacing-small);
	padding-top: var(--sh-spacing-small);
	border-top: 1px solid var(--sh-color-gray-4);
}

.sh-UserCard__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px var(--sh-spacing-medium);
	margin-top: var(--sh-spacing-small);
	padding-top: var(--sh-spacing-small);
	border-top: 1px solid var(--sh-color-gray-4);
	color: var(--sh-color-gray-3, #757575);
}

.sh-UserCard__statsHeading {
	width: 100%;
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--sh-color-gray-3, #757575);
}

.sh-UserCard__stat {
	display: flex;
	flex-direction: column;
}

.sh-UserCard__statValue {
	font-weight: 600;
	font-size: var(--sh-font-size-medium);
	color: var(--sh-color-gray-1, #1e1e1e);
}

.sh-UserCard__statLabel {
	font-size: var(--sh-font-size-small);
}

.sh-UserCard__actions ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sh-UserCard__actions li {
	margin: 0;
	padding: 0;
}

.sh-UserCard__actionLink {
	display: inline-flex;
	align-items: center;
	gap: var(--sh-spacing-xsmall);
	font-size: 13px;
	line-height: 1.6;
	text-decoration: none;
}

.sh-UserCard__actionLink:hover {
	text-decoration: underline;
}

.sh-UserCard__actionLink svg {
	fill: currentColor;
	flex-shrink: 0;
}

/* Email in identity section: data, not action — keep subtle. */
.sh-UserCard__email {
	color: var(--sh-color-gray-3);
	text-decoration: none;
}

.sh-UserCard__email:hover,
.sh-UserCard__email:focus {
	text-decoration: underline;
}

/* Premium teaser block — visually walled off so the eye reads it as an
   ad, not as more card content. Cream background + soft border + corner
   "Premium" pill. Padding kept compact so the block doesn't dominate
   the popover when the rest of the card is short. */
.sh-UserCard__premiumTeaser {
	position: relative;
	margin-top: var(--sh-spacing-small);
	padding: 10px 12px 12px;
	background: var(--sh-color-cream);
	border: 1px solid var(--sh-color-gray-4);
	border-radius: var(--sh-border-radius, 4px);
	font-size: var(--sh-font-size-small);
	color: var(--sh-color-gray-3);
	line-height: 1.4;
}

.sh-UserCard__teaserHeader {
	margin: 0 0 6px 0;
}

/* Premium teaser screenshot block — figure + caption + CTA.
   Screenshot regen: npm run screenshots:teaser-user-card. */
.sh-UserCard__teaserScreenshot {
	margin: 0 0 6px 0;
}

.sh-UserCard__teaserScreenshot img {
	display: block;
	max-width: 100%;
	height: auto;
	/* Reserve space upfront so the popover doesn't lay out smaller-than-content
	   on first open (causes a scrollbar until the image loads + repositions).
	   Ratio matches the source PNG produced by the teaser-screenshots skill;
	   tolerant of small variance run-to-run. */
	aspect-ratio: 636 / 366;
	/* The screenshot is a crop from inside the card, so it has no frame of
	   its own. A plain border sets it off from the cream block; no shadow. */
	background: #fff;
	border: 1px solid var(--sh-color-gray-4);
	border-radius: var(--sh-border-radius, 4px);
}

.sh-UserCard__teaserCaption {
	margin: 6px 0 0 0;
	font-size: 12px;
	color: var(--sh-color-gray-3);
	line-height: 1.4;
}

/* Outlined button styling so the CTA reads as the conversion target,
   not just another link nestled in the caption text. */
.sh-UserCard__teaserCta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	padding: 6px 12px;
	color: #2271b1;
	background: #fff;
	border: 1px solid #2271b1;
	border-radius: 3px;
	text-decoration: none;
	font-weight: 500;
}

.sh-UserCard__teaserCta:hover,
.sh-UserCard__teaserCta:focus {
	color: #fff;
	background: #2271b1;
	text-decoration: none;
}

/* Clickable wrapper around the embedded preview — strip default anchor
   styling so the image still looks like an image, just with a pointer
   cursor + subtle lift on hover. */
.sh-UserCard__teaserScreenshotLink {
	display: block;
	text-decoration: none;
	transition: opacity 0.15s ease-out;
}

.sh-UserCard__teaserScreenshotLink:hover,
.sh-UserCard__teaserScreenshotLink:focus {
	opacity: 0.9;
}

/* License Reminder — sidebar postbox shown when an add-on is missing a license key. */
.sh-LicenseReminder.postbox {
	border-top: 3px solid var(--sh-color-yellow);
}

.sh-LicenseReminder .inside {
	padding: var(--sh-spacing-medium) var(--sh-spacing-large);
}

.sh-LicenseReminder-title {
	display: flex;
	align-items: center;
	gap: var(--sh-spacing-xsmall);
	margin: 0 0 var(--sh-spacing-xsmall) 0;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
}

.sh-LicenseReminder-icon.dashicons {
	flex-shrink: 0;
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: var(--sh-color-black-2);
}

.sh-LicenseReminder-text {
	margin: 0 0 var(--sh-spacing-medium) 0;
	font-size: 13px;
	color: #3c434a;
}

.sh-LicenseReminder-actions {
	margin: 0 0 var(--sh-spacing-xsmall) 0;
}

.sh-LicenseReminder-dismissWrap {
	margin: 0;
}

.sh-LicenseReminder-dismiss {
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--sh-color-black-2);
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
}

.sh-LicenseReminder-dismiss:hover,
.sh-LicenseReminder-dismiss:focus-visible {
	color: #1d2327;
}