/* =============================================================
   ARC single-paper page theme  (#paper_container / #widget-paper)

   Brings the plugin-rendered paper page in line with the redesigned
   profile & latest-publications pages: mint dotted canvas, white
   elevated cards, teal + green accents, a Fraunces display title,
   green-bar section headings, justified AI summary, and one unified
   soft pill for every metadata tag (instead of the loud Bootstrap
   primary/info/warning/danger badges).

   Everything is scoped under #widget-paper / #paper_container so it
   cannot leak to other pages. The plugin markup is read-only, so the
   redesign is achieved purely by overriding its classes here.
   ============================================================= */

#widget-paper {
	--pp-teal:       #0a3d47;
	--pp-teal-dark:  #072d35;
	--pp-green:      #79ba3a;
	--pp-green-deep: #5c9a30;
	--pp-ink:        #0a3d47;
	--pp-body:       #2c4148;
	--pp-muted:      #5c6b66;
	--pp-line:       rgba(10, 61, 71, 0.08);
	--pp-tint:       #edf5e2;   /* green tint  */
	--pp-mint:       #eaf5f8;   /* teal tint   */
	--pp-card-radius: 18px;
	--pp-card-shadow: 0 10px 30px rgba(10, 61, 71, 0.08);
}

/* ── Page canvas — white with the mint dot-grid, like profile pages ── */
.ar-page-container:has(#paper_container) {
	background-color: #ffffff;
	background-image: radial-gradient(rgba(10, 61, 71, 0.06) 1.3px, transparent 1.3px);
	background-size: 22px 22px;
	padding-top: 30px;
	padding-bottom: 56px;
}

/* ── Shared card shell for the three content blocks ─────────────── */
#widget-paper .topcol,
#widget-paper .leftcol,
#widget-paper .rightcol {
	background: #fff;
	border: 1px solid var(--pp-line);
	border-radius: var(--pp-card-radius);
	box-shadow: var(--pp-card-shadow);
}

/* ── Header card (badge + title + source meta) ──────────────────── */
#widget-paper .topcol {
	padding: 28px 32px 26px !important;
	margin-bottom: 8px;
}

#widget-paper .paper-title {
	font-family: "Fraunces", Georgia, serif !important;
	font-weight: 600 !important;
	font-size: clamp(26px, 3vw, 40px) !important;
	line-height: 1.12 !important;
	letter-spacing: -0.02em;
	color: var(--pp-ink) !important;
	margin: 14px 0 8px !important;
}

/* source / publication meta line (lives in .arc-paper-head after JS folds it) */
#widget-paper .text-black-50 {
	color: var(--pp-muted) !important;
	font-size: 15px !important;
}

/* Title block folded into the top of the summary card */
#widget-paper .arc-paper-head {
	padding-top: 16px !important;
	padding-bottom: 24px !important;
}

/* Subject "Paper" pill + share toggle (recolour the dark/yellow badges) */
#widget-paper .badge-share-group .badge-share {
	background: var(--pp-teal) !important;
	color: #fff !important;
}
#widget-paper .badge-share-group .badge-label {
	background: var(--pp-tint) !important;
	color: var(--pp-green-deep) !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 11px;
}
#widget-paper .badge-share-group:hover .badge-share {
	background: var(--pp-teal-dark) !important;
}
#widget-paper .badge-share-group:hover .badge-label {
	background: #e3efd0 !important;
}

/* ── Two-column body ────────────────────────────────────────────── */
#widget-paper .leftcol {
	padding: 8px 34px !important;
}
#widget-paper .rightcol {
	padding: 8px 24px !important;
	align-self: flex-start;        /* shrink-wrap so it can stick */
	position: sticky !important;
	/* clear the sticky site header, then a small breathing gap */
	top: calc(var(--arc-header-h, 150px) + 16px);
}

/* position:sticky needs a non-clipping ancestor chain. Keep the paper
   wrappers on overflow:visible (html/body already use overflow-x:clip). */
.ar-page-container:has(#paper_container),
#paper_container,
#widget-paper,
#widget-paper .row {
	overflow: visible !important;
}

