/*
 * Postlinkly tools page styles.
 *
 * Maintenance rows, provider keys, and embedding diagnostics in panels.
 * Loaded only on the Tools page.
 * Depends on admin-base.css for design tokens.
 *
 * @package Postlinkly
 * @since   1.1.0
 * @since   1.3.0 Tokenized layout on the shared design system.
 * @since   1.3.2 Panel layout with maintenance-first section order.
 */

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */

.pl-tools-section {
	margin: 0 0 28px;
}

.pl-tools-section__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.pl-tools-section__title {
	margin: 0 0 4px;
	font-size: 17px;
	line-height: 1.3;
	color: var(--pl-ink);
	font-weight: 600;
}

.pl-tools-section__subtitle {
	margin: 18px 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--pl-ink);
}

.pl-tools-section__sub {
	margin: 0;
	max-width: 720px;
	color: var(--pl-muted);
	font-size: 12.5px;
	line-height: 1.5;
}

.pl-tools-section__hint {
	margin: 0 0 12px;
	max-width: 720px;
}

.pl-tools-section__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--pl-primary);
	text-decoration: none;
	white-space: nowrap;
	align-self: center;
}
.pl-tools-section__link:hover {
	text-decoration: underline;
}
.pl-tools-section__link:focus-visible {
	outline: 2px solid var(--pl-primary);
	outline-offset: 2px;
	border-radius: var(--pl-radius-xs);
}

/* ==========================================================================
   PANEL SHELL
   ========================================================================== */

.pl-tools-panel {
	background: var(--pl-surface);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-lg);
	box-shadow: var(--pl-shadow-sm);
	overflow: hidden;
}

.pl-tools-panel__body {
	padding: 4px 22px 18px;
}

/* ==========================================================================
   MAINTENANCE TOOL ROWS
   ========================================================================== */

.pl-toolrow {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--pl-line);
}

.pl-toolrow:last-child {
	border-bottom: none;
}

.pl-toolrow__meta {
	flex: 1;
	min-width: 0;
}

.pl-toolrow__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--pl-ink);
}

.pl-toolrow__desc {
	font-size: 12.5px;
	color: var(--pl-muted);
	margin-top: 2px;
	line-height: 1.45;
}

.pl-toolrow__last {
	font-size: 11.5px;
	color: var(--pl-faint);
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

.pl-toolrow__btn {
	flex-shrink: 0;
	font-size: 12px !important;
}

.pl-toolrow__btn:focus-visible {
	outline: 2px solid var(--pl-primary);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.pl-toolrow {
		flex-direction: column;
		align-items: flex-start;
	}
	.pl-toolrow__btn {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   AI STATUS STRIP
   ========================================================================== */

.pl-status-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 12px 16px;
	background: var(--pl-soft);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-md);
	margin-bottom: 16px;
	font-size: 13px;
}

.pl-status-strip__label {
	font-weight: 600;
	color: var(--pl-ink);
	margin-right: 4px;
}

.pl-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--pl-surface);
	border: 1px solid var(--pl-line);
	font-size: 12px;
	color: var(--pl-ink);
}

.pl-status-pill--warn {
	background: var(--pl-amber-l);
	border-color: var(--pl-amber-line);
	color: var(--pl-amber);
}

.pl-status-pill__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.pl-status-pill__dot--ok { background: var(--pl-green); }
.pl-status-pill__dot--warn { background: var(--pl-amber); }

.pl-ai-privacy-note {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-left: 4px solid var(--pl-primary);
	background: var(--pl-soft);
	color: var(--pl-muted);
	font-size: 12.5px;
	line-height: 1.5;
	border-radius: 0 var(--pl-radius-sm) var(--pl-radius-sm) 0;
}

/* ==========================================================================
   PROVIDER KEY ROWS
   ========================================================================== */

.pl-prov-row {
	display: grid;
	grid-template-columns: 160px 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--pl-line);
}

.pl-prov-row:last-child {
	border-bottom: none;
}

.pl-prov-row__name {
	font-weight: 600;
	color: var(--pl-ink);
	font-size: 14px;
}

.pl-prov-row__caps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

.pl-prov-row__field input {
	width: 100%;
	border: 1px solid var(--pl-line-2);
	border-radius: var(--pl-radius-sm);
	padding: 8px 11px;
	font-size: 13px;
	color: var(--pl-ink);
	background: var(--pl-surface);
}

.pl-prov-row__field input:focus {
	border-color: var(--pl-primary);
	box-shadow: 0 0 0 1px var(--pl-primary);
	outline: none;
}

.pl-prov-row__field input:focus-visible {
	outline: 2px solid var(--pl-primary);
	outline-offset: 2px;
}

.pl-prov-row__links {
	display: flex;
	gap: 12px;
	font-size: 12px;
	margin-top: 4px;
}

.pl-prov-row__links a {
	color: var(--pl-primary);
}

.pl-prov-row__links a:focus-visible {
	outline: 2px solid var(--pl-primary);
	outline-offset: 2px;
	border-radius: var(--pl-radius-xs);
}

.pl-prov-row__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	min-width: 120px;
}

.pl-ai-pill {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--pl-primary-tint);
	color: var(--pl-primary-deep);
	font-size: 11px;
	font-weight: 700;
}

.pl-pstate {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--pl-green-l);
	color: var(--pl-green);
}

