style.scss

/**
 * Saddle admin styles — calm, modern, person-first.
 *
 * Powered by the PlugPress design system (@plugpress/ui). Saddle overrides the
 * shared --pp-* tokens below to carry its own brand, and every
 * --s-* token then aliases one of those. Light-only (the design system dropped
 * dark mode in v0.2.0). See DESIGN-ALIGNMENT.md for the palette and the rules
 * that govern where the accent is allowed to land.
 */

// ---------------------------------------------------------------------------
// Brand tokens — Saddle's palette, written over the design system's.
//
// The DS defines its tokens inside :where(), which has ZERO specificity, so a
// plain class selector wins with no !important. Both .pp-app and the body class
// are needed: portaled overlays (Dialog, DropdownMenu, Select, Tooltip, toasts)
// render OUTSIDE .pp-app and would lose every token without the body half.
//
// This is a consumer-side override, not a library edit. Never change anything
// under node_modules/@plugpress/ui — see the consumer agent guide.
//
// THE RULE THAT GOVERNS THE WHOLE PALETTE: every color has a bright value for
// FILLS and a darker same-hue value for TEXT. Three of the four brand hexes
// cannot carry text at all — lime is 1.98:1 on white, cyan 2.43, coral 3.67 —
// so using the bright value for a label is an accessibility regression, not a
// style choice. The DS mandates this same split for the accent
// (--pp-accent = surfaces, 3:1; --pp-accent-text = links and labels, 4.5:1).
// ---------------------------------------------------------------------------
body.toplevel_page_saddle,
body.pp-scope,
.saddle-app,
.pp-app {
	// Neutral ramp. No DS component reads --pp-n-* directly — all eleven are
	// consumed only by the ten semantic aliases below them — so warming the
	// ramp warms the entire neutral system in one place. Same lightness steps
	// as the DS ramp, so nothing about the visual hierarchy moves.
	--pp-n-50: #fafafa;
	--pp-n-100: #fbfbfa; // Warm White -> --pp-canvas, the page ground
	--pp-n-200: #efeeec;
	--pp-n-300: #e7e6e4;
	--pp-n-400: #d4d2cf;
	--pp-n-500: #aaa8a4;
	--pp-n-600: #767471; // --pp-text-muted   — 4.50 on page (DS ships 4.40)
	--pp-n-700: #64625d; // --pp-text-secondary — 5.88 on page
	--pp-n-800: #444341;
	--pp-n-900: #292928;
	--pp-n-950: #111111; // Near Black -> --pp-text, 18.24 on page

	// Cards stay pure white against the warm page, a 1.04:1 step, so the
	// hairline border carries the separation rather than a tonal shift.
	--pp-surface: #ffffff;

	// Accent. --pp-accent paints surfaces and needs 3:1; --pp-accent-text
	// paints links and labels and needs 4.5:1 measured against the TINT, not
	// just white.
	//
	// The brand colour is 3.31:1 on white: comfortably enough to be SEEN, not
	// enough to be READ. So it is the fill everywhere a fill belongs — dots,
	// the focus ring, the active nav row, bar fills — and the darker step of
	// the same hue carries every label. The violet this replaced cleared both
	// at 5.84, which made the two tokens nearly interchangeable and hid how
	// load-bearing the split is; here it is doing real work.
	--pp-accent: #da5cc7; // the brand colour, exactly as given
	--pp-accent-hover: #a82595;
	--pp-accent-text: #bd2ba7; // 4.99 on the page, 4.80 on the tint
	--pp-accent-tint: #fdf4fc;
	--pp-accent-muted: rgba( 218, 92, 199, 0.12 );
	--pp-on-accent: #ffffff;

	// Primary buttons. The DS guide reserves these for near-black and says the
	// accent is for links and nav only; Saddle deviates deliberately (Fahim,
	// 2026-08-25 — see DESIGN-ALIGNMENT.md). They take the readable step, not
	// the brand colour itself: white on #da5cc7 is 3.31:1, which is a button
	// label people cannot read. White on this is 5.16.
	--pp-action: #bd2ba7;
	--pp-action-hover: #a82595;
	--pp-on-action: #ffffff;

	// --pp-focus is NOT part of the accent contract: it is a separate literal
	// in ui.css that no accent file touches, which is why Saddle shipped a
	// monochrome accent with a WordPress-blue focus ring until #153. A ring is
	// a mark, so it takes the brand colour.
	--pp-focus: #da5cc7;

	// Status. These paint MARKS — status dots, rings, small fills — so each has
	// to clear 3:1 on a white card to be seen at all. The brand palette's lime
	// (#84cc16) and cyan (#06b6d4) are the -500 step of their ramps and sit at
	// 1.98:1 and 2.43:1 on white: invisible as a dot, and far worse than what
	// the DS ships. Each is moved one step down its own ramp, so the family and
	// the hue are the brand's but the mark can actually be seen. Coral is
	// already at 3.67:1 and is used exactly as given. Labels never use these —
	// they use the -text partners at the tone layer below.
	--pp-success: #65a30d; // Lime, one step down — 3.09 on white
	--pp-success-bg: #f7fee7;
	--pp-info: #0891b2; // Cyan, one step down — 3.68 on white
	--pp-info-bg: #ecfeff;
	--pp-warning: #d97706; // Amber — 3.19 on white
	--pp-warning-bg: #fffbeb;
	--pp-danger: #f43f5e; // Coral, exactly as given — 3.67 on white
	--pp-danger-hover: #be123c;
	--pp-danger-bg: #fff1f2;

	// Geometry. Tighter than the DS ships, to sit closer to wp-admin's own
	// square-ish register — core buttons are 3px and its boxes are 0-4px —
	// while staying a hair softer than core so it still reads as modern.
	// The pill is untouched: badges, dots and status chips stay fully round.
	--pp-r-sm: 3px;
	--pp-r: 4px;
	--pp-r-lg: 6px;

	// Flatter surfaces. wp-admin draws structure with hairlines, not elevation,
	// so cards lean on the border and keep shadow for things that genuinely
	// float. Overlays (dialogs, menus, toasts) keep the DS's own md/lg shadows.
	--pp-shadow-xs: none;
	--pp-shadow-sm: 0 1px 2px rgba( 17, 17, 17, 0.04 );
}

