/**
 * WP4SEO – gemensam statistikdesign ("Nordic Calm").
 * Ljus, lugn och pedagogisk. Används i kundöversikt, rapport,
 * sökordstrend och adminstatistik.
 */

.wp4seo-sx {
	--sx-bg: #fafaf8;
	--sx-surface: #ffffff;
	--sx-ink: #1f2933;
	--sx-ink-soft: #5b6772;
	--sx-line: #e3e6e3;
	--sx-accent: #3b6ea5;
	--sx-good: #4c9a6a;
	--sx-warn: #c9962f;
	--sx-bad: #c2564b;
	--sx-radius: 14px;

	color: var(--sx-ink);
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 28px;
}

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

/* ---------------------------------------------------------- Introduktion */

.wp4seo-sx__intro {
	background: var(--sx-surface);
	border: 1px solid var(--sx-line);
	border-radius: var(--sx-radius);
	padding: 20px 22px;
	margin-bottom: 16px;
}

.wp4seo-sx__eyebrow {
	margin: 0 0 4px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sx-accent);
	font-weight: 600;
}

.wp4seo-sx__title {
	margin: 0 0 6px;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 650;
	color: var(--sx-ink);
}

.wp4seo-sx__lead {
	margin: 0;
	max-width: 68ch;
	color: var(--sx-ink-soft);
}

.wp4seo-sx__steps {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	counter-reset: sxstep;
}

.wp4seo-sx__steps li {
	counter-increment: sxstep;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--sx-bg);
	border: 1px solid var(--sx-line);
	border-radius: 999px;
	padding: 6px 14px 6px 8px;
	font-size: 13px;
	color: var(--sx-ink-soft);
	margin: 0;
}

.wp4seo-sx__steps li::before {
	content: counter(sxstep);
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sx-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	flex: 0 0 22px;
}

/* ------------------------------------------------------------ Bento-grid */

.wp4seo-sx__bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}

.wp4seo-sx-kpi {
	position: relative;
	background: var(--sx-surface);
	border: 1px solid var(--sx-line);
	border-radius: var(--sx-radius);
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 132px;
	transition: box-shadow .18s ease, transform .18s ease;
}

.wp4seo-sx-kpi:hover {
	box-shadow: 0 6px 18px rgba(31, 41, 51, .07);
	transform: translateY(-1px);
}

.wp4seo-sx-kpi.is-hero {
	grid-column: span 2;
	background: linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
	border-color: #d5e0ec;
}

.wp4seo-sx-kpi__label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sx-ink-soft);
	letter-spacing: .01em;
}

.wp4seo-sx-kpi__value {
	font-size: 34px;
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--sx-ink);
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.wp4seo-sx-kpi.is-hero .wp4seo-sx-kpi__value {
	font-size: 48px;
}

.wp4seo-sx-kpi__unit {
	font-size: 15px;
	font-weight: 600;
	color: var(--sx-ink-soft);
}

.wp4seo-sx-kpi__help {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--sx-ink-soft);
}

.wp4seo-sx-kpi__foot {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Status – trafikljus med tydlig text, aldrig bara färg. */
.wp4seo-sx-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 650;
	border-radius: 999px;
	padding: 3px 10px 3px 8px;
	border: 1px solid transparent;
}

.wp4seo-sx-status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.wp4seo-sx-status.is-good {
	color: #2f6b4a;
	background: #eaf4ee;
	border-color: #cbe3d5;
}

.wp4seo-sx-status.is-warn {
	color: #7a5a11;
	background: #fbf3e0;
	border-color: #ecdcb6;
}

.wp4seo-sx-status.is-bad {
	color: #8c352c;
	background: #fbeae8;
	border-color: #f0cdc8;
}

.wp4seo-sx-status.is-neutral {
	color: #47535e;
	background: #f0f2f4;
	border-color: #e0e4e8;
}

.wp4seo-sx-trend {
	font-size: 12px;
	font-weight: 650;
	color: var(--sx-ink-soft);
}

.wp4seo-sx-trend.is-up {
	color: #2f6b4a;
}

.wp4seo-sx-trend.is-down {
	color: #8c352c;
}

/* Info-knapp med förklaring */
.wp4seo-sx-info {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 1px solid var(--sx-line);
	background: var(--sx-bg);
	color: var(--sx-ink-soft);
	font-size: 11px;
	font-weight: 700;
	cursor: help;
	padding: 0;
	line-height: 1;
}

.wp4seo-sx-info:focus-visible {
	outline: 2px solid var(--sx-accent);
	outline-offset: 2px;
}

