/**
 * POPIA SaaS tenant portal.
 *
 * Scoped entirely under .popia-portal and driven by tokens, because this renders
 * inside whatever theme the SaaS site happens to use. Nothing here leaks out,
 * and the theme's own type scale is inherited rather than fought.
 */
.popia-portal {
	--pp-bg: #ffffff;
	--pp-sunken: #f7f9fc;
	--pp-line: #e4e9f0;
	--pp-line-soft: #eef2f7;
	--pp-ink: #101828;
	--pp-body: #475467;
	--pp-muted: #7b8794;
	--pp-accent: #101828;
	--pp-ok-bg: #ecfdf3;
	--pp-ok-ink: #027a48;
	--pp-warn-bg: #fffaeb;
	--pp-warn-ink: #b54708;
	--pp-bad-bg: #fef3f2;
	--pp-bad-ink: #b42318;
	--pp-radius: 14px;

	box-sizing: border-box;
	max-width: 68rem;
	margin: 0 auto;
	color: var(--pp-body);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.popia-portal *,
.popia-portal *::before,
.popia-portal *::after {
	box-sizing: inherit;
}

/* Header ------------------------------------------------------------------ */

.popia-portal__masthead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--pp-line);
	margin: 0 0 24px;
}

.popia-portal__mark {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--pp-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popia-portal__mark svg {
	width: 20px;
	height: 20px;
	display: block;
}

.popia-portal__masthead-text {
	flex: 1 1 14rem;
	min-width: 0;
}

.popia-portal__heading {
	margin: 0;
	font-size: 20px;
	font-weight: 650;
	letter-spacing: -0.015em;
	color: var(--pp-ink);
	line-height: 1.3;
}

.popia-portal__sub {
	margin: 2px 0 0;
	font-size: 13.5px;
	color: var(--pp-muted);
}

/* Status pill ------------------------------------------------------------- */

.popia-portal__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px 5px 9px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 620;
	letter-spacing: 0.01em;
	background: var(--pp-ok-bg);
	color: var(--pp-ok-ink);
	white-space: nowrap;
}

.popia-portal__pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.popia-portal__pill--warn {
	background: var(--pp-warn-bg);
	color: var(--pp-warn-ink);
}

.popia-portal__pill--bad {
	background: var(--pp-bad-bg);
	color: var(--pp-bad-ink);
}

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

.popia-portal__section {
	background: var(--pp-bg);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	padding: 22px 24px 24px;
	margin: 0 0 18px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.popia-portal__title {
	margin: 0;
	font-size: 16px;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--pp-ink);
}

.popia-portal__section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 16px;
}

.popia-portal__lede {
	margin: 4px 0 0;
	font-size: 13.5px;
	color: var(--pp-muted);
	max-width: 62ch;
}

.popia-portal__subtitle {
	margin: 24px 0 4px;
	font-size: 14px;
	font-weight: 650;
	color: var(--pp-ink);
}

/* Definition grid --------------------------------------------------------- */

.popia-portal__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 16px 24px;
	margin: 0 0 20px;
	padding: 16px 18px;
	background: var(--pp-sunken);
	border-radius: 10px;
}

.popia-portal__meta-item {
	min-width: 0;
}

.popia-portal__meta dt {
	font-size: 12px;
	font-weight: 620;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pp-muted);
	margin: 0 0 2px;
}

.popia-portal__meta dd {
	margin: 0;
	font-size: 14.5px;
	color: var(--pp-ink);
	font-weight: 550;
	overflow-wrap: anywhere;
}

/* Forms ------------------------------------------------------------------- */

.popia-portal__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 14px 18px;
}

.popia-portal__field {
	display: block;
	min-width: 0;
}

.popia-portal__field--wide {
	grid-column: 1 / -1;
}

.popia-portal__label {
	display: block;
	font-size: 13px;
	font-weight: 620;
	color: var(--pp-ink);
	margin-bottom: 5px;
}

.popia-portal__field input[type="text"],
.popia-portal__field input[type="email"],
.popia-portal__field input[type="url"],
.popia-portal__field textarea,
.popia-portal__field select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--pp-line);
	border-radius: 9px;
	font: inherit;
	font-size: 14.5px;
	background: var(--pp-bg);
	color: var(--pp-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.popia-portal__field input:focus,
.popia-portal__field textarea:focus,
.popia-portal__field select:focus {
	outline: none;
	border-color: #98a2b3;
	box-shadow: 0 0 0 3px rgba(16, 24, 40, 0.06);
}

.popia-portal__field textarea {
	min-height: 5.5rem;
	resize: vertical;
}

.popia-portal__help {
	display: block;
	margin-top: 5px;
	color: var(--pp-muted);
	font-size: 12.5px;
}

/* Switch ------------------------------------------------------------------ */

.popia-portal__switch-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
}