// The DS derives --pp-tone-text from --pp-tone for the status tones, so a
// bright --pp-success would mean lime badge TEXT at 1.9:1. Put the readable
// partner back at the tone layer — the same seam the accent tone already uses
// (--pp-tone-text: var( --pp-accent-text )). All four clear AA on their own
// tint: 4.82 / 5.15 / 4.84 / 5.72.
.pp-tone--success {
	--pp-tone-text: #4d7c0f;
}

.pp-tone--info {
	--pp-tone-text: #0e7490;
}

.pp-tone--warning {
	--pp-tone-text: #b45309;
}

.pp-tone--danger {
	--pp-tone-text: #be123c;
}

// Code panels read --pp-code-bg from --pp-action, but hard-code their border,
// muted and body colors — so an accent-coloured action token would leave 35
// CodeBlock / Snippet instances on that ground with muted text far below AA.
// Pin the ground
// back to near-black: code blocks look exactly as they did, and stop being
// coupled to the button color. Upstream fix belongs in plugpress-ui.
.pp-code--dark {
	--pp-code-bg: var( --s-code-bg );
}

// Every --s-* token aliases a shared design-system --pp-* token, so Saddle's
// whole stylesheet rides the palette above. The old s-palette-light/dark mixins
// and saddle-theme-* classes are retired.
//
// Requires the page body to carry .pp-scope and .saddle-app to carry .pp-app
// (both are applied) so the --pp-* tokens resolve here.
body.toplevel_page_saddle,
.saddle-app {
	// Neutrals + status — resolve straight to the shared tokens.
	--s-canvas: var( --pp-canvas );
	--s-bg: var( --pp-surface );
	--s-fg: var( --pp-text );
	--s-fg-muted: var( --pp-text-secondary );
	--s-fg-subtle: var( --pp-text-muted );
	--s-border: var( --pp-border );
	--s-border-strong: var( --pp-border-strong );
	--s-surface-2: var( --pp-surface-alt );
	--s-surface-3: var( --pp-surface-hover );

	--s-action: var( --pp-action );
	--s-on-action: var( --pp-on-action );

	--s-accent: var( --pp-accent );
	--s-accent-text: var( --pp-accent-text );

	// Status, in fill/text pairs. Reach for -text whenever the color lands on
	// a label, and for the plain token whenever it fills a shape.
	--s-safe: var( --pp-success );
	--s-safe-bg: var( --pp-success-bg );
	--s-safe-text: #4d7c0f;
	--s-active: var( --pp-warning );
	--s-active-bg: var( --pp-warning-bg );
	--s-active-text: #b45309;
	--s-danger: var( --pp-danger );
	--s-danger-text: #be123c;

	// Thin elements are the exception to "bright fills": a 2px rail or a
	// hairline at 1.9:1 is simply not there. The Permissions lane rails are how
	// that screen is scanned, so they take the readable step.
	--s-rail-safe: var( --s-safe-text );
	--s-rail-change: var( --pp-accent );
	--s-rail-remove: var( --s-active-text );

	--s-focus: var( --pp-focus );

	// Code panels stay dark by design, and are deliberately NOT the action
	// color — see the .pp-code--dark rule above.
	--s-code-bg: #171717;

	--s-shadow-sm: var( --pp-shadow-sm );
	--s-shadow-md: var( --pp-shadow-md );
}