.wp4seo-sx-info__bubble {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	width: 240px;
	background: var(--sx-ink);
	color: #fff;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	border-radius: 10px;
	padding: 10px 12px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 30;
	pointer-events: none;
	box-shadow: 0 10px 24px rgba(31, 41, 51, .18);
}

.wp4seo-sx-info:hover .wp4seo-sx-info__bubble,
.wp4seo-sx-info:focus .wp4seo-sx-info__bubble,
.wp4seo-sx-info:focus-visible .wp4seo-sx-info__bubble {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------- Sektionsblock */

.wp4seo-sx-section {
	background: var(--sx-surface);
	border: 1px solid var(--sx-line);
	border-radius: var(--sx-radius);
	padding: 18px 20px 20px;
	margin-bottom: 16px;
}

.wp4seo-sx-section__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.wp4seo-sx-section__head h3,
.wp4seo-sx-section__head h2 {
	margin: 0 0 3px;
	font-size: 17px;
	font-weight: 650;
	color: var(--sx-ink);
}

.wp4seo-sx-section__help {
	margin: 0;
	font-size: 13px;
	color: var(--sx-ink-soft);
	max-width: 70ch;
}

/* Förklaringsruta – "Så läser du det här" */
.wp4seo-sx-explain {
	background: #f2f6fa;
	border: 1px solid #d9e4ee;
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 13.5px;
	color: #33465a;
	margin: 0 0 16px;
}

.wp4seo-sx-explain strong {
	color: #23384c;
}

/* Teckenförklaring */
.wp4seo-sx-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	font-size: 13px;
	color: var(--sx-ink-soft);
}

.wp4seo-sx-legend li {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.wp4seo-sx-legend i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.wp4seo-sx-legend i.is-good {
	background: var(--sx-good);
}

.wp4seo-sx-legend i.is-warn {
	background: var(--sx-warn);
}

.wp4seo-sx-legend i.is-bad {
	background: var(--sx-bad);
}

.wp4seo-sx-legend i.is-neutral {
	background: #b7bfc7;
}

/* Tomt läge */
.wp4seo-sx-empty {
	background: var(--sx-surface);
	border: 1px dashed #cfd6dd;
	border-radius: var(--sx-radius);
	padding: 26px 22px;
	text-align: center;
	color: var(--sx-ink-soft);
}

.wp4seo-sx-empty strong {
	display: block;
	font-size: 16px;
	color: var(--sx-ink);
	margin-bottom: 4px;
}

/* --------------------------------------------------------------- Responsivt */

@media (max-width: 1100px) {
	.wp4seo-sx__bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.wp4seo-sx-kpi.is-hero {
		grid-column: span 1;
	}

	.wp4seo-sx-kpi.is-hero .wp4seo-sx-kpi__value {
		font-size: 40px;
	}
}

@media print {
	.wp4seo-sx-kpi,
	.wp4seo-sx-section,
	.wp4seo-sx__intro {
		box-shadow: none;
		break-inside: avoid;
	}
}

/* --------------------------------------------- Vad ingår i kontot (access) */

.wp4seo-access__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.wp4seo-access__item {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--sx-bg);
	border: 1px solid var(--sx-line);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 0;
}

.wp4seo-access__item.is-locked {
	opacity: .78;
	background: #f6f7f8;
}

.wp4seo-access__main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 320px;
	min-width: 0;
}

.wp4seo-access__main small {
	font-size: 13px;
	color: var(--sx-ink-soft);
}

.wp4seo-access__main em {
	font-style: normal;
	font-size: 12.5px;
	color: var(--sx-accent);
}

.wp4seo-access__go {
	font-size: 13px;
	font-weight: 650;
	text-decoration: none;
	color: var(--sx-accent);
	white-space: nowrap;
}

.wp4seo-access__hint {
	font-size: 12.5px;
	color: var(--sx-ink-soft);
}

.wp4seo-plans__group td {
	background: #f2f6fa;
}

.wp4seo-plans__summary {
	background: #f2f6fa;
	border: 1px solid #d9e4ee;
	border-radius: 12px;
	padding: 10px 14px;
	max-width: 70ch;
}

