/**
 * Extension detail – PX Mail animated hero (html/com_content/article/ext-hero/px-mail.php, js/px-ext-mail.js).
 * Same frame as the PX File Manager hero: a window with the provider list and the settings form, an Email log card and
 * a DNS check card overlapping its lower edge. Scoped under .pxml.
 */
.tp-ext-detail .txd-hero .visual.pxt { background: none; padding: 0; border-radius: 0; display: block; overflow: visible; }

.pxml {
	--pxml-navy: var(--tp-navy, #050038);
	--pxml-green: var(--ds-green, #22c55e);
	--pxml-ink: var(--ds-green-ink, #0f6b31);
	--pxml-soft: var(--ds-green-soft, #e6f8ec);
	--pxml-line: #eef1f5;
	--pxml-mute: #8a93a6;
	--pxml-text: #3b4256;
	position: relative; padding: 8px 0 30px; font-size: 12px; line-height: 1.35; color: var(--pxml-navy);
	font-family: Inter, "SF Pro Text", system-ui, -apple-system, sans-serif; text-align: left;
}
.pxml *, .pxml *::before, .pxml *::after { box-sizing: border-box; }

/* window */
.pxml-win { position: relative; width: 100%; background: #fff; border-radius: 16px; overflow: hidden;
	box-shadow: 0 0 0 1px rgba(5,0,56,.07), 0 10px 26px rgba(5,0,56,.10); display: grid; grid-template-columns: 31% 1fr; grid-template-rows: auto 1fr; }
.pxml-bar { grid-column: 1 / -1; display: flex; align-items: stretch; background: #f7f9fb; border-bottom: 1px solid #e3e7ee; white-space: nowrap; overflow: hidden; }
.pxml-app { display: flex; align-items: center; gap: 6px; padding: 9px 13px; font-weight: 700; border-right: 1px solid #e3e7ee; }
.pxml-app i { color: var(--pxml-green); }
.pxml-tab { display: flex; align-items: center; padding: 9px 12px; font-weight: 500; color: var(--pxml-text); }
.pxml-tab.is-on { background: #fff; color: var(--pxml-navy); box-shadow: inset 0 -2px 0 var(--pxml-green); font-weight: 600; }

.pxml-h { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pxml-mute); margin: 0 0 6px 6px; }
.pxml-h b { width: 7px; height: 7px; border-radius: 2px; background: var(--pxml-green); }

/* provider list */
.pxml-side { background: #f7f9fb; border-right: 1px solid var(--pxml-line); padding: 12px 8px 16px; display: flex; flex-direction: column; gap: 1px; }
.pxml-p { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 7px; font-weight: 500; color: var(--pxml-text); white-space: nowrap; transition: background .25s, color .25s; }
.pxml-p i { flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #b9c1cf; transition: border-color .25s, background .25s, box-shadow .25s; }
.pxml-p em { margin-left: auto; font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #a0a8b8; }
.pxml-p.is-on { background: var(--pxml-soft); color: var(--pxml-ink); font-weight: 600; }
.pxml-p.is-on i { border-color: var(--pxml-green); background: var(--pxml-green); box-shadow: inset 0 0 0 2px var(--pxml-soft); }

/* settings form */
.pxml-main { position: relative; min-width: 0; padding: 12px 14px 82px; display: flex; flex-direction: column; gap: 9px; }
.pxml-row { display: grid; grid-template-columns: 38% 1fr; align-items: center; gap: 10px; }
.pxml-l { color: var(--pxml-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxml-in { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid #dfe3ea; border-radius: 6px; background: #fff; color: var(--pxml-navy); white-space: nowrap; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.pxml-in i { margin-left: auto; font-size: 9px; color: var(--pxml-mute); }
.pxml-kt { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.pxml-key.is-typing { border-color: var(--pxml-green); box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.pxml-key.is-typing .pxml-kt::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--pxml-navy); animation: pxml-blink 1s steps(1) infinite; }
.pxml-sw { display: inline-flex; width: max-content; border-radius: 6px; overflow: hidden; border: 1px solid #dfe3ea; font-weight: 600; }
.pxml-sw span { padding: 4px 10px; color: var(--pxml-mute); transition: background .25s, color .25s; }
.pxml-sw span:first-child { background: #fdecec; color: #b42318; }
.pxml-sw.is-on span:first-child { background: #fff; color: var(--pxml-mute); }
.pxml-sw.is-on span:last-child { background: var(--pxml-ink); color: #fff; }
.pxml-btns { display: flex; gap: 6px; margin-top: 2px; }
.pxml-btns span { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border: 1px solid #dfe3ea; border-radius: 6px; color: var(--pxml-text); font-weight: 600; font-size: 11px; transition: transform .15s, background .25s; }
.pxml-btns i { font-size: 9px; }
.pxml-btns .is-save { background: var(--pxml-navy); border-color: var(--pxml-navy); color: #fff; }
.pxml-btns .is-press { transform: scale(.94); }

.pxml-toast { position: absolute; left: 50%; bottom: 92px; transform: translate(-50%, 6px); display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; background: var(--pxml-navy); color: #fff; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.pxml-toast i { color: var(--pxml-green); }
.pxml-toast span { font-weight: 500; color: #b9c1e0; }
.pxml-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* cards */
.pxml-cards { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; align-items: start; margin: -64px 18px 0 18px; }
.pxml-card { background: #fff; border-radius: 14px; padding: 13px 14px 12px; box-shadow: 0 0 0 1px rgba(5,0,56,.06), 0 10px 24px rgba(5,0,56,.13); min-width: 0; }
.pxml-lr { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; min-height: 30px; padding: 3px 6px; border-radius: 7px; transition: opacity .3s, transform .3s, background .3s; }
.pxml-lr + .pxml-lr { border-top: 1px solid var(--pxml-line); border-radius: 0; }
.pxml-lr em { font-style: normal; color: var(--pxml-mute); font-weight: 600; font-size: 10.5px; }
.pxml-subj { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pxml-text); font-weight: 500; }
.pxml-subj small { display: block; font-size: 9.5px; color: #a0a8b8; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pxml-st { padding: 2px 8px; border-radius: 99px; background: var(--pxml-soft); color: var(--pxml-ink); font-weight: 700; font-size: 10px; transition: background .25s, color .25s; }
.pxml-st.is-wait { background: #fef3c7; color: #92400e; }
.pxml-lr.is-new { background: #f3fcf6; }
.pxml-lr.is-in { opacity: 0; transform: translateY(-6px); }

.pxml-dom { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--pxml-text); }
.pxml-dr { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 4px; }
.pxml-dr + .pxml-dr { border-top: 1px solid var(--pxml-line); }
.pxml-dr b { width: 52px; text-align: center; padding: 2px 0; border-radius: 6px; background: #f1f3f7; color: var(--pxml-text); font-size: 10px; letter-spacing: .06em; transition: background .25s, color .25s; }
.pxml-ok { margin-left: auto; color: var(--pxml-ink); font-weight: 700; font-size: 11px; transition: opacity .25s; }
.pxml-ok i { font-size: 9px; }
.pxml-dr.is-pass b { background: var(--pxml-soft); color: var(--pxml-ink); }
.pxml-dr.is-wait .pxml-ok { opacity: 0; }

.pxml .is-hidden { opacity: 0; }

.pxml-rp { all: unset; position: absolute; right: 2px; bottom: 6px; cursor: pointer; color: var(--pxml-mute); font-size: 12px; padding: 4px; }
.pxml-rp:hover, .pxml-rp:focus-visible { color: var(--pxml-ink); }

@keyframes pxml-blink { 50% { opacity: 0; } }

@media (max-width: 640px) {
	.pxml { font-size: 11px; }
	.pxml-tab:nth-child(n+4) { display: none; }
	.pxml-win { grid-template-columns: 36% 1fr; }
	.pxml-p em { display: none; }
	.pxml-main { padding-bottom: 16px; }
	.pxml-row { grid-template-columns: 1fr; gap: 4px; }
	.pxml-toast { bottom: 12px; }
	.pxml-cards { grid-template-columns: 1fr; margin: 10px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
	.pxml *, .pxml *::after { animation: none !important; transition: none !important; }
}