// ---------- App shell: Saddle owns its canvas on this screen ----------
// Scoped to the page body class, so nothing leaks to the rest of wp-admin.
body.toplevel_page_saddle {
	#wpcontent {
		padding-inline-start: 0;
		background: var(--s-canvas);
	}

	#wpbody-content {
		padding-bottom: 0;
		background: var(--s-canvas);
		min-height: calc( 100vh - var( --wp-admin--admin-bar--height, 32px ) );
		box-sizing: border-box;
	}

	.wrap {
		margin: 0;
	}

	// The app provides its own quiet ending; wp-admin's footer breaks the calm.
	#wpfooter {
		display: none;
	}
}

// The skip link needs no override here: @plugpress/ui v0.11.3 hides it by
// clipping rather than by a percentage transform, which is what made it show
// up over wp-admin's admin bar. Fixed at source — see saddle#74.

.saddle-app {
	--s-radius: var( --pp-r );
	--s-radius-lg: var( --pp-r-lg );
	--s-radius-pill: var( --pp-r-pill );
	--s-ease: cubic-bezier( 0.4, 0, 0.2, 1 );
	--s-dur: 160ms;

	box-sizing: border-box;
	// The DS AppShell owns the layout: sticky rail + centered AppContent
	// column. This wrapper only carries tokens and typography.
	color: var(--s-fg);
	-webkit-font-smoothing: antialiased;

	&--loading {
		display: flex;
		justify-content: center;
		padding: 120px 0;
	}

	// Onboarding is a separate return branch (no shell) — same 960 column as
	// the app pages so finishing setup doesn't jump widths; the step content
	// keeps a 640px centered reading measure (mirrors .saddle-wizard__step).
	&--setup {
		max-width: 960px;
		margin: 0 auto;
		padding: 28px 24px 72px;

		.saddle-setup__body {
			max-width: 640px;
			margin-inline: auto;
		}
	}

	button:focus-visible,
	[role='radio']:focus-visible,
	a:focus-visible {
		outline: 2px solid var(--s-focus);
		outline-offset: 2px;
		box-shadow: none;
	}

	button {
		touch-action: manipulation;
	}

	// wp-admin hardcodes heading and link colors for a light admin; inside
	// the app they follow the theme tokens instead.
	h1,
	h2,
	h3,
	h4 {
		color: inherit;
	}

	a:not( [class] ) {
		color: var(--s-focus);
	}
}

/* ---------- Foreign notices (quarantined wp-admin notices) ---------- */

// Parked in the top bar, not the content column: WordPress forces other
// plugins' notices onto every screen, and a strip above the page pushed the
// actual work down on arrival. The count stays visible so a real update or
// security warning is never silently swallowed.
.saddle-foreign {
	max-width: min(520px, calc(100vw - 32px));
	max-height: 60vh;
	overflow-y: auto;

	&__button {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 28px;
		padding: 0 10px;
		border: 1px solid var(--s-border);
		border-radius: var( --s-radius-pill );
		background: var(--s-bg);
		color: var( --s-fg-muted );
		font-size: 12px;
		line-height: 1;
		cursor: pointer;

		svg {
			width: 14px;
			height: 14px;
		}

		&:hover {
			color: var( --s-fg );
			border-color: var(--s-border-strong);
		}
	}

	&__head {
		margin-bottom: 8px;
		color: var( --s-fg-subtle );
		font-size: 12px;
	}

	// Foreign notices were written for a light admin — keep them on a light
	// island rather than restyling markup we don't own.
	&__list {
		color-scheme: light;

		.notice,
		div.updated,
		div.error {
			position: relative;
			margin: 0 0 8px;
			background: #fff;
			color: #1e1e1e;
		}

		> *:last-child {
			margin-bottom: 0;
		}
	}
}