/* === Daglig positionering, sökordsanalys och Google-koppling (Nordic Calm) === */
/* Daglig positionering – matchar WP4SEO_Positions::render() */
.wp4seo-pos{--nc-bg:#FAFAF8;--nc-ink:#1F2933;--nc-blue:#3B6EA5;--nc-green:#4C9A6A;--nc-red:#C2564B;--nc-line:#E4E4DF;color:var(--nc-ink)}
.wp4seo-pos .wp4seo-sx__intro{text-align:left;margin:0 0 20px}
.wp4seo-pos__filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.wp4seo-pos__filters select,.wp4seo-pos__filters input[type=search]{padding:8px 11px;border:1px solid var(--nc-line);border-radius:10px;background:#fff;font-size:13.5px;min-height:38px}
.wp4seo-pos__filters .button{min-height:38px;border-radius:10px}
.wp4seo-pos__archived{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#5b6672}
.wp4seo-pos__measure{margin:0 0 16px}
.wp4seo-pos__kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 18px}
.wp4seo-pos__kpi-card{background:#fff;border:1px solid var(--nc-line);border-radius:14px;padding:14px 16px;text-align:left}
.wp4seo-pos__kpi-label{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#5b6672}
.wp4seo-pos__kpi-value{display:block;margin-top:4px;font-size:28px;line-height:1.1;font-weight:700;color:var(--nc-ink)}
.wp4seo-pos__kpi-card small{display:block;margin-top:5px;font-size:12px;line-height:1.45;color:#5b6672}
.wp4seo-pos__scroll{overflow-x:auto;background:#fff;border:1px solid var(--nc-line);border-radius:14px}
.wp4seo-pos__grid{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
.wp4seo-pos__grid th,.wp4seo-pos__grid td{padding:7px 6px;border-bottom:1px solid var(--nc-line);text-align:center;white-space:nowrap}
.wp4seo-pos__grid thead th{background:var(--nc-bg);font-weight:600;color:#5b6672;font-size:11.5px;position:sticky;top:0;z-index:2}
.wp4seo-pos__grid .wp4seo-pos__kw{text-align:left;position:sticky;left:0;background:#fff;z-index:1;min-width:170px;max-width:230px;overflow:hidden;text-overflow:ellipsis;padding-left:14px}
.wp4seo-pos__grid thead .wp4seo-pos__kw{background:var(--nc-bg);z-index:3}
.wp4seo-pos__grid .wp4seo-pos__move{min-width:86px;font-size:12px}
.wp4seo-pos__grid .wp4seo-pos__date{min-width:42px}
.wp4seo-pos__grid tbody tr:last-child th,.wp4seo-pos__grid tbody tr:last-child td{border-bottom:0}
.wp4seo-pos__grid tbody tr:hover td,.wp4seo-pos__grid tbody tr:hover th{background:#F6F7F4}
.wp4seo-pos__num{display:block;font-weight:700;font-size:13px;line-height:1.2}
.wp4seo-pos__arrow{display:block;font-style:normal;font-size:10px;line-height:1.2;margin-top:1px}
.wp4seo-pos__arrow.is-up{color:var(--nc-green)}
.wp4seo-pos__arrow.is-down{color:var(--nc-red)}
.wp4seo-pos__cell.is-top1 .wp4seo-pos__num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:2.5px solid currentColor;border-radius:50%;font-weight:800;box-shadow:0 0 0 3px rgba(79,160,110,.18)}
td.wp4seo-pos__cell.is-p3{background:#E8F3EC}
td.wp4seo-pos__cell.is-p3 .wp4seo-pos__num{color:#2F6B48}
td.wp4seo-pos__cell.is-p10{background:#EAF0F7}
td.wp4seo-pos__cell.is-p10 .wp4seo-pos__num{color:#2E5580}
td.wp4seo-pos__cell.is-p30{background:#FBF6E7}
td.wp4seo-pos__cell.is-p30 .wp4seo-pos__num{color:#8A6D1F}
td.wp4seo-pos__cell.is-p100{background:#FBEDEB}
td.wp4seo-pos__cell.is-p100 .wp4seo-pos__num{color:#8C3A31}
td.wp4seo-pos__cell.is-none{color:#C2C6C0}
.wp4seo-pos__delta.is-up{color:var(--nc-green);font-weight:700}
.wp4seo-pos__delta.is-down{color:var(--nc-red);font-weight:700}
.wp4seo-pos__legend{display:flex;flex-wrap:wrap;gap:14px;margin:12px 2px 0;padding:0;list-style:none;font-size:12px;color:#5b6672}
.wp4seo-pos__legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.wp4seo-pos__legend i.is-top1{background:#E8F3EC;border:2.5px solid #2F6B48;border-radius:50%;box-shadow:0 0 0 2px rgba(79,160,110,.18)}
.wp4seo-pos__legend i.is-p3{background:#E8F3EC;border:1px solid #BFDCCB}
.wp4seo-pos__legend i.is-p10{background:#EAF0F7;border:1px solid #C3D4E8}
.wp4seo-pos__legend i.is-p30{background:#FBF6E7;border:1px solid #E8DCB8}
.wp4seo-pos__legend i.is-p100{background:#FBEDEB;border:1px solid #EBC9C4}
.wp4seo-pos__legend i.is-none{background:#fff;border:1px dashed var(--nc-line)}
.wp4seo-pos__tools{margin:16px 0 0}
@media (max-width:782px){
	.wp4seo-pos__kpi{grid-template-columns:repeat(2,1fr)}
	.wp4seo-pos__grid .wp4seo-pos__kw{position:static;min-width:0}
}
.wp4seo-research__table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #E4E4DF;border-radius:14px;font-size:13.5px}
.wp4seo-research__table th,.wp4seo-research__table td{padding:10px 12px;border-bottom:1px solid #E4E4DF;text-align:left}
.wp4seo-research__table thead th{background:#FAFAF8;font-weight:600;color:#5b6672;font-size:12.5px}
.wp4seo-research__note{color:#5b6672;font-size:12.5px;margin:8px 0 16px}
.wp4seo-analytics{background:#fff;border:1px solid #E4E4DF;border-radius:14px;padding:18px;margin:16px 0}
.wp4seo-analytics h3{margin:0 0 4px;font-size:16px}
.wp4seo-analytics p{margin:0 0 14px;color:#5b6672;font-size:13.5px}
.wp4seo-analytics label{display:block;margin-bottom:12px;font-size:13px;font-weight:600}
.wp4seo-analytics input[type=text]{display:block;width:100%;margin-top:5px;padding:9px 11px;border:1px solid #E4E4DF;border-radius:10px;font-weight:400}


/* ---------------------------------------------- Systemdiagnos & felrapport */
.wp4seo-diag { --dg-bg:#FAFAF8; --dg-ink:#1F2933; --dg-line:#E3E5E0; --dg-blue:#3B6EA5; --dg-green:#4C9A6A; --dg-red:#C2564B; --dg-amber:#B8862F; }
.wp4seo-diag .wp4seo-diag-lead { max-width:64ch; color:#5A6472; font-size:15px; }
.wp4seo-diag-summary { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; padding:16px 18px; border:1px solid var(--dg-line); border-left-width:5px; border-radius:10px; background:#fff; margin:16px 0 22px; }
.wp4seo-diag-summary strong { font-size:17px; color:var(--dg-ink); }
.wp4seo-diag-summary span { color:#5A6472; }
.wp4seo-diag-summary.wp4seo-diag-ok { border-left-color:var(--dg-green); }
.wp4seo-diag-summary.wp4seo-diag-varning { border-left-color:var(--dg-amber); }
.wp4seo-diag-summary.wp4seo-diag-fel { border-left-color:var(--dg-red); }
.wp4seo-diag-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.wp4seo-diag-card { position:relative; background:#fff; border:1px solid var(--dg-line); border-radius:12px; padding:16px 18px; }
.wp4seo-diag-card h3 { margin:8px 0 6px; font-size:15px; color:var(--dg-ink); }
.wp4seo-diag-value { margin:0; color:#3E4854; font-size:14px; word-break:break-word; }
.wp4seo-diag-fix { margin:10px 0 0; font-size:13px; color:#5A6472; border-top:1px dashed var(--dg-line); padding-top:8px; }
.wp4seo-diag-chip { display:inline-block; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:#EAF3EC; color:#2F6B48; }
.wp4seo-diag-card.wp4seo-diag-varning .wp4seo-diag-chip { background:#FBF2DE; color:#7A5A16; }
.wp4seo-diag-card.wp4seo-diag-fel .wp4seo-diag-chip { background:#FBE9E7; color:#8C332A; }
.wp4seo-diag-card.wp4seo-diag-fel { border-color:#F0C9C3; }
.wp4seo-diag-actions { margin:22px 0 8px; }
.wp4seo-diag-report { width:100%; max-width:900px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; background:#fff; border:1px solid var(--dg-line); border-radius:10px; padding:12px; }
.wp4seo-diag-table { margin-top:10px; border-radius:10px; overflow:hidden; }
.wp4seo-diag-table code { background:#F1F3EF; padding:1px 6px; border-radius:5px; }
@media (max-width:600px){ .wp4seo-diag-grid { grid-template-columns:1fr; } }

/* Kluster-etiketter i positionering */
.wp4seo-pos__cluster{white-space:nowrap}
.wp4seo-pos__tag{display:inline-block;margin:1px 3px 1px 0;padding:2px 7px;border-radius:999px;font-size:11px;line-height:1.5;background:#eef3fa;color:#31557f}
.wp4seo-pos__tag.is-theme{background:#eef7f1;color:#2f6b49}