/**
 * Wrenio Studio — shared admin stylesheet.
 *
 * SHARED FILE — bundled identically in every Wrenio Studio plugin.
 * Canonical version lives in wrenio-media-offload/assets/css/.
 * See /design.md §4–§7 for the spec.
 *
 * Loaded by includes/wrenio-studio-menu.php on Wrenio Studio admin pages
 * only. Does NOT bleed into the rest of the WP admin.
 */

/* ===========================================================================
   1. Tokens — color and typography
   ========================================================================= */

.wrenio-studio-dashboard,
.wrap.wrenio-studio-page {
	/* Indigo & Ember palette — design.md §4 */
	--wrenio-jacarta: #2F296A;
	--wrenio-ember: #D97742;
	--wrenio-cream: #F8F5EF;
	--wrenio-ink: #1A1A24;
	--wrenio-stone: #E4DFD3;

	/* Slightly darker Ember for hover states. */
	--wrenio-ember-hover: #C66B3A;

	/* Faint Stone tints for muted surfaces. */
	--wrenio-stone-tint-light: rgba( 228, 223, 211, 0.25 );
	--wrenio-stone-tint-medium: rgba( 228, 223, 211, 0.40 );

	/* Type stacks. Brand fonts not yet bundled — system fallbacks used
	   until design.md §10 (font loading strategy) is settled. */
	--wrenio-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--wrenio-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
		'Segoe UI', system-ui, sans-serif;
	--wrenio-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo,
		Monaco, Consolas, monospace;
}

/* ===========================================================================
   2. Wrenio Studio dashboard (the parent landing page)

   Each section is a separate Cream card sitting on the WP-admin gray
   background. The wrap is just a layout column with vertical gaps —
   see design.md §3 / §5.
   ========================================================================= */

.wrap.wrenio-studio-dashboard {
	max-width: 1100px;
	margin: 20px 20px 40px 0;
	padding: 0;
	background: transparent;
	color: var( --wrenio-ink );
	font-family: var( --wrenio-font-body );
	font-size: 14px;
	line-height: 1.55;
}

/* Generic section card */

.wrenio-studio-section {
	background: var( --wrenio-cream );
	border: 1px solid var( --wrenio-stone );
	border-radius: 10px;
	padding: 40px 48px;
	margin-bottom: 16px;
}

.wrenio-studio-section:last-child {
	margin-bottom: 0;
}

.wrenio-studio-section--muted {
	background: var( --wrenio-stone-tint-medium );
}

.wrenio-studio-section__title {
	font-family: var( --wrenio-font-display );
	font-weight: 500;
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var( --wrenio-jacarta );
	margin: 0 0 24px;
}

/* Hero section — logo carries the brand name; no separate H1. */

.wrenio-studio-section--hero {
	padding: 40px 48px;
}

.wrenio-studio-hero {
	display: flex;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}

.wrenio-studio-hero__brand {
	flex-shrink: 0;
}

.wrenio-studio-hero__logo {
	display: block;
	width: 300px;
	max-width: 100%;
	height: auto;
}

.wrenio-studio-hero__copy {
	flex: 1;
	min-width: 240px;
}

.wrenio-studio-lede {
	font-size: 15px;
	color: var( --wrenio-ink );
	opacity: 0.75;
	margin: 0;
	max-width: 56ch;
	line-height: 1.5;
}

/* Eyebrow — uppercase IBM Plex Mono section markers */

.wrenio-studio-eyebrow {
	font-family: var( --wrenio-font-mono );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wrenio-jacarta );
	opacity: 0.7;
	margin: 0 0 16px;
}

/* Empty state */

.wrenio-studio-empty {
	font-size: 14px;
	color: var( --wrenio-ink );
	opacity: 0.65;
	margin: 0;
	padding: 16px 20px;
	background: var( --wrenio-stone-tint-medium );
	border-radius: 8px;
}

/* Plugin card grid — section 2 */

.wrenio-studio-card-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 16px;
}

.wrenio-studio-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fff;
	border: 1px solid var( --wrenio-stone );
	border-radius: 8px;
	padding: 24px;
	transition: border-color 220ms ease, transform 220ms ease;
}