// Right cluster of the top bar: notices sit beside the safety pill.
.saddle-topbar__right {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ---------- Shell: DS AppShell sidebar variant ---------- */
// The rail, groups, footer pinning, and the <782px icon-rail collapse are all
// design-system behavior (.pp-shell / .pp-nav / .pp-content). Saddle only adds
// its accent-tinted active row, the safety pill, and the content rhythm.

// Refined active state: the DS already tints the icon accent; add a calm
// saddle-tinted chip so the active row reads at a glance (Waggle parity).
// The brand mark is a single `currentColor` path shared with the wp-admin menu
// icon, so it is recolored HERE rather than in the SVG — editing the file would
// break class-saddle-settings.php's `black` sentinel, which core's svg-painter
// needs to repaint the menu icon per the user's admin color scheme.
.pp-nav__brand svg {
	color: var(--s-accent);
}

.saddle-app .pp-nav__item[aria-current='page'] {
	background: color-mix(in srgb, var(--pp-accent) 12%, var(--pp-surface));
}

// Slim sticky context bar above the content column. pp-shell__main is not a
// scroll container (the document scrolls), so the bar sticks to the viewport
// below the wp-admin bar — the same offset the DS rail uses. Negative margins
// cancel pp-shell__main's padding so the bar runs edge-to-edge with a
// full-width hairline.
.saddle-topbar {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 32px);
	z-index: var(--pp-z-sticky);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 48px;
	margin: calc(-1 * var(--pp-space-6)) calc(-1 * var(--pp-space-6))
		var(--pp-space-5);
	padding: 0 var(--pp-space-6);
	background: var(--pp-surface-glass);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--s-border);

	&__context {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&__group,
	&__sep {
		color: var(--s-fg-subtle);
	}
	&__title {
		font-weight: 600;
		color: var(--s-fg);
	}
}

// The safety-status pill on the topbar's right — the tone signal the old
// rail pill carried, now a button that jumps to Settings.
.saddle-status-pill {
	appearance: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 7px;
	padding: 5px 12px;
	border-radius: var(--s-radius-pill);
	font: inherit;
	font-size: 12px;
	font-weight: 550;
	background: var(--s-surface-3);
	color: var(--s-fg-muted);

	&--safe {
		background: var(--s-safe-bg);
		color: var(--s-safe-text);
	}
	&--active {
		background: var(--s-active-bg);
		color: var(--s-active-text);
	}
	&--paused {
		background: var(--s-surface-3);
		color: var(--s-fg-subtle);
	}
}

@media (max-width: 782px) {
	.saddle-topbar {
		padding: 0 var(--pp-space-4);
	}
}

@media (max-width: 600px) {
	.saddle-topbar__group,
	.saddle-topbar__sep {
		display: none;
	}
}

// The content column stacks its direct children (notices, the page pane) with
// one rhythm. Pages keep their own internal spacing — they predate the shell.
.saddle-app .pp-content {
	display: grid;
	gap: var(--pp-space-5);
	align-content: start;
}

// New pages built for the shell stack their cards on the same rhythm.
.saddle-integrations,
.saddle-settings,
.saddle-memory {
	display: grid;
	gap: var(--pp-space-5);
	align-content: start;
}

/* Section switches ease in rather than snapping. */
.saddle-tabpane {
	animation: saddle-step-in 0.24s var(--s-ease) both;
}

/* ---------- Onboarding ---------- */

.saddle-setup {
	background: var(--s-bg);
	border: 1px solid var(--s-border);
	border-radius: var(--s-radius-lg);
	box-shadow: var(--s-shadow-md);
	padding: 28px 32px 32px;
	margin-top: 24px;

	&__head {
		display: flex;
		align-items: center;
		gap: 10px;
		padding-bottom: 24px;
		border-bottom: 1px solid var(--s-border);
	}

	&__mark {
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--s-action);
		color: var(--s-on-action);
		border-radius: 8px;
		font-weight: 650;
		letter-spacing: -0.03em;
	}

	&__kicker {
		font-weight: 600;
		font-size: 14px;
	}

	&__steps {
		margin-left: auto;
		font-size: 13px;
		color: var(--s-fg-subtle);
		font-variant-numeric: tabular-nums;
	}

	&__body {
		padding-top: 28px;
	}

	&__title {
		margin: 0 0 12px;
		font-size: 27px;
		line-height: 1.2;
		font-weight: 660;
		letter-spacing: -0.02em;
		text-wrap: balance;
	}

	&__lead {
		margin: 0 0 24px;
		font-size: 15px;
		line-height: 1.6;
		color: var(--s-fg-muted);
		text-wrap: pretty;
	}

	&__actions {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 28px;
	}

}

.saddle-promises {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;

	li {
		position: relative;
		padding-left: 28px;
		font-size: 14px;
		color: var(--s-fg);

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 3px;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: var(--s-safe-bg);
			box-shadow: inset 0 0 0 1.5px var(--s-safe-text);
		}
		&::after {
			content: '✓';
			position: absolute;
			left: 3.5px;
			top: 1px;
			font-size: 11px;
			font-weight: 700;
			color: var(--s-safe-text);
		}
	}
}

/* ---------- Home ---------- */
// Hero, next-step callout, cards, and app rows come from the design system;
// only the compact activity list (no DS timeline primitive) stays ours.

