/**
 * Digicue Marketing Tools — production design system.
 *
 * Translated from the approved Claude Design prototype (tools.css) into
 * reusable components.
 *
 * Two rules govern this file:
 *
 * 1. EVERY selector is scoped under `.dct-tool`. Plugin styles can therefore
 *    never leak onto unrelated Digicue pages, and the extra specificity means
 *    theme/ElementsKit rules do not leak inward either.
 *
 * 2. Colours and fonts resolve from the site's Elementor global kit first,
 *    with the approved design value as the fallback. Digicue's globals stay
 *    the single source of truth; nothing here duplicates or overrides them.
 */

.dct-tool,
.dct-dir,
.dct-related {
	/* Brand — resolved from the Elementor kit, design value as fallback. */
	--dct-primary: var( --e-global-color-primary, #666699 );
	--dct-primary-hover: var( --e-global-color-yg2wpw4, #555588 );
	--dct-text: var( --e-global-color-dxgc1mm, #111111 );
	--dct-text-muted: var( --e-global-color-uxmuted, #5b5b66 );

	/*
	 * Secondary text resolves to the kit's DQ Ink 500 rather than UX Soft.
	 * UX Soft (#7a7a86) measures 4.24:1 on white — below the 4.5:1 WCAG AA
	 * threshold for text under 18.66px, which is every hint and KPI label
	 * here. DQ Ink 500 is 5.19:1, keeps the same visual hierarchy, and is
	 * still a Digicue kit token rather than a new colour.
	 */
	--dct-text-soft: var( --e-global-color-dqink500, #6b6b70 );
	--dct-border: var( --e-global-color-upmy89u, #e2e2e8 );
	--dct-border-soft: var( --e-global-color-uxbsoft, #ececf2 );
	--dct-tint: var( --e-global-color-uxtint, #f1f0f7 );
	--dct-tint-2: var( --e-global-color-uxtint2, #e7e5f2 );
	--dct-dark: var( --e-global-color-dqblack, #111111 );
	--dct-white: #ffffff;

	/* Semantic states — never signalled by colour alone. */
	--dct-ok: var( --e-global-color-dqsuccess, #2e7d32 );
	--dct-ok-bg: var( --e-global-color-dqsuccessbg, #eaf3ea );
	--dct-warn: var( --e-global-color-dqwarning, #b26a00 );
	--dct-warn-bg: var( --e-global-color-dqwarningbg, #f7efe2 );
	--dct-bad: var( --e-global-color-dqerror, #c62828 );
	--dct-bad-bg: var( --e-global-color-dqerrorbg, #f7eaea );
	--dct-info: var( --e-global-color-dqinfo, #2f5fa7 );
	--dct-info-bg: var( --e-global-color-dqinfobg, #e9eff7 );

	--dct-font-head: var( --e-global-typography-primary-font-family, 'Sora' ), sans-serif;
	--dct-font-body: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	--dct-font-mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

	--dct-ctl-line: #cbcbd6;
	--dct-radius: 0px;
	--dct-focus: 2px solid var( --dct-primary );

	font-family: var( --dct-font-body );
	color: var( --dct-text );
	line-height: 1.5;
	container-type: inline-size;
}

.dct-tool *,
.dct-tool *::before,
.dct-tool *::after,
.dct-dir *,
.dct-dir *::before,
.dct-dir *::after,
.dct-related *,
.dct-related *::before,
.dct-related *::after {
	box-sizing: border-box;
}

/**
 * The [hidden] attribute must always win.
 *
 * Any class rule setting `display` (e.g. `.dct-empty { display: flex }`) has
 * higher specificity than the UA's `[hidden] { display: none }`, so toggling
 * `el.hidden` from JS would silently do nothing. This one rule makes the
 * attribute authoritative for every component in the design system.
 */
.dct-tool [hidden],
.dct-dir [hidden],
.dct-related [hidden] {
	display: none !important;
}

/* Visible, consistent focus for every interactive element. */
.dct-tool :focus-visible,
.dct-dir :focus-visible,
.dct-related :focus-visible {
	outline: var( --dct-focus );
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
 * App shell
 * ------------------------------------------------------------------- */

.dct-tool .dct-app {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	border: 1px solid var( --dct-border );
	border-top: 3px solid var( --dct-primary );
	background: var( --dct-white );
	margin: 0;
}

.dct-tool .dct-app-wide {
	grid-template-columns: minmax( 0, 1fr );
}

.dct-tool .dct-app-in {
	padding: 34px 36px 32px;
	min-width: 0;
}

.dct-tool .dct-app-out {
	background: var( --dct-tint );
	padding: 34px 36px;
	border-left: 1px solid var( --dct-border );
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.dct-tool .dct-app-wide .dct-app-out {
	border-left: 0;
	border-top: 1px solid var( --dct-border );
}

.dct-tool .dct-app-h {
	font: 600 11px/1 var( --dct-font-body );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --dct-primary );
	margin-bottom: 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.dct-tool .dct-app-h-r {
	color: var( --dct-text-soft );
	letter-spacing: 0.04em;
	text-transform: none;
	font-weight: 500;
	font-size: 12px;
}

/* ---------------------------------------------------------------------
 * Fields
 * ------------------------------------------------------------------- */

.dct-tool .dct-field {
	margin-bottom: 18px;
}

.dct-tool .dct-field label {
	display: block;
	font: 500 14px/1.3 var( --dct-font-body );
	color: var( --dct-text );
	margin-bottom: 7px;
}

.dct-tool .dct-ctl {
	display: flex;
	align-items: stretch;
	border: 1px solid var( --dct-ctl-line );
	background: var( --dct-white );
	transition: border-color 0.15s, box-shadow 0.15s;
}

.dct-tool .dct-ctl:focus-within {
	border-color: var( --dct-primary );
	box-shadow: 0 0 0 3px var( --dct-tint-2 );
}

.dct-tool .dct-field.has-error .dct-ctl {
	border-color: var( --dct-bad );
}

.dct-tool .dct-field.has-error .dct-ctl:focus-within {
	box-shadow: 0 0 0 3px var( --dct-bad-bg );
}

.dct-tool .dct-affix {
	display: grid;
	place-items: center;
	padding: 0 12px;
	background: var( --dct-tint );
	border-right: 1px solid var( --dct-border );
	color: var( --dct-text-muted );
	font: 500 14px/1 var( --dct-font-body );
	white-space: nowrap;
}

.dct-tool .dct-affix-r {
	border-right: 0;
	border-left: 1px solid var( --dct-border );
}

.dct-tool .dct-input,
.dct-tool .dct-select {
	flex: 1;
	min-width: 0;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 12px 14px;
	font: 400 16px/1.4 var( --dct-font-body );
	color: var( --dct-text );
	border-radius: var( --dct-radius );
	-webkit-appearance: none;
	appearance: none;
}

.dct-tool .dct-input:focus,
.dct-tool .dct-select:focus {
	outline: none;
}

.dct-tool .dct-input::placeholder {
	color: var( --dct-text-soft );
	opacity: 1;
}

.dct-tool .dct-ctl-select {
	position: relative;
}

.dct-tool .dct-ctl-select::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var( --dct-text-muted );
	border-bottom: 2px solid var( --dct-text-muted );
	transform: translateY( -70% ) rotate( 45deg );
	pointer-events: none;
}

.dct-tool .dct-select {
	padding-right: 38px;
	cursor: pointer;
}

.dct-tool .dct-hint {
	font-size: 12.5px;
	color: var( --dct-text-soft );
	margin-top: 6px;
	line-height: 1.45;
}

/* Errors: hidden until JS marks the field, and carry an icon + text so the
   state is never conveyed by colour alone. */
.dct-tool .dct-error {
	display: none;
	font-size: 12.5px;
	color: var( --dct-bad );
	margin-top: 6px;
	font-weight: 500;
}

.dct-tool .dct-field.has-error .dct-error {
	display: flex;
	gap: 6px;
	align-items: flex-start;
}

.dct-tool .dct-field.has-error .dct-error::before {
	content: '\26A0';
	font-size: 12px;
	line-height: 1.4;
}

/* Checkboxes */

.dct-tool .dct-check {
	display: grid;
	grid-template-columns: 20px minmax( 0, 1fr );
	gap: 6px 11px;
	align-items: start;
	margin-bottom: 14px;
}

.dct-tool .dct-check-input {
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var( --dct-primary );
	cursor: pointer;
}

.dct-tool .dct-check label {
	font: 400 14.5px/1.35 var( --dct-font-body );
	color: var( --dct-text );
	cursor: pointer;
	margin: 0;
}

.dct-tool .dct-check .dct-hint {
	grid-column: 2;
	margin-top: 2px;
}

/* Field groups */

.dct-tool .dct-group {
	border: 0;
	border-top: 1px solid var( --dct-border-soft );
	padding: 20px 0 0;
	margin: 0 0 20px;
	min-width: 0;
}

.dct-tool .dct-group-h {
	font: 600 11px/1 var( --dct-font-body );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --dct-text-muted );
	padding: 0;
	margin-bottom: 16px;
}

.dct-tool .dct-group-h span {
	display: block;
	margin-top: 6px;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var( --dct-text-soft );
}

/* Disclosure */

.dct-tool .dct-more {
	border-top: 1px solid var( --dct-border-soft );
	margin: 4px 0 18px;
}

.dct-tool .dct-more > summary {
	cursor: pointer;
	padding: 14px 0;
	font: 500 14px/1.3 var( --dct-font-body );
	color: var( --dct-primary );
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.dct-tool .dct-more > summary::-webkit-details-marker {
	display: none;
}

.dct-tool .dct-more > summary::before {
	content: '+';
	font-family: var( --dct-font-mono );
	font-size: 14px;
	line-height: 1;
}

.dct-tool .dct-more[open] > summary::before {
	content: '\2212';
}

.dct-tool .dct-more > summary span {
	font-weight: 400;
	font-size: 12.5px;
	color: var( --dct-text-soft );
}

.dct-tool .dct-more-b {
	padding-bottom: 6px;
}

/* Tooltips */

.dct-tool .dct-tipw {
	position: relative;
	display: inline-flex;
	margin-left: 6px;
	vertical-align: middle;
}

.dct-tool .dct-tipb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var( --dct-border );
	background: var( --dct-white );
	color: var( --dct-text-muted );
	font: 600 11px/1 var( --dct-font-body );
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
}

.dct-tool .dct-tipb:hover {
	border-color: var( --dct-primary );
	color: var( --dct-primary );
}

.dct-tool .dct-tipp {
	position: absolute;
	bottom: calc( 100% + 8px );
	left: 50%;
	transform: translateX( -50% );
	width: max-content;
	max-width: 260px;
	background: var( --dct-dark );
	color: var( --dct-white );
	font: 400 12.5px/1.45 var( --dct-font-body );
	padding: 9px 11px;
	z-index: 20;
	display: none;
}

.dct-tool .dct-tipb[aria-expanded='true'] + .dct-tipp {
	display: block;
}

/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------- */

.dct-tool .dct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: 600 14px/1 var( --dct-font-body );
	padding: 13px 20px;
	min-height: 44px;
	border: 1px solid transparent;
	border-radius: var( --dct-radius );
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.dct-tool .dct-btn-primary {
	background: var( --dct-primary );
	border-color: var( --dct-primary );
	color: var( --dct-white );
}

.dct-tool .dct-btn-primary:hover {
	background: var( --dct-primary-hover );
	border-color: var( --dct-primary-hover );
	color: var( --dct-white );
}

.dct-tool .dct-btn-secondary {
	background: var( --dct-white );
	border-color: var( --dct-border );
	color: var( --dct-text );
}

.dct-tool .dct-btn-secondary:hover {
	border-color: var( --dct-primary );
	color: var( --dct-primary );
}

.dct-tool .dct-btn-ghost {
	background: transparent;
	border-color: transparent;
	color: var( --dct-text-muted );
}

.dct-tool .dct-btn-ghost:hover {
	color: var( --dct-primary );
}

.dct-tool .dct-btn-block {
	width: 100%;
}

.dct-tool .dct-btn-lg {
	padding: 16px 24px;
	font-size: 15px;
	min-height: 52px;
}

.dct-tool .dct-acts {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var( --dct-border );
}

/* ---------------------------------------------------------------------
 * Results
 * ------------------------------------------------------------------- */

.dct-tool .dct-empty {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	min-height: 200px;
}

.dct-tool .dct-ghost {
	font: 700 46px/1 var( --dct-font-head );
	color: var( --dct-tint-2 );
	letter-spacing: -0.03em;
	margin-bottom: 14px;
}

.dct-tool .dct-empty p {
	font-size: 14px;
	color: var( --dct-text-muted );
	margin: 0;
	max-width: 44ch;
}

.dct-tool .dct-res-l {
	font: 500 12.5px/1 var( --dct-font-body );
	color: var( --dct-text-muted );
	margin-bottom: 10px;
}

.dct-tool .dct-res-n {
	font: 800 clamp( 38px, 6cqi, 56px )/1 var( --dct-font-head );
	color: var( --dct-text );
	letter-spacing: -0.03em;
	display: flex;
	align-items: baseline;
	gap: 2px;
}

.dct-tool .dct-res-n small {
	font-size: 0.45em;
	font-weight: 700;
	color: var( --dct-primary );
}

.dct-tool .dct-res-n-range {
	font-size: clamp( 24px, 4.2cqi, 34px );
	letter-spacing: -0.02em;
}

.dct-tool .dct-res-say {
	font-size: 14.5px;
	color: var( --dct-text-muted );
	margin: 14px 0 0;
	line-height: 1.5;
}

.dct-tool .dct-res-say b {
	color: var( --dct-text );
	font-weight: 600;
}

.dct-tool .dct-res-say-sm {
	font-size: 13.5px;
}

.dct-tool .dct-kpis {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 110px, 1fr ) );
	gap: 1px;
	background: var( --dct-border );
	border: 1px solid var( --dct-border );
	margin-top: 24px;
}

.dct-tool .dct-kpi {
	background: var( --dct-white );
	padding: 14px 15px;
	min-width: 0;
}

.dct-tool .dct-kpi span {
	display: block;
	font-size: 11.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --dct-text-soft );
	margin-bottom: 6px;
}

.dct-tool .dct-kpi b {
	font: 600 17px/1.2 var( --dct-font-head );
	color: var( --dct-text );
	overflow-wrap: anywhere;
}

/* Break-even scale */

.dct-tool .dct-scale {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var( --dct-border );
}

.dct-tool .dct-scale-t {
	position: relative;
	height: 8px;
	background: var( --dct-white );
	border: 1px solid var( --dct-border );
}

.dct-tool .dct-scale-m {
	position: absolute;
	top: -4px;
	width: 3px;
	height: 14px;
	background: var( --dct-primary );
	transform: translateX( -50% );
	transition: left 0.3s ease;
}

.dct-tool .dct-scale-m.is-be {
	background: var( --dct-text );
	height: 18px;
	top: -6px;
}

.dct-tool .dct-scale-l {
	display: flex;
	justify-content: space-between;
	font-size: 11.5px;
	color: var( --dct-text-soft );
	margin-top: 8px;
	font-family: var( --dct-font-mono );
}

.dct-tool .dct-scale-k {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 12px;
	font-size: 12.5px;
	color: var( --dct-text-muted );
}

.dct-tool .dct-scale-k span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dct-tool .dct-scale-k i {
	width: 3px;
	height: 12px;
	background: var( --dct-primary );
}

.dct-tool .dct-scale-k i.is-be {
	background: var( --dct-text );
}

/* Breakdown + recommendations */

.dct-tool .dct-break {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var( --dct-border );
}

.dct-tool .dct-break-h,
.dct-tool .dct-recs-h {
	font: 600 11px/1 var( --dct-font-body );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --dct-text-muted );
	margin-bottom: 14px;
}

.dct-tool .dct-break-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var( --dct-border-soft );
	font-size: 13.5px;
	color: var( --dct-text-muted );
}

.dct-tool .dct-break-row b {
	color: var( --dct-text );
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.dct-tool .dct-recs {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var( --dct-border );
}

.dct-tool .dct-rec {
	border-left: 2px solid var( --dct-primary );
	padding: 2px 0 2px 14px;
	margin-bottom: 14px;
}

.dct-tool .dct-rec p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var( --dct-text-muted );
}

/* URL output (UTM builder) */

.dct-tool .dct-url {
	font-family: var( --dct-font-mono );
	font-size: 13px;
	line-height: 1.6;
	background: var( --dct-white );
	border: 1px solid var( --dct-border );
	padding: 16px 18px;
	overflow-wrap: anywhere;
	word-break: break-word;
	color: var( --dct-text );
}

.dct-tool .dct-params {
	margin-top: 18px;
	border-top: 1px solid var( --dct-border );
}

.dct-tool .dct-param {
	display: grid;
	grid-template-columns: minmax( 110px, auto ) minmax( 0, 1fr );
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid var( --dct-border-soft );
	font-size: 13px;
}

.dct-tool .dct-param code {
	font-family: var( --dct-font-mono );
	font-size: 12px;
	color: var( --dct-primary );
	background: none;
	padding: 0;
}

.dct-tool .dct-param span {
	color: var( --dct-text );
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
 * Alerts — icon + label + colour, never colour alone
 * ------------------------------------------------------------------- */

.dct-tool .dct-alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.5;
	border: 1px solid;
	margin: 14px 0;
}

.dct-tool .dct-alert-l {
	font-weight: 600;
}

.dct-tool .dct-alert-i {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	font: 700 11px/1 var( --dct-font-body );
	border-radius: 50%;
	margin-top: 1px;
}

.dct-tool .dct-alert-info {
	background: var( --dct-info-bg );
	border-color: var( --dct-info );
	color: var( --dct-text );
}

.dct-tool .dct-alert-info .dct-alert-i {
	background: var( --dct-info );
	color: #fff;
}

.dct-tool .dct-alert-success {
	background: var( --dct-ok-bg );
	border-color: var( --dct-ok );
}

.dct-tool .dct-alert-success .dct-alert-i {
	background: var( --dct-ok );
	color: #fff;
}

.dct-tool .dct-alert-warning {
	background: var( --dct-warn-bg );
	border-color: var( --dct-warn );
}

.dct-tool .dct-alert-warning .dct-alert-i {
	background: var( --dct-warn );
	color: #fff;
}

.dct-tool .dct-alert-error {
	background: var( --dct-bad-bg );
	border-color: var( --dct-bad );
}

.dct-tool .dct-alert-error .dct-alert-i {
	background: var( --dct-bad );
	color: #fff;
}

/* Editor-only notice for a bad shortcode id. */
.dct-tool-missing {
	border: 1px dashed #c62828;
	padding: 14px 16px;
	font-size: 13.5px;
	color: #c62828;
	background: #f7eaea;
}

/* ---------------------------------------------------------------------
 * Toast
 * ------------------------------------------------------------------- */

.dct-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translate( -50%, 12px );
	background: #111111;
	color: #ffffff;
	font: 500 13.5px/1 'Inter', sans-serif;
	padding: 13px 18px;
	z-index: 99999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
}

.dct-toast.is-on {
	opacity: 1;
	transform: translate( -50%, 0 );
}

/* ---------------------------------------------------------------------
 * Responsive — container queries so the tool adapts to the Elementor
 * column it is placed in, not just the viewport.
 * ------------------------------------------------------------------- */

@container ( max-width: 860px ) {
	.dct-tool .dct-app {
		grid-template-columns: minmax( 0, 1fr );
	}

	.dct-tool .dct-app-out {
		border-left: 0;
		border-top: 1px solid var( --dct-border );
	}
}

@media ( max-width: 860px ) {
	.dct-tool .dct-app {
		grid-template-columns: minmax( 0, 1fr );
	}

	.dct-tool .dct-app-out {
		border-left: 0;
		border-top: 1px solid var( --dct-border );
	}
}

@media ( max-width: 600px ) {
	.dct-tool .dct-app-in,
	.dct-tool .dct-app-out {
		padding: 24px 20px;
	}

	/* 16px minimum prevents iOS Safari zooming on focus. */
	.dct-tool .dct-input,
	.dct-tool .dct-select {
		font-size: 16px;
		padding: 13px 14px;
	}

	.dct-tool .dct-btn {
		min-height: 48px;
	}

	.dct-tool .dct-acts {
		flex-direction: column;
	}

	.dct-tool .dct-acts .dct-btn {
		width: 100%;
	}

	.dct-tool .dct-kpis {
		grid-template-columns: repeat( auto-fit, minmax( 92px, 1fr ) );
	}

	.dct-tool .dct-param {
		grid-template-columns: minmax( 0, 1fr );
		gap: 3px;
	}

	.dct-tool .dct-url {
		font-size: 12.5px;
		padding: 14px;
	}

	.dct-tool .dct-tipp {
		left: 0;
		transform: none;
		max-width: min( 260px, 70vw );
	}

	/* Comfortable touch targets. */
	.dct-tool .dct-tipb {
		width: 24px;
		height: 24px;
	}

	.dct-tool .dct-more > summary {
		padding: 16px 0;
	}
}

/* ---------------------------------------------------------------------
 * Motion + forced colours
 * ------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.dct-tool *,
	.dct-toast {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.dct-tool .dct-scale-m {
		transition: none;
	}
}

@media ( forced-colors: active ) {
	.dct-tool .dct-app,
	.dct-tool .dct-ctl,
	.dct-tool .dct-kpis,
	.dct-tool .dct-url {
		border: 1px solid CanvasText;
	}

	.dct-tool .dct-btn {
		border: 1px solid ButtonText;
	}
}

/* Print: results are worth keeping, the form is not. */
@media print {
	.dct-tool .dct-app {
		grid-template-columns: minmax( 0, 1fr );
		border: 0;
	}

	.dct-tool .dct-acts,
	.dct-tool .dct-more {
		display: none;
	}
}

/* =====================================================================
 * Phase 2A additions
 *
 * Same two rules as above: everything scoped to a plugin root, colours
 * resolved from the Elementor kit.
 * ================================================================== */

/* Screen-reader-only text */
.dct-dir .dct-sr,
.dct-tool .dct-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ---------- Textarea + methodology ---------- */

.dct-tool .dct-textarea {
	resize: vertical;
	min-height: 84px;
	line-height: 1.5;
	font-family: var( --dct-font-body );
}

.dct-tool .dct-method {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var( --dct-border-soft );
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --dct-text-soft );
}

.dct-tool .dct-method b {
	color: var( --dct-text-muted );
	font-weight: 600;
}

.dct-tool .dct-source {
	margin: 14px 0 0;
	font-size: 12px;
	color: var( --dct-text-soft );
}

/* ---------- Character meter ---------- */

.dct-tool .dct-meter {
	height: 6px;
	background: var( --dct-border-soft );
	margin-top: 18px;
	overflow: hidden;
}

.dct-tool .dct-meter-bar {
	display: block;
	height: 100%;
	width: 0;
	background: var( --dct-primary );
	transition: width 0.15s ease, background-color 0.15s;
}

.dct-tool .dct-meter-bar.is-near {
	background: var( --dct-warn );
}

.dct-tool .dct-meter-bar.is-over {
	background: var( --dct-bad );
}

/* ---------- SERP preview ---------- */

.dct-tool .dct-serp {
	background: var( --dct-white );
	border: 1px solid var( --dct-border );
	padding: 18px 20px;
	max-width: 600px;
}

.dct-tool .dct-serp-crumb {
	font-size: 12.5px;
	color: var( --dct-text-muted );
	margin-bottom: 4px;
	overflow-wrap: anywhere;
}

.dct-tool .dct-serp-title {
	font: 400 19px/1.3 var( --dct-font-body );
	color: #1a0dab;
	margin-bottom: 4px;
	overflow-wrap: anywhere;
}

.dct-tool .dct-serp-desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: var( --dct-text-muted );
	overflow-wrap: anywhere;
}

/* ---------- Metric grid (Marketing Performance) ---------- */

.dct-tool .dct-metrics {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 1px;
	background: var( --dct-border );
	border: 1px solid var( --dct-border );
}

.dct-tool .dct-metrics .dct-kpi {
	background: var( --dct-white );
}

/* ---------- Parameter rows ---------- */

.dct-tool .dct-param-missing {
	color: var( --dct-text-soft );
	font-style: italic;
}

.dct-tool .dct-param.is-missing code {
	color: var( --dct-text-soft );
}

.dct-tool .dct-break-row b.is-negative {
	color: var( --dct-bad );
}

/* ---------- Signals / recommendations ---------- */

.dct-tool .dct-rec-h {
	display: block;
	font: 600 13.5px/1.35 var( --dct-font-body );
	color: var( --dct-text );
	margin-bottom: 5px;
}

.dct-tool .dct-rec-success { border-left-color: var( --dct-ok ); }
.dct-tool .dct-rec-warning { border-left-color: var( --dct-warn ); }
.dct-tool .dct-rec-error   { border-left-color: var( --dct-bad ); }
.dct-tool .dct-rec-info    { border-left-color: var( --dct-info ); }

/* =====================================================================
 * Directory
 * ================================================================== */

.dct-dir {
	display: block;
}

.dct-dir .dct-eyebrow {
	font: 600 11px/1 var( --dct-font-body );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --dct-primary );
	margin: 0 0 16px;
}

.dct-dir .dct-eyebrow-light {
	color: var( --dct-tint-2 );
}

.dct-dir-hero {
	padding: 8px 0 32px;
}

.dct-dir-hero h1 {
	font: 800 clamp( 34px, 5cqi, 52px )/1.05 var( --dct-font-head );
	letter-spacing: -0.028em;
	margin: 0 0 14px;
	color: var( --dct-text );
}

.dct-dir .dct-dir-tag {
	font: 600 19px/1.4 var( --dct-font-head );
	color: var( --dct-primary );
	margin: 0 0 12px;
}

.dct-dir .dct-dir-lede {
	font-size: 16.5px;
	line-height: 1.6;
	color: var( --dct-text-muted );
	max-width: 62ch;
	margin: 0;
}

/* ---------- Finder ---------- */

.dct-finder {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var( --dct-white );
	border-top: 1px solid var( --dct-border );
	border-bottom: 1px solid var( --dct-border );
	padding: 14px 0;
	margin-bottom: 8px;
}

.dct-finder-in {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
}

.dct-dir .dct-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 280px;
	min-width: 0;
	border: 1px solid var( --dct-ctl-line );
	background: var( --dct-white );
}

.dct-dir .dct-search:focus-within {
	border-color: var( --dct-primary );
	box-shadow: 0 0 0 3px var( --dct-tint-2 );
}

.dct-dir .dct-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 12px 14px;
	font: 400 16px/1.4 var( --dct-font-body );
	color: var( --dct-text );
	-webkit-appearance: none;
	appearance: none;
}

.dct-dir .dct-search input:focus {
	outline: none;
}

.dct-dir .dct-search-clear {
	border: 0;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	padding: 0 12px;
	min-height: 44px;
	cursor: pointer;
	color: var( --dct-text-muted );
}

.dct-dir .dct-search-clear:hover {
	color: var( --dct-text );
}

.dct-dir .dct-filters {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.dct-dir .dct-filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var( --dct-border );
	background: var( --dct-white );
	color: var( --dct-text-muted );
	font: 500 13px/1 var( --dct-font-body );
	padding: 0 13px;
	min-height: 40px;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.dct-dir .dct-filter:hover {
	border-color: var( --dct-primary );
	color: var( --dct-primary );
}

/* Active state carries a border, weight and colour change — not colour alone. */
.dct-dir .dct-filter.is-on {
	background: var( --dct-primary );
	border-color: var( --dct-primary );
	color: var( --dct-white );
	font-weight: 600;
}

.dct-dir .dct-filter i {
	font-style: normal;
	font-size: 11px;
	font-family: var( --dct-font-mono );
	opacity: 0.75;
}

/* ---------- Sections ---------- */

.dct-dir-sec {
	padding: 34px 0 6px;
}

.dct-dir .dct-sec-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var( --dct-border );
}

.dct-dir .dct-sec-head h2 {
	color: var( --dct-text );
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.dct-dir .dct-sec-head h2 i {
	/* The count never breaks ("14 / tools") when the heading wraps on mobile. */
	flex: none;
	white-space: nowrap;
	font-style: normal;
	font-size: 12.5px;
	font-weight: 400;
	color: var( --dct-text-soft );
	font-family: var( --dct-font-body );
}

/* ---------- Featured: the front desk of the library ---------- */

/*
 * The featured six have to read as a different KIND of thing from the 42
 * below them, or they are just the first six cards. A tinted band and a
 * heavier card does that without hiding anything.
 */
.dct-dir-featured {
	background: var( --dct-tint );
	border: 1px solid var( --dct-border );
	border-radius: 10px;
	padding: 26px 24px 28px;
	margin-bottom: 44px;
}

.dct-dir-featured .dct-sec-head {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.dct-dir-featured .dct-sec-head p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var( --dct-text-muted );
	max-width: 62ch;
}

.dct-dir-featured .dct-card {
	background: var( --dct-white );
	border-color: var( --dct-border-strong, var( --dct-border ) );
}

.dct-card-grid-feat {
	grid-template-columns: repeat( auto-fill, minmax( 268px, 1fr ) );
}

/* ---------- "All tools" divider ---------- */

.dct-sec-head-lg {
	margin-bottom: 28px;
}

.dct-sec-head-lg p {
	margin: 0;
	font-size: 14.5px;
	color: var( --dct-text-muted );
}

/* ---------- Sub-groups inside a large category ---------- */

.dct-cat-group + .dct-cat-group {
	margin-top: 26px;
}

.dct-cat-group-h {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --dct-text-soft );
	margin: 0 0 12px;
}

/* ---------- Cards ---------- */

.dct-card-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 248px, 1fr ) );
	gap: 16px;
}

.dct-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var( --dct-border );
	background: var( --dct-white );
	padding: 20px 20px 15px;
	min-height: 186px;
	color: var( --dct-text );
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

a.dct-card:hover {
	border-color: var( --dct-primary );
	box-shadow: 0 10px 28px rgba( 17, 17, 17, 0.07 );
	color: var( --dct-text );
}

.dct-card.is-unavailable {
	background: var( --dct-tint );
	border-style: dashed;
	cursor: default;
}

.dct-card.is-unavailable h3,
.dct-card.is-unavailable p {
	color: var( --dct-text-muted );
}

.dct-card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}

.dct-card h3 {
	font: 600 16px/1.3 var( --dct-font-head );
	margin: 16px 0 6px;
	color: inherit;
}

.dct-card p {
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --dct-text-muted );
	margin: 0;
	flex: 1;
}

.dct-card-ft {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
	padding-top: 11px;
	border-top: 1px solid var( --dct-border-soft );
	font-size: 11.5px;
	color: var( --dct-text-soft );
}

.dct-tile {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	display: grid;
	place-items: center;
	font: 500 10.5px/1 var( --dct-font-mono );
	background: var( --dct-tint );
	color: var( --dct-primary );
	border: 1px solid var( --dct-tint-2 );
	letter-spacing: 0.02em;
}

.dct-tile.is-ai {
	background: var( --dct-dark );
	color: var( --dct-white );
	border-color: var( --dct-dark );
}

.dct-tile.is-scan {
	background: var( --dct-white );
	border-style: dashed;
	border-color: var( --dct-primary );
}

.dct-tile-lg {
	width: 96px;
	height: 96px;
	flex-basis: 96px;
	font-size: 17px;
}

/* ---------- Badges ---------- */

.dct-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font: 600 10px/1 var( --dct-font-body );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 7px;
	border: 1px solid var( --dct-border );
	background: var( --dct-white );
	color: var( --dct-text-muted );
	white-space: nowrap;
}

.dct-badge-free {
	border-color: var( --dct-tint-2 );
	background: var( --dct-tint );
	color: var( --dct-primary );
}

.dct-badge-ai {
	background: var( --dct-dark );
	border-color: var( --dct-dark );
	color: var( --dct-white );
}

.dct-badge-scan {
	border-color: var( --dct-primary );
	color: var( --dct-primary );
}

.dct-badge-new {
	border-color: var( --dct-text );
	color: var( --dct-text );
}

.dct-badge-soon {
	border-style: dashed;
	color: var( --dct-text-soft );
}

/* ---------- Feature block ---------- */

.dct-feature {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	gap: 28px;
	align-items: center;
	background: var( --dct-dark );
	color: var( --dct-white );
	padding: 34px 36px;
}

.dct-feature h2 {
	margin: 0 0 12px;
	color: var( --dct-white );
}

.dct-feature p {
	color: rgba( 255, 255, 255, 0.78 );
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 20px;
	max-width: 56ch;
}

.dct-feature .dct-tile {
	background: rgba( 255, 255, 255, 0.08 );
	border-color: rgba( 255, 255, 255, 0.2 );
	color: var( --dct-white );
}

/* ---------- No results ---------- */

.dct-noresult {
	border: 1px dashed var( --dct-border );
	background: var( --dct-tint );
	padding: 32px 28px;
	text-align: center;
}

.dct-noresult h3 {
	font: 600 18px/1.3 var( --dct-font-head );
	margin: 0 0 8px;
	color: var( --dct-text );
	overflow-wrap: anywhere;
}

.dct-noresult p {
	font-size: 14px;
	color: var( --dct-text-muted );
	margin: 0 0 18px;
}

/* =====================================================================
 * Related content (tool pages)
 * ================================================================== */

.dct-related {
	display: block;
}

.dct-rel-sec {
	padding: 26px 0 0;
}

.dct-related .dct-rel-h {
	color: var( --dct-text );
	margin: 0 0 16px;
	padding-bottom: 11px;
	border-bottom: 1px solid var( --dct-border );
}

.dct-rel-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 236px, 1fr ) );
	gap: 14px;
}