.wrenio-studio-card:hover {
	border-color: var( --wrenio-jacarta );
	transform: translateY( -1px );
}

.wrenio-studio-card__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.wrenio-studio-card__name {
	font-family: var( --wrenio-font-display );
	font-weight: 600;
	font-size: 17px;
	line-height: 1.2;
	color: var( --wrenio-jacarta );
	margin: 0;
}

.wrenio-studio-card__version {
	flex-shrink: 0;
	font-family: var( --wrenio-font-mono );
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wrenio-ink );
	opacity: 0.55;
}

.wrenio-studio-card__description {
	flex: 1;
	font-size: 13px;
	color: var( --wrenio-ink );
	opacity: 0.75;
	margin: 0;
	line-height: 1.5;
}

/* ===========================================================================
   3. Buttons — exactly two styles per design.md §7
   ========================================================================= */

.wrenio-studio-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	font-family: var( --wrenio-font-body );
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.01em;
	padding: 10px 18px;
	border-radius: 4px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 180ms ease,
		border-color 180ms ease,
		color 180ms ease,
		transform 180ms ease;
}

.wrenio-studio-button:focus {
	outline: none;
	box-shadow:
		0 0 0 2px var( --wrenio-cream ),
		0 0 0 4px var( --wrenio-jacarta );
}

/* Primary — Ember filled */

.wrenio-studio-button--primary {
	background: var( --wrenio-ember );
	color: #fff;
	border-color: var( --wrenio-ember );
}

.wrenio-studio-button--primary:hover {
	background: var( --wrenio-ember-hover );
	border-color: var( --wrenio-ember-hover );
	color: #fff;
	transform: translateY( -1px );
}

.wrenio-studio-button--primary:active {
	transform: translateY( 0 );
}

/* Secondary — transparent + Stone border */

.wrenio-studio-button--secondary {
	background: transparent;
	color: var( --wrenio-jacarta );
	border-color: var( --wrenio-stone );
}

.wrenio-studio-button--secondary:hover {
	background: var( --wrenio-stone-tint-medium );
	border-color: var( --wrenio-jacarta );
	color: var( --wrenio-jacarta );
}

/* ===========================================================================
   4. Plugin page anatomy — design.md §6

   Used on each plugin's main page (not the Wrenio Studio landing).
   The .wrap div gets the .wrenio-studio-page class.
   ========================================================================= */

.wrap.wrenio-studio-page {
	max-width: 1200px;
	color: var( --wrenio-ink );
	font-family: var( --wrenio-font-body );
}

/* Header strip — Cream card sitting at the top of every plugin page.
   The wren mark + plugin name form a single wordmark inside the H1. */

.wrenio-studio-page__header {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 20px 0 0;
	padding: 28px 36px;
	background: var( --wrenio-cream );
	border: 1px solid var( --wrenio-stone );
	border-radius: 10px;
}

.wrenio-studio-page__header-name {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	font-family: var( --wrenio-font-display );
	font-weight: 500;
	font-size: 28px;
	line-height: 1.05;
	color: var( --wrenio-ink );
}

/* Wren silhouette — inline SVG, sized to text height, color cascades
   from currentColor on the parent. */

.wrenio-studio-page__header-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.1em;
	height: 1.1em;
	color: var( --wrenio-jacarta );
}

.wrenio-studio-page__header-mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wrenio-studio-page__header-name-text {
	display: inline-block;
}

.wrenio-studio-page__header-meta {
	margin: 0;
	flex-shrink: 0;
	font-family: var( --wrenio-font-mono );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wrenio-jacarta );
	opacity: 0.65;
}

/* Header is a single row: wordmark on the left, version meta on the
   right (auto-spacing pushes it to the far edge). */

.wrenio-studio-page__header {
	justify-content: space-between;
}

.wrenio-studio-page__header-name {
	margin: 0;
}

/* Outer plugin tabs — Wrenio Studio plugin sections. Sit on Cream below
   the header, polished and readable per item 6 / design.md §7. */