// The Dashboard's lead. One sentence carrying the whole answer, so it gets the
// size and the room a heading would get — and the supporting counts get as
// little as they can while staying legible. No box: the statement is the
// content, and a card around it would be chrome competing with it.
.saddle-lede {
	margin: 0 0 28px;

	&__headline {
		max-width: 34ch;
		margin: 0;
		font-size: 24px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: -0.02em;
		color: var(--s-fg);
	}

	&__facts {
		margin: 8px 0 0;
		font-size: 13px;
		line-height: 1.55;
		color: var(--s-fg-subtle);
		font-variant-numeric: tabular-nums;
	}
}

.saddle-cards {
	margin-top: 16px;
}

.saddle-card__empty {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--s-fg-muted);
}

.saddle-activitylist {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;

	li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		font-size: 14px;
	}

	&__summary {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		.pp-badge {
			margin-right: 8px;
			vertical-align: middle;
		}
	}

	&__target {
		flex: 0 0 auto;
		color: var(--s-fg-subtle);
		font-size: 12px;
		font-variant-numeric: tabular-nums;
	}
}

/* ---------- Permissions ---------- */

// Disclosures ("See everything…", "Connection details & health") ride the
// design system's Collapsible; give them breathing room above.
.saddle-perm__all,
.saddle-apps__more {
	margin-top: 24px;
}

// Per-app setup guide drawer: three numbered sections with one rhythm.
.saddle-setup-guide {
	display: grid;
	gap: 20px;

	&__app {
		display: flex;
		align-items: center;
		gap: 10px;
		font-weight: 600;

		img {
			width: 24px;
			height: 24px;
		}
	}

	&__step {
		display: grid;
		gap: 10px;
		justify-items: start;

		h3 {
			margin: 0;
			font-size: 13px;
			font-weight: 640;
			color: var(--s-fg);
		}

		p {
			margin: 0;
			font-size: 13px;
			line-height: 1.55;
			color: var(--s-fg-muted);
		}

		.pp-codeblock,
		.pp-snippet {
			width: 100%;
		}
	}
}

// The already-connected choice card on the wizard's pick step.
.saddle-wizard__duplicate {
	margin-bottom: 20px;
}

// Quiet destructive row action (e.g. Disconnect) — link button, danger ink.
.saddle-link-danger {
	color: var(--s-danger-text);

	&:hover:not( :disabled ) {
		color: var(--s-danger-text);
	}
}

/* ---------- Guidance ---------- */

// Each guidance section is a DS Card; only the rhythm between them is ours.
.saddle-guide__block {
	margin-bottom: 16px;

	&:last-child {
		margin-bottom: 0;
	}
}

/* Readable rendering of the auto-context (vs the raw monospace view). */
.saddle-doc {
	border: 1px solid var(--s-border);
	border-radius: var(--s-radius);
	background: var(--s-surface-2);
	padding: 16px 18px;
	max-height: 340px;
	overflow: auto;

	&__h {
		margin: 18px 0 8px;
		font-size: 13px;
		font-weight: 640;
		letter-spacing: 0.01em;
		color: var(--s-fg);

		&:first-child {
			margin-top: 0;
		}

		&--sub {
			font-size: 12px;
			color: var(--s-fg-muted);
		}
	}

	&__p {
		margin: 0 0 8px;
		font-size: 13px;
		line-height: 1.6;
		color: var(--s-fg-muted);
	}

	&__list {
		margin: 0 0 10px;
		padding-left: 18px;
		display: flex;
		flex-direction: column;
		gap: 5px;

		li {
			font-size: 13px;
			line-height: 1.55;
			color: var(--s-fg-muted);
		}
	}

	// Bare variant for drawer prose — typography only, no panel chrome.
	&--bare {
		border: none;
		background: none;
		padding: 0;
		max-height: none;
		overflow: visible;
	}
}

/* ---------- Memory ---------- */

// Compose column — form reading measure, never card-wide at 960.
.saddle-memory__compose {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	width: 100%;
	max-width: 560px;

	.pp-field {
		width: 100%;
	}
}

.saddle-memory__empty {
	margin: 0;
	font-size: 13px;
	color: var(--s-fg-subtle);
}

.saddle-guide__rawtoggle {
	margin-top: 10px;
}

.saddle-guide__system {
	margin-top: 0;
	max-height: 320px;
	overflow: auto;
	white-space: pre-wrap;
	color: var(--s-fg-muted);
}

.saddle-guide__actions {
	margin-top: 12px;
}

.saddle-guide__actions--stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

/* ---------- Lanes + chips (Permissions detail) ---------- */

.saddle-lanes__hint {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--s-fg-subtle);
}

