/* Share prompt — self-contained.
   Deliberately does NOT reuse the reader's modal.js/modal.css: on some sites that
   file exists but is never wired in, and pulling it in would also switch on its
   reader-guide popup, which nobody asked for.

   Theming: every colour goes through the site's own variables with a fallback to
   the manga-bay palette. com-x/ranobe ship light AND dark themes (--modal-bg is
   #fff there in light), so secondary text uses currentColor + opacity instead of
   a hardcoded light grey, which would vanish on a white card. */

.sp-ov {
	position: fixed; inset: 0; z-index: 2000;
	background: rgba(0,0,0,.72);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	display: flex; align-items: flex-end; justify-content: center;
	padding: 0 12px 24px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (min-height: 600px) { .sp-ov { align-items: center; padding: 24px 12px } }

.sp-card {
	background: var(--modal-bg, #1c1c1e);
	color: var(--body-color, rgba(235,235,245,.95));
	border: .5px solid var(--modal-border, rgba(255,255,255,.12));
	border-radius: 18px;
	width: 100%; max-width: 420px;
	padding: 20px;
	box-shadow: 0 24px 60px rgba(0,0,0,.6);
	animation: sp-in .28s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sp-in { from { opacity: 0; transform: translateY(32px) scale(.97) } to { opacity: 1; transform: none } }

.sp-row  { display: flex; gap: 14px }
.sp-img  { width: 74px; height: 104px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--img-bg, #000) }
.sp-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center }
.sp-kick { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #ffa332); margin-bottom: 5px }
.sp-name { font-size: 17px; font-weight: 700; line-height: 1.25; margin-bottom: 6px }
.sp-stat { font-size: 12px; color: currentColor; opacity: .45 }
.sp-ask  { font-size: 14px; line-height: 1.4; margin: 16px 0 0; color: currentColor; opacity: .65 }

.sp-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px }
.sp-acts button {
	width: 100%; padding: 13px 16px;
	border: none; border-radius: 12px;
	font-size: 15px; font-weight: 600; font-family: inherit;
	cursor: pointer;
	transition: opacity .15s, transform .1s;
}
.sp-acts button:hover  { opacity: .88 }
.sp-acts button:active { transform: scale(.97) }
.sp-go { background: var(--accent, #ffa332); color: #000 }
.sp-no { background: rgba(120,120,128,.24); color: currentColor; opacity: .75 }

/* Toast: fires on a binge, i.e. while the reader is still moving. It must never
   sit on the path to the next chapter, hence bottom-anchored and auto-dismissed. */
.sp-toast {
	position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 1900;
	margin: 0 auto; max-width: 420px;
	display: flex; align-items: center; gap: 11px;
	padding: 10px 12px 10px 10px;
	background: var(--modal-bg, #1c1c1e);
	color: var(--body-color, rgba(235,235,245,.95));
	border: .5px solid var(--modal-border, rgba(255,255,255,.12));
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0,0,0,.5);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	animation: sp-up .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sp-up { from { opacity: 0; transform: translateY(60px) } to { opacity: 1; transform: none } }
.sp-toast .sp-img { width: 34px; height: 46px; border-radius: 5px }
.sp-toast-txt { flex: 1; min-width: 0 }
.sp-toast-l1  { font-size: 13px; font-weight: 600; line-height: 1.3 }
.sp-toast-l2  { font-size: 11px; margin-top: 2px; color: currentColor; opacity: .45 }
.sp-toast-go {
	background: var(--accent, #ffa332); color: #000;
	border: none; border-radius: 8px;
	padding: 8px 13px; font-size: 12px; font-weight: 700;
	cursor: pointer; flex-shrink: 0; font-family: inherit;
}
.sp-toast-x {
	background: none; border: none; color: currentColor; opacity: .45;
	font-size: 13px; cursor: pointer; padding: 4px; flex-shrink: 0; font-family: inherit;
}

/* Desktop: 420px reads as a phone sheet stranded on a big screen. Scale the card,
   the cover and the type up, and lay the buttons out in a row — vertical stacking
   is a narrow-screen answer to a problem desktop doesn't have. */
@media (min-width: 768px) {
	.sp-card { max-width: 560px; padding: 28px; border-radius: 20px }
	.sp-row  { gap: 20px }
	.sp-img  { width: 116px; height: 164px; border-radius: 10px }
	.sp-kick { font-size: 12px; margin-bottom: 7px }
	.sp-name { font-size: 23px; margin-bottom: 9px }
	.sp-stat { font-size: 13px }
	.sp-ask  { font-size: 16px; margin-top: 20px }

	.sp-acts { flex-direction: row-reverse; gap: 12px; margin-top: 24px }
	.sp-acts button { width: auto; font-size: 16px; padding: 14px 22px }
	.sp-go { flex: 1 }                 /* primary takes the room, stays the obvious target */
	.sp-no { flex: 0 0 auto; min-width: 120px }

	.sp-toast { max-width: 480px; bottom: 24px; padding: 12px 14px 12px 12px; gap: 14px; border-radius: 16px }
	.sp-toast .sp-img { width: 44px; height: 60px; border-radius: 6px }
	.sp-toast-l1 { font-size: 14px }
	.sp-toast-l2 { font-size: 12px }
	.sp-toast-go { font-size: 13px; padding: 10px 16px }
}