/* ==========================================================================
   Indexability Checker – own design system (not derived from any reference
   tool's layout/colors/typography). Everything scoped under .uic; form
   controls carry explicit resets so page builder themes can't restyle them.
   ========================================================================== */

.uic {
	--uic-bg: #ffffff;
	--uic-panel: #f6f7fb;
	--uic-border: #e2e5ee;
	--uic-border-strong: #cfd3e0;
	--uic-text: #171a2b;
	--uic-muted: #667085;
	--uic-accent: #0d6e5f;
	--uic-accent-hover: #0a5648;
	--uic-accent-soft: #e3f3ef;
	--uic-good: #0f7a3d;
	--uic-good-soft: #e4f6ea;
	--uic-warn: #a15c00;
	--uic-warn-soft: #fff2df;
	--uic-bad: #b3261e;
	--uic-bad-soft: #fce8e6;
	--uic-gray: #5b6270;
	--uic-gray-soft: #eceef2;
	--uic-radius: 10px;
	--uic-radius-sm: 6px;
	--uic-focus: 0 0 0 3px rgba(13, 110, 95, 0.28);
	--uic-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--uic-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--uic-max: 1200px;

	font-family: var(--uic-font);
	color: var(--uic-text);
	font-size: 15px;
	line-height: 1.55;
	box-sizing: border-box;
	clear: both;
	max-width: var(--uic-max);
	margin: 0 auto 2.5rem;
}

@media (prefers-color-scheme: dark) {
	.uic:not([data-uic-theme="light"]) {
		--uic-bg: #14151d;
		--uic-panel: #1b1d29;
		--uic-border: #2c2f3d;
		--uic-border-strong: #3a3d4e;
		--uic-text: #eef0f6;
		--uic-muted: #9aa0b4;
		--uic-accent: #35c9ab;
		--uic-accent-hover: #4fe0c2;
		--uic-accent-soft: rgba(53, 201, 171, 0.14);
		--uic-good: #4ade80;
		--uic-good-soft: rgba(74, 222, 128, 0.14);
		--uic-warn: #f2b84b;
		--uic-warn-soft: rgba(242, 184, 75, 0.14);
		--uic-bad: #f47067;
		--uic-bad-soft: rgba(244, 112, 103, 0.14);
		--uic-gray: #9aa0b4;
		--uic-gray-soft: rgba(154, 160, 180, 0.14);
	}
}

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

.uic__heading {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--uic-text);
}

.uic__intro {
	text-align: center;
	margin: 0 0 1.5rem;
}

.uic__title {
	font-size: 1.375rem;
	font-weight: 700;
	margin: 0;
	color: var(--uic-text);
}

.uic__subtitle {
	margin: 0.25rem 0 0;
	color: var(--uic-muted);
	font-size: 0.95rem;
}

/* ---- Tabs --------------------------------------------------------------- */

.uic__tabs {
	display: flex;
	gap: 0.25rem;
	border-bottom: 1px solid var(--uic-border);
	margin-bottom: 1.5rem;
}

.uic__tab {
	appearance: none;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0.75rem 1rem;
	font: inherit;
	font-weight: 600;
	color: var(--uic-muted);
	cursor: pointer;
	margin-bottom: -1px;
}

.uic__tab:hover {
	color: var(--uic-text);
}

.uic__tab.is-active {
	color: var(--uic-accent);
	border-bottom-color: var(--uic-accent);
}

.uic__tab:focus-visible {
	outline: none;
	box-shadow: var(--uic-focus);
	border-radius: var(--uic-radius-sm);
}

.uic__panel[hidden] {
	display: none !important;
}

/* ---- Form ----------------------------------------------------------------*/

.uic__label {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	margin-bottom: 0.4rem;
	color: var(--uic-text);
}

.uic__input-row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.uic__input,
.uic__textarea {
	width: 100% !important;
	max-width: 100%;
	font: inherit !important;
	color: var(--uic-text) !important;
	background: var(--uic-bg) !important;
	border: 1px solid var(--uic-border-strong) !important;
	border-radius: var(--uic-radius-sm) !important;
	padding: 0.65rem 0.85rem !important;
	line-height: 1.4 !important;
	box-shadow: none !important;
}