.saddle-lanes__filter {
	appearance: none;
	margin-top: 12px;
	width: 100%;
	max-width: 320px;
	padding: 7px 12px;
	font: inherit;
	font-size: 13px;
	color: var(--s-fg);
	background: var(--s-bg);
	border: 1px solid var(--s-border);
	border-radius: var(--s-radius-pill);

	&:focus-visible {
		outline: 2px solid var(--s-focus);
		outline-offset: 2px;
	}
}

.saddle-lanes {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 14px;

	@media ( max-width: 900px ) {
		grid-template-columns: 1fr;
	}
}

.saddle-lane {
	border: 1px solid var(--s-border);
	border-radius: var(--s-radius-lg);
	padding: 18px;
	background: var(--s-bg);
	transition: opacity var(--s-dur) var(--s-ease);

	&.is-off {
		opacity: 0.6;
		background: var(--s-surface-2);
	}

	&__head {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	&__title {
		margin: 0;
		font-size: 14px;
		font-weight: 620;
	}

	&__count {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--s-fg-subtle);
	}

	&__rail {
		height: 2px;
		border-radius: 2px;
		margin: 12px 0;
		background: var(--s-border);
	}
	// A 2px rail is a thin element: the bright status values sit at ~1.9:1 on
	// white and would simply not be there. These take the readable step, which
	// is what makes the three lanes scannable at a glance.
	&--look.is-on &__rail {
		background: var(--s-rail-safe);
	}
	&--change.is-on &__rail {
		background: var(--s-rail-change);
	}
	&--remove.is-on &__rail {
		background: var(--s-rail-remove);
	}
}

.saddle-catgroup {
	margin-top: 12px;

	&__title {
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 0 0 6px;
		font-size: 11px;
		font-weight: 620;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--s-fg-subtle);
	}

	&__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 16px;
		padding: 0 5px;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0;
		color: var(--s-fg-subtle);
		background: var(--s-surface-2);
		border-radius: var(--s-radius-pill);
	}
}

.saddle-lane__empty {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--s-fg-subtle);
}

.saddle-chips {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.saddle-chip {
	appearance: none;
	font: inherit;
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--s-border);
	border-radius: 7px;
	background: var(--s-bg);
	cursor: pointer;
	text-align: left;
	transition: opacity var(--s-dur) var(--s-ease),
		background var(--s-dur) var(--s-ease);

	&:hover {
		background: var(--s-surface-2);
	}

	&.is-off {
		opacity: 0.5;
	}
	&.is-on {
		border-color: var(--s-border-strong);
	}

	&.is-disabled {
		opacity: 0.55;
		background: var(--s-surface-2);

		.saddle-chip__label {
			text-decoration: line-through;
			text-decoration-color: var(--s-fg-subtle);
		}
	}

	&__label {
		font-size: 13px;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__shield {
		flex: 0 0 auto;
		font-size: 10px;
		font-weight: 500;
		letter-spacing: 0.02em;
		color: var(--s-active-text);
		background: var(--s-active-bg);
		border-radius: var(--s-radius-pill);
		padding: 2px 8px;
		white-space: nowrap;
	}

	&__off {
		flex: 0 0 auto;
		font-size: 10px;
		font-weight: 500;
		letter-spacing: 0.02em;
		color: var(--s-fg-subtle);
		background: var(--s-surface-3);
		border-radius: var(--s-radius-pill);
		padding: 2px 8px;
		white-space: nowrap;
	}
}

/* ---------- Connect tab (apps management) ---------- */
// Header, empty state, app rows, the disconnect confirm, and the endpoint
// snippet all come from the design system now.

// A title and its "?" sit on one baseline wherever Titled is used.
.saddle-apps__titled {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

// Both connection kinds share one card, so the card body owns the rhythm
// between them rather than each list carrying its own margins.
.saddle-apps__cardbody {
	display: grid;
	gap: var(--pp-space-4);

	// The card IS the container now. Left alone, the DS RowList draws its own
	// 1px/12px box inside the card's identical one — the same border twice,
	// 25px apart, which reads as a mistake rather than as structure.
	.pp-rowlist {
		border: 0;
		border-radius: 0;
		background: transparent;
	}
}

// The labelled rule introducing the sign-in group. This replaces the old
// .saddle-apps__subhead, which was referenced in JSX but styled NOWHERE — so
// wp-admin's reset left it at margin:0 and it collided with the list above.
.saddle-apps__divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: var(--pp-space-2);
	color: var( --s-fg-muted );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;

	&::after {
		content: '';
		flex: 1;
		height: 1px;
		background: var(--s-border);
	}
}

// Quiet closing line inside the card: a real link plus its "?".
.saddle-apps__cardfoot {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 12px;

	a {
		color: var( --s-fg-muted );
	}
}

/* Advanced: endpoint details + health, behind the disclosure. */
.saddle-apps__advanced {
	margin-top: 10px;
	padding: var(--pp-space-5) var(--pp-space-5);
	background: var(--s-surface-2);
	border: 1px solid var(--s-border);
	border-radius: var(--s-radius-lg);
	display: grid;
	gap: var(--pp-space-4);
}

// Stacked label above the control — the DS Snippet's inline label bar squeezed
// the title and a long URL into one short row.
.saddle-apps__field {
	display: grid;
	gap: 6px;
}

.saddle-apps__fieldlabel {
	color: var( --s-fg-muted );
	font-size: 12px;
	font-weight: 600;
}

.saddle-apps__test {
	display: flex;
	align-items: center;
	gap: 12px;
}

.saddle-apps__transport {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 12px;
	color: var(--s-fg-subtle);
}


.saddle-wizard__lead--muted {
	color: var(--s-fg-subtle);
	font-size: 13px;
}

/* ---------- Connect wizard ---------- */

.saddle-wizard {
	background: var(--s-bg);
	border: 1px solid var(--s-border);
	border-radius: var(--s-radius-lg);
	box-shadow: var(--s-shadow-sm);
	padding: 26px 32px 36px;
	min-height: 420px;
}

.saddle-wizard__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 30px;
}

