/**
 * Oorank admin design system.
 *
 * Layer order matters:
 *   1. tokens      — CSS custom properties, scoped to #oorank-app
 *   2. reset       — the few wp-admin inheritances we must neutralise
 *   3. components  — the repeated recipes (.c-btn, .c-card, .c-switch …)
 *   4. utilities   — Tailwind, for everything that varies
 *
 * Tailwind's `preflight` is off (we must not restyle wp-admin), so anything
 * a normal reset would give us has to be written explicitly below.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---------------------------------------------------------------------------
 * 1. Tokens
 *
 * Neutrals carry a faint warm cast so surfaces read as paper rather than
 * battleship grey. The brand indigo (#4F46E5, sampled from the plugin icon)
 * is a *reserved* accent: primary action and active navigation only. Semantic
 * colours do all the informational work.
 * ------------------------------------------------------------------------ */

#oorank-app {
	--c-canvas: #fafaf9;
	--c-surface: #ffffff;
	--c-surface-sunken: #f6f6f4;
	--c-surface-raised: #ffffff;

	--c-line: #e8e8e4;
	--c-line-strong: #d6d6d0;

	--c-ink: #191918;
	--c-ink-soft: #4a4a46;
	--c-ink-muted: #74746d;
	--c-ink-faint: #9d9d95;

	--c-brand: #4f46e5;
	--c-brand-hover: #4338ca;
	--c-brand-press: #3730a3;
	--c-brand-soft: #eef0fe;
	--c-brand-line: #d5d8fb;
	--c-brand-ink: #3730a3;

	--c-ok: #0e7a5f;
	--c-ok-soft: #e8f6f1;
	--c-ok-line: #bfe3d7;
	--c-ok-ink: #0a5c47;

	--c-warn: #b45309;
	--c-warn-soft: #fdf3e7;
	--c-warn-line: #f3ddbd;
	--c-warn-ink: #8a3f07;

	--c-bad: #c0342b;
	--c-bad-soft: #fdedeb;
	--c-bad-line: #f5cdc8;
	--c-bad-ink: #93251e;

	--c-radius-md: 8px;
	--c-radius-lg: 10px;
	--c-radius-xl: 14px;
	--c-radius-2xl: 18px;

	/* One elevation ramp. Borders do the structural work; shadow only ever
	   signals "this floats above the canvas". */
	--c-shadow-xs: 0 1px 2px rgba(25, 25, 24, 0.04);
	--c-shadow-sm: 0 1px 2px rgba(25, 25, 24, 0.05), 0 1px 1px rgba(25, 25, 24, 0.03);
	--c-shadow-md: 0 1px 3px rgba(25, 25, 24, 0.06), 0 8px 24px -14px rgba(25, 25, 24, 0.18);
	--c-shadow-pop: 0 4px 12px rgba(25, 25, 24, 0.08), 0 24px 48px -20px rgba(25, 25, 24, 0.28);

	--c-ring: 0 0 0 1px var(--c-surface), 0 0 0 3px rgba(79, 70, 229, 0.4);

	--c-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;
	--c-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
		'Liberation Mono', monospace;
}

/* ---------------------------------------------------------------------------
 * 2. Reset — the minimum needed to stop wp-admin bleeding through.
 * ------------------------------------------------------------------------ */

#oorank-app {
	font-family: var(--c-font-sans);
	color: var(--c-ink);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

#oorank-app *,
#oorank-app *::before,
#oorank-app *::after {
	box-sizing: inherit;

	/*
	 * Tailwind's `border-*` utilities set border-*-width only; they rely on
	 * preflight to have already declared `border-style: solid` globally.
	 * Preflight is off here, so without these two lines every border in the
	 * design system computes to `style: none` → `width: 0` and silently does
	 * not paint — cards, dividers, inputs, badges, the lot.
	 *
	 * The pair is load-bearing: `border-style: solid` on its own would give
	 * every element the initial `medium` (3px) width instead.
	 */
	border-style: solid;
	border-width: 0;
}

#oorank-app h1,
#oorank-app h2,
#oorank-app h3,
#oorank-app h4,
#oorank-app p,
#oorank-app ul,
#oorank-app ol,
#oorank-app figure {
	margin: 0;
	padding: 0;
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
}

