/**
 * TrackShip MCP - the AI Assistant connection screen's styles.
 *
 * Built on TrackShip's own admin design tokens (the --tsd-* custom properties defined in
 * assets/css/trackship.css) so the screen matches the plugin's Settings and Notifications tabs
 * and needs no separate framework.
 *
 * Everything is scoped under .trackship-mcp-screen (the screen's outer wrapper) so nothing here
 * escapes into the rest of the admin. Every class in the markup uses the trackship-mcp-* prefix
 * (there are no zui-* classes and no dependency on ZUI); every rule that styles them lives here.
 *
 * @package TrackShip for WooCommerce
 * @since 1.1.0
 */

/* ==========================================================================
	Layout: sidebar + content, mirroring TrackShip's .ts-settings-layout
	========================================================================== */
.trackship-mcp-screen {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	color: var(--tsd-ink);
	font-size: 13px;
}

.trackship-mcp-screen * {
	box-sizing: border-box;
}

/* ---- Sidebar ---- */
.trackship-mcp-screen .trackship-mcp-sidebar {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 250px;
	gap: 12px;
}

.trackship-mcp-screen .trackship-mcp-sidebar__nav {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius);
	box-shadow: var(--tsd-shadow);
	padding: 8px 0;
	gap: 2px;
	overflow: hidden;
}

.trackship-mcp-screen .trackship-mcp-sidebar__item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 11px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--tsd-muted);
	background: none;
	border: 0;
	border-left: 3px solid transparent;
	text-align: left;
	cursor: pointer;
	transition: color .15s, background .15s, border-color .15s;
}

.trackship-mcp-screen .trackship-mcp-sidebar__item:hover {
	color: var(--tsd-ink);
	background: rgba(18, 78, 214, .05);
	border-left-color: var(--tsd-line);
}

.trackship-mcp-screen .trackship-mcp-sidebar__item.is-active {
	color: var(--tsd-blue);
	background: rgba(18, 78, 214, .07);
	border-left-color: var(--tsd-blue);
	font-weight: 600;
}

.trackship-mcp-screen .trackship-mcp-sidebar__icon {
	display: inline-flex;
	flex-shrink: 0;
}

.trackship-mcp-screen .trackship-mcp-sidebar__icon .trackship-mcp-icon {
	width: 17px;
	height: 17px;
}

.trackship-mcp-screen .trackship-mcp-sidebar__label {
	min-width: 0;
}

/* The mobile drawer chrome is not used on this fork — the sidebar simply stacks on narrow
	screens (see the media query at the foot of this file). */
.trackship-mcp-screen .trackship-mcp-sidebar__mobile-head,
.trackship-mcp-screen .trackship-mcp-sidebar__overlay {
	display: none;
}

/* ---- Quick Help card, matched to TrackShip's .ts-quick-help ---- */
.trackship-mcp-screen .trackship-mcp-quickhelp {
	background: #fff;
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius);
	box-shadow: var(--tsd-shadow);
	padding: 16px;
	overflow: hidden;
}

.trackship-mcp-screen .trackship-mcp-quickhelp__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--tsd-ink);
	margin: 0 0 6px;
	padding: 0;
}

.trackship-mcp-screen .trackship-mcp-quickhelp__text {
	font-size: 12px;
	color: var(--tsd-muted);
	margin: 0 0 14px;
	line-height: 1.5;
}

.trackship-mcp-screen .trackship-mcp-quickhelp__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.trackship-mcp-screen .trackship-mcp-quickhelp__link {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tsd-blue);
	text-decoration: none;
}

.trackship-mcp-screen .trackship-mcp-quickhelp__link:hover {
	text-decoration: underline;
}

.trackship-mcp-screen .trackship-mcp-quickhelp__link--muted {
	color: var(--tsd-muted);
}