.uic__input {
	flex: 1 1 280px;
}

.uic__textarea {
	resize: vertical;
	min-height: 160px;
	font-family: var(--uic-mono) !important;
	font-size: 0.875rem !important;
}

.uic__input:focus,
.uic__textarea:focus {
	outline: none !important;
	border-color: var(--uic-accent) !important;
	box-shadow: var(--uic-focus) !important;
}

.uic__field-error {
	color: var(--uic-bad);
	font-size: 0.85rem;
	margin: 0.4rem 0 0;
}

.uic__hint {
	color: var(--uic-muted);
	font-size: 0.82rem;
	margin: 0.4rem 0 0;
}

.uic__btn {
	appearance: none;
	font: inherit !important;
	font-weight: 600 !important;
	border-radius: var(--uic-radius-sm) !important;
	padding: 0.65rem 1.1rem !important;
	cursor: pointer;
	border: 1px solid transparent !important;
	white-space: nowrap;
}

.uic__btn:focus-visible {
	outline: none !important;
	box-shadow: var(--uic-focus) !important;
}

.uic__btn--primary {
	background: var(--uic-accent) !important;
	color: #ffffff !important;
	border-color: var(--uic-accent) !important;
}

.uic__btn--primary:hover {
	background: var(--uic-accent-hover) !important;
	border-color: var(--uic-accent-hover) !important;
}

.uic__btn--primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.uic__btn--outline {
	background: transparent !important;
	color: var(--uic-text) !important;
	border-color: var(--uic-border-strong) !important;
}

.uic__btn--outline:hover {
	border-color: var(--uic-accent) !important;
	color: var(--uic-accent) !important;
}

.uic__link-btn {
	appearance: none;
	background: none;
	border: none;
	color: var(--uic-accent);
	font: inherit;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.3rem 0;
	cursor: pointer;
	text-decoration: underline;
}

.uic__bulk-actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 0.85rem;
}

.uic__bulk-toolbar {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0.75rem 0;
}

/* ---- Loading -------------------------------------------------------------*/

.uic__loading {
	padding: 1.25rem;
	background: var(--uic-panel);
	border: 1px solid var(--uic-border);
	border-radius: var(--uic-radius);
	margin-top: 1rem;
}

.uic__loading-text {
	font-weight: 600;
	margin: 0 0 0.6rem;
}

.uic__stages {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	font-size: 0.85rem;
	color: var(--uic-muted);
}

.uic__stages li[data-active] {
	color: var(--uic-accent);
	font-weight: 600;
}

.uic__stages li[data-done]::before {
	content: "✓ ";
}

/* ---- Empty state -----------------------------------------------------------*/

.uic__empty-state {
	text-align: center;
	color: var(--uic-muted);
	padding: 2.5rem 1rem;
	border: 1px dashed var(--uic-border-strong);
	border-radius: var(--uic-radius);
	margin-top: 1rem;
}

.uic__result[hidden],
.uic__loading[hidden],
.uic__empty-state[hidden] {
	display: none;
}

/* ---- Score / status card ---------------------------------------------------*/

.uic__status-card {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 1.5rem;
	border-radius: var(--uic-radius);
	border: 1px solid var(--uic-border);
	margin-top: 1rem;
	background: var(--uic-panel);
}

.uic__status-card[data-status="indexable"] { border-color: var(--uic-good); background: var(--uic-good-soft); }
.uic__status-card[data-status="warning"] { border-color: var(--uic-warn); background: var(--uic-warn-soft); }
.uic__status-card[data-status="not_indexable"] { border-color: var(--uic-bad); background: var(--uic-bad-soft); }
.uic__status-card[data-status="error"] { border-color: var(--uic-gray); background: var(--uic-gray-soft); }

.uic__score {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	min-width: 92px;
	text-align: center;
}

.uic__score-max {
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--uic-muted);
}

.uic__status-body {
	flex: 1 1 240px;
}

.uic__status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	padding: 0.2rem 0;
}

[data-status="indexable"] .uic__status-badge { color: var(--uic-good); }
[data-status="warning"] .uic__status-badge { color: var(--uic-warn); }
[data-status="not_indexable"] .uic__status-badge { color: var(--uic-bad); }
[data-status="error"] .uic__status-badge { color: var(--uic-gray); }