/* ---------- Directory responsive ---------- */

@media ( max-width: 860px ) {
	.dct-feature {
		grid-template-columns: minmax( 0, 1fr );
	}

	.dct-feature-r {
		display: none;
	}

	.dct-proof {
		flex-wrap: wrap;
		gap: 8px 14px;
	}

	.dct-proof-r {
		border-left: 0;
		padding-left: 0;
		flex-basis: 100%;
	}
}

@media ( max-width: 600px ) {
	.dct-card-grid,
	.dct-rel-grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.dct-finder {
		position: static;
		padding: 12px 0;
	}

	.dct-dir .dct-filters {
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.dct-dir .dct-filters::-webkit-scrollbar {
		display: none;
	}

	.dct-dir .dct-filter {
		min-height: 44px;
	}

	.dct-feature,
	.dct-cta {
		padding: 26px 20px;
	}

	.dct-tool .dct-serp {
		padding: 15px 16px;
	}

	.dct-tool .dct-metrics {
		grid-template-columns: repeat( auto-fit, minmax( 130px, 1fr ) );
	}
}

/* =====================================================================
 * Heading specificity guard
 *
 * The Elementor kit styles bare headings site-wide — `.elementor-kit-… h1`
 * sets colour to the kit's Secondary (white, intended for dark hero
 * sections) and size to the 88px hero token. That selector is (0,1,1),
 * identical to a plain `.dct-dir-hero h1`, and it loads after this file,
 * so it would win on source order and render our headings white.
 *
 * Re-asserting each heading with its root class prefixed lifts these to
 * (0,2,1) so the plugin's own typography holds, without touching the kit
 * or using !important.
 * ================================================================== */

.dct-dir .dct-dir-hero h1 {
	font: 800 clamp( 34px, 5cqi, 52px )/1.05 var( --dct-font-head );
	letter-spacing: -0.028em;
	color: var( --dct-text );
	margin: 0 0 14px;
	/* The kit uppercases h1 and capitalises h2; the approved design is title case. */
	text-transform: none;
}

.dct-dir .dct-feature h2 {
	color: var( --dct-white );
	margin: 0 0 12px;
	text-transform: none;
}

.dct-dir .dct-sec-head h2 {
	color: var( --dct-text );
	margin: 0;
	text-transform: none;
}

.dct-dir .dct-card h3,
.dct-related .dct-card h3 {
	font: 600 16px/1.3 var( --dct-font-head );
	color: var( --dct-text );
	margin: 16px 0 6px;
	text-transform: none;
}

.dct-dir .dct-card.is-unavailable h3,
.dct-related .dct-card.is-unavailable h3 {
	color: var( --dct-text-muted );
}

/* Every plugin-rendered page-section H2 — directory sections, the featured
 * tool, Related Tools — takes the kit's page-section H2 preset (uxh2page),
 * which Elementor emits per breakpoint, so it matches the Elementor H2s on
 * the same page. Fallbacks apply only if the preset is ever removed. */
.dct-dir .dct-sec-head h2,
.dct-dir .dct-feature h2,
.dct-related .dct-rel-h,
.dct-related h2.dct-rel-h {
	font-family: var( --e-global-typography-uxh2page-font-family, 'Sora' ), sans-serif;
	font-weight: var( --e-global-typography-uxh2page-font-weight, 600 );
	font-size: var( --e-global-typography-uxh2page-font-size, 30px );
	line-height: var( --e-global-typography-uxh2page-line-height, 1.2 );
	letter-spacing: var( --e-global-typography-uxh2page-letter-spacing, -0.01em );
}

.dct-dir .dct-noresult h3 {
	font: 600 18px/1.3 var( --dct-font-head );
	color: var( --dct-text );
	margin: 0 0 8px;
	text-transform: none;
}

.dct-related .dct-rel-h,
.dct-related h2.dct-rel-h {
	color: var( --dct-text );
	margin: 0 0 16px;
	text-transform: none;
}


/*
 * The kit uppercases h1 and capitalises h2 site-wide from `.elementor-kit-… h2`,
 * which is (0,1,1) and loads after this file. A single-class guard like
 * `.dct-account h2` ties on specificity and loses on source order — that is why
 * the sign-in panel rendered "Sign In With Your Email" and the verification
 * dialog "Verify Your Email To Generate".
 *
 * Two classes lift each guard to (0,2,1), which wins outright. Every plugin
 * root has an inner card element, so this costs nothing structurally.
 */
.dct-tool .dct-card h1,
.dct-tool .dct-card h2,
.dct-tool .dct-card h3,
.dct-tool .dct-card h4,
.dct-tool.dct-tool h1,
.dct-tool.dct-tool h2,
.dct-tool.dct-tool h3,
.dct-tool.dct-tool h4,
.dct-modal .dct-modal-box h1,
.dct-modal .dct-modal-box h2,
.dct-modal .dct-modal-box h3,
.dct-modal .dct-modal-box h4,
.dct-account .dct-account-card h1,
.dct-account .dct-account-card h2,
.dct-account .dct-account-card h3,
.dct-account .dct-account-card h4 {
	text-transform: none;
}

/* =====================================================================
 * Phase 3 — verification, account and AI application
 *
 * Same rules: scoped to a plugin root, colours and fonts from the kit.
 * ================================================================== */

.dct-modal,
.dct-account {
	--dct-primary: var( --e-global-color-primary, #666699 );
	--dct-primary-hover: var( --e-global-color-yg2wpw4, #555588 );
	--dct-text: var( --e-global-color-dxgc1mm, #111111 );
	--dct-text-muted: var( --e-global-color-uxmuted, #5b5b66 );
	--dct-text-soft: var( --e-global-color-dqink500, #6b6b70 );
	--dct-border: var( --e-global-color-upmy89u, #e2e2e8 );
	--dct-border-soft: var( --e-global-color-uxbsoft, #ececf2 );
	--dct-tint: var( --e-global-color-uxtint, #f1f0f7 );
	--dct-tint-2: var( --e-global-color-uxtint2, #e7e5f2 );
	--dct-white: #ffffff;
	--dct-ok: var( --e-global-color-dqsuccess, #2e7d32 );
	--dct-ok-bg: var( --e-global-color-dqsuccessbg, #eaf3ea );
	--dct-warn: var( --e-global-color-dqwarning, #b26a00 );
	--dct-warn-bg: var( --e-global-color-dqwarningbg, #f7efe2 );
	--dct-bad: var( --e-global-color-dqerror, #c62828 );
	--dct-bad-bg: var( --e-global-color-dqerrorbg, #f7eaea );
	--dct-info: var( --e-global-color-dqinfo, #2f5fa7 );
	--dct-info-bg: var( --e-global-color-dqinfobg, #e9eff7 );
	--dct-font-head: var( --e-global-typography-primary-font-family, 'Sora' ), sans-serif;
	--dct-font-body: var( --e-global-typography-text-font-family, 'Inter' ), sans-serif;
	--dct-ctl-line: #cbcbd6;
	--dct-focus: 2px solid var( --dct-primary );
	font-family: var( --dct-font-body );
	color: var( --dct-text );
}

.dct-modal *,
.dct-account *,
.dct-modal *::before,
.dct-account *::before { box-sizing: border-box; }

.dct-modal [hidden],
.dct-account [hidden] { display: none !important; }

.dct-modal :focus-visible,
.dct-account :focus-visible { outline: var( --dct-focus ); outline-offset: 2px; }

/* ---------- Verification dialog ---------- */

.dct-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 20px;
}

.dct-modal-scrim {
	position: absolute;
	inset: 0;
	background: rgba( 17, 17, 17, 0.55 );
}

.dct-modal-box {
	position: relative;
	background: var( --dct-white );
	border: 1px solid var( --dct-border );
	border-top: 3px solid var( --dct-primary );
	width: 100%;
	max-width: 440px;
	padding: 32px 32px 28px;
	max-height: calc( 100vh - 40px );
	overflow-y: auto;
}

.dct-modal-x {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: var( --dct-text-muted );
	cursor: pointer;
}

.dct-modal-x:hover { color: var( --dct-text ); }

.dct-modal .dct-eyebrow,
.dct-account .dct-eyebrow {
	font: 600 11px/1 var( --dct-font-body );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --dct-primary );
	margin: 0 0 10px;
}

.dct-modal h2,
.dct-account h2 {
	font: 700 22px/1.25 var( --dct-font-head );
	color: var( --dct-text );
	margin: 0 0 12px;
	text-transform: none;
}

.dct-modal-lede,
.dct-account-lede {
	font-size: 14.5px;
	line-height: 1.55;
	color: var( --dct-text-muted );
	margin: 0 0 20px;
}

.dct-modal-fine {
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --dct-text-soft );
	margin: 16px 0 0;
}

.dct-modal-form { margin: 0; }

/* ---------- Account ---------- */

.dct-account-card {
	background: var( --dct-white );
	border: 1px solid var( --dct-border );
	border-top: 3px solid var( --dct-primary );
	padding: 32px 34px;
	max-width: 620px;
}

.dct-account .dct-kpis {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 110px, 1fr ) );
	gap: 1px;
	background: var( --dct-border );
	border: 1px solid var( --dct-border );
	margin: 22px 0 0;
}

.dct-account .dct-kpi { background: var( --dct-white ); padding: 14px 15px; }

.dct-account .dct-kpi span {
	display: block;
	font-size: 11.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --dct-text-soft );
	margin-bottom: 6px;
}

.dct-account .dct-kpi b { font: 600 19px/1.2 var( --dct-font-head ); }

.dct-account-reset { margin-top: 12px; font-size: 12.5px; color: var( --dct-text-soft ); }

.dct-account .dct-break { margin-top: 26px; padding-top: 22px; border-top: 1px solid var( --dct-border ); }

.dct-account .dct-break-h,
.dct-account .dct-break-row { font-family: var( --dct-font-body ); }

.dct-account .dct-break-h {
	font: 600 11px/1 var( --dct-font-body );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --dct-text-muted );
	margin-bottom: 14px;
}

.dct-account .dct-break-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var( --dct-border-soft );
	font-size: 13.5px;
	color: var( --dct-text-muted );
}

.dct-account .dct-acts {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var( --dct-border );
}

/* Buttons/fields reuse the tool styles; repeat only what these roots need. */
.dct-modal .dct-btn,
.dct-account .dct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 600 14px/1 var( --dct-font-body );
	padding: 13px 20px;
	min-height: 44px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
}

.dct-modal .dct-btn-primary,
.dct-account .dct-btn-primary {
	background: var( --dct-primary );
	border-color: var( --dct-primary );
	color: var( --dct-white );
}

.dct-modal .dct-btn-primary:hover,
.dct-account .dct-btn-primary:hover { background: var( --dct-primary-hover ); color: var( --dct-white ); }

.dct-modal .dct-btn-primary[disabled] { opacity: 0.6; cursor: default; }

.dct-account .dct-btn-secondary {
	background: var( --dct-white );
	border-color: var( --dct-border );
	color: var( --dct-text );
}

.dct-account .dct-btn-ghost { background: transparent; color: var( --dct-text-muted ); }

.dct-modal .dct-btn-block,
.dct-account .dct-btn-block { width: 100%; }

.dct-modal .dct-btn-lg,
.dct-account .dct-btn-lg { padding: 16px 24px; font-size: 15px; min-height: 52px; }

.dct-modal .dct-field { margin-bottom: 18px; }
.dct-modal .dct-field label,
.dct-account .dct-field label {
	display: block;
	font: 500 14px/1.3 var( --dct-font-body );
	margin-bottom: 7px;
}
.dct-modal .dct-ctl,
.dct-account .dct-ctl {
	display: flex;
	border: 1px solid var( --dct-ctl-line );
	background: var( --dct-white );
}
.dct-modal .dct-ctl:focus-within,
.dct-account .dct-ctl:focus-within {
	border-color: var( --dct-primary );
	box-shadow: 0 0 0 3px var( --dct-tint-2 );
}
.dct-modal .dct-input,
.dct-account .dct-input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 12px 14px;
	font: 400 16px/1.4 var( --dct-font-body );
	color: var( --dct-text );
}
.dct-modal .dct-input:focus,
.dct-account .dct-input:focus { outline: none; }
.dct-modal .dct-error,
.dct-account .dct-error { display: none; font-size: 12.5px; color: var( --dct-bad ); margin-top: 6px; font-weight: 500; }
.dct-modal .has-error .dct-error,
.dct-account .has-error .dct-error { display: block; }
.dct-modal .has-error .dct-ctl,
.dct-account .has-error .dct-ctl { border-color: var( --dct-bad ); }

.dct-modal .dct-alert,
.dct-account .dct-alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.5;
	border: 1px solid;
	margin: 14px 0;
}
.dct-modal .dct-alert-i,
.dct-account .dct-alert-i {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	display: grid;
	place-items: center;
	font: 700 11px/1 var( --dct-font-body );
	border-radius: 50%;
	margin-top: 1px;
	color: #fff;
}
.dct-account .dct-alert-success { background: var( --dct-ok-bg ); border-color: var( --dct-ok ); }
.dct-account .dct-alert-success .dct-alert-i { background: var( --dct-ok ); }
.dct-modal .dct-alert-warning,
.dct-account .dct-alert-warning { background: var( --dct-warn-bg ); border-color: var( --dct-warn ); }
.dct-modal .dct-alert-warning .dct-alert-i,
.dct-account .dct-alert-warning .dct-alert-i { background: var( --dct-warn ); }

.dct-account .dct-badge {
	display: inline-flex;
	align-items: center;
	font: 600 10px/1 var( --dct-font-body );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 7px;
	border: 1px solid var( --dct-tint-2 );
	background: var( --dct-tint );
	color: var( --dct-primary );
}

/* ---------- AI application ---------- */

.dct-tool .dct-checks {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: 4px 18px;
	margin-bottom: 18px;
}

.dct-tool .dct-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex: 1;
	min-height: 240px;
	gap: 6px;
}

.dct-tool .dct-loading p { margin: 0; font-size: 14.5px; color: var( --dct-text-muted ); }

.dct-tool .dct-spinner {
	width: 30px;
	height: 30px;
	border: 2px solid var( --dct-tint-2 );
	border-top-color: var( --dct-primary );
	border-radius: 50%;
	animation: dct-spin 0.8s linear infinite;
	margin-bottom: 12px;
}

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

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

/* ---------- Generated plan ---------- */

.dct-tool .dct-plan-sec { margin-bottom: 28px; }

.dct-tool .dct-plan-h {
	font: 600 11px/1 var( --dct-font-body );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --dct-primary );
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var( --dct-border );
}

/*
 * The unsourced-figures caution.
 *
 * Deliberately not an error: the output is usable, and most flagged numbers
 * are recommendations. It reads as a proofing note, which is what it is.
 */
.dct-tool .dct-plan-caution { border: 1px solid var( --dct-warn-b, #e6c200 ); background: var( --dct-warn-bg, #fffbe6 ); border-radius: 8px; padding: 14px 16px; margin: 0 0 20px; }
.dct-tool .dct-plan-caution-h { font-size: 14px; font-weight: 600; margin: 0 0 6px; color: var( --dct-text ); }
.dct-tool .dct-plan-caution-l { margin: 8px 0 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.55; color: var( --dct-text-muted ); }
.dct-tool .dct-plan-caution-l li { margin: 2px 0; }
.dct-tool .dct-plan-caution-p { font-size: 14px; line-height: 1.6; margin: 0; color: var( --dct-text-muted ); }

.dct-tool .dct-plan-lede { font-size: 15px; line-height: 1.6; color: var( --dct-text ); margin: 0; }

.dct-tool .dct-plan-list { margin: 0; padding-left: 18px; }

.dct-tool .dct-plan-list li {
	font-size: 14px;
	line-height: 1.55;
	color: var( --dct-text-muted );
	margin-bottom: 8px;
}

.dct-tool .dct-plan-highlight {
	background: var( --dct-tint );
	border-left: 3px solid var( --dct-primary );
	padding: 18px 20px;
	margin-bottom: 28px;
}

.dct-tool .dct-plan-highlight-l {
	font: 600 10.5px/1 var( --dct-font-body );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --dct-primary );
	margin-bottom: 8px;
}

.dct-tool .dct-plan-highlight p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var( --dct-text ); }

.dct-tool .dct-plan-row {
	display: grid;
	grid-template-columns: minmax( 90px, auto ) minmax( 0, 1fr );
	gap: 4px 14px;
	padding: 11px 0;
	border-bottom: 1px solid var( --dct-border-soft );
	font-size: 13.5px;
}

.dct-tool .dct-plan-row b { font: 600 13.5px/1.4 var( --dct-font-head ); color: var( --dct-text ); }
.dct-tool .dct-plan-row-v { color: var( --dct-primary ); font-weight: 600; }
.dct-tool .dct-plan-row-n { grid-column: 1 / -1; color: var( --dct-text-muted ); line-height: 1.5; }

/* -- plan v2 rows ---------------------------------------------------------
 *
 * The v2 contract merged what used to be several parallel lists into one row
 * per thing: a channel now carries its ranking, its budget share and its
 * reasoning together, and a metric carries where its number came from. So these
 * variants drop the two-column grid and stack a heading line above the detail.
 */
.dct-tool .dct-priority,
.dct-tool .dct-channel,
.dct-tool .dct-metric {
	grid-template-columns: minmax( 0, 1fr );
	gap: 6px;
}

.dct-tool .dct-priority { grid-template-columns: 26px minmax( 0, 1fr ); }

.dct-tool .dct-priority-n {
	font: 600 12px/22px var( --dct-font-mono );
	text-align: center;
	color: var( --dct-white );
	background: var( --dct-primary );
	border-radius: 50%;
	width: 22px;
	height: 22px;
}

.dct-tool .dct-priority-b { display: grid; gap: 4px; }
.dct-tool .dct-priority-b .dct-plan-row-n { grid-column: auto; }

.dct-tool .dct-channel-h,
.dct-tool .dct-metric-h {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.dct-tool .dct-channel-m { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.dct-tool .dct-channel-pct {
	font: 600 17px/1 var( --dct-font-head );
	color: var( --dct-primary );
}

/* Computed in PHP from the visitor's budget band, never by the model. */
.dct-tool .dct-channel-amt { font-size: 13.5px; color: var( --dct-text ); font-weight: 600; }

.dct-tool .dct-metric-v { font: 600 14.5px/1.3 var( --dct-font-head ); color: var( --dct-text ); }

.dct-tool .dct-plan-row .dct-badge {
	font: 600 9.5px/1 var( --dct-font-mono );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 7px;
	border-radius: 2px;
	white-space: nowrap;
}

.dct-tool .dct-pri-primary { background: var( --dct-primary ); color: var( --dct-white ); }
.dct-tool .dct-pri-secondary { background: var( --dct-tint, #f1f1f1 ); color: var( --dct-text ); }
.dct-tool .dct-pri-test { background: transparent; color: var( --dct-text-muted ); border: 1px solid var( --dct-border ); }

/*
 * Provenance is a warning, not a decoration.
 *
 * `known` is the visitor's own figure and reads as settled. `benchmark` is a
 * number we are proposing and must not look settled — it is deliberately the
 * loudest of the three. `unknown` is honest about having no baseline.
 */
.dct-tool .dct-prov-known { background: var( --dct-tint, #f1f1f1 ); color: var( --dct-text ); }

.dct-tool .dct-prov-benchmark {
	background: #fff4e5;
	color: #8a5200;
	border: 1px solid #f0c98c;
}

.dct-tool .dct-prov-unknown {
	background: transparent;
	color: var( --dct-text-muted );
	border: 1px dashed var( --dct-border );
}

.dct-tool .dct-phases { display: grid; gap: 16px; }

.dct-tool .dct-phase { border: 1px solid var( --dct-border ); background: var( --dct-white ); padding: 18px 20px; }

.dct-tool .dct-phase-l {
	font: 600 10.5px/1 var( --dct-font-mono );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --dct-primary );
	margin-bottom: 8px;
}

.dct-tool .dct-phase-h { font: 600 15.5px/1.35 var( --dct-font-head ); margin: 0 0 6px; text-transform: none; }
.dct-tool .dct-phase-focus { font-size: 13.5px; color: var( --dct-text-muted ); margin: 0 0 10px; line-height: 1.5; }

.dct-tool .dct-plan-note {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var( --dct-border );
	font-size: 12.5px;
	line-height: 1.55;
	color: var( --dct-text-soft );
}

@media ( max-width: 600px ) {
	.dct-modal-box { padding: 26px 20px 22px; }
	.dct-account-card { padding: 24px 20px; }
	.dct-tool .dct-checks { grid-template-columns: minmax( 0, 1fr ); }
	.dct-account .dct-acts { flex-direction: column; }
	.dct-account .dct-acts .dct-btn { width: 100%; }
}

/* -- website checkers -----------------------------------------------------
 *
 * Shared by the conversion tracking, marketing and SEO checkers. The state
 * colours carry real meaning and are not decoration: `unknown` must never read
 * as `issue`, because the server goes to some trouble to distinguish "we could
 * not see this" from "this is not there", and collapsing them in the styling
 * would undo that.
 */
.dct-tool .dct-app-lede {
	font-size: 13.5px;
	line-height: 1.55;
	color: var( --dct-text-muted );
	margin: 0 0 18px;
}

.dct-tool .dct-app-note {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var( --dct-border-soft );
	font-size: 12.5px;
	line-height: 1.55;
	color: var( --dct-text-muted );
}

.dct-tool .dct-plan-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var( --dct-border );
}

.dct-tool .dct-finding { grid-template-columns: minmax( 0, 1fr ); gap: 6px; }

.dct-tool .dct-finding-h {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.dct-tool .dct-finding-d { font-size: 13.5px; color: var( --dct-text ); font-weight: 600; }

.dct-tool .dct-finding-next {
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --dct-primary );
	font-weight: 600;
}

/* A left edge makes the state readable while scanning the column. */
.dct-tool .dct-finding { border-left: 3px solid transparent; padding-left: 12px; }
.dct-tool .dct-f-good { border-left-color: #2f7d4f; }
.dct-tool .dct-f-warn { border-left-color: #c98a17; }
.dct-tool .dct-f-issue { border-left-color: #b03030; }
.dct-tool .dct-f-unknown { border-left-color: var( --dct-border ); border-left-style: dashed; }
.dct-tool .dct-f-info { border-left-color: var( --dct-border ); }

.dct-tool .dct-plan-row .dct-badge.dct-state-good,
.dct-tool .dct-plan-row .dct-badge.dct-state-warn,
.dct-tool .dct-plan-row .dct-badge.dct-state-issue,
.dct-tool .dct-plan-row .dct-badge.dct-state-info,
.dct-tool .dct-plan-row .dct-badge.dct-state-unknown {
	font: 600 9.5px/1 var( --dct-font-mono );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 7px;
	border-radius: 2px;
	white-space: nowrap;
}

.dct-tool .dct-state-good { background: #e8f3ec; color: #1f5c39; }
.dct-tool .dct-state-warn { background: #fff4e5; color: #8a5200; }
.dct-tool .dct-state-issue { background: #fbeaea; color: #8a2424; }
.dct-tool .dct-state-info { background: var( --dct-tint, #f1f1f1 ); color: var( --dct-text-muted ); }

/* Dashed, and deliberately not a traffic-light colour: "cannot tell" is not a
 * verdict and must not look like one. */
.dct-tool .dct-state-unknown {
	background: transparent;
	color: var( --dct-text-muted );
	border: 1px dashed var( --dct-border );
}

.dct-tool .dct-score-h {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.dct-tool .dct-score-n {
	font: 600 38px/1 var( --dct-font-head );
	color: var( --dct-primary );
}

.dct-tool .dct-score-m { flex: 1 1 260px; }
.dct-tool .dct-score-l { font: 600 13.5px/1.4 var( --dct-font-head ); margin-bottom: 4px; }
.dct-tool .dct-score-row { grid-template-columns: minmax( 0, 1fr ) auto; }
.dct-tool .dct-score-pts { font: 600 13px/1.4 var( --dct-font-mono ); color: var( --dct-text ); }
.dct-tool .dct-score-row .dct-plan-row-n { grid-column: 1 / -1; }

/* -- checkbox groups ------------------------------------------------------
 *
 * A fieldset so the shared question is announced once. Without a legend, a
 * screen reader reads a bare list of channel names with nothing saying what is
 * being asked about them.
 */
.dct-tool .dct-checkset {
	border: 0;
	padding: 0;
	margin: 0 0 20px;
}

.dct-tool .dct-checkset legend {
	font: 600 12.5px/1.4 var( --dct-font-head );
	color: var( --dct-text );
	padding: 0;
	margin-bottom: 4px;
}

.dct-tool .dct-checkset .dct-hint { margin-bottom: 10px; }

.dct-tool .dct-checkgrid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 8px 16px;
}

.dct-tool .dct-checkset .dct-check { margin: 0; }

/* -- generic AI tool result ----------------------------------------------- */
.dct-tool .dct-ai-badge {
	font: 600 9.5px/1 var( --dct-font-mono );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 7px;
	border-radius: 2px;
	background: var( --dct-tint, #f1f1f1 );
	color: var( --dct-text-muted );
	white-space: nowrap;
}

.dct-tool .dct-ai-row { grid-template-columns: minmax( 0, 1fr ); gap: 6px; }
.dct-tool .dct-ai-row-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dct-tool .dct-ai-sub { font-size: 13px; color: var( --dct-text-muted ); line-height: 1.5; }

.dct-tool .dct-ai-examples {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}

.dct-tool .dct-ai-example {
	font: 500 12px/1.4 var( --dct-font-mono );
	background: var( --dct-tint, #f1f1f1 );
	color: var( --dct-text );
	padding: 4px 8px;
	border-radius: 2px;
}

/* Ad copy lines, with the character count a writer actually needs. */
.dct-tool .dct-ai-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var( --dct-border-soft );
	font-size: 13.5px;
}

.dct-tool .dct-ai-count { font: 500 11.5px/1 var( --dct-font-mono ); color: var( --dct-text-muted ); white-space: nowrap; }

/* Over a platform limit: flagged, never silently trimmed, because a headline
 * cut mid-word is worse than one the writer can see and fix. */
.dct-tool .dct-ai-over .dct-ai-count { color: #8a2424; font-weight: 700; }
.dct-tool .dct-ai-over { background: #fbeaea; }