/*
 * FindAstra — admin settings page styles.
 *
 * Embedded design tokens (a small subset of the marketing site's palette) so
 * this file is self-contained and doesn't pull in any global CSS. Scoped to
 * `.findastra-app` so we never accidentally restyle other wp-admin screens.
 */

.findastra-app {
	--fnda-ink: #1a1626;
	--fnda-fg-2: #4a4738;
	--fnda-fg-3: #6b6759;
	--fnda-line: #dcdcde;
	--fnda-line-2: #f0f0f1;
	--fnda-bg: #f0f0f1;
	--fnda-card: #ffffff;
	--fnda-paper: #faf8f4;
	--fnda-paper-2: #f2efe8;
	--fnda-indigo-50: #eeebff;
	--fnda-indigo-100: #ddd7fe;
	--fnda-indigo-500: #6c5ce7;
	--fnda-indigo-600: #4f46e5;
	--fnda-indigo-700: #3d34bf;
	--fnda-amber-500: #f59e0b;
	--fnda-success-fg: #1f6b43;
	--fnda-success-bg: #e6f4ec;
	--fnda-warn-fg: #8a5a07;
	--fnda-radius: 8px;
	--fnda-radius-sm: 6px;
	--fnda-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	margin: 20px 20px 40px 0;
	max-width: 1180px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
	color: var(--fnda-ink);
}

.findastra-app * { box-sizing: border-box; }
.findastra-app a { color: var(--fnda-indigo-700); }
.findastra-app a:hover { color: var(--fnda-indigo-600); }

/* ---------- Hero ---------- */
.fnda-hero {
	background: linear-gradient(180deg, var(--fnda-paper) 0%, var(--fnda-paper-2) 100%);
	border: 1px solid var(--fnda-line);
	border-radius: var(--fnda-radius);
	padding: 22px 24px;
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 16px;
}
.fnda-hero__mark {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}
.fnda-hero__body { flex: 1; min-width: 0; }
.fnda-hero__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--fnda-ink);
	margin: 0 0 4px;
	line-height: 1.1;
	letter-spacing: -0.015em;
}
.fnda-hero__meta {
	font-size: 13px;
	color: var(--fnda-fg-2);
	margin: 0;
}
.fnda-hero__meta code {
	font-family: var(--fnda-mono);
	font-size: 12px;
	background: rgba(0, 0, 0, 0.04);
	padding: 1px 6px;
	border-radius: 3px;
}
.fnda-hero__right {
	text-align: right;
	flex-shrink: 0;
	font-size: 12px;
	color: var(--fnda-fg-3);
	min-width: 100px;
}
.fnda-hero__version {
	font-family: var(--fnda-mono);
	font-size: 13px;
	color: var(--fnda-ink);
	font-weight: 600;
}
.fnda-hero__pill {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 8px;
	background: var(--fnda-success-bg);
	color: var(--fnda-success-fg);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
}

/* Plan badge — Free / Pro / Agency / Unlimited. Sits just under the
 * version string in the hero. Free is a tinted, link-shaped affordance
 * (with an inline "Upgrade →" hint); paid tiers are solid pills. */
.fnda-hero__plan {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}
.fnda-hero__plan--free {
	background: var(--fnda-indigo-50);
	color: var(--fnda-indigo-700);
}
a.fnda-hero__plan--free:hover { background: var(--fnda-indigo-100, #ddd7fe); }
.fnda-hero__plan-upgrade {
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.85;
}
.fnda-hero__plan--pro,
.fnda-hero__plan--agency,
.fnda-hero__plan--unlimited {
	background: linear-gradient(135deg, #f59e0b 0%, #b07207 100%);
	color: #fff;
	box-shadow: 0 2px 6px rgba(176, 114, 7, 0.25);
}

/* ---------- Notice strip ---------- */
.fnda-notice {
	display: flex;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--fnda-radius-sm);
	border: 1px solid var(--fnda-line);
	border-left: 4px solid var(--fnda-indigo-600);
	background: var(--fnda-card);
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--fnda-fg-2);
	line-height: 1.5;
	align-items: flex-start;
}
.fnda-notice b { color: var(--fnda-ink); font-weight: 600; }
.fnda-notice.is-success { border-left-color: var(--fnda-success-fg); }
.fnda-notice.is-warning { border-left-color: var(--fnda-amber-500); }
.fnda-notice a { font-weight: 500; }

/* ---------- Tabs ---------- */
.fnda-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--fnda-line);
	margin-bottom: 18px;
}
.fnda-tabs button {
	background: none;
	border: 0;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fnda-fg-2);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 120ms ease, border-color 120ms ease;
}
.fnda-tabs button:hover { color: var(--fnda-ink); }
.fnda-tabs button.is-active { color: var(--fnda-indigo-700); border-bottom-color: var(--fnda-indigo-600); }
.fnda-tabs button:focus-visible { outline: 2px solid var(--fnda-indigo-500); outline-offset: -2px; border-radius: 2px; }