/* Each step slides gently into place. */
.saddle-wizard__step {
	max-width: 640px;
	margin: 0 auto;
	animation: saddle-step-in 0.28s var(--s-ease) both;
}

@keyframes saddle-step-in {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.saddle-wizard__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 640;
	letter-spacing: -0.02em;
}

.saddle-wizard__lead {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--s-fg-muted);
	max-width: 60ch;
	text-wrap: pretty;
}

// Lobe brand logos in the app picker size via font-size (1em square).
.saddle-wizard__apps .pp-selcard__icon {
	font-size: 24px;
}

/* The generated setup: DS CodeBlock + our own primary copy button below it. */
.saddle-wizard__config {
	margin: 0 0 18px;
}

.saddle-wizard__copy {
	margin-top: 10px;
}

/* What this app will be able to do — always visible where the key is issued. */
.saddle-wizard__cando {
	margin: 0 0 16px;

	&-note {
		margin: 6px 0 0;
		font-size: 12.5px;
		color: var(--s-fg-muted);
	}
}

.saddle-wizard__hint {
	margin: 0 0 16px;
	font-size: 12.5px;
	color: var(--s-fg-subtle);
}

.saddle-wizard__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 26px;

	&--center {
		justify-content: center;
	}
}

.saddle-wizard__prompt {
	margin-bottom: 6px;
}

.saddle-wizard__listening {
	display: flex;
	align-items: center;
	margin-top: 22px;
	font-size: 13.5px;
	color: var(--s-fg-muted);
}

.saddle-wizard__trouble {
	margin-top: 22px;
	animation: saddle-step-in 0.28s var(--s-ease) both;

	ul {
		margin: 0 0 10px;
		padding-left: 18px;
		font-size: 13px;
		line-height: 1.55;
		color: var(--s-fg-muted);

		li {
			margin-bottom: 6px;
		}
	}

	.saddle-health {
		margin-top: 0;
		margin-bottom: 12px;
	}
}

/* Done — a drawn check, then quiet. */
.saddle-wizard__step--done {
	text-align: center;
	padding-top: 26px;

	.saddle-wizard__lead {
		margin-left: auto;
		margin-right: auto;
		max-width: 46ch;
	}
}