.popia-portal__switch {
	flex: 0 0 auto;
	position: relative;
	display: inline-flex;
	margin-top: 1px;
	cursor: pointer;
}

.popia-portal__switch input {
	position: absolute;
	opacity: 0;
	width: 42px;
	height: 25px;
	margin: 0;
	cursor: pointer;
}

.popia-portal__switch-track {
	width: 42px;
	height: 25px;
	border-radius: 999px;
	background: #cfd6e0;
	position: relative;
	transition: background 0.18s ease;
	display: block;
}

.popia-portal__switch-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3);
	transition: transform 0.18s ease;
}

.popia-portal__switch input:checked + .popia-portal__switch-track {
	background: var(--pp-accent);
}

.popia-portal__switch input:checked + .popia-portal__switch-track::after {
	transform: translateX(17px);
}

.popia-portal__switch input:focus-visible + .popia-portal__switch-track {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.popia-portal__switch-label {
	font-size: 14.5px;
	color: var(--pp-ink);
	font-weight: 550;
	cursor: pointer;
}

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

.popia-portal__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 20px 0 0;
}

.popia-portal__btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 18px;
	border-radius: 9px;
	border: 1px solid var(--pp-line);
	background: var(--pp-bg);
	color: var(--pp-ink);
	font: inherit;
	font-size: 14px;
	font-weight: 620;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease;
}

.popia-portal__btn:hover {
	background: var(--pp-sunken);
	border-color: #d3dae4;
}

.popia-portal__btn:active {
	transform: translateY(1px);
}

.popia-portal__btn:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.popia-portal__btn--primary {
	background: var(--pp-accent);
	border-color: var(--pp-accent);
	color: #fff;
}

.popia-portal__btn--primary:hover {
	background: #1d2939;
	border-color: #1d2939;
}

.popia-portal__btn--danger {
	color: var(--pp-bad-ink);
	border-color: #fbd3ce;
}

.popia-portal__btn--danger:hover {
	background: var(--pp-bad-bg);
}

.popia-portal__btn[disabled] {
	opacity: 0.55;
	cursor: default;
	transform: none;
}

.popia-portal__btn svg {
	width: 15px;
	height: 15px;
	display: block;
}

/* Snippet ----------------------------------------------------------------- */

.popia-portal__code {
	display: block;
	padding: 14px 16px;
	background: var(--pp-sunken);
	border: 1px solid var(--pp-line-soft);
	border-radius: 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.7;
	color: #344054;
	overflow-x: auto;
	white-space: pre;
	-webkit-overflow-scrolling: touch;
}

/* Vendor grid ------------------------------------------------------------- */

.popia-portal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 2px 16px;
	margin-top: 8px;
}

.popia-portal__check {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 0;
	font-size: 14px;
	color: var(--pp-ink);
	cursor: pointer;
}

.popia-portal__check input {
	width: 16px;
	height: 16px;
	accent-color: var(--pp-accent);
	margin: 0;
	flex: 0 0 auto;
	cursor: pointer;
}

/* Documents --------------------------------------------------------------- */

.popia-portal__docs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.popia-portal__doc {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	border: 1px solid var(--pp-line);
	border-radius: 10px;
	background: var(--pp-bg);
}

.popia-portal__doc-icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--pp-sunken);
	color: var(--pp-body);
	display: flex;
	align-items: center;
	justify-content: center;
}

.popia-portal__doc-icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

.popia-portal__doc-body {
	flex: 1 1 auto;
	min-width: 0;
}

.popia-portal__doc-name {
	display: block;
	font-weight: 620;
	color: var(--pp-ink);
	font-size: 14.5px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.popia-portal__doc-name:hover {
	text-decoration: underline;
}

.popia-portal__doc-meta {
	font-size: 12.5px;
	color: var(--pp-muted);
}

/* Table ------------------------------------------------------------------- */

.popia-portal__scroll {
	overflow-x: auto;
	border: 1px solid var(--pp-line);
	border-radius: 10px;
}

.popia-portal__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.popia-portal__table th {
	text-align: left;
	font-size: 11.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pp-muted);
	background: var(--pp-sunken);
	padding: 9px 14px;
	white-space: nowrap;
	border-bottom: 1px solid var(--pp-line);
}