.uic__status-desc {
	margin: 0.3rem 0 0;
	color: var(--uic-text);
	font-size: 0.9rem;
}

/* ---- Overview badges --------------------------------------------------------*/

.uic__overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.uic__check-card {
	border: 1px solid var(--uic-border);
	border-radius: var(--uic-radius);
	padding: 0.85rem;
	background: var(--uic-bg);
}

.uic__check-card__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--uic-muted);
	margin: 0 0 0.35rem;
}

.uic__check-card__value {
	font-weight: 700;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.uic__icon {
	display: inline-flex;
	width: 1.1em;
	height: 1.1em;
	flex: none;
}

.uic__icon svg {
	width: 100%;
	height: 100%;
}

.uic__check-card[data-severity="ok"] .uic__icon { color: var(--uic-good); }
.uic__check-card[data-severity="warning"] .uic__icon { color: var(--uic-warn); }
.uic__check-card[data-severity="critical"] .uic__icon { color: var(--uic-bad); }

/* ---- Technical details accordion --------------------------------------------*/

.uic__accordion {
	margin-top: 1.25rem;
	border: 1px solid var(--uic-border);
	border-radius: var(--uic-radius);
	overflow: hidden;
}

.uic__accordion summary {
	cursor: pointer;
	padding: 0.85rem 1rem;
	font-weight: 700;
	background: var(--uic-panel);
	list-style: none;
}

.uic__accordion summary::-webkit-details-marker {
	display: none;
}

.uic__accordion summary::before {
	content: "▸ ";
	color: var(--uic-muted);
}

.uic__accordion[open] summary::before {
	content: "▾ ";
}

.uic__tech-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.uic__tech-table th,
.uic__tech-table td {
	text-align: left;
	padding: 0.55rem 1rem;
	border-top: 1px solid var(--uic-border);
	vertical-align: top;
	word-break: break-word;
}

.uic__tech-table th {
	width: 220px;
	font-weight: 600;
	color: var(--uic-muted);
}

.uic__redirect-chain {
	list-style: decimal;
	margin: 0;
	padding-left: 1.2rem;
}

.uic__redirect-chain code {
	font-family: var(--uic-mono);
	font-size: 0.85em;
}

/* ---- Issues --------------------------------------------------------------*/

.uic__issues {
	margin-top: 1.25rem;
}

.uic__issues-title {
	font-weight: 700;
	margin: 0 0 0.6rem;
}

.uic__issue-card {
	border: 1px solid var(--uic-border);
	border-left-width: 4px;
	border-radius: var(--uic-radius-sm);
	padding: 0.85rem 1rem;
	margin-bottom: 0.6rem;
	background: var(--uic-bg);
}

.uic__issue-card[data-severity="critical"] { border-left-color: var(--uic-bad); }
.uic__issue-card[data-severity="warning"] { border-left-color: var(--uic-warn); }
.uic__issue-card[data-severity="info"] { border-left-color: var(--uic-gray); }

.uic__issue-title {
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.35rem;
}

.uic__issue-card[data-severity="critical"] .uic__icon { color: var(--uic-bad); }
.uic__issue-card[data-severity="warning"] .uic__icon { color: var(--uic-warn); }
.uic__issue-card[data-severity="info"] .uic__icon { color: var(--uic-gray); }

.uic__issue-detected {
	font-family: var(--uic-mono);
	font-size: 0.82rem;
	background: var(--uic-panel);
	border-radius: var(--uic-radius-sm);
	padding: 0.4rem 0.6rem;
	margin: 0 0 0.5rem;
	overflow-wrap: anywhere;
}

.uic__issue-row {
	font-size: 0.85rem;
	margin: 0.3rem 0;
}

.uic__issue-row strong {
	color: var(--uic-muted);
	font-weight: 600;
}

.uic__no-issues {
	color: var(--uic-good);
	font-weight: 600;
}

/* ---- Bulk progress ---------------------------------------------------------*/

.uic__bulk-progress {
	margin-top: 1rem;
}

.uic__progress-bar {
	height: 8px;
	border-radius: 999px;
	background: var(--uic-gray-soft);
	overflow: hidden;
}

.uic__progress-fill {
	height: 100%;
	background: var(--uic-accent);
	width: 0%;
	transition: width 0.2s ease;
}

.uic__progress-text {
	font-size: 0.82rem;
	color: var(--uic-muted);
	margin: 0.4rem 0 0;
}

/* ---- Bulk table --------------------------------------------------------------*/

.uic__table-wrap {
	margin-top: 1rem;
}

.uic__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}

