/* ==========================================================================
   MSM Tools — plugin styles
   Only what the theme's component library does not already provide.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Token defaults

   The msm theme defines these on :root. Any other theme does not, and an
   unresolved var() drops the whole declaration, so accents and surfaces
   would render unstyled. These defaults make the plugin self-sufficient.

   :where(html) is deliberate. It carries zero specificity, so a theme's own
   :root block — msm's included — always wins regardless of stylesheet order.
   The plugin supplies a floor; the theme supplies the brand. Defining these
   on :root instead would invert that, because the plugin's stylesheet is
   enqueued after the theme's.

   The unprefixed names mirror the theme's own vocabulary rather than
   introducing a parallel set. Zero specificity makes that collision-safe:
   a third-party theme that happens to define --card-bg keeps its value.
   -------------------------------------------------------------------------- */
:where(html) {
	--msm-brand-rgb: 13, 124, 109;
	--msm-brand-2-rgb: 14, 133, 116;
	--msm-brand: rgb(var(--msm-brand-rgb));
	--msm-brand-2: rgb(var(--msm-brand-2-rgb));
	--msm-brand-soft: rgba(var(--msm-brand-rgb), 0.08);
	--msm-gradient-angle: 67deg;
	--msm-gradient: linear-gradient(var(--msm-gradient-angle), var(--msm-brand) 0%, var(--msm-brand-2) 100%);
	--msm-on-brand: #ffffff;
	--msm-danger: #b42222;
	--msm-danger-soft: rgba(180, 34, 34, 0.1);
	--msm-success: #007c42;
	--msm-success-soft: rgba(0, 124, 66, 0.12);

	--bg-surface: #ffffff;
	--bg-surface-alt: #f5f4f1;
	--card-bg: rgba(255, 255, 255, 0.75);
	--card-solid: #ffffff;
	--card-border: rgba(231, 229, 228, 0.9);
	--text-secondary: #57534e;
	--text-muted: #78716c;
	--radius-md: 16px;
	--radius-sm: 12px;
}

/*
 * Dark counterparts of the same floor. Also zero specificity, and later in
 * source order than the block above, so it wins over it while still losing
 * to any real theme rule. A brand that is legible on white is not legible
 * on near-black, so the brand pair is redefined here rather than inherited.
 */
:where(body.dark) {
	--msm-brand-rgb: 45, 212, 191;
	--msm-brand-2-rgb: 94, 234, 212;
	--msm-on-brand: #0c0a09;
	--msm-danger: #f87171;
	--msm-danger-soft: rgba(248, 113, 113, 0.15);
	--msm-success: #4ade80;
	--msm-success-soft: rgba(74, 222, 128, 0.15);

	--bg-surface: #1c1917;
	--bg-surface-alt: #292524;
	--card-bg: rgba(28, 25, 23, 0.8);
	--card-solid: #1c1917;
	--card-border: #3f3b38;
	--text-secondary: #a8a29e;
	--text-muted: #948d88;
}

.tool-block-body {
	margin-top: 4px;
}

.tool-emoji {
	font-size: 2rem;
	line-height: 1;
}