.trackship-mcp-screen .trackship-mcp-quickhelp__link .trackship-mcp-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* Decorative artwork: two sheets of paper, a glow and a tick. Purely aria-hidden ornament. */
.trackship-mcp-screen .trackship-mcp-quickhelp__art {
	position: relative;
	height: 90px;
	margin: 16px -16px -16px;
	background: var(--tsd-bg);
	overflow: hidden;
}

.trackship-mcp-screen .trackship-mcp-quickhelp__glow {
	position: absolute;
	inset-inline-end: -30px;
	top: -30px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(18, 78, 214, .12), transparent 70%);
}

.trackship-mcp-screen .trackship-mcp-quickhelp__sphere {
	position: absolute;
	inset-inline-end: 18px;
	top: 18px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tsd-grad, linear-gradient(120deg, #09d3ac, #124ed6));
	opacity: .85;
}

.trackship-mcp-screen .trackship-mcp-quickhelp__paper {
	position: absolute;
	width: 96px;
	padding: 9px;
	background: #fff;
	border: 1px solid var(--tsd-line);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(16, 24, 40, .08);
}

.trackship-mcp-screen .trackship-mcp-quickhelp__paper--1 {
	inset-inline-start: 20px;
	top: 16px;
	transform: rotate(-6deg);
}

.trackship-mcp-screen .trackship-mcp-quickhelp__paper--2 {
	inset-inline-start: 74px;
	top: 26px;
	transform: rotate(5deg);
}

.trackship-mcp-screen .trackship-mcp-quickhelp__line {
	display: block;
	height: 5px;
	border-radius: 3px;
	margin-bottom: 5px;
	background: var(--tsd-line);
}

.trackship-mcp-screen .trackship-mcp-quickhelp__line:last-child {
	margin-bottom: 0;
}

.trackship-mcp-screen .trackship-mcp-quickhelp__line--brand { background: var(--tsd-blue); width: 70%; }
.trackship-mcp-screen .trackship-mcp-quickhelp__line--accent { background: var(--tsd-teal, #09d3ac); width: 60%; }
.trackship-mcp-screen .trackship-mcp-quickhelp__line--mid { width: 100%; }
.trackship-mcp-screen .trackship-mcp-quickhelp__line--short { width: 45%; }

.trackship-mcp-screen .trackship-mcp-quickhelp__check {
	position: absolute;
	inset-inline-end: 20px;
	bottom: 12px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--tsd-teal, #09d3ac);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

/* ---- Content column ---- */
.trackship-mcp-screen .trackship-mcp-content {
	flex: 1;
	min-width: 0;
	max-width: 880px;
}

.trackship-mcp-screen .trackship-mcp-section {
	display: none;
}

.trackship-mcp-screen .trackship-mcp-section.is-active {
	display: block;
}

/* ==========================================================================
	Section header
	========================================================================== */
/* Same card as the Settings tab's section heading (.inner_tab_section .heading_panel in
	assets/css/trackship.css): white card, 24px blue icon, 15px bold title. */
.trackship-mcp-screen .trackship-mcp-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 74px;
	margin-bottom: 15px;
	padding: 16px 20px;
	background: #fff;
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius);
	box-shadow: var(--tsd-shadow);
}

.trackship-mcp-screen .trackship-mcp-section-header__main {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.trackship-mcp-screen .trackship-mcp-section-header__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tsd-blue);
}

.trackship-mcp-screen .trackship-mcp-section-header__icon .trackship-mcp-icon {
	width: 24px;
	height: 24px;
}

.trackship-mcp-screen .trackship-mcp-section-header__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--tsd-ink);
	line-height: 1.4;
}

.trackship-mcp-screen .trackship-mcp-section-header__sub {
	margin: 2px 0 0;
	font-size: 12.5px;
	color: var(--tsd-muted);
	line-height: 1.5;
}

/* ==========================================================================
	Cards & rows
	========================================================================== */