/* ---------- Layout ---------- */
.fnda-grid {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 16px;
	align-items: start;
}
@media (max-width: 960px) {
	.fnda-grid { grid-template-columns: 1fr; }
}

.fnda-main { min-width: 0; }
.fnda-side { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 961px) {
	.fnda-side { position: sticky; top: 46px; } /* under WP admin bar */
}

/* ---------- Cards ---------- */
.fnda-card {
	background: var(--fnda-card);
	border: 1px solid var(--fnda-line);
	border-radius: var(--fnda-radius-sm);
	padding: 18px 20px;
}
.fnda-card + .fnda-card { margin-top: 14px; }
.fnda-card h3 {
	font-size: 14px;
	font-weight: 600;
	color: var(--fnda-ink);
	margin: 0 0 4px;
}
.fnda-card__desc {
	font-size: 13px;
	color: var(--fnda-fg-2);
	margin: 0 0 14px;
	line-height: 1.5;
}
.fnda-card hr {
	border: 0;
	border-top: 1px solid var(--fnda-line-2);
	margin: 16px 0;
}

/* ---------- Engine picker (3-4 tiles) ---------- */
.fnda-engines {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px;
}
.fnda-engine {
	display: block;
	border: 1.5px solid var(--fnda-line);
	border-radius: var(--fnda-radius-sm);
	padding: 12px 14px;
	background: var(--fnda-card);
	cursor: pointer;
	transition: border-color 120ms ease, background 120ms ease;
	position: relative;
}
.fnda-engine:hover { border-color: #c2beb3; }
.fnda-engine.is-active { border-color: var(--fnda-indigo-600); background: var(--fnda-indigo-50); }
/* The radio is the entire tile's click target — invisible, full-bleed, on top
 * of the tile content (which is set to pointer-events:none). Lets buyers click
 * anywhere on the tile to select it, and lets Playwright's `.check()` find an
 * unambiguous click target that isn't "obscured" by the label.
 */
.fnda-engine { position: relative; }
.fnda-engine input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}
/* Inner labels are decoration only — clicks pass through to the label,
 * which then activates the radio via the standard HTML for-association. */
.fnda-engine__tier, .fnda-engine__name, .fnda-engine__cost { pointer-events: none; }
.fnda-engine__tier {
	font-family: var(--fnda-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fnda-fg-3);
}
.fnda-engine__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--fnda-ink);
	margin-top: 4px;
}
.fnda-engine__cost {
	font-size: 12px;
	color: var(--fnda-fg-3);
	margin-top: 2px;
}
.fnda-engine.is-active .fnda-engine__cost { color: var(--fnda-indigo-700); }
/* Locked engine cards on the free plan — visible but greyed out, with an
 * inline upgrade link. Pointer events stay enabled on the link itself so
 * the upgrade flow remains one click away. */
.fnda-engine.is-locked { opacity: 0.6; cursor: not-allowed; }
.fnda-engine.is-locked:hover { border-color: var(--fnda-line-2); }
.fnda-engine.is-locked input[type="radio"] { pointer-events: none; }
.fnda-engine__lock {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--fnda-indigo-50);
	color: var(--fnda-indigo-700);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.fnda-engine__upgrade {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--fnda-indigo-700);
	text-decoration: none;
	position: relative;
	z-index: 2;
	pointer-events: auto;
}
.fnda-engine__upgrade:hover { text-decoration: underline; }

/* ---------- Fields ---------- */
.fnda-field { padding: 14px 0; border-top: 1px solid var(--fnda-line-2); }
.fnda-field:first-of-type { border-top: 0; padding-top: 0; }
.fnda-field__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--fnda-ink);
	margin-bottom: 6px;
}
.fnda-field input[type="text"],
.fnda-field input[type="password"],
.fnda-field input[type="number"] {
	font-family: var(--fnda-mono);
	font-size: 13px;
	padding: 7px 10px;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	background: var(--fnda-card);
	color: var(--fnda-ink);
	width: 100%;
	max-width: 380px;
	outline: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.fnda-field input:focus {
	border-color: var(--fnda-indigo-600);
	box-shadow: 0 0 0 2px var(--fnda-indigo-100);
}
.fnda-field__help {
	font-size: 12px;
	color: var(--fnda-fg-3);
	margin: 6px 0 0;
	line-height: 1.45;
}
.fnda-field__inline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.fnda-field__inline input { max-width: none; }

/* Toggles (checkboxes that look like switches) */
.fnda-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.fnda-toggle input[type="checkbox"] { margin-top: 3px; }
.fnda-toggle__text { flex: 1; }
.fnda-toggle__title { font-size: 13px; font-weight: 600; color: var(--fnda-ink); margin: 0; }
.fnda-toggle__help { font-size: 12px; color: var(--fnda-fg-3); margin: 3px 0 0; line-height: 1.45; }

/* ---------- Status sidebar cards ---------- */
.fnda-status {
	background: var(--fnda-card);
	border: 1px solid var(--fnda-line);
	border-radius: var(--fnda-radius-sm);
	padding: 16px 18px;
}
.fnda-status h4 {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fnda-fg-3);
	margin: 0 0 12px;
}
.fnda-status__row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; color: var(--fnda-fg-2); }
.fnda-status__row + .fnda-status__row { border-top: 1px solid var(--fnda-line-2); }
.fnda-status__row .v { font-weight: 500; color: var(--fnda-ink); font-family: var(--fnda-mono); font-size: 12px; }
.fnda-status__row .v.ok { color: var(--fnda-success-fg); }
.fnda-status__row .v.warn { color: var(--fnda-warn-fg); }