.card-emoji {
	font-size: 1.6rem;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Previews and downloads
   -------------------------------------------------------------------------- */
.msm-preview {
	margin-top: 12px;
	padding: 16px;
	background: var(--bg-surface-alt, #f5f4f1);
	border-radius: var(--radius-md, 16px);
	text-align: center;
}

.msm-preview img {
	display: inline-block;
	max-width: 100%;
	max-height: 300px;
	border-radius: var(--radius-sm, 12px);
}

.msm-download {
	margin-top: 12px;
	text-decoration: none;
}

.msm-download.is-small {
	padding: 4px 12px;
	font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Colour swatches
   -------------------------------------------------------------------------- */
.msm-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.msm-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font: inherit;
}

.swatch-chip {
	display: block;
	width: 58px;
	height: 58px;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: var(--radius-sm, 12px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
	transition: transform 0.2s;
}

.msm-swatch:hover .swatch-chip {
	transform: scale(1.06);
}

.swatch-hex {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.76rem;
	font-weight: 600;
}

.swatch-share {
	font-size: 0.68rem;
	color: var(--text-secondary, #57534e);
}

/* --------------------------------------------------------------------------
   Tables and lists inside results
   -------------------------------------------------------------------------- */
.msm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.msm-table th,
.msm-table td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
	text-align: left;
	vertical-align: top;
}

.msm-table th {
	width: 40%;
	font-weight: 600;
	color: var(--text-secondary, #57534e);
}

.msm-table tr:last-child th,
.msm-table tr:last-child td {
	border-bottom: none;
}

.msm-list {
	margin: 0;
	padding-left: 20px;
}

.msm-list li {
	margin-bottom: 5px;
	list-style: disc;
	font-size: 0.9rem;
}

.msm-list code {
	padding: 1px 5px;
	border-radius: 5px;
	background: var(--bg-surface-alt, #f5f4f1);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
}

/* --------------------------------------------------------------------------
   SVG preview sandbox
   -------------------------------------------------------------------------- */
.svg-preview-frame {
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: var(--radius-md, 16px);
}

.svg-preview-frame iframe {
	display: block;
	width: 100%;
	height: 280px;
	border: 0;
}

/* --------------------------------------------------------------------------
   Favicon grid
   -------------------------------------------------------------------------- */
.favicon-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 18px;
}

.favicon-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	color: var(--text-secondary, #57534e);
}

.favicon-preview img {
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: 8px;
	background: #fff;
	padding: 4px;
}

/* --------------------------------------------------------------------------
   Page speed results
   -------------------------------------------------------------------------- */
.psi-score {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.psi-score-value {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	font-size: 1.9rem;
	font-weight: 700;
	color: #fff;
}

.psi-good {
	background: #0cce6b;
}

.psi-average {
	background: #ffa400;
}

.psi-poor {
	background: #ff4e42;
}

/* --------------------------------------------------------------------------
   Result box sizing on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.msm-table th {
		width: 45%;
	}

	.swatch-chip {
		width: 46px;
		height: 46px;
	}

	.svg-preview-frame iframe {
		height: 220px;
	}
}

/* --------------------------------------------------------------------------
   Ordered file and page lists (PDF merger, page organiser)
   -------------------------------------------------------------------------- */
.msm-file-order {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: msm-order;
}

.msm-file-order li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	margin-bottom: 8px;
	background: var(--card-solid);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	counter-increment: msm-order;
}

.msm-file-order li::before {
	flex: 0 0 auto;
	min-width: 22px;
	height: 22px;
	background: var(--msm-brand-soft);
	border-radius: 50%;
	color: var(--msm-brand);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	content: counter(msm-order);
}

.msm-file-order li > span:first-of-type {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.msm-order-btns {
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
}

.msm-order-btns .btn-action {
	min-width: 30px;
	padding: 4px 8px;
	font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Text comparison
   -------------------------------------------------------------------------- */
.msm-diff {
	max-height: 460px;
	padding: 14px 16px;
	overflow: auto;
	background: var(--bg-surface-alt);
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

.msm-diff-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.msm-diff ins {
	background: rgba(22, 163, 74, 0.18);
	color: inherit;
	text-decoration: none;
}

.msm-diff del {
	background: rgba(220, 38, 38, 0.16);
	color: inherit;
}

body.dark .msm-diff ins {
	background: rgba(34, 197, 94, 0.28);
}

body.dark .msm-diff del {
	background: rgba(248, 113, 113, 0.26);
}

.msm-diff-same {
	padding: 14px 16px;
	background: rgba(22, 163, 74, 0.1);
	border-radius: var(--radius-sm);
}

/* Limit indicators in the text statistics tool. */
.msm-over {
	color: #b42222;
	font-weight: 600;
}

.msm-under {
	color: #007c42;
	font-weight: 600;
}

body.dark .msm-over {
	color: #f87171;
}

body.dark .msm-under {
	color: #4ade80;
}

@media (max-width: 768px) {
	.msm-diff-cols {
		grid-template-columns: 1fr;
	}

	.msm-file-order li {
		flex-wrap: wrap;
	}
}

/* Course rows in the GPA calculator. */
.msm-gpa-row {
	grid-template-columns: 2fr 1.2fr 0.8fr;
	margin-bottom: 10px;
}

@media (max-width: 600px) {
	.msm-gpa-row {
		grid-template-columns: 1fr;
	}
}

/* Pass and fail states in validators, comparisons and checksum tools. */
.msm-pass {
	color: #007c42;
	font-weight: 600;
}

.msm-fail {
	color: #b42222;
	font-weight: 600;
}

body.dark .msm-pass {
	color: #4ade80;
}

body.dark .msm-fail {
	color: #f87171;
}

/* Hints rendered inside a result box rather than under a field. */
.result-box .field-hint {
	display: block;
	margin-top: 10px;
	font-size: 0.85rem;
	opacity: 0.75;
}

/* The five cron fields sit side by side and stack on narrow screens. */
.msm-cron-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin-bottom: 6px;
}

@media (max-width: 900px) {
	.msm-cron-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.msm-cron-grid {
		grid-template-columns: 1fr;
	}
}

/* Row tinting in the JSON diff table. */
.msm-jd-added td:first-child {
	color: #007c42;
	font-weight: 600;
}

.msm-jd-removed td:first-child {
	color: #b42222;
	font-weight: 600;
}

.msm-jd-changed td:first-child,
.msm-jd-type td:first-child {
	color: #9a6700;
	font-weight: 600;
}

.msm-jd-same td {
	opacity: 0.6;
}

body.dark .msm-jd-added td:first-child {
	color: #4ade80;
}

body.dark .msm-jd-removed td:first-child {
	color: #f87171;
}

body.dark .msm-jd-changed td:first-child,
body.dark .msm-jd-type td:first-child {
	color: #fbbf24;
}

/* --------------------------------------------------------------------------
   Phase 6 and 7 tool chrome

   Every colour here comes from a theme token, so tool output follows a
   customised brand colour rather than pinning the original blue.
   -------------------------------------------------------------------------- */

/* The live readout beside a slider label. */
.msm-val {
	float: right;
	color: var(--text-muted, #78716c);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* Cubic bezier editor. */
.msm-bezier-stage {
	margin-bottom: 18px;
}

.msm-bezier-curve {
	display: block;
	width: 100%;
	max-width: 320px;
	height: 220px;
	margin: 0 auto;
	padding: 10px;
	border: 1px solid var(--card-border, #e7e5e4);
	border-radius: 12px;
	background: var(--bg-surface, #fff);
}

.msm-bezier-linear {
	stroke: var(--card-border, #e7e5e4);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.msm-bezier-path {
	fill: none;
	stroke: var(--msm-brand, #0d7c6d);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.msm-bezier-handle {
	stroke: var(--text-muted, #78716c);
	stroke-width: 1;
	stroke-dasharray: 3 3;
	vector-effect: non-scaling-stroke;
}

.msm-bezier-dot {
	fill: var(--msm-brand, #0d7c6d);
	vector-effect: non-scaling-stroke;
}

.msm-bezier-track {
	overflow: hidden;
	margin-top: 14px;
	padding: 6px;
	border-radius: 10px;
	background: var(--bg-surface-alt, #f5f4f1);
}

.msm-bezier-ball {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--msm-brand, #0d7c6d);
}

/* Clip path generator. */
.msm-clip-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	margin: 18px 0;
	padding: 20px;
	border-radius: 14px;
	background: var(--bg-surface-alt, #f5f4f1);
}

.msm-clip-preview {
	width: 220px;
	height: 220px;
	background: var(--msm-gradient, linear-gradient(67deg, #0d7c6d, #0e8574));
}

/* CSS filter generator. */
.msm-filter-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 18px 0;
	padding: 20px;
	border-radius: 14px;
	background: var(--bg-surface-alt, #f5f4f1);
}

.msm-filter-preview {
	width: 100%;
	max-width: 380px;
	height: 220px;
	border-radius: 12px;
	background: var(--msm-gradient, linear-gradient(67deg, #0d7c6d, #0e8574));
	background-size: cover;
	background-position: center;
}

.msm-filter-preview.has-image {
	background-color: transparent;
}

/* Text shadow generator. */
.msm-tsh-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	margin: 18px 0;
	padding: 24px;
	border-radius: 14px;
	text-align: center;
}

.msm-tsh-preview {
	font-weight: 800;
	line-height: 1.2;
	word-break: break-word;
}

/* Neumorphism generator. */
.msm-neu-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	margin-bottom: 18px;
	padding: 40px;
	border-radius: 14px;
}

.msm-neu-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

/* Blob generator. */
.msm-blob-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	margin: 18px 0;
	padding: 20px;
	border-radius: 14px;
	background: var(--bg-surface-alt, #f5f4f1);
}

.msm-blob-preview {
	transition: border-radius 0.4s ease;
}

/* Scrollbar styler. */
.msm-sb-preview {
	overflow-y: scroll;
	max-height: 220px;
	margin-bottom: 18px;
	padding: 16px;
	border: 1px solid var(--card-border, #e7e5e4);
	border-radius: 12px;
	background: var(--bg-surface, #fff);
}

.msm-sb-preview::-webkit-scrollbar {
	width: var(--msm-sb-width, 10px);
	height: var(--msm-sb-width, 10px);
}

.msm-sb-preview::-webkit-scrollbar-track {
	border-radius: var(--msm-sb-radius, 8px);
	background: var(--msm-sb-track, #eef2f7);
}

.msm-sb-preview::-webkit-scrollbar-thumb {
	border-radius: var(--msm-sb-radius, 8px);
	background: var(--msm-sb-thumb, #64748b);
}

.msm-sb-preview::-webkit-scrollbar-thumb:hover {
	background: var(--msm-sb-hover, #334155);
}

/* Image splitter tile grid. */
.msm-tile-grid {
	display: grid;
	gap: 6px;
	margin: 12px 0;
}

.msm-tile-grid img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* A chequerboard behind anything that may be transparent. */
.msm-preview-checker {
	background-image:
		linear-gradient(45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%),
		linear-gradient(-45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.08) 75%),
		linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.08) 75%);
	background-size: 18px 18px;
	background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

/* OCR progress. */
.msm-progress {
	overflow: hidden;
	height: 8px;
	border-radius: 999px;
	background: var(--bg-surface-alt, #f5f4f1);
}

.msm-progress span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--msm-brand, #0d7c6d);
	transition: width 0.2s linear;
}

@media (max-width: 640px) {
	.msm-clip-preview {
		width: 160px;
		height: 160px;
	}

	.msm-neu-stage {
		padding: 24px;
	}
}

/* --------------------------------------------------------------------------
   Article content — tables and inline code

   The theme styles headings, paragraphs and lists inside .article-content but
   stops there. Tool articles lean on comparison tables and inline code, so
   those two need covering here rather than in the theme: the plugin ships the
   articles, so the plugin owns the styling they depend on.
   -------------------------------------------------------------------------- */
.article-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 0.95rem;
}

.article-content th,
.article-content td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--card-border);
	vertical-align: top;
}

.article-content th {
	font-weight: 600;
	background: var(--bg-surface-alt);
	white-space: nowrap;
}

.article-content tbody tr:last-child td {
	border-bottom: 0;
}

.article-content :not(pre) > code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--bg-surface-alt);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	word-break: break-word;
}

/* Rendered Markdown preview — sanitised HTML shown next to its source. */
.msm-md-preview {
	padding: 4px 2px;
	line-height: 1.65;
	word-break: break-word;
}

.msm-md-preview > *:first-child {
	margin-top: 0;
}

.msm-md-preview > *:last-child {
	margin-bottom: 0;
}

.msm-md-preview h1,
.msm-md-preview h2,
.msm-md-preview h3 {
	margin: 18px 0 8px;
	line-height: 1.3;
}

.msm-md-preview pre {
	padding: 12px 14px;
	overflow-x: auto;
	border-radius: 8px;
	background: var(--bg-surface-alt);
}

.msm-md-preview table {
	width: 100%;
	border-collapse: collapse;
}

.msm-md-preview th,
.msm-md-preview td {
	padding: 8px 10px;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	text-align: left;
}

.msm-md-preview blockquote {
	margin: 12px 0;
	padding: 4px 0 4px 14px;
	border-left: 3px solid var(--msm-brand);
	opacity: 0.9;
}

/* Live preview panel for the CSS pattern generator. */
.msm-pattern-preview {
	height: 220px;
	margin: 18px 0 4px;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: var(--radius-sm, 12px);
}

/* --------------------------------------------------------------------------
   Advertising slots
   The wrapper reserves its height before the unit loads, so nothing below it
   moves when the ad arrives.
   -------------------------------------------------------------------------- */
.msm-ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 28px auto;
	max-width: 100%;
	overflow: hidden;
	text-align: center;
}

.msm-ad-label {
	color: var(--text-muted, #78716c);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.msm-ad-unit {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.msm-ad-unit img,
.msm-ad-unit iframe {
	max-width: 100%;
}

/* Device targeting is done in CSS so a cached page still serves both audiences. */
@media (max-width: 991px) {
	.msm-ad-desktop {
		display: none;
	}
}

@media (min-width: 992px) {
	.msm-ad-mobile {
		display: none;
	}
}

/* An in-article unit needs air on both sides of the text it interrupts. */
.article-content .msm-ad,
.entry-content .msm-ad {
	margin: 34px auto;
}

/* --------------------------------------------------------------------------
   Tool page layout
   The tool and its article sit in the main column; the rail carries the
   onward links so a finished visitor has somewhere to go.
   -------------------------------------------------------------------------- */
.tool-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 26px;
	align-items: start;
}

.tool-main {
	min-width: 0;
}

.tool-rail {
	position: sticky;
	top: 20px;
	display: grid;
	gap: 14px;
}

.tool-rail-card {
	padding: 16px 18px;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: var(--radius-md, 16px);
	background: var(--bg-surface, #fff);
}

.tool-rail-card h2 {
	margin: 0 0 12px;
	color: var(--text-muted, #78716c);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.69rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.tool-rail-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tool-rail-list a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 0;
	color: var(--text-secondary, #57534e);
	font-size: 0.9rem;
	text-decoration: none;
}

.tool-rail-list a:hover {
	color: var(--msm-brand);
}

.tool-rail-cat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--msm-brand);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

@media (max-width: 991px) {
	.tool-layout {
		grid-template-columns: 1fr;
	}

	.tool-rail {
		position: static;
	}
}