.trackship-mcp-screen .trackship-mcp-card {
	background: #fff;
	border: 1px solid #e3e6ef;
	border-radius: var(--tsd-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
	margin-bottom: 18px;
}

/* Not overflow: hidden -- that clipped tooltips on the first row (Enable the connection, Keep
	entries for), which open above their icon and past the card edge. The first and last child
	take the card corners instead, so row backgrounds still stay inside the rounded border. */
.trackship-mcp-screen .trackship-mcp-card > :first-child {
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

.trackship-mcp-screen .trackship-mcp-card > :last-child {
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}

.trackship-mcp-screen .trackship-mcp-card__head {
	padding: 18px 32px;
	border-bottom: 1px solid var(--tsd-line);
	background: #fbfcfe;
}

.trackship-mcp-screen .trackship-mcp-card__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--tsd-ink);
}

.trackship-mcp-screen .trackship-mcp-card__sub {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: var(--tsd-muted);
	line-height: 1.5;
}

/* ---- A settings row: description on the left, control on the right ---- */
.trackship-mcp-screen .trackship-mcp-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 32px;
	border-bottom: 1px solid var(--tsd-line);
}

.trackship-mcp-screen .trackship-mcp-card > .trackship-mcp-row:last-child,
.trackship-mcp-screen .trackship-mcp-card > .trackship-mcp-row:only-child {
	border-bottom: 0;
}

.trackship-mcp-screen .trackship-mcp-row--inline {
	align-items: center;
}

.trackship-mcp-screen .trackship-mcp-row__head {
	min-width: 0;
	flex: 1 1 auto;
}

.trackship-mcp-screen .trackship-mcp-row__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tsd-ink);
}

.trackship-mcp-screen .trackship-mcp-row__desc {
	/* The tooltip already carries this text; the inline copy is hidden to avoid repetition,
	matching the shared screen's behaviour where the bubble is the canonical home. */
	display: none;
}

.trackship-mcp-screen .trackship-mcp-row__hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--tsd-muted);
	line-height: 1.6;
	max-width: 70ch;
}

.trackship-mcp-screen .trackship-mcp-row__hint a,
.trackship-mcp-screen .ptw_a {
	color: var(--tsd-blue);
	text-decoration: none;
}

.trackship-mcp-screen .trackship-mcp-row__hint a:hover,
.trackship-mcp-screen .ptw_a:hover {
	text-decoration: underline;
}

.trackship-mcp-screen .trackship-mcp-row__control {
	flex: 0 0 auto;
}

/* ==========================================================================
	Form controls: input, toggle, tooltip, buttons
	========================================================================== */
.trackship-mcp-screen .trackship-mcp-input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--tsd-line);
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	color: var(--tsd-ink);
	line-height: 1.4;
	box-shadow: none;
}

/* Beat the host's `.trackship_admin_content .inner_tab_section input` rule, which tints every
	field #fafafa with an #e0e0e0 border. */
.trackship-mcp-screen input.trackship-mcp-input {
	background: #fff;
	border-color: var(--tsd-line);
}

.trackship-mcp-screen .trackship-mcp-input:focus,
.trackship-mcp-screen input.trackship-mcp-input:focus {
	border-color: var(--tsd-blue);
	outline: none;
	box-shadow: 0 0 0 1px var(--tsd-blue);
}

/* ---- Toggle ---- */
.trackship-mcp-screen .trackship-mcp-toggle {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

/* The input is taken out of flow and made zero-footprint. The !important and the raised
	specificity (label.trackship-mcp-toggle input.trackship-mcp-toggle__input) are deliberate: TrackShip's
	global `.trackship_page… input[type="checkbox"]:not(.tgl)` rule forces every checkbox to
	16px with !important, which would otherwise push the track aside and strand the thumb. */
.trackship-mcp-screen label.trackship-mcp-toggle input.trackship-mcp-toggle__input {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0 !important;
	border: 0 !important;
	background: none !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.trackship-mcp-screen .trackship-mcp-toggle__track {
	display: block;
	width: 44px;
	height: 24px;
	border-radius: 999px;
	background: #cbd2e0;
	transition: background .18s ease;
}

.trackship-mcp-screen .trackship-mcp-toggle__thumb {
	position: absolute;
	top: 3px;
	inset-inline-start: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .25);
	transition: transform .18s ease;
}

.trackship-mcp-screen .trackship-mcp-toggle__input:checked + .trackship-mcp-toggle__track {
	background: var(--tsd-blue);
}

.trackship-mcp-screen .trackship-mcp-toggle__input:checked + .trackship-mcp-toggle__track .trackship-mcp-toggle__thumb {
	transform: translateX(20px);
}

.trackship-mcp-screen .trackship-mcp-toggle__input:focus-visible + .trackship-mcp-toggle__track {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tsd-blue);
}

