/* ==========================================================================
   MeczRealu - historia edycji wpisow (jak na X): "Edytowano" pod trescia
   i okno z wersjami. JS: js/mr-post-edits.js
   ========================================================================== */
:root {
	--mr-pe-bg: #000;
	--mr-pe-text: #e7e9ea;
	--mr-pe-dim: #71767b;
	--mr-pe-line: #2f3336;
	--mr-pe-hover: rgba(231, 233, 234, .1);
	--mr-pe-backdrop: rgba(0, 0, 0, .55);
}
html[data-mr-theme="light"] {
	--mr-pe-bg: #fff;
	--mr-pe-text: #0f1419;
	--mr-pe-dim: #536471;
	--mr-pe-line: #eff3f4;
	--mr-pe-hover: rgba(15, 20, 25, .1);
	--mr-pe-backdrop: rgba(0, 0, 0, .4);
}

/* "Edytowano" pod trescia wpisu */
.post .mr-edited {
	display: inline-flex; align-items: center; gap: 4px;
	margin: 6px 0 0; padding: 0; border: 0; background: none;
	color: var(--mr-pe-dim); font: inherit; font-size: 13px; line-height: 16px;
	cursor: pointer;
}
.post .mr-edited svg { flex: 0 0 auto; }
.post .mr-edited:hover span, .post .mr-edited:focus-visible span { text-decoration: underline; }
.post.standalone-post .mr-edited { font-size: 15px; line-height: 20px; margin-top: 12px; }

/* okno */
html.mr-pe-open, html.mr-pe-open body { overflow: hidden; }
.mr-pe {
	position: fixed; inset: 0; z-index: 2147483000;
	display: flex; align-items: flex-start; justify-content: center;
	padding: 5vh 16px; background: var(--mr-pe-backdrop);
}
.mr-pe-panel {
	width: 100%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column;
	background: var(--mr-pe-bg); color: var(--mr-pe-text); border-radius: 16px; overflow: hidden;
}
.mr-pe-head {
	display: flex; align-items: center; gap: 20px; min-height: 53px; padding: 0 16px;
	flex: 0 0 auto;
}
.mr-pe-title { margin: 0; font-size: 20px; line-height: 24px; font-weight: 700; color: var(--mr-pe-text); }
.mr-pe-x {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; margin-left: -8px; border: 0; border-radius: 999px;
	background: none; color: var(--mr-pe-text); cursor: pointer;
}
.mr-pe-x:hover { background: var(--mr-pe-hover); }
.mr-pe-body { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.mr-pe-intro, .mr-pe-note {
	margin: 0; padding: 4px 16px 12px; color: var(--mr-pe-dim); font-size: 15px; line-height: 20px;
}
.mr-pe-note { padding-top: 16px; }
.mr-pe-staff { color: #f4212e; }
.mr-pe-ver { padding: 12px 16px; border-top: 1px solid var(--mr-pe-line); }
.mr-pe-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px; }
.mr-pe-tag { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--mr-pe-text); }
.mr-pe-time { font-size: 15px; line-height: 20px; color: var(--mr-pe-dim); }
.mr-pe-text {
	font-size: 15px; line-height: 20px; color: var(--mr-pe-text);
	overflow-wrap: anywhere;
}
.mr-pe-ver:not(.is-current) .mr-pe-text { color: var(--mr-pe-dim); }
.mr-pe-text a { color: #1d9bf0; text-decoration: none; }
.mr-pe-text img.emoji, .mr-pe-text .emoji { width: 18px; height: 18px; vertical-align: -3px; }
.mr-pe-empty { font-style: italic; }
.mr-pe-loading { display: flex; justify-content: center; gap: 6px; padding: 28px 0; }
.mr-pe-loading span {
	width: 8px; height: 8px; border-radius: 50%; background: #1d9bf0; opacity: .3;
	animation: mr-pe-dot 1s infinite ease-in-out;
}
.mr-pe-loading span:nth-child(2) { animation-delay: .15s; }
.mr-pe-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes mr-pe-dot { 40% { opacity: 1; } }

/* telefon: pelny ekran jak na X */
@media (max-width: 575.98px) {
	.mr-pe { padding: 0; background: var(--mr-pe-bg); }
	.mr-pe-panel { max-width: none; max-height: none; height: 100%; border-radius: 0; }
	.mr-pe-body { flex: 1 1 auto; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
	.mr-pe-head { padding-top: env(safe-area-inset-top, 0px); }
}

/* "Dlaczego widzisz ten post?" (js/mr-why.js) - to samo okno co historia edycji */
.mr-why-list { list-style: none; margin: 0; padding: 4px 16px 8px; }
.mr-why-item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 15px; line-height: 20px; color: var(--mr-pe-text); }
.mr-why-item i { flex: 0 0 20px; margin-top: 2px; color: #1d9bf0; text-align: center; }
.mr-why-sub { margin: 8px 0 0; padding: 12px 16px 4px; border-top: 1px solid var(--mr-pe-line); color: var(--mr-pe-dim); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.mr-why-act {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
	padding: 12px 16px; border: 0; background: none; color: var(--mr-pe-text); text-align: left; cursor: pointer;
}
.mr-why-act:hover { background: var(--mr-pe-hover); }
.mr-why-act-t { font-size: 15px; line-height: 20px; font-weight: 700; }
.mr-why-act-d { font-size: 13px; line-height: 16px; color: var(--mr-pe-dim); }
@media (min-width: 576px) { .mr-why .mr-pe-panel { max-width: 480px; } }
.mr-why-item { align-items: center; }
.mr-why-item i { margin-top: 0; }
.mr-why-text { flex: 1 1 auto; min-width: 0; }
.mr-why-follow {
	flex: 0 0 auto; height: 32px; padding: 0 14px; border-radius: 9999px; cursor: pointer;
	border: 1px solid #536471; background: transparent; color: var(--mr-pe-text);
	font-size: 14px; font-weight: 700; line-height: 30px; white-space: nowrap;
}
.mr-why-follow:hover { border-color: rgba(244, 33, 46, .5); background: rgba(244, 33, 46, .1); color: #f4212e; }
.mr-why-follow.is-off { background: var(--mr-pe-text); border-color: var(--mr-pe-text); color: var(--mr-pe-bg); }
.mr-why-follow.is-off:hover { opacity: .9; background: var(--mr-pe-text); color: var(--mr-pe-bg); }
html[data-mr-theme="light"] .mr-why-follow { border-color: #cfd9de; }

/* PC: szare okno jak menu "…" i menu uzytkownika (#181818, delikatna
   obwodka i cien) - na czarnym tle bylo prawie niewidoczne */
@media (min-width: 576px) {
	html:not([data-mr-theme="light"]) .mr-pe-panel {
		--mr-pe-bg: #181818;
		--mr-pe-line: rgba(255, 255, 255, .08);
		--mr-pe-hover: rgba(231, 233, 234, .05);
		background: #181818;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 28px rgba(0, 0, 0, .6);
	}
	html[data-mr-theme="light"] .mr-pe-panel {
		box-shadow: rgba(101, 119, 134, .2) 0 0 15px, rgba(101, 119, 134, .15) 0 0 3px 1px;
	}
}