.wrenio-studio-page__tabs {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	padding: 0 36px;
	margin: 0 0 24px;
	background: var( --wrenio-cream );
	border: 1px solid var( --wrenio-stone );
	border-top: 0;
	border-radius: 0 0 10px 10px;
}

/* Header sits flush on top of the tab strip — drop the header's bottom
   radius so they look like one unified panel. */

.wrap.wrenio-studio-page .wrenio-studio-page__header {
	border-radius: 10px 10px 0 0;
	margin-bottom: 0;
}

.wrap.wrenio-studio-page .wrenio-studio-page__header + .wrenio-studio-page__tabs {
	margin-top: 0;
}

.wrenio-studio-page__tab {
	display: inline-block;
	padding: 16px 20px;
	font-family: var( --wrenio-font-body );
	font-weight: 500;
	font-size: 14px;
	color: var( --wrenio-ink );
	opacity: 0.7;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition:
		opacity 180ms ease,
		color 180ms ease,
		border-color 180ms ease;
}

.wrenio-studio-page__tab:hover,
.wrenio-studio-page__tab:focus {
	opacity: 1;
	color: var( --wrenio-jacarta );
	outline: none;
}

.wrenio-studio-page__tab.is-active {
	opacity: 1;
	font-weight: 600;
	color: var( --wrenio-jacarta );
	border-bottom-color: var( --wrenio-ember );
}

/* Body layout — single column or two-column with right rail */

.wrenio-studio-page__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.wrenio-studio-page__body--with-rail {
	grid-template-columns: minmax( 0, 1fr ) 280px;
}

@media ( max-width: 960px ) {
	.wrenio-studio-page__body--with-rail {
		grid-template-columns: 1fr;
	}
}

/* ===========================================================================
   5. Inner-tab overrides — WP nav-tab-wrapper inside a Wrenio plugin page.

   Plugin pages can use WP's standard nav-tab-wrapper for sub-section
   navigation (e.g. Settings → General / Features / Logs / etc.). We
   override the WP-default look so the active tab reads white (item 7),
   tabs have 5px top-corner radius (item 8), and the content card below
   has 10px all-corner radius (item 8).
   ========================================================================= */

/* The wp-header-end marker is a WP-machinery element used to position
   admin notices. Hide it completely so it doesn't add layout space. */

.wrap.wrenio-studio-page .wp-header-end {
	display: none;
}

.wrap.wrenio-studio-page .nav-tab-wrapper {
	border-bottom: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
}

.wrap.wrenio-studio-page .nav-tab {
	margin: 0 4px 0 0;
	padding: 10px 18px;
	background: var( --wrenio-stone-tint-medium );
	border: 1px solid var( --wrenio-stone );
	border-radius: 5px 5px 0 0;
	color: var( --wrenio-ink );
	font-family: var( --wrenio-font-body );
	font-weight: 500;
	font-size: 14px;
	box-shadow: none;
	transition:
		background-color 180ms ease,
		color 180ms ease;
}

.wrap.wrenio-studio-page .nav-tab:hover,
.wrap.wrenio-studio-page .nav-tab:focus {
	background: var( --wrenio-stone-tint-light );
	color: var( --wrenio-jacarta );
	box-shadow: none;
}

.wrap.wrenio-studio-page .nav-tab-active,
.wrap.wrenio-studio-page .nav-tab-active:hover,
.wrap.wrenio-studio-page .nav-tab-active:focus,
.wrap.wrenio-studio-page .nav-tab-active:focus:active {
	background: #fff;
	color: var( --wrenio-jacarta );
	border-color: var( --wrenio-stone );
	border-bottom-color: #fff;   /* match content card bg so the active tab merges */
	font-weight: 600;
	box-shadow: none;
}

/* The plugin's existing `.tab-content` div becomes a card. We deliberately
   omit the top border so the line between tabs and content is drawn ONLY
   by each inactive tab's bottom Stone border. Under the active tab, the
   active tab's white bottom border + the absent content-top-border = no
   visible seam. Top-left corner is squared so the active tab can sit
   flush against the content card. */

.wrap.wrenio-studio-page .tab-content {
	background: #fff;
	border: 1px solid var( --wrenio-stone );
	border-top: 0;
	border-radius: 0 10px 10px 10px;
	padding: 24px 28px;
	display: none;
}