/* ---- Tooltip ---- */
.trackship-mcp-screen .trackship-mcp-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--tsd-muted);
	cursor: help;
}

.trackship-mcp-screen .trackship-mcp-tooltip .trackship-mcp-icon {
	width: 15px;
	height: 15px;
}

.trackship-mcp-screen .trackship-mcp-tooltip__bubble {
	position: absolute;
	bottom: calc(100% + 8px);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 280px;
	padding: 8px 10px;
	border-radius: 8px;
	background: #1f2540;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s ease;
	z-index: 20;
	pointer-events: none;
}

.trackship-mcp-screen .trackship-mcp-tooltip:hover .trackship-mcp-tooltip__bubble,
.trackship-mcp-screen .trackship-mcp-tooltip:focus .trackship-mcp-tooltip__bubble,
.trackship-mcp-screen .trackship-mcp-tooltip:focus-within .trackship-mcp-tooltip__bubble {
	opacity: 1;
	visibility: visible;
}

.trackship-mcp-screen .trackship-mcp-tooltip__arrow {
	position: absolute;
	top: 100%;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1f2540;
}

/* Action buttons (Copy / config / deeplinks / key / self-test) use TrackShip's own .button-trackship class from assets/css/trackship.css — no button styles are defined here. */
.trackship-mcp-screen .trackship-mcp-icon {
	display: inline-block;
	vertical-align: middle;
}

/* ==========================================================================
Connection URL row
========================================================================== */
.trackship-mcp-screen .trackship-mcp-url {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 0 32px 18px;
}

.trackship-mcp-screen .trackship-mcp-url__field {
	flex: 1 1 auto;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
}

/* The link sits under its label and hint, across the full width of the card. */
.trackship-mcp-screen .trackship-mcp-row--stacked {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.trackship-mcp-screen .trackship-mcp-row--stacked .trackship-mcp-url {
	width: 100%;
	padding: 0;
}

/* ==========================================================================
Compact tool list
========================================================================== */
.trackship-mcp-screen .trackship-mcp-tools {
	padding: 16px 32px 20px;
}

.trackship-mcp-screen .trackship-mcp-tools__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid var(--tsd-line);
}

.trackship-mcp-screen .trackship-mcp-tools__item:last-of-type {
	border-bottom: 0;
}

.trackship-mcp-screen .trackship-mcp-tools__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--tsd-ink);
}

.trackship-mcp-screen .trackship-mcp-tools__note {
	margin: 12px 0 0;
	font-size: 11px;
	color: var(--tsd-muted);
}

/* ==========================================================================
Per-client connect rows
========================================================================== */
.trackship-mcp-screen .trackship-mcp-clients {
	padding: 16px 32px 20px;
}

.trackship-mcp-screen .trackship-mcp-client {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--tsd-line);
}

.trackship-mcp-screen .trackship-mcp-client:last-of-type {
	border-bottom: 0;
}

.trackship-mcp-screen .trackship-mcp-client__head {
	min-width: 0;
}

.trackship-mcp-screen .trackship-mcp-client__name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--tsd-ink);
}

.trackship-mcp-screen .trackship-mcp-client__name .trackship-mcp-badge {
	margin-inline-start: 8px;
	vertical-align: middle;
}