#oorank-app ul,
#oorank-app ol {
	list-style: none;
}

#oorank-app a {
	color: inherit;
	text-decoration: none;
}

#oorank-app button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

#oorank-app input,
#oorank-app select,
#oorank-app textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}

#oorank-app table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

/* Scores, counts and other figures must not jitter as they animate. */
#oorank-app .c-nums {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* The plugin owns the whole canvas: cancel wp-admin's gutter and its
   `.wrap` heading rhythm so nothing about the frame reads as WordPress. */
.oorank-screen #wpcontent {
	padding-left: 0;
}

.oorank-screen #wpbody-content {
	padding-bottom: 0;
}

.oorank-screen .wrap {
	margin: 0;
}

.oorank-screen #wpfooter {
	display: none;
}

/* wp-admin injects notices into the top of .wrap. They are the single most
   "WordPress plugin" element on screen; Oorank reports through its own
   toasts instead. Only the plugin's own screens are affected. */
.oorank-screen .wrap > .notice,
.oorank-screen .wrap > div.updated,
.oorank-screen .wrap > div.error {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	#oorank-app *,
	#oorank-app *::before,
	#oorank-app *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Components
 * ------------------------------------------------------------------------ */

@layer components {
	/*
	 * Every selector here is written with an explicit `#oorank-app` scope.
	 *
	 * This is load-bearing, not decoration. Tailwind's `important: '#oorank-app'`
	 * option prefixes *utilities* only — it leaves `@layer components` rules at
	 * their authored specificity. A bare `.c-switch` (0,1,0) therefore loses to
	 * the `#oorank-app button` reset above (1,0,1), and every component that
	 * sets a background on a button silently rendered transparent. Scoping the
	 * components by hand puts them at (1,1,0), above the reset and below the
	 * utilities, which is the order the system assumes.
	 */

	/* -- Focus -------------------------------------------------------------
	 * One ring, everywhere, keyboard-only. Preflight is off so Tailwind gives
	 * us nothing here by default. */
	#oorank-app .c-focus {
		@apply focus-visible:tw-outline-none;
		@apply focus-visible:tw-shadow-[shadow:var(--c-ring)];
	}

	/* -- Buttons ----------------------------------------------------------- */
	#oorank-app .c-btn {
		@apply tw-inline-flex tw-items-center tw-justify-center tw-gap-2;
		@apply tw-rounded-md tw-text-sm tw-font-medium tw-whitespace-nowrap;
		@apply tw-h-9 tw-px-3.5;
		@apply tw-transition tw-duration-120 tw-ease-out;
		@apply focus-visible:tw-outline-none focus-visible:tw-shadow-[shadow:var(--c-ring)];
		@apply disabled:tw-pointer-events-none disabled:tw-opacity-50;
	}

	#oorank-app .c-btn-primary {
		@apply tw-bg-brand tw-text-white tw-shadow-xs;
		@apply hover:tw-bg-brand-hover active:tw-bg-brand-press;
	}

	#oorank-app .c-btn-secondary {
		@apply tw-bg-surface tw-text-ink tw-border tw-border-line-strong tw-shadow-xs;
		@apply hover:tw-bg-surface-sunken active:tw-bg-surface-sunken;
		/* A flat 50% opacity fades the border out too, and the control then
		 * reads as a word rather than a button that is waiting on input. Mute
		 * the label instead and keep the chrome. */
		@apply disabled:tw-opacity-100 disabled:tw-bg-surface-sunken disabled:tw-text-ink-faint;
	}

	#oorank-app .c-btn-ghost {
		@apply tw-text-ink-soft;
		@apply hover:tw-bg-surface-sunken hover:tw-text-ink;
	}

	#oorank-app .c-btn-danger {
		@apply tw-bg-surface tw-text-bad-ink tw-border tw-border-bad-line tw-shadow-xs;
		@apply hover:tw-bg-bad-soft;
	}

	#oorank-app .c-btn-sm {
		@apply tw-h-8 tw-px-3 tw-text-[13px];
	}

	#oorank-app .c-btn-xs {
		@apply tw-h-7 tw-px-2.5 tw-text-xs tw-rounded;
	}

	#oorank-app .c-btn-icon {
		@apply tw-h-9 tw-w-9 tw-px-0;
	}

	/* -- Surfaces ---------------------------------------------------------- */
	#oorank-app .c-card {
		@apply tw-rounded-xl tw-border tw-border-line tw-bg-surface tw-shadow-xs;
	}

	#oorank-app .c-card-pad {
		@apply tw-p-5;
	}

	/* Divider that respects the card's rounded corners. */
	#oorank-app .c-divide > * + * {
		@apply tw-border-t tw-border-line;
	}

	/* -- Text -------------------------------------------------------------- */
	#oorank-app .c-title {
		@apply tw-text-[15px] tw-font-semibold tw-text-ink tw-tracking-[-0.01em];
	}

	#oorank-app .c-subtitle {
		@apply tw-text-[13px] tw-text-ink-muted tw-leading-relaxed;
	}

	#oorank-app .c-label {
		@apply tw-block tw-text-[13px] tw-font-medium tw-text-ink-soft;
	}

	#oorank-app .c-hint {
		@apply tw-text-xs tw-text-ink-muted tw-leading-relaxed;
	}

	#oorank-app .c-eyebrow {
		@apply tw-text-[11px] tw-font-semibold tw-uppercase tw-tracking-[0.06em] tw-text-ink-faint;
	}

	#oorank-app .c-link {
		@apply tw-text-ink-soft tw-underline tw-decoration-line-strong tw-underline-offset-[3px];
		@apply tw-transition tw-duration-120;
		@apply hover:tw-text-ink hover:tw-decoration-ink-faint;
		@apply focus-visible:tw-outline-none focus-visible:tw-shadow-[shadow:var(--c-ring)] focus-visible:tw-rounded-sm;
	}

	/* -- Form controls -----------------------------------------------------
	 * The three field types share one base rule rather than @apply-ing each
	 * other: component classes now carry their own `#oorank-app` scope (see
	 * the note at the top of this layer), and @apply cannot reference a
	 * scoped selector. */
	#oorank-app .c-input,
	#oorank-app .c-textarea,
	#oorank-app .c-select {
		@apply tw-w-full tw-h-9 tw-rounded-md tw-px-3;
		@apply tw-bg-surface tw-text-ink tw-border tw-border-line-strong tw-shadow-xs;
		@apply placeholder:tw-text-ink-faint;
		@apply tw-transition tw-duration-120;
		@apply hover:tw-border-ink-faint;
		@apply focus:tw-outline-none focus:tw-border-brand focus:tw-shadow-[shadow:var(--c-ring)];
	}

	#oorank-app .c-textarea {
		@apply tw-h-auto tw-py-2.5 tw-font-mono tw-text-xs tw-leading-relaxed;
	}

	#oorank-app .c-select {
		@apply tw-pr-9 tw-appearance-none tw-cursor-pointer;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2374746d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 10px center;
	}

	/* Switch — every boolean in Oorank is a switch, never a checkbox. */
	#oorank-app .c-switch {
		@apply tw-relative tw-inline-flex tw-shrink-0 tw-items-center;
		@apply tw-h-5 tw-w-9 tw-rounded-full tw-border tw-border-transparent;
		@apply tw-bg-line-strong tw-transition tw-duration-180 tw-ease-out;
		@apply focus-visible:tw-outline-none focus-visible:tw-shadow-[shadow:var(--c-ring)];
	}

	#oorank-app .c-switch[data-state='on'] {
		@apply tw-bg-brand;
	}

	#oorank-app .c-switch-thumb {
		@apply tw-pointer-events-none tw-block tw-h-4 tw-w-4 tw-rounded-full tw-bg-white;
		@apply tw-shadow-sm tw-transition-transform tw-duration-180 tw-ease-out;
		transform: translateX(2px);
	}

	#oorank-app .c-switch[data-state='on'] .c-switch-thumb {
		transform: translateX(18px);
	}

	/* Checkbox — used only for multi-select lists (post types), where a row
	   of switches would over-weight the choice. */
	#oorank-app .c-check {
		@apply tw-relative tw-inline-flex tw-h-4 tw-w-4 tw-shrink-0 tw-items-center tw-justify-center;
		@apply tw-rounded tw-border tw-border-line-strong tw-bg-surface;
		@apply tw-transition tw-duration-120;
		@apply focus-visible:tw-outline-none focus-visible:tw-shadow-[shadow:var(--c-ring)];
	}

	#oorank-app .c-check[data-state='on'] {
		@apply tw-border-brand tw-bg-brand tw-text-white;
	}

	/* Segmented control — for 2–3 mutually exclusive options. */
	#oorank-app .c-segment {
		@apply tw-inline-flex tw-items-center tw-gap-0.5 tw-rounded-lg tw-p-0.5;
		@apply tw-bg-surface-sunken tw-border tw-border-line;
	}

	#oorank-app .c-segment-item {
		@apply tw-h-7 tw-rounded-md tw-px-3 tw-text-[13px] tw-font-medium tw-text-ink-muted;
		@apply tw-transition tw-duration-120;
		@apply hover:tw-text-ink;
		@apply focus-visible:tw-outline-none focus-visible:tw-shadow-[shadow:var(--c-ring)];
	}

	#oorank-app .c-segment-item[data-state='on'] {
		@apply tw-bg-surface tw-text-ink tw-shadow-xs;
	}

	/* -- Badges ------------------------------------------------------------ */
	#oorank-app .c-badge {
		@apply tw-inline-flex tw-items-center tw-gap-1 tw-rounded tw-border;
		@apply tw-px-1.5 tw-py-0.5 tw-text-[11px] tw-font-medium tw-whitespace-nowrap;
	}

	#oorank-app .c-badge-neutral {
		@apply tw-border-line tw-bg-surface-sunken tw-text-ink-muted;
	}

	#oorank-app .c-badge-brand {
		@apply tw-border-brand-line tw-bg-brand-soft tw-text-brand-ink;
	}

	#oorank-app .c-badge-ok {
		@apply tw-border-ok-line tw-bg-ok-soft tw-text-ok-ink;
	}

	#oorank-app .c-badge-warn {
		@apply tw-border-warn-line tw-bg-warn-soft tw-text-warn-ink;
	}

	#oorank-app .c-badge-bad {
		@apply tw-border-bad-line tw-bg-bad-soft tw-text-bad-ink;
	}

	/* -- Skeleton ---------------------------------------------------------- */
	#oorank-app .c-skeleton {
		@apply tw-relative tw-overflow-hidden tw-rounded tw-bg-surface-sunken;
	}

	#oorank-app .c-skeleton::after {
		content: '';
		position: absolute;
		inset: 0;
		transform: translateX(-100%);
		background-image: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0) 0,
			rgba(255, 255, 255, 0.7) 50%,
			rgba(255, 255, 255, 0) 100%
		);
		animation: c-shimmer 1.4s infinite;
	}

	@keyframes c-shimmer {
		100% {
			transform: translateX(100%);
		}
	}

	/* -- Navigation -------------------------------------------------------- */
	#oorank-app .c-nav-item {
		@apply tw-relative tw-flex tw-w-full tw-items-center tw-gap-2.5;
		@apply tw-h-9 tw-rounded-md tw-px-2.5 tw-text-[13px] tw-font-medium;
		@apply tw-text-ink-soft tw-transition tw-duration-120;
		@apply hover:tw-bg-surface-sunken hover:tw-text-ink;
		@apply focus-visible:tw-outline-none focus-visible:tw-shadow-[shadow:var(--c-ring)];
	}

	#oorank-app .c-nav-item[aria-current='page'] {
		@apply tw-bg-brand-soft tw-text-brand-ink;
	}

	/* -- Table ------------------------------------------------------------- */
	#oorank-app .c-th {
		@apply tw-px-5 tw-py-2.5 tw-text-left tw-text-[11px] tw-font-semibold;
		@apply tw-uppercase tw-tracking-[0.06em] tw-text-ink-faint tw-whitespace-nowrap;
	}

	#oorank-app .c-td {
		@apply tw-px-5 tw-py-3.5 tw-align-middle;
	}

	#oorank-app .c-row {
		@apply tw-border-t tw-border-line tw-transition tw-duration-120;
		@apply hover:tw-bg-surface-sunken;
	}
}