.popia-portal__table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--pp-line-soft);
	color: var(--pp-ink);
	white-space: nowrap;
}

.popia-portal__table tr:last-child td {
	border-bottom: 0;
}

.popia-portal__tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 620;
	background: var(--pp-ok-bg);
	color: var(--pp-ok-ink);
}

.popia-portal__tag--off {
	background: #f2f4f7;
	color: #667085;
}

/* Notices and empty states ------------------------------------------------ */

.popia-portal__notice {
	display: flex;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--pp-sunken);
	border: 1px solid var(--pp-line);
	color: var(--pp-body);
	font-size: 13.5px;
	margin: 0 0 16px;
}

.popia-portal__notice--warn {
	background: var(--pp-warn-bg);
	border-color: #fedf89;
	color: var(--pp-warn-ink);
}

.popia-portal__notice--error {
	background: var(--pp-bad-bg);
	border-color: #fecdca;
	color: var(--pp-bad-ink);
}

.popia-portal__empty {
	padding: 26px 20px;
	text-align: center;
	border: 1px dashed var(--pp-line);
	border-radius: 10px;
	color: var(--pp-muted);
	font-size: 13.5px;
	background: var(--pp-sunken);
}

.popia-portal__flash {
	font-size: 13px;
	font-weight: 600;
	color: var(--pp-ok-ink);
}

.popia-portal__flash--error {
	color: var(--pp-bad-ink);
}

.popia-portal__loading {
	padding: 40px 0;
	text-align: center;
	color: var(--pp-muted);
}

.popia-portal--notice {
	padding: 20px;
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	background: var(--pp-sunken);
}

@media (max-width: 640px) {
	.popia-portal__section {
		padding: 18px 16px 20px;
	}

	.popia-portal__btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.popia-portal * {
		transition: none !important;
	}
}

@media (prefers-color-scheme: dark) {
	.popia-portal {
		--pp-bg: #111827;
		--pp-sunken: #161f2f;
		--pp-line: #26324a;
		--pp-line-soft: #1d2739;
		--pp-ink: #f1f5f9;
		--pp-body: #b3bdcc;
		--pp-muted: #8a97a8;
		--pp-accent: #e2e8f0;
		--pp-ok-bg: #06281c;
		--pp-ok-ink: #6ce9a6;
		--pp-warn-bg: #2e1c05;
		--pp-warn-ink: #fdb022;
		--pp-bad-bg: #2f1211;
		--pp-bad-ink: #fda29b;
	}

	.popia-portal__mark {
		color: #0f172a;
	}

	.popia-portal__btn--primary {
		color: #0f172a;
	}

	.popia-portal__btn--primary:hover {
		background: #cbd5e1;
		border-color: #cbd5e1;
	}

	.popia-portal__switch-track {
		background: #3a475c;
	}

	.popia-portal__code {
		color: #c7d2e0;
	}

	.popia-portal__tag--off {
		background: #1d2739;
		color: #8a97a8;
	}
}

/* ---------------------------------------------------------------------
 * Operator agreement acceptance
 *
 * Shown in place of the portal until s21(1) is satisfied. Deliberately
 * plain: this is a contract, and it should read like one rather than
 * like an onboarding step to be clicked through.
 * ------------------------------------------------------------------ */

.popia-agreement { max-width: 760px; }

.popia-agreement__title { margin: 0 0 10px; }

.popia-agreement__lede {
	color: var(--pp-body);
	font-size: 16px;
	margin: 0 0 22px;
	max-width: 62ch;
}

.popia-agreement__error {
	background: #fdeeec;
	border: 1px solid #f0c4bf;
	color: #8c1e17;
	border-radius: 6px;
	padding: 12px 16px;
	margin: 0 0 18px;
	font-size: 15px;
}

.popia-agreement__doc {
	max-height: 380px;
	overflow-y: auto;
	border: 1px solid var(--pp-line);
	border-radius: 8px;
	padding: 24px 26px;
	background: var(--pp-bg);
	margin-bottom: 22px;
	font-size: 15px;
	line-height: 1.65;
}

.popia-agreement__doc:focus-visible { outline: 3px solid #5a4fbf; outline-offset: 2px; }
.popia-agreement__doc h3 { font-size: 16px; margin: 22px 0 6px; }
.popia-agreement__doc h3:first-child { margin-top: 0; }
.popia-agreement__doc p { margin: 0 0 12px; color: var(--pp-body); }

.popia-agreement__check {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 12px;
	align-items: start;
	margin-bottom: 20px;
	font-size: 15.5px;
	line-height: 1.5;
	cursor: pointer;
}

/* Never pre-ticked: acceptance has to be an act, not a default. */
.popia-agreement__check input { width: 18px; height: 18px; margin-top: 2px; }

.popia-agreement__note {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--pp-muted);
	max-width: 66ch;
}