.fnda-progress {
	height: 6px;
	background: #eceae4;
	border-radius: 999px;
	overflow: hidden;
	margin: 10px 0 6px;
}
.fnda-progress__bar {
	height: 100%;
	background: var(--fnda-indigo-600);
	border-radius: 999px;
	transition: width 200ms ease;
}
.fnda-progress__meta {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--fnda-fg-3);
	font-family: var(--fnda-mono);
}

/* ---------- Buttons ---------- */
.fnda-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
	text-decoration: none;
	font-family: inherit;
}
.fnda-btn:focus-visible {
	outline: 2px solid var(--fnda-indigo-500);
	outline-offset: 1px;
}
.fnda-btn--primary {
	background: var(--fnda-indigo-600);
	color: #fff;
	border-color: var(--fnda-indigo-600);
}
.fnda-btn--primary:hover { background: var(--fnda-indigo-700); border-color: var(--fnda-indigo-700); color: #fff; }
.fnda-btn--primary[disabled] {
	background: #c2beb3;
	border-color: #c2beb3;
	cursor: not-allowed;
}
.fnda-btn--ghost {
	background: var(--fnda-card);
	color: var(--fnda-fg-2);
	border-color: var(--fnda-line);
}
.fnda-btn--ghost:hover { border-color: #c2beb3; color: var(--fnda-ink); }
.fnda-btn--block { width: 100%; }
.fnda-btn--small { padding: 6px 10px; font-size: 12px; }

.fnda-form-actions {
	margin: 18px 0 0;
	display: flex;
	gap: 10px;
	align-items: center;
}
/* Force our styles to win against WP's default input[type=submit]. */
.findastra-app input[type="submit"].fnda-btn--primary {
	background: var(--fnda-indigo-600);
	color: #fff !important;
	border-color: var(--fnda-indigo-600);
	text-shadow: none;
	box-shadow: none;
	height: auto;
	min-height: 0;
	line-height: 1.4;
}
.findastra-app input[type="submit"].fnda-btn--primary:hover {
	background: var(--fnda-indigo-700);
	border-color: var(--fnda-indigo-700);
}

/* ---------- Tab panels ---------- */
.fnda-tab-panel { display: block; }
.fnda-tab-panel[hidden] { display: none; }

/* ---------- Progress / status text from JS ---------- */
.fnda-index-progress {
	margin-top: 10px;
	padding: 8px 10px;
	min-height: 32px;
	font-family: var(--fnda-mono);
	font-size: 12px;
	color: var(--fnda-fg-2);
	background: #fafafa;
	border-radius: 4px;
	border: 1px solid var(--fnda-line-2);
	line-height: 1.4;
}
.fnda-index-progress:empty { display: none; }

.fnda-index-warning {
	margin-top: 10px;
	padding: 8px 10px;
	font-size: 12px;
	color: var(--fnda-warn-fg);
	background: #fef3d6;
	border: 1px solid #f0bf5b;
	border-radius: 4px;
}

/* ---------- Analytics tab ---------- */
.fnda-analytics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
@media (max-width: 720px) {
	.fnda-analytics { grid-template-columns: 1fr; }
}
.fnda-analytics h3 { font-size: 13px; font-weight: 600; color: var(--fnda-ink); margin: 0 0 4px; }
.fnda-analytics__desc { font-size: 12px; color: var(--fnda-fg-3); margin: 0 0 12px; }
.fnda-analytics ol { padding-left: 20px; margin: 0; }
.fnda-analytics li { margin-bottom: 7px; font-size: 13px; color: var(--fnda-fg-2); }
.fnda-analytics code {
	background: var(--fnda-line-2);
	padding: 2px 7px;
	border-radius: 3px;
	font-family: var(--fnda-mono);
	font-size: 12px;
	color: var(--fnda-ink);
}
.fnda-analytics small { color: var(--fnda-fg-3); font-size: 11px; }
.fnda-analytics__empty { color: var(--fnda-fg-3); font-style: italic; font-size: 13px; }

/* Hide WP's default heading & inline-error placement we replaced */
.findastra-app h1.wp-heading-inline { display: none; }