.uic__table th,
.uic__table td {
	text-align: left;
	padding: 0.55rem 0.7rem;
	border-bottom: 1px solid var(--uic-border);
	vertical-align: top;
}

.uic__table th {
	color: var(--uic-muted);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.uic__row-status {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 700;
	white-space: nowrap;
}

.uic__row-status[data-status="indexable"] { color: var(--uic-good); }
.uic__row-status[data-status="warning"] { color: var(--uic-warn); }
.uic__row-status[data-status="not_indexable"] { color: var(--uic-bad); }
.uic__row-status[data-status="error"] { color: var(--uic-gray); }

.uic__url-cell {
	max-width: 320px;
	overflow-wrap: anywhere;
}

.uic__bulk-cards {
	display: none;
}

/* ---- Skeleton (while a row is still processing) -----------------------------*/

.uic__skeleton {
	display: inline-block;
	height: 0.9em;
	width: 70%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--uic-gray-soft) 25%, var(--uic-border) 37%, var(--uic-gray-soft) 63%);
	background-size: 400% 100%;
	animation: uic-skeleton 1.4s ease infinite;
}

@keyframes uic-skeleton {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.uic__skeleton { animation: none; }
	.uic__progress-fill { transition: none; }
}

/* ---- Disclaimer + GSC CTA -----------------------------------------------------*/

.uic__disclaimer {
	margin-top: 1.75rem;
	padding: 0.85rem 1rem;
	background: var(--uic-panel);
	border: 1px solid var(--uic-border);
	border-radius: var(--uic-radius-sm);
	font-size: 0.82rem;
	color: var(--uic-muted);
}

.uic__gsc-cta {
	margin-top: 1rem;
	text-align: center;
	padding: 1.25rem;
	border: 1px dashed var(--uic-border-strong);
	border-radius: var(--uic-radius);
}

.uic__gsc-cta p {
	margin: 0 0 0.65rem;
	font-weight: 600;
}

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

.uic__toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	background: var(--uic-text);
	color: var(--uic-bg);
	padding: 0.6rem 1.1rem;
	border-radius: var(--uic-radius-sm);
	font-size: 0.85rem;
	z-index: 9999;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.uic__toast[hidden] {
	display: none;
}

/* ---- Responsive ------------------------------------------------------------*/

@media (max-width: 900px) {
	.uic__table-wrap {
		overflow-x: auto;
	}
	.uic__table {
		min-width: 760px;
	}
}

@media (max-width: 600px) {
	.uic {
		font-size: 14px;
	}
	.uic__input-row {
		flex-direction: column;
	}
	.uic__input-row .uic__btn {
		width: 100%;
	}
	.uic__status-card {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	.uic__tech-table th {
		width: 140px;
	}

	/* Bulk results become cards instead of a horizontally-scrolling table. */
	.uic__table-wrap table.uic__table {
		display: none;
	}
	.uic__bulk-cards {
		display: block;
	}
	.uic__bulk-card {
		border: 1px solid var(--uic-border);
		border-radius: var(--uic-radius);
		padding: 0.85rem;
		margin-bottom: 0.75rem;
		background: var(--uic-bg);
	}
	.uic__bulk-card__url {
		font-weight: 700;
		overflow-wrap: anywhere;
		margin-bottom: 0.4rem;
	}
	.uic__bulk-card__row {
		display: flex;
		justify-content: space-between;
		gap: 0.75rem;
		font-size: 0.85rem;
		padding: 0.25rem 0;
		border-top: 1px solid var(--uic-border);
	}
	.uic__bulk-card__row strong {
		color: var(--uic-muted);
		font-weight: 600;
	}
}