/* Speaker Packet Platform — passkey (WebAuthn) UI (v0.7.116).
 *
 * Brand: white ground, navy #0D2B6C, accent #1A3F92, wash #F1F5FE,
 * borders #D8E2F7, body #3B4A68, muted #64748B. Orange is left to the
 * shared .spp-button style in dashboard.css.
 *
 * Buttons: every button is a pill (border-radius: 999px), per the
 * locked button standard (v0.7.117 sweep).
 *
 * Vertical spacing (hard rule — stated, not eyeballed):
 * Login block: margin 20px 0 4px; divider margin 0 0 16px; button
 * padding 12px 16px, min-height 48px (touch target); sub copy margin
 * 10px 0 0; status margin 10px 0 0.
 * Panel (v0.7.117 rhythm pass, 6/12/20): panel heading margin
 * 0 0 6px; intro paragraph margin 0 (the shared .spp-module-desc
 * -8px pull-up is neutralized inside this panel); intro to first
 * element (list) margin-top 20px; list rows padding 14px 16px with
 * 12px gaps; empty-state box padding 16px; list to add block
 * margin-top 20px; the add block is a single pill button (the
 * "Name this device" field was removed in v0.7.117, labels
 * auto-generate server-side); button to helper note margin-top
 * 12px; status margin-top 16px (0 while empty); unsupported note
 * margin-top 20px.
 * Prompt card (v0.7.117): padding 20px 22px, margin 0 0 24px (same
 * as the sibling dashboard cards); heading margin 0 0 6px; actions
 * margin-top 20px, gap 12px; note margin-top 12px; status
 * margin-top 16px (0 while empty).
 */

/* ---------- Shared: status line + (i) tooltip ---------- */

.spp-passkey-status {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #1A3F92;
}
.spp-passkey-status:empty { margin-top: 0; }
.spp-passkey-status-error { color: #B3261E; }

.spp-passkey-info {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 6px;
	border: 1.5px solid #1A3F92;
	border-radius: 50%;
	color: #1A3F92;
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	vertical-align: 2px;
	user-select: none;
}
.spp-passkey-tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: 240px;
	max-width: 72vw;
	padding: 10px 12px;
	background: #0D2B6C;
	color: #fff;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease;
	z-index: 30;
	pointer-events: none;
}
.spp-passkey-info:hover .spp-passkey-tip,
.spp-passkey-info:focus .spp-passkey-tip,
.spp-passkey-info:focus-within .spp-passkey-tip {
	opacity: 1;
	visibility: visible;
}

/* ---------- Login page (wp-login.php) ---------- */

.spp-passkey-login { margin: 20px 0 4px; }

.spp-passkey-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	color: #64748B;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.spp-passkey-divider::before,
.spp-passkey-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #D8E2F7;
}

.spp-passkey-btn {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	background: #fff;
	border: 1.5px solid #0D2B6C;
	border-radius: 999px;
	color: #0D2B6C;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.spp-passkey-btn:hover,
.spp-passkey-btn:focus {
	background: #F1F5FE;
	border-color: #0D2B6C;
	color: #0D2B6C;
}
.spp-passkey-btn:disabled {
	opacity: .55;
	cursor: wait;
}

.spp-passkey-sub {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #64748B;
	text-align: center;
}
.spp-passkey-login .spp-passkey-status { text-align: center; }

/* ---------- Dashboard panel ---------- */

/* v0.7.117 rhythm pass: the shared .spp-module-desc pulls itself up
   with a -8px top margin and the theme adds its own paragraph
   margins, which stacked into a ~70px dead band under the intro.
   Inside this panel the rhythm is explicit instead: heading 6px,
   intro flush, then a clean 20px to the first element. */
.spp-passkeys-panel h2 { margin: 0 0 6px; }
.spp-passkeys-panel .spp-module-desc { margin: 0; }
.spp-passkeys-panel .spp-passkey-status { margin-top: 16px; }
.spp-passkeys-panel .spp-passkey-status:empty { margin-top: 0; }

.spp-passkey-list { margin-top: 20px; }

.spp-passkey-empty {
	margin: 0;
	padding: 16px;
	background: #F1F5FE;
	border: 1px solid #D8E2F7;
	border-radius: 10px;
	color: #3B4A68;
	font-size: 14px;
	line-height: 1.5;
}

.spp-passkey-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 16px;
	margin-bottom: 12px;
	background: #fff;
	border: 1px solid #D8E2F7;
	border-radius: 10px;
}
.spp-passkey-row:last-child { margin-bottom: 0; }

.spp-passkey-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.spp-passkey-row-main strong { color: #0D2B6C; font-size: 15px; overflow-wrap: anywhere; }
.spp-passkey-meta { color: #64748B; font-size: 13px; line-height: 1.45; }
.spp-passkey-flagged { color: #B3261E; font-size: 13px; font-weight: 600; line-height: 1.45; }

.spp-passkey-remove {
	flex: none;
	min-height: 40px;
	padding: 8px 14px;
	background: #fff;
	border: 1px solid #D8E2F7;
	border-radius: 999px;
	color: #B3261E;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.spp-passkey-remove:hover,
.spp-passkey-remove:focus { background: #FDF1F0; border-color: #B3261E; }
.spp-passkey-remove:disabled { opacity: .55; cursor: wait; }

.spp-passkey-add { margin-top: 20px; }
.spp-passkey-note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #64748B;
	max-width: 560px;
}
.spp-passkey-unsupported {
	margin-top: 20px;
	padding: 14px 16px;
	background: #F1F5FE;
	border: 1px solid #D8E2F7;
	border-radius: 10px;
	color: #3B4A68;
	font-size: 14px;
	line-height: 1.5;
}

/* ---------- Dashboard enable prompt card (v0.7.117) ---------- */

.spp-passkey-prompt {
	background: #fff;
	border: 1px solid #D8E2F7;
	border-radius: 14px;
	padding: 20px 22px;
	margin: 0 0 24px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.spp-passkey-prompt h2 {
	color: #0D2B6C;
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0 0 6px;
}
.spp-passkey-prompt-text {
	color: #3B4A68;
	font-size: .95rem;
	line-height: 1.55;
	margin: 0;
	max-width: 560px;
}
.spp-passkey-prompt-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}
.spp-passkey-prompt .spp-button { min-height: 48px; }
.spp-passkey-prompt .spp-button:disabled { opacity: .55; cursor: default; }
.spp-passkey-prompt-dismiss {
	background: none;
	border: 0;
	border-radius: 999px;
	padding: 10px 14px;
	color: #64748B;
	font-size: .95rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}
.spp-passkey-prompt-dismiss:hover,
.spp-passkey-prompt-dismiss:focus { background: #F1F5FE; color: #0D2B6C; }
.spp-passkey-prompt-dismiss:disabled { opacity: .55; cursor: wait; }
.spp-passkey-prompt-note {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #64748B;
	max-width: 560px;
}
.spp-passkey-prompt .spp-passkey-status { margin-top: 16px; }
.spp-passkey-prompt .spp-passkey-status:empty { margin-top: 0; }

@media (max-width: 480px) {
	.spp-passkey-row { flex-direction: column; align-items: stretch; }
	.spp-passkey-remove { width: 100%; min-height: 44px; }
	.spp-passkey-tip { left: auto; right: -8px; transform: none; }
	.spp-passkey-prompt { padding: 18px 16px; }
	.spp-passkey-prompt-actions .spp-button { width: 100%; }
}