.saddle-wizard__check {
	display: inline-flex;
	margin-bottom: 16px;

	svg {
		width: 64px;
		height: 64px;
		fill: none;
		stroke: var(--s-safe-text);
		stroke-width: 3;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	circle {
		stroke-dasharray: 151;
		stroke-dashoffset: 151;
		animation: saddle-draw 0.5s var(--s-ease) forwards;
	}

	path {
		stroke-dasharray: 36;
		stroke-dashoffset: 36;
		animation: saddle-draw 0.35s 0.4s var(--s-ease) forwards;
	}
}

@keyframes saddle-draw {
	to {
		stroke-dashoffset: 0;
	}
}

/* Server-side connection health (auth-header self-check). The warning card
   itself is the design system's CalloutCard; these style its innards and the
   one-line status paragraphs. */
.saddle-health {
	margin-top: 14px;
	font-size: 13px;

	&--checking {
		display: flex;
		align-items: center;
		gap: 6px;
		color: var(--s-fg-subtle);
	}

	&--ok {
		color: var(--s-safe-text);
		font-weight: 600;
	}

	&--muted {
		color: var(--s-fg-subtle);
	}

	&__body {
		margin: 0 0 12px;
		color: var(--s-fg-muted);
		line-height: 1.55;
	}

	&__error {
		color: var(--s-danger-text);
	}

	&__actions {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 12px;
	}
}

/* ---------- Motion preferences ---------- */

@media ( prefers-reduced-motion: reduce ) {
	.saddle-app *,
	.saddle-app *::before,
	.saddle-app *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---------- Activity page ---------- */

.saddle-activity {
	&__title {
		margin: 0 0 4px;
		font-size: 20px;
		font-weight: 660;
		letter-spacing: -0.02em;
	}

	&__lead {
		margin: 0 0 18px;
		font-size: 13.5px;
		color: var(--s-fg-muted);
		max-width: 64ch;
	}

	// The pills themselves are the design system's FilterTabs.
	&__filters {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 20px;
	}

	&__total {
		margin-inline-start: auto;
		font-size: 12px;
		color: var(--s-fg-subtle);
		font-variant-numeric: tabular-nums;
	}

	&__loading {
		display: flex;
		justify-content: center;
		padding: 60px 0;
	}

	&__day {
		margin-bottom: 22px;
	}

	&__daylabel {
		margin: 0 0 8px;
		font-size: 12px;
		font-weight: 620;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--s-fg-subtle);
	}

	&__list {
		margin: 0;
		background: var(--s-bg);
		border: 1px solid var(--s-border);
		border-radius: var(--s-radius-lg);
		box-shadow: var(--s-shadow-sm);
		overflow: hidden;
	}

	&__row {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		margin: 0;
		padding: 12px 16px;

		& + & {
			border-top: 1px solid var(--s-border);
		}
	}

	&__mark {
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		margin-top: 6px;
		border-radius: 50%;
		background: var(--s-safe);

		.saddle-activity__row.is-denied & {
			background: var(--s-danger);
		}
	}

	&__body {
		flex: 1;
		min-width: 0;
	}

	&__summary {
		display: block;
		font-size: 13.5px;
		line-height: 1.5;
		overflow-wrap: anywhere;
	}

	&__meta {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 3px;
		font-size: 11.5px;
		color: var(--s-fg-subtle);
	}

	&__action {
		padding: 1px 6px;
		background: var(--s-surface-3);
		border-radius: 5px;
		font-size: 11px;
		color: var(--s-fg-muted);
	}

	&__time {
		flex: 0 0 auto;
		font-size: 11.5px;
		color: var(--s-fg-subtle);
		font-variant-numeric: tabular-nums;
		margin-top: 2px;
	}

	&__more {
		display: flex;
		justify-content: center;
		margin-top: 4px;
	}
}

/* Skills + memory rows (Guidance tab) — DS RowList with an expandable body. */
.saddle-rows {
	margin: 12px 0;

	&__body {
		margin: 8px 0 12px;
		max-height: 320px;
		overflow: auto;
	}
}

// A Switch with its visible label beside it.
.saddle-toggle-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;

	span {
		font-size: 13px;
		color: var(--s-fg);
	}
}

// Trailing action links inside a DS Notice (e.g. the domain warning).
.saddle-notice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

/* Unsplash key card (Integrations tab) — entry form or masked status row.
   Spacing comes from the page's grid rhythm. */
.saddle-unsplash {
	&__hint {
		margin: 8px 0 12px;
		font-size: 12px;
		color: var(--s-fg-muted);
	}

	&__actions {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	&__configured {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 8px;

		span {
			font-size: 13px;
			color: var(--s-fg);
		}
	}
}

/* Integrations page — partner-detection hint under the rows. */
.saddle-integrations__hint {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--s-fg-muted);
}

/* Settings page — About card's link row. */
.saddle-settings__links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* Client traffic — the MCP request record. Deliberately plain: this is a
   diagnostic readout, not a dashboard, and it should read like evidence. */
.saddle-mcp-diag {
	&__health {
		margin: 0 0 8px;
		font-size: 13px;
	}

	&__degraded {
		margin: 0 0 12px;
		font-size: 13px;
		color: var(--s-danger-text);
	}

	&__actions {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 12px;
	}

	&__hint,
	&__empty {
		margin: 0 0 12px;
		font-size: 13px;
		color: var(--s-fg-subtle);
	}

	&__table {
		width: 100%;
		border-collapse: collapse;
		font-size: 13px;

		th,
		td {
			text-align: left;
			padding: 6px 8px;
			border-bottom: 1px solid var(--s-border);
			vertical-align: middle;
		}

		th {
			font-weight: 600;
			color: var(--s-fg-subtle);
			white-space: nowrap;
		}

		td:first-child {
			white-space: nowrap;
			color: var(--s-fg-subtle);
		}
	}
}