.pl-pstate--off {
	background: var(--pl-soft);
	color: var(--pl-faint);
}

@media (max-width: 900px) {
	.pl-prov-row {
		grid-template-columns: 1fr;
	}
	.pl-prov-row__actions {
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		min-width: 0;
	}
}

/* ==========================================================================
   EMBEDDING DIAGNOSTICS
   ========================================================================== */

.pl-diag-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 28px;
	padding: 16px 0;
}

.pl-diag-grid__key {
	font-size: 12px;
	color: var(--pl-faint);
	margin-bottom: 2px;
}

.pl-diag-grid__val {
	font-size: 13px;
	color: var(--pl-ink);
	font-weight: 600;
}

.pl-diag-grid__note {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--pl-muted);
	margin-top: 4px;
}

.pl-tools-status--ok { color: var(--pl-green); }
.pl-tools-status--warn { color: var(--pl-amber); }
.pl-tools-status--muted { color: var(--pl-muted); }

.pl-vector-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-top: 8px;
}

.pl-vector-table th {
	text-align: left;
	padding: 10px 12px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--pl-faint);
	background: var(--pl-soft);
	border-bottom: 1px solid var(--pl-line);
}

.pl-vector-table td {
	padding: 12px;
	border-bottom: 1px solid var(--pl-line);
	color: var(--pl-ink);
	vertical-align: middle;
}

.pl-vector-table tr:last-child td {
	border-bottom: none;
}

@media (max-width: 900px) {
	.pl-diag-grid {
		grid-template-columns: 1fr;
	}
	.pl-vector-table {
		display: block;
		overflow-x: auto;
	}
}

/* ==========================================================================
   AJAX RESULT AREA (top of page, below header)
   ========================================================================== */

.pl-tools-result {
	display: none;
	margin-bottom: 20px;
}

.pl-tools-result.is-visible {
	display: block;
}

.pl-tools-result .notice {
	margin: 0;
	border-radius: var(--pl-radius-sm);
	padding: 10px 14px;
}

.pl-tools-result--success .notice {
	border-left: 4px solid var(--pl-green);
	background: var(--pl-green-l);
}

.pl-tools-result--error .notice {
	border-left: 4px solid var(--pl-red);
	background: var(--pl-red-l);
}

.pl-tools-result .postlinkly-progress-bar-wrap {
	background: var(--pl-line);
	border-radius: var(--pl-radius-xs);
	height: 8px;
	max-width: 480px;
}

.pl-tools-result .postlinkly-progress-bar {
	background: var(--pl-primary);
	height: 8px;
	border-radius: var(--pl-radius-xs);
	width: 0%;
	transition: width .3s linear;
}

.pl-tools-result .postlinkly-progress-label {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--pl-muted);
}

.pl-tools-result .notice p {
	margin: 0;
	font-size: 13px;
}

/* Content index card
   .pl-tools-panel__body pads only 4px at the top, which suits panels whose
   first child is a .pl-toolrow and brings its own 16px. This card's first
   child is plain text, so without the same 16px it sits 4px from the panel
   edge while every neighbouring card starts 20px in -- the mismatch that
   makes this one card look wrong next to the others. */
.pl-index-card {
	padding-top: 16px;
}

.pl-index-card__loading,
.pl-index-card__error {
	margin: 0;
	font-size: 13px;
	color: var(--pl-muted);
}

/* Status and heartbeat share a line but are not equals: the status is the
   headline and the heartbeat qualifies it, so they sit on a common baseline
   with the heartbeat pushed away rather than reading as one sentence. */
.pl-index-card__status {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--pl-ink);
	margin-bottom: 12px;
}

.pl-index-card__status--failed strong {
	color: var(--pl-danger, #b32d2e);
}

.pl-index-card__status--done strong {
	color: var(--pl-ok, #1a7f37);
}

.pl-index-card__heartbeat {
	font-size: 12.5px;
	color: var(--pl-muted);
	white-space: nowrap;
}

/* WordPress inline notices carry margins tuned for full-width admin pages,
   which leaves them crowding the rows above and below inside a card. */
.pl-index-card .notice.inline {
	margin: 0 0 12px;
}

/* Reads as status, not as a control sitting among the buttons. */
.pl-index-card__busy {
	align-self: center;
	font-size: 12.5px;
	color: var(--pl-muted);
	font-style: italic;
}

.pl-index-card__stages {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--pl-line);
}

.pl-index-stage {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	padding: 8px 0;
	border-bottom: 1px solid var(--pl-line);
	font-size: 13px;
}

.pl-index-stage__name {
	flex: 1;
	min-width: 140px;
	color: var(--pl-ink);
}

.pl-index-stage__state,
.pl-index-stage__count {
	font-size: 12.5px;
	color: var(--pl-muted);
}

.pl-index-stage--done .pl-index-stage__state {
	color: var(--pl-ok, #1a7f37);
}

.pl-index-stage--failed .pl-index-stage__state {
	color: var(--pl-danger, #b32d2e);
}

/* A failed stage that does not say why leaves nothing to act on, so the
   reason gets its own full-width line rather than being truncated inline. */
.pl-index-stage__error {
	flex-basis: 100%;
	font-size: 12.5px;
	color: var(--pl-danger, #b32d2e);
}

.pl-index-card__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}