/* ==========================================================================
   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: start;
	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-inline-start: 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;
}

/* --------------------------------------------------------------------------
   Chip choice groups (certificate border style, image margin)
   -------------------------------------------------------------------------- */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.chip {
	padding: 6px 13px;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: 20px;
	background: var(--bg-surface, #fff);
	color: inherit;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.chip:hover {
	border-color: var(--msm-brand, #0d7c6d);
}

.chip.on {
	border-color: var(--msm-brand, #0d7c6d);
	background: var(--msm-brand-soft, rgba(13, 124, 109, 0.08));
	color: var(--msm-brand, #0d7c6d);
}

/* --------------------------------------------------------------------------
   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: start;
	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: start;
}

.msm-md-preview blockquote {
	margin: 12px 0;
	padding: 4px 0;
	padding-inline-start: 14px;
	border-inline-start: 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.
   -------------------------------------------------------------------------- */
/* The tool spans the full content width; the reading part below it is a
   760 px column with the sidebar beside it. */
.tool-top {
	min-width: 0;
	margin-bottom: 36px;
}

.tool-layout {
	display: grid;
	grid-template-columns: minmax(0, 760px) 300px;
	justify-content: space-between;
	gap: 48px;
	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;
	}
}

/* --------------------------------------------------------------------------
   Bring-your-own-key AI tools
   -------------------------------------------------------------------------- */
.msm-ai-gate {
	margin-bottom: 22px;
	padding: 20px;
	background: var(--bg-surface-alt, #f5f4f1);
	border: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
	border-radius: var(--radius-md, 16px);
}

.msm-ai-gate .tool-notice {
	margin-bottom: 18px;
}

.msm-ai-privacy {
	margin: 14px 0 0;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--text-muted, #78716c);
}

.msm-ai-privacy strong {
	color: var(--text-secondary, #57534e);
}

/* --------------------------------------------------------------------------
   Hidden attribute guard

   The user-agent rule for [hidden] is `display: none` at zero specificity, so
   any class rule that sets a display value silently outranks it and the
   element stays on screen. That is how the key bar came to render above a gate
   still asking for a key: .msm-ai-bar sets display:flex, the JS set hidden,
   and the attribute lost.

   Scoping to [class^="msm-"] and [class*=" msm-"] keeps this to the plugin's
   own elements rather than imposing a global !important on the page.
   -------------------------------------------------------------------------- */
[class^="msm-"][hidden],
[class*=" msm-"][hidden] {
	display: none !important;
}

.msm-ai-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding: 12px 16px;
	background: var(--bg-surface-alt, #f5f4f1);
	border: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
	border-radius: var(--radius-md, 16px);
	font-size: 0.9rem;
}

.msm-ai-dot {
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--msm-brand, #0d7c6d);
}

.msm-ai-bar-actions {
	display: flex;
	gap: 8px;
	margin-inline-start: auto;
}

.msm-ai-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.msm-ai-check label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.msm-ai-check input {
	width: auto;
}

/* --- outline review ------------------------------------------------------ */
.msm-ai-outline {
	margin: 20px 0;
	padding: 18px 20px;
	background: var(--bg-surface-alt, #f5f4f1);
	border: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
	border-radius: var(--radius-md, 16px);
}

.msm-ai-outline-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
}

.msm-ai-outline-item:last-child {
	border-bottom: 0;
}

.msm-ai-outline-item.is-sub {
	padding-inline-start: 26px;
}

.msm-ai-outline-item input {
	flex: 1;
	min-width: 0;
	padding: 6px 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
}

.msm-ai-outline-item input:focus {
	outline: none;
	box-shadow: none;
	border-bottom: 1px solid var(--msm-brand, #0d7c6d);
}

.msm-ai-outline-drop {
	flex-shrink: 0;
	padding: 0 6px;
	background: none;
	border: 0;
	color: var(--text-muted, #78716c);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.msm-ai-outline-drop:hover {
	color: var(--msm-danger, #b42222);
}

/* --- result -------------------------------------------------------------- */
.msm-ai-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
	font-size: 0.86rem;
}

.msm-ai-count-ok {
	font-weight: 600;
	color: var(--msm-brand, #0d7c6d);
}

.msm-ai-count-off {
	font-weight: 600;
	color: var(--msm-warn, #8a6116);
}

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

	.msm-ai-bar-actions {
		width: 100%;
		margin-inline-start: 0;
	}
}

/* --------------------------------------------------------------------------
   Shared AI key panel (optional mode)
   -------------------------------------------------------------------------- */
.msm-ai-offer {
	margin-bottom: 18px;
}

.msm-ai-offer-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--msm-brand-soft, rgba(13, 124, 109, 0.08));
	border: 1px solid transparent;
	border-radius: 40px;
	color: var(--msm-brand, #0d7c6d);
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s;
}

.msm-ai-offer-link:hover {
	border-color: var(--msm-brand, #0d7c6d);
}

.msm-ai-offer-note {
	margin: 8px 0 0;
	font-size: 0.82rem;
	color: var(--text-muted, #78716c);
}

.msm-ai-form {
	margin-bottom: 20px;
	padding: 20px;
	background: var(--bg-surface-alt, #f5f4f1);
	border: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
	border-radius: var(--radius-md, 16px);
}

/* The engine label sits with the result, because that is where a reader
   decides whether to trust it — not in the page copy below the fold. */
.msm-ai-engine {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 12px;
	border-radius: 40px;
	background: var(--bg-surface-alt, #f5f4f1);
	border: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--text-muted, #78716c);
}

.msm-ai-engine-ai {
	background: var(--msm-brand-soft, rgba(13, 124, 109, 0.08));
	border-color: transparent;
	color: var(--msm-brand, #0d7c6d);
}

/* --------------------------------------------------------------------------
   Engine badge, qualifying note and pending state

   The badge and its note are one block so the note always travels with the
   label it qualifies, rather than floating above the output on its own.
   -------------------------------------------------------------------------- */
.msm-ai-engine-wrap {
	margin-bottom: 12px;
}

.msm-ai-engine-wrap .msm-ai-engine {
	margin-bottom: 0;
}

/* Says what the offline path actually did — analysed, substituted, or
   assembled from a pattern. */
.msm-ai-engine-note {
	margin: 6px 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--text-muted, #78716c);
}

/* Only for the substitution tools, where the offline result is weak enough
   that a neutral grey note would understate it. */
.msm-ai-engine-note-warn {
	padding: 7px 12px;
	border-radius: var(--radius-sm, 12px);
	background: var(--msm-warn-soft, rgba(138, 97, 22, 0.09));
	color: var(--msm-warn, #8a6116);
}

/* A key was saved, the call failed, and the local result was returned
   instead. The visitor keeps their output and still learns the key failed. */
.msm-ai-engine-note-error {
	padding: 7px 12px;
	border-radius: var(--radius-sm, 12px);
	background: var(--msm-danger-soft, rgba(180, 34, 34, 0.1));
	color: var(--msm-danger, #b42222);
}

.msm-ai-pending {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.88rem;
	color: var(--text-secondary, #57534e);
}

.msm-ai-spinner {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border: 2px solid var(--card-border, rgba(231, 229, 228, 0.9));
	border-top-color: var(--msm-brand, #0d7c6d);
	border-radius: 50%;
	animation: msm-ai-spin 0.7s linear infinite;
}

@keyframes msm-ai-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.msm-ai-spinner {
		animation-duration: 2.4s;
	}
}

/* --------------------------------------------------------------------------
   Model output

   Rendered from a fixed Markdown subset that escapes before it converts, so
   nothing a provider returns can become markup.
   -------------------------------------------------------------------------- */
.msm-ai-md > *:first-child {
	margin-top: 0;
}

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

.msm-ai-md h2 {
	margin: 18px 0 8px;
	font-size: 1.05rem;
}

.msm-ai-md h3 {
	margin: 15px 0 7px;
	font-size: 0.95rem;
}

.msm-ai-md p {
	margin: 0 0 11px;
}

.msm-ai-md ul,
.msm-ai-md ol {
	margin: 0 0 11px;
	padding-inline-start: 22px;
}

.msm-ai-md li {
	margin-bottom: 5px;
}

.msm-ai-md code {
	padding: 1px 5px;
	border-radius: 5px;
	background: var(--bg-surface-alt, #f5f4f1);
	font-size: 0.88em;
}

.msm-ai-md pre {
	margin: 0 0 11px;
	padding: 12px 14px;
	overflow-x: auto;
	background: var(--bg-surface-alt, #f5f4f1);
	border-radius: var(--radius-sm, 12px);
}

.msm-ai-md pre code {
	padding: 0;
	background: none;
}

/* Offline results that are plain prose rather than structured markup. The
   source line breaks are the author's, so they are preserved. */
.msm-ai-plain {
	margin: 0 0 11px;
	white-space: pre-wrap;
}

/* --------------------------------------------------------------------------
   How this tool works

   Sits between the tool and the article, so it needs a little separation from
   both without becoming a card that competes with the tool itself.
   -------------------------------------------------------------------------- */
.tool-how {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
}

.tool-how h2 {
	margin-bottom: 12px;
}

.tool-how h3 {
	margin-top: 22px;
	margin-bottom: 10px;
}

.tool-how ul {
	margin: 0;
	padding-inline-start: 20px;
}

.tool-how li {
	margin-bottom: 9px;
}

/* "How to use" steps. Collapsed <details> between the tool title and its
   workspace: opening it costs one row on desktop, where the steps sit side
   by side, and becomes a numbered list on narrow screens. */
.tool-steps {
	margin-bottom: 24px;
	background: var(--bg-surface-alt, #f5f4f1);
	border: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
	border-radius: var(--radius-md, 16px);
}

.tool-steps-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 10px 16px;
	cursor: pointer;
	list-style: none;
	border-radius: var(--radius-md, 16px);
	color: var(--text-primary);
}

.tool-steps-toggle::-webkit-details-marker {
	display: none;
}

.tool-steps-toggle:focus-visible {
	outline: 2px solid var(--msm-brand);
	outline-offset: 2px;
}

.tool-steps-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--msm-brand-soft, rgba(13, 124, 109, 0.08));
	color: var(--msm-brand);
}

.tool-steps-icon .msm-icon {
	width: 16px;
	height: 16px;
}

.tool-steps-title {
	font-family: var(--msm-font-display);
	font-weight: 700;
	font-size: 0.95rem;
}

.tool-steps-count {
	font-size: 0.875rem;
	color: var(--text-muted);
}

.tool-steps-count::before {
	content: "·";
	margin-inline-end: 6px;
}

.tool-steps-chevron {
	width: 16px;
	height: 16px;
	margin-inline-start: auto;
	flex: 0 0 auto;
	color: var(--text-secondary);
	transition: transform var(--transition, 0.25s ease);
}

.tool-steps[open] .tool-steps-chevron {
	transform: rotate(180deg);
}

.tool-steps-body {
	padding: 4px 16px 16px;
}

.tool-steps-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tool-steps-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 14px;
	background: var(--bg-surface, #fff);
	border: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
	border-radius: var(--radius-sm, 12px);
}

.tool-steps-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--msm-brand-soft, rgba(13, 124, 109, 0.08));
	box-shadow: inset 0 0 0 1px rgba(var(--msm-brand-rgb), 0.22);
	color: var(--msm-brand);
	font-family: var(--msm-font-display);
	font-weight: 700;
	font-size: 0.875rem;
}

.tool-steps-text {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--text-secondary);
}

.tool-steps-text strong {
	font-weight: 600;
	color: var(--text-primary);
}

.tool-steps-guide {
	display: flex;
	justify-content: flex-end;
	margin: 12px 0 0;
}

.tool-steps-guide a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--msm-brand);
	text-decoration: none;
}

.tool-steps-guide a:hover {
	color: var(--msm-brand-hover);
}

.tool-steps-guide a:focus-visible {
	outline: 2px solid var(--msm-brand);
	outline-offset: 2px;
	border-radius: 4px;
}

.tool-steps-arrow {
	width: 14px;
	height: 14px;
}

[dir="rtl"] .tool-steps-arrow {
	transform: scaleX(-1);
}

@media (max-width: 640px) {
	.tool-steps-list {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.tool-steps-item {
		flex-direction: row;
		align-items: flex-start;
		gap: 12px;
		padding: 0;
		background: none;
		border: 0;
	}

	.tool-steps-guide {
		justify-content: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tool-steps-chevron {
		transition: none;
	}
}

/* The per-tool FAQ is narrower in scope than a category FAQ, so it is
   quieter: less vertical air and a left-aligned header, since it follows the
   article rather than opening a page. */
.faq-section-tool {
	padding: 40px 0 8px;
}

.faq-section-tool .faq-header {
	margin-bottom: 24px;
	text-align: start;
}

.faq-section-tool .faq-header h2 {
	font-size: 1.75rem;
}

.faq-section-tool .faq-header p {
	margin: 0;
}

.faq-section-tool .faq-list {
	max-width: none;
}

.faq-answer a {
	color: var(--msm-brand, #0d7c6d);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   House creatives

   Every enabled creative is printed and hidden; ads-house.js reveals one per
   page view, because a server-side choice would be frozen into the page
   cache and shown to everyone until it was purged.
   -------------------------------------------------------------------------- */
.msm-ad-house .msm-ad-unit {
	display: flex;
	align-items: center;
	justify-content: center;
}

.msm-house-item {
	display: none;
	max-width: 100%;
	line-height: 0;
}

.msm-house-item.is-shown {
	display: block;
}

.msm-house-item img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   Tool walkthrough video

   Sits above "How this tool works". What ships is a poster and a button; the
   provider iframe only exists after a press, so nothing here styles a player
   that is present on load. Physical properties are avoided throughout — this
   block appears on RTL pages too and rtl.css enforces logical properties.
   ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
   Guide card

   Sits where the bundled article used to, so the six migrated tools still
   have something in that slot. Deliberately the same chrome as the video
   block above it: the page then reads as a stack of cards — tool, video,
   guide — rather than as three unrelated components.
   -------------------------------------------------------------------------- */
.tool-guide {
	margin: 28px 0 0;
	background: var(--card-solid, #fff);
	border: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
	border-radius: 14px;
	overflow: hidden;
}

.tool-guide-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
}

.tool-guide-head h2 {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}

.tool-guide-head .msm-icon {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	color: var(--msm-brand);
}

.tool-guide-read {
	margin-inline-start: auto;
	font-family: var(--msm-font-mono);
	font-size: 0.76rem;
	color: var(--text-muted);
	white-space: nowrap;
}

.tool-guide-body {
	padding: 16px;
}

.tool-guide-body h3 {
	margin: 0 0 6px;
	font-size: 1.12rem;
	line-height: 1.35;
}

.tool-guide-body h3 a {
	color: inherit;
	text-decoration: none;
}

.tool-guide-body h3 a:hover,
.tool-guide-body h3 a:focus-visible {
	color: var(--msm-brand);
}

.tool-guide-body > p {
	margin: 0 0 14px;
	color: var(--text-secondary);
	font-size: 0.94rem;
}

.tool-guide-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: 40px;
	background: var(--msm-brand-soft);
	border: 1px solid transparent;
	color: var(--msm-brand);
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
	transition: border-color 0.2s, transform 0.2s;
}

.tool-guide-link:hover,
.tool-guide-link:focus-visible {
	border-color: var(--msm-brand);
	transform: translateY(-1px);
}

.tool-video {
	margin: 0 0 26px;
	background: var(--card-solid);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	overflow: hidden;
}

.tool-video-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--card-border);
}

.tool-video-head h2 {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}

.tool-video-head .msm-icon {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	color: var(--msm-brand);
}

.tool-video-duration {
	margin-inline-start: auto;
	font-family: var(--msm-font-mono);
	font-size: 0.76rem;
	color: var(--text-muted);
}

/* Stated, not hidden: a clip inherited from another language should say so. */
.tool-video-fallback {
	margin: 0;
	padding: 8px 16px;
	font-size: 0.8rem;
	background: var(--msm-warn-soft);
	color: var(--msm-warn);
	border-bottom: 1px solid var(--card-border);
}

.tool-video-facade {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--bg-surface-alt);
	aspect-ratio: 16 / 9;
	cursor: pointer;
	overflow: hidden;
}

.tool-video-facade img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Drawn rather than an image file, so a tool whose poster has not been
   fetched yet still renders a deliberate surface instead of a grey box. */
.tool-video-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(var(--msm-gradient-angle), var(--msm-brand) 0%, var(--msm-brand-2) 100%);
}

.tool-video-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.tool-video-play svg {
	width: 62px;
	height: 62px;
	padding: 19px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	fill: var(--msm-brand);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
	transition: transform 0.18s ease;
}

.tool-video-facade:hover .tool-video-play svg {
	transform: scale(1.08);
}

.tool-video-facade:focus-visible {
	outline: 3px solid var(--msm-brand);
	outline-offset: -3px;
}

.tool-video-frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.tool-video-foot {
	margin: 0;
	padding: 10px 16px;
	font-size: 0.79rem;
	color: var(--text-muted);
	background: var(--bg-surface-alt);
}

.tool-video-foot a {
	color: var(--msm-brand);
}

@media (prefers-reduced-motion: reduce) {
	.tool-video-play svg {
		transition: none;
	}

	.tool-video-facade:hover .tool-video-play svg {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   AI Article Writer: draft rendering, export menu and check handoff

   The draft is rendered Markdown rather than raw text, so it needs real
   heading and list rules inside the result box. The "Markdown" view drops
   back to a monospace source listing.
   ------------------------------------------------------------------------ */

.msm-ai-draft-head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.msm-ai-draft-head .result-title {
	margin: 0;
}

.msm-ai-view {
	display: inline-flex;
	margin-inline-start: auto;
	border: 1px solid var(--card-border);
	border-radius: 999px;
	overflow: hidden;
}

.msm-ai-view button {
	border: 0;
	background: transparent;
	padding: 6px 14px;
	font-size: 0.8rem;
	font-family: var(--msm-font-body);
	color: var(--text-secondary);
	cursor: pointer;
}

.msm-ai-view button[aria-pressed="true"] {
	background: var(--msm-brand);
	color: var(--msm-on-brand);
}

.msm-ai-draft {
	line-height: 1.7;
}

.msm-ai-draft h2,
.msm-ai-draft h3,
.msm-ai-draft h4 {
	font-family: var(--msm-font-display);
	line-height: 1.3;
	color: var(--text-primary);
}

.msm-ai-draft h2 {
	font-size: 1.2rem;
	margin: 1.4em 0 0.4em;
}

.msm-ai-draft h3 {
	font-size: 1.05rem;
	margin: 1.2em 0 0.35em;
}

.msm-ai-draft h4 {
	font-size: 0.95rem;
	margin: 1.1em 0 0.3em;
}

.msm-ai-draft > *:first-child {
	margin-top: 0;
}

.msm-ai-draft p {
	margin: 0 0 0.9em;
}

.msm-ai-draft ul,
.msm-ai-draft ol {
	margin: 0 0 0.9em;
	padding-inline-start: 1.4em;
}

.msm-ai-draft li {
	margin-bottom: 0.35em;
}

/* The source view. Kept LTR and monospaced: Markdown is technical text and
   its markers belong at the start of the line whatever the page direction. */
.msm-ai-draft.is-markdown {
	white-space: pre-wrap;
	font-family: var(--msm-font-mono);
	font-size: 0.85rem;
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
}

/* --- download menu ------------------------------------------------------ */

.msm-ai-menu-wrap {
	position: relative;
	display: inline-block;
}

.msm-ai-menu {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-start: 0;
	min-width: 270px;
	max-width: min(340px, 90vw);
	z-index: 5;
	padding: 6px;
	background: var(--card-solid);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.msm-ai-menu button {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	width: 100%;
	padding: 10px 11px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	text-align: start;
	font-family: var(--msm-font-body);
	font-size: 0.8rem;
	color: var(--text-muted);
	line-height: 1.45;
	cursor: pointer;
}

.msm-ai-menu button:hover:not(:disabled) {
	background: var(--bg-surface-alt);
}

.msm-ai-menu button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.msm-ai-menu b {
	display: block;
	font-size: 0.87rem;
	color: var(--text-primary);
}

.msm-ai-ext {
	flex: 0 0 auto;
	margin-top: 2px;
	padding: 2px 7px;
	border-radius: 5px;
	font-family: var(--msm-font-mono);
	font-size: 0.72rem;
	color: var(--msm-brand);
	background: var(--msm-brand-soft);
	direction: ltr;
}

/* --- check handoff ------------------------------------------------------ */

.msm-ai-check-row {
	margin-top: 16px;
	padding: 14px 16px;
	background: var(--bg-surface-alt);
	border-radius: 12px;
}

.msm-ai-check-row h3 {
	margin: 0 0 4px;
	font-size: 0.9rem;
}

.msm-ai-check-row p {
	margin: 0;
	font-size: 0.82rem;
	color: var(--text-muted);
}

.msm-ai-check-note {
	margin-top: 10px !important;
	padding: 8px 11px;
	border-radius: 8px;
	background: var(--msm-warn-soft);
	color: var(--msm-warn) !important;
	font-size: 0.79rem;
}

/* --------------------------------------------------------------------------
   Watermark preview.

   The stamp itself, rendered in CSS before any file is read, so the text,
   colour, opacity and angle can be judged without spending a PDF parse on
   each adjustment. It is a preview of the mark rather than of the page:
   pdf-lib sizes the stamp to each page's own diagonal, so the proportion
   here is indicative.
   -------------------------------------------------------------------------- */
.msm-wm-preview {
	position: relative;
	overflow: hidden;
	height: 104px;
	margin-top: 10px;
	border: 1px solid var(--card-border);
	border-radius: var(--radius-sm);
	background: var(--bg-surface);
}

.msm-wm-preview span {
	position: absolute;
	top: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	color: #ef4444;
	opacity: 0.18;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
}

/* --------------------------------------------------------------------------
   Table Generator grid
   Logical properties throughout so the grid mirrors correctly in Urdu.
   -------------------------------------------------------------------------- */
.msm-table-grid {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	margin-bottom: 12px;
}

.msm-table-grid th,
.msm-table-grid td {
	padding: 0;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.12));
}

.msm-table-grid input {
	width: 100%;
	border: 0;
	background: transparent;
	padding: 8px 10px;
	font: inherit;
	color: inherit;
}

.msm-table-grid input:focus-visible {
	outline: 2px solid var(--accent, #0d7c6d);
	outline-offset: -2px;
}

.msm-table-grid thead .msm-table-head input {
	font-weight: 700;
	background: var(--card-alt, rgba(0, 0, 0, 0.03));
}

.msm-table-grid .msm-table-act {
	border: 0;
	width: 34px;
	text-align: center;
}

.msm-table-grid .msm-table-act button {
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
	padding: 6px;
	color: var(--text-secondary, #57534e);
	border-radius: 6px;
}

.msm-table-grid .msm-table-act button:hover,
.msm-table-grid .msm-table-act button:focus-visible {
	background: var(--card-alt, rgba(0, 0, 0, 0.06));
	color: inherit;
}

.msm-table-alignset {
	display: flex;
	gap: 3px;
	justify-content: center;
	padding: 4px;
}

.msm-table-alignset button {
	inline-size: 26px;
	block-size: 24px;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.14));
	background: var(--card-bg, #fff);
	border-radius: 5px;
	font-size: 0.72rem;
	font-weight: 700;
	cursor: pointer;
	color: var(--text-secondary, #57534e);
}

.msm-table-alignset button.is-on {
	background: var(--accent, #0d7c6d);
	border-color: var(--accent, #0d7c6d);
	color: #fff;
}

.msm-table-tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.msm-table-tabs button {
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.14));
	background: var(--card-bg, #fff);
	border-radius: 8px;
	padding: 6px 14px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	color: var(--text-secondary, #57534e);
}

.msm-table-tabs button.is-on {
	background: var(--accent, #0d7c6d);
	border-color: var(--accent, #0d7c6d);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Comment Reply Assistant
   Logical properties so the cards mirror correctly in Urdu.
   -------------------------------------------------------------------------- */
.msm-reply-card {
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.12));
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 12px;
	background: var(--card-bg, #fff);
}

.msm-reply-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 10px 14px;
	border-block-end: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
}

.msm-reply-head strong {
	font-size: 0.92rem;
}

.msm-reply-type {
	margin-inline-start: auto;
	padding: 4px 8px;
	font-size: 0.78rem;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.14));
	border-radius: 6px;
	background: var(--card-bg, #fff);
	color: inherit;
}

.msm-reply-body {
	padding: 12px 14px;
	font-size: 0.94rem;
	color: var(--text-secondary, #57534e);
}

.msm-reply-out {
	padding: 12px 14px;
	border-block-start: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	background: var(--card-alt, rgba(0, 0, 0, 0.02));
}

.msm-reply-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--accent, #0d7c6d);
	margin-block-end: 6px;
}

.msm-reply-draft {
	background: var(--card-bg, #fff);
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.12));
	border-radius: 8px;
	padding: 11px 13px;
	font-size: 0.94rem;
	white-space: pre-wrap;
}

/* --------------------------------------------------------------------------
   Section rows in the video sections tool
   -------------------------------------------------------------------------- */
.msm-cut-row {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 8px;
}

.msm-cut-row input {
	inline-size: 96px;
	padding: 7px 9px;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.14));
	border-radius: 7px;
	font: inherit;
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Video Studio steps
   -------------------------------------------------------------------------- */
.msm-studio-step {
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.12));
	border-radius: 12px;
	margin-bottom: 12px;
	overflow: hidden;
}

.msm-studio-step > header {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 15px;
	background: var(--card-alt, rgba(0, 0, 0, 0.02));
	border-bottom: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
	flex-wrap: wrap;
}

.msm-studio-step h3 {
	font-size: 1rem;
	margin: 0;
	flex: 1;
	min-inline-size: 140px;
}

.msm-studio-n {
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	background: var(--accent, #0d7c6d);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.78rem;
	font-weight: 800;
	flex: 0 0 auto;
}

.msm-studio-switch {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-secondary, #57534e);
	cursor: pointer;
}

.msm-studio-body {
	padding: 15px;
}

/* --------------------------------------------------------------------------
   Split Screen & PiP Video Maker: layout picker
   -------------------------------------------------------------------------- */
.msm-split-layout-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.msm-split-layout-card {
	padding: 12px 8px;
	border: 1.5px solid var(--card-border, rgba(0, 0, 0, 0.12));
	border-radius: 12px;
	background: var(--card-bg, #fff);
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.msm-split-layout-card svg {
	display: block;
	margin: 0 auto 8px;
}

.msm-split-layout-card span {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
}

.msm-split-layout-card rect.a,
.msm-split-layout-card polygon.a {
	fill: var(--accent, #0d7c6d);
	opacity: 0.55;
}

.msm-split-layout-card rect.b,
.msm-split-layout-card polygon.b {
	fill: var(--accent, #0d7c6d);
	opacity: 0.85;
}

.msm-split-layout-card.is-selected {
	border-color: var(--accent, #0d7c6d);
	background: var(--accent-soft, #e6f2f0);
}

.msm-split-swap-row {
	margin-top: 14px;
}

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

/*
 * Shared by any tool's live preview column (originally the Video category;
 * the PDF certificate/invoice/image tools use it too). Sticky rather than
 * static: these tools stack several steps of settings above the fold, and a
 * preview that scrolls away with them stops answering the question it
 * exists for — whether the change just made actually looks right.
 * align-self is required for sticky to have room to move at all inside a
 * flex row, where children stretch to the tallest sibling by default.
 */
.msm-video-preview-col {
	flex: 0 0 auto;
	align-self: flex-start;
	position: sticky;
	top: calc(var(--nav-height, 72px) + 12px);
	text-align: center;
}

@media (max-width: 860px) {
	.msm-video-preview-col {
		position: static;
	}
}

/* --------------------------------------------------------------------------
   Video preview extras: timeline band, clip sequence, contact sheet
   -------------------------------------------------------------------------- */
.msm-pv-canvas {
	background: #000;
	border-radius: 10px;
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.msm-pv-scrub {
	margin-top: 8px;
	height: 26px;
	border-radius: 6px;
	background: var(--bg-surface-alt, #f5f4f1);
	position: relative;
	overflow: hidden;
}

.msm-pv-scrub .msm-pv-sel {
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba(var(--msm-brand-rgb, 13, 124, 109), 0.28);
	border-inline-start: 2px solid var(--msm-brand, #0d7c6d);
	border-inline-end: 2px solid var(--msm-brand, #0d7c6d);
}

.msm-pv-scrub .msm-pv-cut {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #b42222;
}

.msm-pv-clips {
	display: flex;
	gap: 4px;
	margin-top: 8px;
}

.msm-pv-clip {
	flex: 1;
	min-width: 26px;
	height: 34px;
	border-radius: 5px;
	background: var(--msm-brand, #0d7c6d);
	color: #fff;
	font-size: 0.55rem;
	display: grid;
	place-items: center;
	overflow: hidden;
	white-space: nowrap;
}

.msm-pv-clip.is-edge {
	background: var(--text-muted, #78716c);
	flex: 0 0 auto;
	padding: 0 6px;
}

.msm-pv-sheet {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	margin-top: 8px;
}

.msm-pv-sheet canvas,
.msm-pv-sheet div {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 4px;
	background: #000;
	color: #fff;
	font-size: 0.5rem;
	display: grid;
	place-items: center;
}

/* --------------------------------------------------------------------------
   The tool index: every tool on one page, grouped by category
   -------------------------------------------------------------------------- */
/*
 * The theme prints page content with no width limit, so anything on this
 * page ran the full width of the viewport. The wrapper carries the site's
 * own container width and gutters, which constrains the index and any
 * paragraph sitting beside it alike.
 */
.msm-index-page {
	max-width: var(--container, 1280px);
	margin: 0 auto;
	padding: 0 24px;
}

.msm-index-page > p {
	color: var(--text-secondary, #57534e);
	line-height: 1.6;
}

.msm-index-bar {
	position: sticky;
	top: 0;
	z-index: 20;
	/* Negative gutters so the bar's background reaches the wrapper's edges
	   when it sticks, instead of stopping short of them. */
	margin: 0 -24px 4px;
	padding: 14px 24px;
	background: var(--bg-body, #faf9f7);
	border-bottom: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
}

/* Each category reads as its own panel rather than a run of loose rows. */
.msm-index-section {
	padding: 18px 20px 20px;
	background: var(--bg-surface, #fff);
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: var(--radius-md, 16px);
}

@supports (backdrop-filter: blur(8px)) {
	.msm-index-bar {
		background: color-mix(in srgb, var(--bg-body, #faf9f7) 92%, transparent);
		backdrop-filter: blur(8px);
	}
}

/*
 * The search was a hairline border on a near-white page, which on the live
 * site read as an empty strip rather than a field. It now carries a visible
 * border, a shadow that lifts it off the background, and a magnifier drawn
 * in the padding so it is recognisable before the placeholder is read.
 */
.msm-index-search {
	position: relative;
}

.msm-index-search::before {
	content: '';
	position: absolute;
	inset-inline-start: 20px;
	top: 50%;
	width: 15px;
	height: 15px;
	margin-top: -8px;
	border: 2px solid var(--text-muted, #78716c);
	border-radius: 50%;
	pointer-events: none;
}

.msm-index-search::after {
	content: '';
	position: absolute;
	inset-inline-start: 32px;
	top: 50%;
	width: 7px;
	height: 2px;
	margin-top: 4px;
	background: var(--text-muted, #78716c);
	transform: rotate(45deg);
	transform-origin: left center;
	pointer-events: none;
}

.msm-index-search input {
	width: 100%;
	padding: 15px 20px 15px 46px;
	border: 1.5px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: 28px;
	background: var(--input-bg, #fff);
	box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.25);
	color: inherit;
	font: inherit;
	font-size: 1rem;
	outline: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.msm-index-search input::placeholder {
	color: var(--text-muted, #78716c);
	opacity: 1;
}

.msm-index-search input:hover {
	border-color: var(--text-muted, #78716c);
}

.msm-index-search input:focus {
	border-color: var(--msm-brand, #0d7c6d);
	box-shadow: 0 0 0 4px rgba(var(--msm-brand-rgb, 13, 124, 109), 0.14);
}

/* The browser's own clear button, which is invisible on this background. */
.msm-index-search input::-webkit-search-cancel-button {
	cursor: pointer;
}

.msm-index-chips {
	display: flex;
	gap: 7px;
	overflow-x: auto;
	padding: 11px 2px 2px;
	scrollbar-width: none;
}

.msm-index-chips::-webkit-scrollbar {
	display: none;
}

.msm-index-chip {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: 20px;
	background: var(--bg-surface, #fff);
	color: var(--text-secondary, #57534e);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.msm-index-chip .n {
	font-family: var(--msm-font-mono);
	font-size: 0.7rem;
	color: var(--text-muted, #78716c);
}

.msm-index-chip.on {
	border-color: var(--msm-brand, #0d7c6d);
	background: var(--msm-brand-soft, rgba(13, 124, 109, 0.08));
	color: var(--msm-brand, #0d7c6d);
}

.msm-index-chip.on .n {
	color: var(--msm-brand, #0d7c6d);
}

.msm-index-count {
	margin: 14px 2px 18px;
	font-family: var(--msm-font-mono);
	font-size: 0.8rem;
	color: var(--text-muted, #78716c);
}

.msm-index-section {
	margin-bottom: 34px;
	scroll-margin-top: 120px;
}

.msm-index-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding-bottom: 9px;
	margin-bottom: 14px;
	border-bottom: 2px solid var(--card-border, rgba(0, 0, 0, 0.1));
}

.msm-index-head h2 {
	margin: 0;
	font-family: var(--msm-font-display);
	font-size: 1.12rem;
}

.msm-index-head .n {
	font-family: var(--msm-font-mono);
	font-size: 0.76rem;
	color: var(--text-muted, #78716c);
}

.msm-index-more {
	margin-inline-start: auto;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--msm-brand, #0d7c6d);
	text-decoration: none;
	white-space: nowrap;
}

.msm-index-grid {
	display: grid;
	/*
	 * 290px rather than 232: at the narrower figure five cards fit a
	 * 1280px page and each one reads as a thin strip. Three to four
	 * roomier cards suit an index people browse rather than scan.
	 */
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 14px;
}

.msm-index-card {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 17px 18px;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: 14px;
	background: var(--bg-surface, #fff);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.msm-index-card:hover,
.msm-index-card:focus-visible {
	border-color: var(--msm-brand, #0d7c6d);
	box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.4);
	transform: translateY(-2px);
}

/*
 * The icon sits in a tinted tile so it reads as part of the card rather
 * than an emoji dropped in front of the text.
 */
.msm-index-card .e {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--msm-brand-soft, rgba(13, 124, 109, 0.08));
	font-size: 1.15rem;
	line-height: 1;
}

.msm-index-card .t {
	min-width: 0;
}

.msm-index-card b {
	display: block;
	margin-bottom: 4px;
	font-size: 0.97rem;
	font-weight: 600;
	line-height: 1.3;
}

.msm-index-card i {
	display: block;
	font-style: normal;
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--text-muted, #78716c);
}

/* Arrow slides on hover, so the whole card is visibly a link. */
.msm-index-card .go {
	margin-inline-start: auto;
	align-self: center;
	color: var(--card-border, rgba(0, 0, 0, 0.1));
	transition: color 0.16s ease, transform 0.16s ease;
}

.msm-index-card:hover .go,
.msm-index-card:focus-visible .go {
	color: var(--msm-brand, #0d7c6d);
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.msm-index-card,
	.msm-index-card .go {
		transition: none;
	}

	.msm-index-card:hover,
	.msm-index-card:focus-visible {
		transform: none;
	}
}

.msm-index-empty {
	padding: 30px 0;
	text-align: center;
	color: var(--text-muted, #78716c);
}

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

/* --------------------------------------------------------------------------
   Generated-page previews (text / markdown / CSV / HTML to PDF)
   -------------------------------------------------------------------------- */
.pv-doc {
	position: relative;
	overflow: hidden;
	width: 190px;
	min-height: 269px;
	padding: 14px;
	margin: 0 auto;
	background: #fff;
	color: #1c1917;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: 4px;
	box-shadow: 0 6px 22px -10px rgba(0, 0, 0, 0.25);
	text-align: start;
	font-size: 0.42rem;
	line-height: 1.55;
}

.pv-doc h4 {
	margin: 0 0 6px;
	font-family: var(--msm-font-display);
	font-size: 0.62rem;
	line-height: 1.25;
}

.pv-doc h5 {
	margin: 6px 0 3px;
	font-size: 0.5rem;
}

.pv-doc p {
	margin: 0 0 4px;
}

.pv-doc ul {
	margin: 0 0 4px;
	padding-inline-start: 10px;
}

.pv-doc pre {
	margin: 0 0 4px;
	padding: 3px 4px;
	background: var(--bg-surface-alt, #f5f4f1);
	border-radius: 2px;
	font-family: var(--msm-font-mono);
	font-size: 0.38rem;
	white-space: pre-wrap;
	word-break: break-word;
}

.pv-doc table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.36rem;
}

.pv-doc th {
	background: var(--msm-brand, #0d7c6d);
	color: #fff;
	text-align: start;
	padding: 2px 3px;
}

.pv-doc td {
	border-bottom: 1px solid #eee;
	padding: 2px 3px;
}

.pv-doc-empty {
	color: var(--text-muted, #78716c);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   PDF page previews (rendered from the uploaded document)
   -------------------------------------------------------------------------- */
.msm-pdf-page {
	display: block;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: 4px;
	box-shadow: 0 6px 22px -10px rgba(0, 0, 0, 0.25);
	max-width: 100%;
}

.msm-pdf-thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	justify-items: center;
}

.msm-pdf-thumb {
	background: #fff;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: 3px;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Invoice line-item editor
   -------------------------------------------------------------------------- */
.inv-items {
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: var(--radius-md, 16px);
	background: var(--bg-surface, #fff);
	padding: 14px;
}

.inv-items-heads {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 6px;
	margin-bottom: 2px;
}

.inv-items-heads span {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--text-muted, #78716c);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.inv-ih-order {
	flex: 0 0 22px;
}

.inv-ih-desc {
	flex: 1;
	min-width: 0;
}

.inv-ih-qty {
	flex: 0 0 56px;
	text-align: center;
}

.inv-ih-rate {
	flex: 0 0 104px;
	text-align: right;
}

.inv-ih-line {
	flex: 0 0 88px;
	text-align: right;
}

.inv-ih-remove {
	flex: 0 0 30px;
}

.inv-item-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.inv-item-row .inv-order-btns {
	display: flex;
	flex-direction: column;
	flex: 0 0 22px;
}

.inv-item-row .inv-order-btns button {
	width: 22px;
	height: 17px;
	padding: 0;
	border: none;
	border-radius: 5px;
	background: none;
	color: var(--text-muted, #78716c);
	font-size: 0.6rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inv-item-row .inv-order-btns button:hover:not(:disabled) {
	background: var(--bg-surface-alt, #f5f4f1);
	color: var(--text-primary, #1c1917);
}

.inv-item-row .inv-order-btns button:disabled {
	opacity: 0.25;
	cursor: default;
}

.inv-item-row .inv-desc {
	flex: 1;
	min-width: 0;
}

.inv-item-row .inv-qty-wrap {
	flex: 0 0 56px;
}

.inv-item-row .inv-qty-wrap input {
	text-align: center;
	padding: 10px 6px;
}

.inv-item-row .inv-rate-wrap {
	flex: 0 0 104px;
	position: relative;
}

.inv-item-row .inv-rate-wrap span {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted, #78716c);
	font-size: 0.86rem;
	pointer-events: none;
}

.inv-item-row .inv-rate-wrap input {
	padding-left: 23px;
	text-align: right;
}

.inv-item-row input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: 11px;
	background: var(--input-bg, #fff);
	color: var(--text-primary, #1c1917);
	font-family: inherit;
	font-size: 0.9rem;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.inv-item-row input:focus {
	border-color: var(--msm-brand, #0d7c6d);
	box-shadow: 0 0 0 3px rgba(var(--msm-brand-rgb, 13, 124, 109), 0.12);
}

.inv-item-row .inv-line-amt {
	flex: 0 0 88px;
	text-align: right;
	font-weight: 600;
	color: var(--text-primary, #1c1917);
	font-variant-numeric: tabular-nums;
	font-size: 0.9rem;
	padding-right: 2px;
}

.inv-item-row .inv-remove {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: none;
	color: var(--text-muted, #78716c);
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inv-item-row .inv-remove:hover {
	background: var(--msm-danger-soft, rgba(180, 34, 34, 0.08));
	color: var(--msm-danger, #b42222);
}

.inv-add-row {
	width: 100%;
	margin-top: 6px;
	padding: 9px 14px;
	border: 1.5px dashed var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: 11px;
	background: none;
	color: var(--text-secondary, #57534e);
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.inv-add-row:hover {
	border-color: var(--msm-brand, #0d7c6d);
	color: var(--msm-brand, #0d7c6d);
}

.inv-items-total {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
}

.inv-items-total .label {
	font-size: 0.85rem;
	color: var(--text-secondary, #57534e);
}

.inv-items-total .amount {
	font-family: var(--msm-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--msm-brand, #0d7c6d);
}

@media (max-width: 560px) {
	.inv-items-heads {
		display: none;
	}

	.inv-item-row {
		flex-wrap: wrap;
	}

	.inv-item-row .inv-desc {
		flex: 1 1 100%;
		order: 1;
	}

	.inv-item-row .inv-order-btns {
		order: 2;
	}

	.inv-item-row .inv-qty-wrap {
		order: 3;
	}

	.inv-item-row .inv-rate-wrap {
		order: 4;
	}

	.inv-item-row .inv-line-amt {
		order: 5;
	}

	.inv-item-row .inv-remove {
		order: 6;
	}
}

/* --------------------------------------------------------------------------
   PDF preview panels (certificate / invoice / image-to-pdf)
   -------------------------------------------------------------------------- */
.pv-page {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.1));
	border-radius: 4px;
	box-shadow: 0 6px 22px -10px rgba(0, 0, 0, 0.25);
	margin: 0 auto;
}

/* certificate */
#certPvPage {
	width: 300px;
	height: 212px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#certPvPage.portrait {
	width: 212px;
	height: 300px;
}

.cert-pv-in {
	position: absolute;
	inset: 11px;
	pointer-events: none;
}

.cert-pv-kicker {
	font-family: var(--msm-font-mono);
	font-size: 0.5rem;
	letter-spacing: 0.2em;
	color: var(--text-muted, #78716c);
	text-transform: uppercase;
}

.cert-pv-title {
	font-family: var(--msm-font-display);
	font-size: 0.9rem;
	margin: 5px 0 7px;
}

.cert-pv-name {
	font-family: var(--msm-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 2px 0 6px;
	line-height: 1.1;
	color: var(--text-primary, #1c1917);
}

.cert-pv-body {
	font-size: 0.52rem;
	color: var(--text-secondary, #57534e);
	max-width: 80%;
	line-height: 1.5;
}

.cert-pv-sigs {
	display: flex;
	justify-content: center;
	gap: 22px;
	margin-top: 12px;
}

.cert-pv-sig {
	font-size: 0.44rem;
	color: var(--text-muted, #78716c);
	text-align: center;
}

.cert-pv-sig i {
	display: block;
	width: 58px;
	border-top: 1px solid var(--card-border, #ccc);
	margin-bottom: 3px;
}

.cert-pv-seal {
	position: absolute;
	right: 18px;
	bottom: 18px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	overflow: hidden;
	color: #fff;
	font-size: 0.38rem;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
}

.cert-pv-seal img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* invoice */
#invPvPage {
	width: 232px;
	height: 316px;
	padding: 0;
	font-size: 0.5rem;
	color: var(--text-primary, #1c1917);
	background: #fff;
}

.inv-pv-band {
	height: 5px;
}

.inv-pv-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 12px 14px 8px;
	gap: 8px;
}

.inv-pv-head.stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.inv-pv-logo {
	width: 30px;
	height: 30px;
	border-radius: 6px;
	display: grid;
	place-items: center;
	overflow: hidden;
	color: #fff;
	font-weight: 700;
	font-size: 0.5rem;
}

.inv-pv-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.inv-pv-co {
	font-weight: 700;
	font-size: 0.6rem;
}

.inv-pv-meta {
	text-align: right;
	color: var(--text-muted, #78716c);
	line-height: 1.6;
}

.inv-pv-head.stacked .inv-pv-meta {
	text-align: left;
}

.inv-pv-tbl {
	margin: 0 14px;
	width: calc(100% - 28px);
	border-collapse: collapse;
}

.inv-pv-tbl th {
	color: #fff;
	text-align: left;
	padding: 4px 6px;
	font-size: 0.44rem;
}

.inv-pv-tbl td {
	padding: 4px 6px;
	border-bottom: 1px solid var(--card-border, #eee);
	font-size: 0.46rem;
}

.inv-pv-tot {
	margin: 8px 14px 0;
	padding: 6px 8px;
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	font-size: 0.54rem;
	border-radius: 4px;
}

.inv-pv-stamp {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-18deg);
	border: 2.5px solid;
	border-radius: 6px;
	padding: 4px 12px;
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	opacity: 0.35;
}

.rc-pv {
	padding: 10px 8px;
	font-family: var(--msm-font-mono);
	color: var(--text-primary, #1c1917);
	text-align: center;
}

.rc-pv h4 {
	margin: 0 0 1px;
	font-size: 0.54rem;
}

.rc-pv .rc-pv-sub {
	font-size: 0.4rem;
	color: var(--text-muted, #78716c);
	margin-bottom: 6px;
}

.rc-pv hr {
	border: none;
	border-top: 1px dashed var(--card-border, #bbb);
	margin: 5px 0;
}

.rc-pv-line {
	display: flex;
	justify-content: space-between;
	gap: 5px;
	margin-bottom: 2px;
	font-size: 0.42rem;
	text-align: left;
}

.rc-pv-line span:first-child {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rc-pv-tot {
	display: flex;
	justify-content: space-between;
	margin-top: 3px;
	font-size: 0.5rem;
	font-weight: 700;
}

.rc-pv-foot {
	margin-top: 7px;
	font-size: 0.38rem;
	color: var(--text-muted, #78716c);
}

.rc-pv-narrow .rc-pv-line {
	flex-direction: column;
	gap: 0;
	margin-bottom: 4px;
}

.rc-pv-narrow .rc-pv-line span:last-child {
	align-self: flex-end;
}

/* image to pdf */
#imgPvPage {
	width: 214px;
	height: 302px;
	background: #fff;
}

#imgPvPage.landscape {
	width: 302px;
	height: 214px;
}

.img-pv-grid {
	width: 100%;
	height: 100%;
	display: grid;
	gap: 4px;
}

.img-pv-ph {
	display: grid;
	place-items: center;
	overflow: hidden;
	background: linear-gradient(135deg, #b8ccc8, #7fa8a0);
	color: #fff;
	font-size: 0.5rem;
	font-family: var(--msm-font-mono);
}

.img-pv-ph img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Popular badge on tool cards
   -------------------------------------------------------------------------- */
.msm-badge-popular {
	display: inline-block;
	vertical-align: middle;
	margin-inline-start: 7px;
	padding: 2px 8px;
	border-radius: 20px;
	background: var(--accent-soft, #e6f2f0);
	color: var(--accent, #0d7c6d);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Subtitle size control and caption markers
   -------------------------------------------------------------------------- */
.msm-sub-sizerow {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.msm-sub-sizerow input[type="range"] {
	flex: 1;
	min-inline-size: 130px;
	accent-color: var(--accent, #0d7c6d);
}

.msm-sub-sizerow input[type="number"] {
	inline-size: 76px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.msm-sub-chips {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 7px;
}

.msm-sub-chip {
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.14));
	background: var(--card-bg, #fff);
	border-radius: 20px;
	padding: 4px 12px;
	font-size: 0.76rem;
	font-weight: 600;
	cursor: pointer;
	color: var(--text-secondary, #57534e);
}

.msm-sub-chip.is-on {
	background: var(--accent, #0d7c6d);
	border-color: var(--accent, #0d7c6d);
	color: #fff;
}

/* Caption spacing control (templates/partials/caption-space.php). Its own
   classes, because each tool's size chips toggle every chip of their class. */
.msm-cap-space {
	margin-top: 4px;
}

.msm-space-chips {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 7px;
}

.msm-space-chips[hidden],
.msm-cap-space [hidden] {
	display: none;
}

.msm-space-chip {
	border: 1px solid var(--card-border, rgba(0, 0, 0, 0.14));
	background: var(--card-bg, #fff);
	border-radius: 20px;
	padding: 4px 12px;
	font-size: 0.76rem;
	font-weight: 600;
	cursor: pointer;
	color: var(--text-secondary, #57534e);
	font-variant-numeric: tabular-nums;
}

.msm-space-chip.is-on {
	background: var(--accent, #0d7c6d);
	border-color: var(--accent, #0d7c6d);
	color: #fff;
}

.msm-sub-markers {
	position: relative;
	block-size: 8px;
	background: var(--card-alt, rgba(0, 0, 0, 0.07));
	border-radius: 4px;
	margin-top: 9px;
	overflow: hidden;
}

.msm-sub-marker {
	position: absolute;
	inset-block: 0;
	border: 0;
	padding: 0;
	background: var(--accent, #0d7c6d);
	border-radius: 4px;
	opacity: 0.72;
	cursor: pointer;
}

.msm-sub-marker:hover,
.msm-sub-marker:focus-visible {
	opacity: 1;
}


/* --------------------------------------------------------------------------
   HTML sitemap ([msm_sitemap])
   Plain text links by design: it is a map, not a gallery, and every tool on
   the site has to fit on it without the page turning into a scroll marathon.
   -------------------------------------------------------------------------- */
.msm-sitemap {
	max-width: var(--container, 1280px);
	margin-inline: auto;
	padding: 8px 20px 60px;
}

.msm-sitemap-section {
	margin-top: 34px;
}

.msm-sitemap-title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--card-border, rgba(231, 229, 228, 0.9));
	font-family: var(--msm-font-display);
	font-size: 1.3rem;
}

.msm-sitemap-count {
	font-family: var(--msm-font-mono);
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--text-muted);
}

.msm-sitemap-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.msm-sitemap-list.is-columns {
	columns: 3;
	column-gap: 32px;
}

.msm-sitemap-list.is-columns.is-wide {
	columns: 2;
}

.msm-sitemap-list li {
	break-inside: avoid;
	margin: 0;
}

.msm-sitemap-list a {
	display: inline-block;
	padding: 4px 0;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--text-nav, #44403c);
	text-decoration: none;
}

.msm-sitemap-list a:hover,
.msm-sitemap-group h3 a:hover {
	color: var(--msm-brand);
	text-decoration: underline;
}

.msm-sitemap-groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.msm-sitemap-group h3 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 6px;
	font-family: var(--msm-font-display);
	font-size: 0.95rem;
}

.msm-sitemap-group h3 a {
	color: var(--msm-brand);
	text-decoration: none;
}

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

	.msm-sitemap-list.is-columns {
		columns: 2;
	}
}

@media (max-width: 600px) {
	.msm-sitemap {
		padding-inline: 16px;
	}

	.msm-sitemap-groups {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.msm-sitemap-list.is-columns,
	.msm-sitemap-list.is-columns.is-wide {
		columns: 1;
	}

	/* Finger-sized targets once the list is a single tall column. */
	.msm-sitemap-list a {
		padding: 9px 0;
		font-size: 0.95rem;
	}
}

/* --------------------------------------------------------------------------
   Problem notices
   A notice that says what happened and what to do next: a title, the
   detail, and actions (try again, reload, split the file, copy details).
   Built by MSMTools.problem(); the plain .tool-notice styles come from the
   theme.
   -------------------------------------------------------------------------- */
.tool-notice-warn {
	background: var(--msm-warn-soft, rgba(138, 97, 22, 0.09));
	color: var(--msm-warn, #8a6116);
}

.tool-problem {
	padding: 14px 18px;
}

.tool-problem.tool-notice-error {
	border: 1px solid rgba(180, 34, 34, 0.25);
}

.tool-problem.tool-notice-warn {
	border: 1px solid rgba(138, 97, 22, 0.28);
}

.tool-problem-main {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.tool-problem-title {
	font-size: 0.95rem;
}

.tool-problem-text {
	color: var(--text-primary, #1c1917);
	line-height: 1.55;
}

.tool-problem-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.tool-problem-actions .btn-action {
	min-height: 44px;
	text-decoration: none;
}

.tool-problem-copy,
.msm-ai-cancel {
	min-height: 44px;
	padding: 6px 4px;
	border: 0;
	background: none;
	color: var(--msm-brand, #0d7c6d);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.msm-ai-cancel {
	margin-inline-start: auto;
}

.msm-ai-cancel:disabled {
	opacity: 0.55;
	cursor: default;
}

/* --------------------------------------------------------------------------
   Tool loader
   Until a tool's scripts have arrived its controls are inert, and on a
   slow connection this panel says so instead of leaving buttons that do
   nothing. It sits over the top of the tool rather than above it, so a
   fast load that removes it moves nothing on the page, and it only
   appears after 0.4 s, so a fast load never shows it at all.
   -------------------------------------------------------------------------- */
.msm-tool-shell {
	position: relative;
}

.msm-tool-loader {
	position: absolute;
	top: 0;
	inset-inline: 0;
	z-index: 5;
	animation: msm-loader-in 0.2s ease 0.4s both;
}

.msm-tool-loader[hidden],
.msm-tool-loader-busy[hidden],
.msm-tool-loader-failed[hidden] {
	display: none;
}

@keyframes msm-loader-in {
	from {
		opacity: 0;
		visibility: hidden;
	}

	to {
		opacity: 1;
		visibility: visible;
	}
}

.msm-tool-shell.is-loading > .tool-block-body {
	animation: msm-tool-dim 0.2s ease 0.4s both;
}

@keyframes msm-tool-dim {
	to {
		opacity: 0.45;
	}
}

.msm-tool-shell.is-failed > .tool-block-body {
	opacity: 0.45;
	animation: none;
}

.msm-tool-shell.is-failed .msm-tool-loader {
	animation: none;
}

.msm-tool-loader-busy,
.msm-tool-loader-failed {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 20px;
	border-radius: var(--radius-md, 16px);
	box-shadow: var(--shadow-pop, 0 12px 36px rgba(0, 0, 0, 0.18));
}

.msm-tool-loader-busy {
	border: 1px solid rgba(var(--msm-brand-rgb, 13, 124, 109), 0.25);
	background: linear-gradient(var(--msm-brand-soft, rgba(13, 124, 109, 0.08)), var(--msm-brand-soft, rgba(13, 124, 109, 0.08))), var(--bg-surface, #ffffff);
}

.msm-tool-loader-failed {
	border: 1px solid rgba(180, 34, 34, 0.25);
	background: linear-gradient(var(--msm-danger-soft, rgba(180, 34, 34, 0.1)), var(--msm-danger-soft, rgba(180, 34, 34, 0.1))), var(--bg-surface, #ffffff);
}

.msm-tool-loader-main {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.msm-tool-loader-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.85rem;
	color: var(--msm-brand, #0d7c6d);
}

.msm-tool-loader-head strong {
	font-size: 0.95rem;
}

.msm-tool-loader-bar {
	height: 6px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(var(--msm-brand-rgb, 13, 124, 109), 0.18);
}

.msm-tool-loader-bar span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--msm-brand, #0d7c6d);
	transition: width 0.3s ease;
}

.msm-tool-loader-hint,
.msm-tool-loader-failed p {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--text-secondary, #57534e);
}

.msm-tool-loader-failed strong {
	color: var(--msm-danger, #b42222);
	font-size: 0.95rem;
}

.msm-tool-loader-failed svg {
	flex-shrink: 0;
	color: var(--msm-danger, #b42222);
}

.msm-tool-loader-failed .btn-action {
	align-self: flex-start;
	min-height: 44px;
}

.msm-tool-loader-spin {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border: 3px solid rgba(var(--msm-brand-rgb, 13, 124, 109), 0.25);
	border-top-color: var(--msm-brand, #0d7c6d);
	border-radius: 50%;
	animation: msm-tool-spin 0.9s linear infinite;
}

@keyframes msm-tool-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.msm-tool-loader-spin {
		animation: none;
	}

	.msm-tool-loader-bar span {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Image Metadata Remover
   -------------------------------------------------------------------------- */
.msm-exif-modes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.msm-exif-modes legend {
	margin-bottom: 8px;
	padding: 0;
	font-weight: 600;
}

.msm-exif-mode {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--card-border, #e7e5e4);
	border-radius: var(--radius-md, 16px);
	cursor: pointer;
}

.msm-exif-mode:has(input:checked) {
	border-color: var(--msm-brand, #0d7c6d);
	box-shadow: inset 0 0 0 1px var(--msm-brand, #0d7c6d);
	background: var(--msm-brand-soft, rgba(13, 124, 109, 0.08));
}

.msm-exif-mode input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--msm-brand, #0d7c6d);
}

.msm-exif-mode > span {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--text-secondary, #57534e);
}

.msm-exif-mode strong {
	color: var(--text-primary, #1c1917);
	font-size: 0.95rem;
}

.msm-exif-recommended {
	font-weight: 500;
	font-size: 0.8rem;
	color: var(--msm-brand, #0d7c6d);
}

.msm-exif-mode-line,
.msm-exif-lede {
	margin: 0 0 12px;
	font-size: 0.88rem;
	color: var(--text-secondary, #57534e);
}

.msm-exif-card {
	margin-bottom: 12px;
	overflow: hidden;
	border: 1px solid var(--card-border, #e7e5e4);
	border-radius: var(--radius-md, 16px);
}

.msm-exif-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--bg-surface-alt, #f5f4f1);
}

.msm-exif-thumb {
	flex-shrink: 0;
	width: 52px;
	height: 40px;
	border-radius: 6px;
	background: var(--card-border, #e7e5e4);
	object-fit: cover;
}

.msm-exif-name {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 160px;
	font-size: 0.82rem;
	color: var(--text-secondary, #57534e);
	overflow-wrap: anywhere;
}

.msm-exif-name strong {
	font-size: 0.95rem;
	color: var(--text-primary, #1c1917);
}

.msm-exif-badge {
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
}

.msm-exif-badge-alert {
	background: var(--msm-danger-soft, rgba(180, 34, 34, 0.1));
	color: var(--msm-danger, #b42222);
}

.msm-exif-badge-ok {
	background: var(--msm-success-soft, rgba(0, 124, 66, 0.12));
	color: var(--msm-success, #007c42);
}

.msm-exif-toggle {
	min-height: 44px;
	padding: 6px 4px;
	border: 0;
	background: none;
	color: var(--msm-brand, #0d7c6d);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.msm-exif-rows[hidden] {
	display: none;
}

.msm-exif-row {
	display: grid;
	grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-top: 1px solid var(--card-border, #e7e5e4);
	font-size: 0.88rem;
}

.msm-exif-key {
	font-weight: 600;
}

.msm-exif-val {
	color: var(--text-secondary, #57534e);
	overflow-wrap: anywhere;
}

.msm-exif-chip {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--text-primary, #1c1917);
	color: var(--bg-body, #faf9f7);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.msm-exif-chip.is-kept {
	border: 1px solid var(--text-muted, #78716c);
	background: transparent;
	color: var(--text-secondary, #57534e);
}

.msm-exif-note {
	margin: 0;
	padding: 12px 16px;
	background: var(--msm-warn-soft, rgba(138, 97, 22, 0.09));
	color: var(--msm-warn, #8a6116);
	font-size: 0.85rem;
	line-height: 1.55;
}

.msm-exif-card .msm-exif-note {
	border-top: 1px solid var(--card-border, #e7e5e4);
}

.result-box > .msm-exif-note,
[data-output] > .msm-exif-note {
	margin-top: 12px;
	border-radius: var(--radius-sm, 12px);
}

.msm-exif-table-wrap {
	overflow-x: auto;
}

.msm-exif-table td,
.msm-exif-table th {
	vertical-align: middle;
}

.msm-exif-sub {
	font-size: 0.8rem;
	color: var(--text-secondary, #57534e);
}

@media (max-width: 640px) {
	.msm-exif-modes {
		grid-template-columns: minmax(0, 1fr);
	}

	.msm-exif-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.msm-exif-val {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}