/* ---------------------------------------------------------------------
 * Signed-out and unlinked states
 *
 * The first screen a paying client ever sees. It has to look like the
 * product they bought rather than a WordPress notice.
 * ------------------------------------------------------------------ */

.popia-portal--gate {
	max-width: 520px;
	margin: 48px auto;
	padding: 36px 34px;
	/*
	 * Uses the portal's own tokens rather than fixed hex. The dashboard
	 * already answers prefers-color-scheme; hardcoding light values here
	 * would put a white card inside a dark shell for anyone whose device
	 * asks for dark.
	 */
	background: var(--pp-bg);
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-radius);
	box-shadow: 0 4px 24px rgba(17, 23, 34, .07);
	text-align: left;
}

.popia-gate__title {
	margin: 0 0 10px;
	font-size: 22px;
	letter-spacing: -.02em;
	color: var(--pp-ink);
	font-weight: 700;
}

.popia-gate__lede {
	margin: 0 0 22px;
	color: var(--pp-body);
	font-size: 15.5px;
	line-height: 1.6;
}

.popia-gate__note {
	margin: 14px 0 0;
	font-size: 13.5px;
	color: var(--pp-muted);
}

.popia-gate__note a { color: var(--pp-ink); font-weight: 600; }

/* An <a> wearing the button class still arrives underlined. */
a.popia-portal__btn,
a.popia-portal__btn:hover {
	text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Setup tracker
 *
 * The first thing a client sees. Its whole job is to answer "what do I do
 * now?" before they have to work it out from four equal-weight panels.
 * ------------------------------------------------------------------ */

.popia-setup { border-color: var(--pp-accent); }

.popia-setup__head { margin-bottom: 16px; }

.popia-setup__track {
	height: 6px;
	border-radius: 100px;
	background: var(--pp-sunken);
	overflow: hidden;
	margin-bottom: 8px;
}

.popia-setup__fill {
	height: 100%;
	border-radius: 100px;
	background: var(--pp-accent);
	transition: width .4s ease;
}

.popia-setup__count {
	margin: 0 0 18px;
	font-size: 12.5px;
	color: var(--pp-muted);
}

.popia-setup__steps { list-style: none; margin: 0 0 18px; padding: 0; }

.popia-setup__step {
	display: grid;
	grid-template-columns: 26px 1fr;
	gap: 12px;
	align-items: start;
	padding: 11px 0;
	border-bottom: 1px solid var(--pp-line-soft);
}
.popia-setup__step:last-child { border-bottom: none; }

.popia-setup__tick {
	width: 22px; height: 22px;
	border-radius: 50%;
	border: 2px solid var(--pp-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: transparent;
	margin-top: 1px;
}

.popia-setup__step.is-done .popia-setup__tick {
	background: #0f8a5f;
	border-color: #0f8a5f;
	color: #fff;
}

/* The one thing to do next, marked so it is unmissable. */
.popia-setup__step.is-next .popia-setup__tick {
	border-color: var(--pp-accent);
	border-style: dashed;
}

.popia-setup__label {
	display: block;
	font-weight: 620;
	font-size: 14.5px;
	color: var(--pp-ink);
}

.popia-setup__step.is-done .popia-setup__label { color: var(--pp-muted); }

.popia-setup__hint {
	display: block;
	font-size: 13px;
	color: var(--pp-muted);
	margin-top: 2px;
	max-width: 62ch;
}

/* ---------------------------------------------------------------------
 * Downloads
 * ------------------------------------------------------------------ */

.popia-resources { display: grid; gap: 10px; }

.popia-resource {
	display: grid;
	grid-template-columns: 38px 1fr;
	gap: 13px;
	align-items: center;
	padding: 14px 16px;
	border: 1px solid var(--pp-line);
	border-radius: 9px;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, background .15s ease;
}

.popia-resource:hover {
	border-color: var(--pp-accent);
	background: var(--pp-sunken);
}

.popia-resource__icon {
	width: 38px; height: 38px;
	border-radius: 9px;
	background: var(--pp-sunken);
	color: var(--pp-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.popia-resource__label {
	display: block;
	font-weight: 620;
	font-size: 14.5px;
}

.popia-resource__note {
	display: block;
	font-size: 12.5px;
	color: var(--pp-muted);
	margin-top: 1px;
}