.trackship-mcp-screen .trackship-mcp-client__note {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--tsd-muted);
}

.trackship-mcp-screen .trackship-mcp-client__control {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.trackship-mcp-screen .trackship-mcp-clients__note {
	margin: 12px 0 0;
	font-size: 11px;
	color: var(--tsd-muted);
}

.trackship-mcp-screen .trackship-mcp-client__unavailable {
	font-size: 12px;
	color: var(--tsd-muted);
}

@media (max-width: 782px) {
	.trackship-mcp-screen .trackship-mcp-client {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ==========================================================================
Generated WooCommerce key block
========================================================================== */
.trackship-mcp-screen .trackship-mcp-woo[hidden] {
	display: none;
}

.trackship-mcp-screen .trackship-mcp-woo .trackship-mcp-clients {
	padding-top: 0;
}

.trackship-mcp-screen .trackship-mcp-keyform {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.trackship-mcp-screen .trackship-mcp-keyform .trackship-mcp-input {
	flex: 1 1 220px;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
}

.trackship-mcp-screen [data-trackship-mcp-keyerror].is-bad {
	color: #b45309;
	font-weight: 600;
}

/* ==========================================================================
Numbered steps
========================================================================== */
.trackship-mcp-screen .trackship-mcp-steps {
	margin: 0;
	padding: 4px 32px 20px 32px;
	list-style: none;
	counter-reset: trackship-mcp-step;
}

.trackship-mcp-screen .trackship-mcp-steps li {
	position: relative;
	counter-increment: trackship-mcp-step;
	margin: 0;
	padding: 6px 0 6px 30px;
	font-size: 13px;
	color: var(--tsd-ink);
}

.trackship-mcp-screen .trackship-mcp-steps li::before {
	content: counter(trackship-mcp-step);
	position: absolute;
	inset-inline-start: 0;
	top: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #eef2fd;
	font-size: 11px;
	font-weight: 600;
	color: var(--tsd-blue);
}

/* ==========================================================================
Folded detail (<details>)
========================================================================== */
.trackship-mcp-screen .trackship-mcp-more {
	border-top: 1px solid var(--tsd-line);
}

.trackship-mcp-screen .trackship-mcp-more__summary {
	padding: 14px 32px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tsd-muted);
	cursor: pointer;
	list-style: none;
}

.trackship-mcp-screen .trackship-mcp-more__summary::-webkit-details-marker {
	display: none;
}

.trackship-mcp-screen .trackship-mcp-more__summary::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-inline-end: 8px;
	vertical-align: middle;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-inline-start: 5px solid currentColor;
	transition: transform 120ms ease;
}

.trackship-mcp-screen .trackship-mcp-more[open] > .trackship-mcp-more__summary::before {
	transform: rotate(90deg);
}

.trackship-mcp-screen .trackship-mcp-more__summary:hover {
	color: var(--tsd-ink);
}

.trackship-mcp-screen .trackship-mcp-more__body {
	padding-bottom: 8px;
}

.trackship-mcp-screen .trackship-mcp-more__body > p:not([class]) {
	margin: 0 0 12px;
	padding-inline: 32px;
	max-width: calc(78ch + 64px);
	font-size: 13px;
	line-height: 1.6;
	color: var(--tsd-muted);
}

.trackship-mcp-screen .trackship-mcp-more__body > .trackship-mcp-clients__note {
	margin: 0 0 12px;
	padding-inline: 32px;
}

.trackship-mcp-screen .trackship-mcp-more__body > .trackship-mcp-steps {
	padding-bottom: 12px;
}

/* ==========================================================================
Status & tool badges
========================================================================== */
.trackship-mcp-screen .trackship-mcp-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background: var(--tsd-bg);
	color: var(--tsd-muted);
}

.trackship-mcp-screen .trackship-mcp-badge--ok { background: #dcfce7; color: #15803d; }
.trackship-mcp-screen .trackship-mcp-badge--ready { background: #dbeafe; color: #1d4ed8; }
.trackship-mcp-screen .trackship-mcp-badge--error { background: #fee2e2; color: #b91c1c; }
.trackship-mcp-screen .trackship-mcp-badge--read { background: var(--tsd-bg); color: var(--tsd-muted); }
.trackship-mcp-screen .trackship-mcp-badge--write { background: #fef3c7; color: #b45309; }
.trackship-mcp-screen .trackship-mcp-badge--delete { background: #fee2e2; color: #b91c1c; }

.trackship-mcp-screen .trackship-mcp-badge--tool {
	gap: 5px;
	padding: 3px 9px 3px 7px;
	border-radius: 6px;
	font-size: 11.5px;
	text-transform: none;
	letter-spacing: 0;
}

.trackship-mcp-screen .trackship-mcp-badge--tool svg {
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
}

.trackship-mcp-screen .trackship-mcp-badge--tool.trackship-mcp-badge--read {
	background: #f1f5f9;
	color: #64748b;
}

.trackship-mcp-screen .trackship-mcp-number {
	width: 110px;
	max-width: 110px;
}

/* ==========================================================================
Deeplink handoff spinner
========================================================================== */
.trackship-mcp-screen [data-trackship-mcp-open].is-opening {
	pointer-events: none;
	opacity: .75;
}

.trackship-mcp-screen [data-trackship-mcp-open].is-opening::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-inline-end: 7px;
	vertical-align: -1px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: trackship-mcp-spin .7s linear infinite;
}

.trackship-mcp-screen [data-trackship-mcp-open].is-missing {
	color: var(--tsd-muted);
}

@keyframes trackship-mcp-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.trackship-mcp-screen [data-trackship-mcp-open].is-opening::before {
		animation: none;
		border-top-color: currentColor;
		opacity: .5;
	}
}

/* ==========================================================================
Connections footer, reset & revoke controls
========================================================================== */
.trackship-mcp-screen .trackship-mcp-connections__foot {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 14px;
	padding: 14px 32px 20px;
	border-top: 1px solid var(--tsd-line);
	font-size: 11.5px;
	color: var(--tsd-muted);
}

.trackship-mcp-screen .trackship-mcp-connections__hint {
	margin: 0;
	flex: 1 1 260px;
	font-size: 11.5px;
	color: var(--tsd-muted);
}

.trackship-mcp-screen .trackship-mcp-reset {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 12.5px;
	color: var(--tsd-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.trackship-mcp-screen .trackship-mcp-reset:hover { color: var(--tsd-ink); }

.trackship-mcp-screen .trackship-mcp-reset:focus-visible {
	outline: 2px solid var(--tsd-blue);
	outline-offset: 2px;
	border-radius: 3px;
}

.trackship-mcp-screen .trackship-mcp-reset[disabled] {
	opacity: .6;
	cursor: default;
	text-decoration: none;
}

.trackship-mcp-screen .trackship-mcp-revoke {
	font-size: 12px;
	font-weight: 600;
	color: #b45309;
	background: transparent;
	border: 1px solid var(--tsd-line);
	border-radius: 6px;
	padding: 3px 10px;
	cursor: pointer;
}

.trackship-mcp-screen .trackship-mcp-revoke:hover {
	border-color: #b45309;
	background: rgba(180, 83, 9, .06);
}

.trackship-mcp-screen .trackship-mcp-revoke:disabled {
	opacity: .6;
	cursor: default;
}

.trackship-mcp-screen .trackship-mcp-from {
	display: block;
	font-size: 11px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--tsd-muted);
	margin-top: 1px;
}

/* ==========================================================================
Audit log table
========================================================================== */
.trackship-mcp-screen .trackship-mcp-log {
	width: 100%;
	overflow-x: auto;
	padding-block: 4px 8px;
}

.trackship-mcp-screen .trackship-mcp-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 13px;
	background: #fff;
}

.trackship-mcp-screen .trackship-mcp-table thead th {
	padding: 12px 16px;
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	color: var(--tsd-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	background: var(--tsd-bg);
	border-bottom: 1px solid var(--tsd-line);
}

.trackship-mcp-screen .trackship-mcp-table tbody td {
	padding: 14px 16px;
	color: var(--tsd-ink);
	vertical-align: middle;
	border-bottom: 1px solid var(--tsd-line);
}

.trackship-mcp-screen .trackship-mcp-table tbody tr:last-child td {
	border-bottom: 0;
}

.trackship-mcp-screen .trackship-mcp-table tbody tr:hover td {
	background: var(--tsd-bg);
}

.trackship-mcp-screen .trackship-mcp-table th:first-child,
.trackship-mcp-screen .trackship-mcp-table td:first-child {
	padding-inline-start: 32px;
}

.trackship-mcp-screen .trackship-mcp-table th:last-child,
.trackship-mcp-screen .trackship-mcp-table td:last-child {
	padding-inline-end: 32px;
}

.trackship-mcp-screen .trackship-mcp-table th:nth-child(1),
.trackship-mcp-screen .trackship-mcp-table td:nth-child(1) {
	width: 170px;
	white-space: nowrap;
	color: var(--tsd-muted);
}

.trackship-mcp-screen .trackship-mcp-table th:nth-child(3),
.trackship-mcp-screen .trackship-mcp-table td:nth-child(3),
.trackship-mcp-screen .trackship-mcp-table th:nth-child(4),
.trackship-mcp-screen .trackship-mcp-table td:nth-child(4) {
	width: 150px;
	white-space: nowrap;
}

.trackship-mcp-screen .trackship-mcp-table th:nth-child(5),
.trackship-mcp-screen .trackship-mcp-table td:nth-child(5) {
	width: 110px;
	white-space: nowrap;
}

.trackship-mcp-screen .trackship-mcp-table td code {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--tsd-bg);
	border: 1px solid var(--tsd-line);
	font-size: 12px;
	color: var(--tsd-ink);
}

.trackship-mcp-screen .trackship-mcp-log__error {
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--tsd-muted);
}

.trackship-mcp-screen .trackship-mcp-table tr.is-revoked td {
	opacity: .6;
}

.trackship-mcp-screen .trackship-mcp-pagebtn {
	display: inline-block;
	padding: 6px 14px;
	margin-inline-start: 8px;
	border: 1px solid var(--tsd-line);
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--tsd-ink);
	text-decoration: none;
}

.trackship-mcp-screen .trackship-mcp-pagebtn:hover {
	background: var(--tsd-bg);
}

/* ==========================================================================
Link test result
========================================================================== */
.trackship-mcp-screen [data-trackship-mcp-testresult].is-good {
	color: #15803d;
	font-weight: 600;
}

.trackship-mcp-screen [data-trackship-mcp-testresult].is-bad {
	color: #b45309;
	font-weight: 600;
}

.trackship-mcp-screen .trackship-mcp-testdetail {
	margin-top: 4px;
	max-width: 68ch;
}

/* ==========================================================================
Copy row (endpoint field + copy button)
========================================================================== */
.trackship-mcp-screen .trackship-mcp-copyrow {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* ==========================================================================
Responsive: stack the sidebar above the content on narrow screens
========================================================================== */
@media (max-width: 960px) {
	.trackship-mcp-screen {
		flex-direction: column;
	}

	.trackship-mcp-screen .trackship-mcp-sidebar {
		width: 100%;
	}

	.trackship-mcp-screen .trackship-mcp-sidebar__nav {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.trackship-mcp-screen .trackship-mcp-sidebar__item {
		border-left: 0;
		border-bottom: 3px solid transparent;
	}

	.trackship-mcp-screen .trackship-mcp-sidebar__item.is-active {
		border-left: 0;
		border-bottom-color: var(--tsd-blue);
	}
}