.wrap.wrenio-studio-page .tab-content.active {
	display: block;
}

/* ===========================================================================
   6. WP `.card` panels inside Wrenio plugin pages — make them full-width
   so they match the header strip width (item 9).
   ========================================================================= */

.wrap.wrenio-studio-page .card {
	max-width: none;
	background: #fff;
	border: 1px solid var( --wrenio-stone );
	border-radius: 10px;
	padding: 24px 28px;
	box-shadow: none;
}

.wrap.wrenio-studio-page .card + .card {
	margin-top: 16px;
}

/* ===========================================================================
   7. Status badges (per design.md §7)
   ========================================================================= */

.wrenio-studio-badge {
	display: inline-flex;
	align-items: center;
	font-family: var( --wrenio-font-mono );
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 3px;
	border: 1px solid transparent;
}

.wrenio-studio-badge--active {
	background: var( --wrenio-jacarta );
	color: var( --wrenio-cream );
}

.wrenio-studio-badge--live {
	background: var( --wrenio-ember );
	color: #fff;
}

.wrenio-studio-badge--neutral {
	background: var( --wrenio-stone );
	color: var( --wrenio-ink );
}

.wrenio-studio-badge--soon {
	background: transparent;
	color: var( --wrenio-ink );
	opacity: 0.6;
	border-color: var( --wrenio-stone );
}

/* Pro lock-marker — Ember filled, used inline next to locked feature labels.
   See design.md §10: locked features are visible, not hidden. */

.wrenio-studio-badge--pro {
	background: var( --wrenio-ember );
	color: #fff;
}

/* Pro-locked button: a link styled to look like the WP button it stands in
   for, with the inline Pro badge attached. Matches the live button's visual
   weight so locked surfaces don't dim or hide — they just signal "Pro". */

.wrenio-studio-pro-button {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.wrenio-studio-pro-button .wrenio-studio-badge--pro {
	margin-left: 2px;
}

.wrenio-studio-pro-button:hover .wrenio-studio-badge--pro {
	background: var( --wrenio-ember-hover );
}

/* ===========================================================================
   8. Brand link + footer signature
   The hero logo on the dashboard is a link to wrenio.studio. Every Wrenio
   admin page also ends in a small footer signature line. See design.md §13.
   ========================================================================= */

.wrenio-studio-hero__brand-link {
	display: inline-block;
	text-decoration: none;
	transition: opacity 180ms ease;
	border-radius: 4px;
}

.wrenio-studio-hero__brand-link:hover,
.wrenio-studio-hero__brand-link:focus {
	opacity: 0.85;
	outline: none;
}

.wrenio-studio-hero__brand-link:focus {
	box-shadow:
		0 0 0 2px var( --wrenio-cream ),
		0 0 0 4px var( --wrenio-jacarta );
}

.wrenio-studio-footer {
	margin: 24px 0 0;
	padding: 18px 0 4px;
	text-align: center;
	font-family: var( --wrenio-font-mono );
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wrenio-ink );
	opacity: 0.55;
}

.wrenio-studio-footer__link {
	color: var( --wrenio-jacarta );
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 180ms ease, opacity 180ms ease;
}

.wrenio-studio-footer__link:hover,
.wrenio-studio-footer__link:focus {
	border-bottom-color: var( --wrenio-jacarta );
	outline: none;
}

.wrenio-studio-footer__version {
	color: var( --wrenio-ink );
}

/* ===========================================================================
   9. Responsive — hero stacks on narrow screens; tabs and headers tighten
   ========================================================================= */

@media ( max-width: 720px ) {
	.wrenio-studio-section,
	.wrenio-studio-section--hero {
		padding: 28px 24px;
	}

	.wrenio-studio-hero {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.wrenio-studio-hero__logo {
		width: 220px;
	}

	.wrenio-studio-page__header {
		padding: 22px 22px;
	}

	.wrenio-studio-page__tabs {
		padding-left: 12px;
		padding-right: 12px;
	}

	.wrenio-studio-page__header-name {
		font-size: 22px;
	}
}