/* Open a gap between the two card columns. Making each column the card
   removed Bootstrap's gutter (it lived in the column padding we override),
   so neutralise the row gutter and carve the gap out of the left column's
   width — keeping the columns summing to 100% so neither wraps. */
#widget-paper .row {
	--bs-gutter-x: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
@media (min-width: 768px) {
	#widget-paper .leftcol {
		width: calc(75% - 28px) !important;
		margin-right: 28px !important;
	}
}

/* Each section becomes a divided row inside its card (editorial rhythm) */
#widget-paper .leftcol > div,
#widget-paper .rightcol > div {
	margin: 0 !important;
	padding: 24px 0 !important;
	border-bottom: 1px solid var(--pp-line);
}
#widget-paper .leftcol > div:last-child,
#widget-paper .rightcol > div:last-child {
	border-bottom: 0;
}

/* ── Section headings — teal with a green accent bar ────────────── */
#widget-paper h5 {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--pp-teal) !important;
	font-size: 1rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.01em;
	text-transform: none !important;
	margin: 0 0 0.85rem !important;
}
#widget-paper h5::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 18px;
	border-radius: 3px;
	background: var(--pp-green);
}

/* AI badge pill */
#widget-paper .ai-badge {
	background: var(--pp-green) !important;
	color: #fff !important;
	border-radius: 50px;
	padding: 0.12em 0.55em;
	font-size: 0.58rem !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	vertical-align: middle;
	top: 0;
}

/* ── Body copy ──────────────────────────────────────────────────── */
#widget-paper .desc {
	color: var(--pp-body) !important;
	line-height: 1.7;
	font-size: 1rem;
}
/* AI summary & abstract read as justified prose */
#widget-paper .summary-text,
#widget-paper .abstract .desc {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
}

/* Author links + "View more/less" toggles */
#widget-paper a.author-link {
	color: var(--pp-teal);
	font-weight: 600;
	text-decoration: none;
}
#widget-paper a.author-link:hover {
	color: var(--pp-green-deep);
	text-decoration: underline;
}
#widget-paper .keyword-link-expand {
	color: var(--pp-green-deep);
	font-weight: 600;
	cursor: pointer;
	margin-left: 6px;
}
#widget-paper .keyword-link-expand:hover {
	text-decoration: underline;
}

/* DOI / identifiers link */
#widget-paper .identifiers a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--pp-green-deep);
	font-weight: 600;
	text-decoration: none;
}
#widget-paper .identifiers a:hover {
	text-decoration: underline;
}

/* ── Unified metadata pills (sidebar) ───────────────────────────── */
/* Replaces the assorted bg-primary/info/warning/success/danger/dark
   badges with one calm, brand-tinted pill — each group is already
   labelled by its heading, so the colour coding is redundant. */
#widget-paper .rightcol .badge {
	display: inline-block;
	background: var(--pp-mint) !important;
	color: var(--pp-teal) !important;
	border: 1px solid rgba(10, 61, 71, 0.10);
	border-radius: 50px !important;
	padding: 0.42em 0.85em !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	margin: 0 0.4rem 0.5rem 0 !important;
	white-space: normal;
	transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
#widget-paper .rightcol .badge:hover {
	background: var(--pp-tint) !important;
	border-color: rgba(121, 186, 58, 0.4);
	transform: translateY(-1px);
}
#widget-paper .rightcol .badge a {
	color: inherit !important;
	text-decoration: none;
}

/* ── Disclaimer → mint/teal note (matches profile alert) ────────── */
#widget-paper .bottomcol {
	border: 0;
	background: transparent;
	box-shadow: none;
}
#widget-paper .bottomcol .alert-info {
	background: var(--pp-mint) !important;
	border: 1px solid rgba(10, 61, 71, 0.14) !important;
	color: var(--pp-teal) !important;
	border-radius: 12px !important;
	margin-top: 16px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
	#widget-paper .rightcol {
		position: static;
		margin-top: 16px;
	}
	#widget-paper .topcol,
	#widget-paper .leftcol,
	#widget-paper .rightcol {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}
	/* Bootstrap's pe-5 on .leftcol fights the card padding on mobile */
	#widget-paper .leftcol {
		padding-right: 22px !important;
	}
}