/* ============================================================================
   ACS Publisher — journal stylesheet
   Server path: public/journals/<journalId>/styleSheet.css
   (uploaded from OJS: Settings > Website > Appearance > Journal style sheet)

   Section 1 — site-wide rules (pre-existing)
   Section 2 — Lens full-text reader, styled after the SAGE Journals article
               view: sans-serif body, ragged-right measure, banded abstract,
               ruled academic tables, square figure cards. Scoped to
               body.reader only, so nothing here leaks into the rest of the site.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Site-wide
   --------------------------------------------------------------------------- */

body {
	text-align: justify;
}

/* ---------------------------------------------------------------------------
   2. Lens full-text reader
   The Lens galley plugin loads lens.css after this file, so every rule below
   is written with enough specificity (body.reader .lens-article ...) to win
   without needing !important.
   --------------------------------------------------------------------------- */

body.reader {
	--acs-accent: #4b7d92;
	--acs-accent-dark: #2f5c6e;
	--acs-accent-soft: #eef4f7;
	--acs-ink: #16191c;
	--acs-ink-soft: #33393f;
	--acs-muted: #6a7480;
	--acs-rule: #d9e0e5;
	--acs-rule-strong: #2b3238;
	--acs-band: #f5f7f9;
	--acs-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--acs-serif: "Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
	text-align: left;
}

/* --- Canvas ---------------------------------------------------------------- */

body.reader .lens-article .panel.content.document .nodes {
	background: #ffffff;
	padding: 0 0 90px 0;
}

body.reader .lens-article .panel.content.document {
	background: #ffffff;
	color: var(--acs-ink);
	border-right: 1px solid var(--acs-rule);
}

/* --- Column split ----------------------------------------------------------
   Lens ships a 50/50 split: the article column and the TOC/figures/references
   column get equal width. Give the reading column the larger share.

   Only above 1000px — below that Lens falls back to a 400px minimum per panel
   and scrolls horizontally, and forcing percentages there squeezes the resource
   panel below the width its own layout assumes.
   --------------------------------------------------------------------------- */

@media (min-width: 1000px) {
	body.reader .lens-article .panel.content.document {
		width: 62%;
	}

	body.reader .lens-article .resources {
		width: 38%;
	}
}

/* --- Cover: journal eyebrow, title, authors, affiliations ------------------ */

body.reader .lens-article .content-node.cover {
	padding: 34px 48px 26px;
	border-top: 4px solid var(--acs-accent);
	border-bottom: 1px solid var(--acs-rule);
	margin-bottom: 4px;
}

/* SAGE prints the article type / date as a small grey eyebrow above the title */
body.reader .lens-article .content-node.cover .published-on {
	font-family: var(--acs-sans);
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--acs-muted);
	margin-bottom: 12px;
}

body.reader .lens-article .content-node.cover .published-on i {
	font-style: normal;
}

body.reader .lens-article .content-node.cover .text.title {
	font-family: var(--acs-sans);
	font-size: 30px;
	line-height: 1.26;
	font-weight: 700;
	color: var(--acs-ink);
	letter-spacing: -.005em;
	margin-bottom: 18px;
}

body.reader .lens-article .content-node.cover .authors {
	font-family: var(--acs-sans);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--acs-ink-soft);
	margin-bottom: 4px;
}

/* Each author is its own block in Lens — lay them out inline with separators */
body.reader .lens-article .content-node.cover .authors .content-node.text {
	display: inline;
}

body.reader .lens-article .content-node.cover .authors .content-node.text > .content {
	display: inline;
}

body.reader .lens-article .content-node.cover .authors .contributor_reference {
	color: var(--acs-accent-dark);
	font-weight: 600;
	text-decoration: none;
	background: none;
	border-bottom: none;
}

body.reader .lens-article .content-node.cover .authors .contributor_reference:hover {
	text-decoration: underline;
}

body.reader .lens-article .content-node.cover .authors .contributor_reference::after {
	content: ",";
	color: var(--acs-muted);
	font-weight: 400;
	margin: 0 .3em 0 0;
}

body.reader .lens-article .content-node.cover .authors .content-node.text:last-of-type .contributor_reference::after {
	content: "";
	margin: 0;
}

body.reader .lens-article .content-node.cover .text.plain {
	font-family: var(--acs-sans);
	font-size: 13px;
	line-height: 1.55;
	color: var(--acs-muted);
	margin-top: 10px;
}

/* --- Headings: real hierarchy --------------------------------------------- */

body.reader .lens-article .content-node.heading {
	padding: 0;
	margin: 0;
}

body.reader .lens-article .content-node.heading > .content {
	font-family: var(--acs-sans);
	color: var(--acs-ink);
}

/* Level 1 = section head. SAGE sets these in bold sentence case over a hairline
   rule, not in small caps. */
body.reader .lens-article .content-node.heading.level-1 > .content {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--acs-ink);
	padding: 38px 0 8px;
	margin: 0 48px 16px;
	border-bottom: 1px solid var(--acs-rule);
}

body.reader .lens-article .content-node.heading.level-2 > .content {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--acs-ink);
	padding: 26px 48px 8px;
}

body.reader .lens-article .content-node.heading.level-3 > .content {
	font-size: 15.5px;
	font-weight: 700;
	font-style: italic;
	line-height: 1.4;
	color: var(--acs-ink-soft);
	padding: 20px 48px 6px;
}

body.reader .lens-article .content-node.heading .text.title {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* --- Body text ------------------------------------------------------------- */

body.reader .lens-article .content-node.paragraph {
	padding: 0 48px 17px;
}

/* Justified measure. Hyphenation stays on: justifying without it opens rivers
   of white space in the narrower column. */
body.reader .lens-article .content-node.paragraph,
body.reader .lens-article .content-node.paragraph .content-node.text {
	font-family: var(--acs-sans);
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--acs-ink-soft);
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* First paragraph after a level-1 heading (e.g. the Abstract) sits in a band */
body.reader .lens-article .content-node.heading.level-1 + .content-node.paragraph {
	background: var(--acs-band);
	border-left: 4px solid var(--acs-accent);
	color: var(--acs-ink);
	padding: 18px 24px 18px 24px;
	margin: 0 48px 22px;
}

body.reader .lens-article .annotation.emphasis {
	font-style: italic;
}

body.reader .lens-article .annotation.strong {
	font-weight: 700;
	color: var(--acs-ink);
}

/* In-text citation / figure links — plain blue links, the Atypon treatment */
body.reader .lens-article .content-node.paragraph .annotation.resource-reference {
	color: var(--acs-accent-dark);
	background: none;
	border-bottom: none;
	padding: 0;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

body.reader .lens-article .content-node.paragraph .annotation.resource-reference:hover {
	text-decoration: underline;
}

body.reader .lens-article .content-node.paragraph .annotation.resource-reference.active {
	background: var(--acs-accent-soft);
	box-shadow: 0 0 0 2px var(--acs-accent-soft);
	border-radius: 2px;
}

/* --- Figures & tables ------------------------------------------------------ */

body.reader .lens-article .content-node.figure,
body.reader .lens-article .content-node.table {
	margin: 24px 48px 28px;
	padding: 0;
	background: #ffffff;
	border: 1px solid var(--acs-rule);
	border-radius: 2px;
	overflow: hidden;
}

body.reader .lens-article .content-node.figure .resource-header,
body.reader .lens-article .content-node.table .resource-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--acs-band);
	border-bottom: 1px solid var(--acs-rule);
	padding: 8px 14px;
}

body.reader .lens-article .content-node.figure .resource-header .name,
body.reader .lens-article .content-node.table .resource-header .name {
	font-family: var(--acs-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--acs-accent-dark);
}

body.reader .lens-article .content-node.figure .resource-header .toggle,
body.reader .lens-article .content-node.table .resource-header .toggle {
	font-family: var(--acs-sans);
	font-size: 12.5px;
	color: var(--acs-muted);
	text-decoration: none;
	margin-left: 14px;
}

body.reader .lens-article .content-node.figure .resource-header .toggle:hover,
body.reader .lens-article .content-node.table .resource-header .toggle:hover {
	color: var(--acs-accent-dark);
	text-decoration: underline;
}

body.reader .lens-article .content-node.figure > .content,
body.reader .lens-article .content-node.table > .content {
	padding: 18px;
}

body.reader .lens-article .content-node.figure > .content > .label,
body.reader .lens-article .content-node.table > .content > .label {
	display: none; /* already shown in the card header */
}

body.reader .lens-article .content-node.figure .image-wrapper img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	background: #fff;
}

body.reader .lens-article .content-node.caption,
body.reader .lens-article .content-node.caption .content-node.paragraph,
body.reader .lens-article .content-node.caption .content-node.text {
	font-family: var(--acs-sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--acs-muted);
	text-align: left;
	padding: 0;
	background: none;
	border: none;
	margin: 0;
}

body.reader .lens-article .content-node.caption {
	margin-top: 12px;
}

/* Lens renders figures and tables in the right-hand resource panel, not inline
   in the article column, so the wide article margins would waste ~60px of an
   already narrow panel. Tighten them there. */
body.reader .lens-article .resources .content-node.figure,
body.reader .lens-article .resources .content-node.table {
	margin: 18px 16px 22px;
}

/* Captions stay ragged right — justifying a 14px line in a narrow panel combs
   it full of gaps. */
body.reader .lens-article .resources .content-node.caption,
body.reader .lens-article .resources .content-node.caption .content-node.paragraph,
body.reader .lens-article .resources .content-node.caption .content-node.text {
	text-align: left;
	hyphens: none;
	-webkit-hyphens: none;
}

/* Ruled academic table: horizontal rules only, heavy top and bottom */
body.reader .lens-article .content-node.table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--acs-sans);
	font-size: 14px;
	line-height: 1.5;
	background: #fff;
	border-top: 2px solid var(--acs-rule-strong);
	border-bottom: 2px solid var(--acs-rule-strong);
}

body.reader .lens-article .content-node.table th,
body.reader .lens-article .content-node.table td {
	border: none;
	border-bottom: 1px solid var(--acs-rule);
	padding: 9px 12px;
	text-align: left;
	vertical-align: top;
	color: var(--acs-ink-soft);
}

body.reader .lens-article .content-node.table th {
	background: none;
	border-bottom: 1px solid var(--acs-rule-strong);
	color: var(--acs-ink);
	font-weight: 700;
}

body.reader .lens-article .content-node.table tbody tr:last-child td {
	border-bottom: none;
}

/* --- Menu bar -------------------------------------------------------------- */

body.reader .lens-article .menu-bar {
	background: #fff;
	border-bottom: 1px solid var(--acs-rule);
}

body.reader .lens-article .menu-bar .context-toggles {
	display: flex;
	gap: 2px;
	padding: 0 10px;
}

body.reader .lens-article .menu-bar .context-toggle {
	font-family: var(--acs-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--acs-muted);
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	text-decoration: none;
	padding: 0 15px;
	transition: color .15s ease, border-color .15s ease;
}

body.reader .lens-article .menu-bar .context-toggle:hover {
	color: var(--acs-ink);
}

body.reader .lens-article .menu-bar .context-toggle.active {
	color: var(--acs-accent-dark);
	background: transparent;
	border-bottom-color: var(--acs-accent);
}

body.reader .lens-article .menu-bar .context-toggle i {
	margin-right: 6px;
	opacity: .75;
}

/* --- Table of contents panel ---------------------------------------------- */

body.reader .lens-article .panel.toc .toc {
	padding: 22px 26px 60px;
	font-family: var(--acs-sans);
}

body.reader .lens-article .panel.toc .heading-ref {
	display: block;
	padding: 7px 12px;
	margin: 1px 0;
	border-left: 3px solid transparent;
	color: var(--acs-ink-soft);
	font-size: 14.5px;
	line-height: 1.45;
	cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}

body.reader .lens-article .panel.toc .heading-ref:hover {
	background: var(--acs-band);
	color: var(--acs-ink);
}

body.reader .lens-article .panel.toc .heading-ref.active {
	background: var(--acs-accent-soft);
	border-left-color: var(--acs-accent);
	color: var(--acs-accent-dark);
	font-weight: 600;
}

body.reader .lens-article .panel.toc .heading-ref.level-1 {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--acs-ink);
	margin-top: 14px;
}

body.reader .lens-article .panel.toc .heading-ref.level-2 {
	padding-left: 24px;
}

body.reader .lens-article .panel.toc .heading-ref.level-3 {
	padding-left: 38px;
	font-size: 13.5px;
	color: var(--acs-muted);
}

/* --- References panel ------------------------------------------------------ */

body.reader .lens-article .content-node.citation {
	font-family: var(--acs-sans);
	border-bottom: 1px solid var(--acs-rule);
	padding: 16px 26px 18px;
	margin: 0;
	transition: background .12s ease;
}

body.reader .lens-article .content-node.citation:hover {
	background: var(--acs-band);
}

body.reader .lens-article .content-node.citation .resource-header .name {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--acs-muted);
}

body.reader .lens-article .content-node.citation .text.title {
	display: block;
	font-family: var(--acs-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--acs-ink);
	margin-bottom: 4px;
}

body.reader .lens-article .content-node.citation .authors {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--acs-ink-soft);
}

body.reader .lens-article .content-node.citation .source {
	font-size: 13px;
	font-style: italic;
	color: var(--acs-muted);
}

body.reader .lens-article .content-node.citation .doi {
	font-size: 12.5px;
	margin-top: 5px;
	word-break: break-all;
}

body.reader .lens-article .content-node.citation .doi a {
	color: var(--acs-accent-dark);
	text-decoration: none;
}

body.reader .lens-article .content-node.citation .doi a:hover {
	text-decoration: underline;
}

/* --- Info panel ------------------------------------------------------------ */

body.reader .lens-article .panel.info .content-node.publication-info > .content {
	font-family: var(--acs-sans);
	padding: 22px 26px;
}

body.reader .lens-article .panel.info .meta-data .container {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 9px 0;
	border-bottom: 1px solid var(--acs-rule);
}

body.reader .lens-article .panel.info .meta-data .label {
	flex: 0 0 90px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--acs-muted);
}

body.reader .lens-article .panel.info .meta-data .value,
body.reader .lens-article .panel.info .meta-data .value a {
	font-size: 14px;
	line-height: 1.55;
	color: var(--acs-ink-soft);
}

body.reader .lens-article .panel.info .meta-data .value a {
	color: var(--acs-accent-dark);
	text-decoration: none;
	word-break: break-all;
}

body.reader .lens-article .panel.info .meta-data .value a:hover {
	text-decoration: underline;
}

body.reader .lens-article .panel.info .meta-data .dates {
	font-size: 13px;
	color: var(--acs-muted);
	padding: 10px 0;
}

/* --- Scrollbar / chrome ---------------------------------------------------- */

body.reader .lens-article .surface-scrollbar {
	background: var(--acs-band);
	border-left: 1px solid var(--acs-rule);
}

body.reader .lens-article .surface-scrollbar .scroll-handle {
	background: #c3ced8;
	border-radius: 4px;
}

body.reader .lens-article .surface-scrollbar .scroll-handle:hover {
	background: var(--acs-accent);
}

/* --- Narrow screens -------------------------------------------------------- */

@media (max-width: 800px) {
	body.reader .lens-article .content-node.cover {
		padding: 24px 22px 20px;
	}

	body.reader .lens-article .content-node.cover .text.title {
		font-size: 24px;
	}

	body.reader .lens-article .content-node.paragraph {
		padding: 0 22px 16px;
		font-size: 16px;
	}

	body.reader .lens-article .content-node.heading.level-1 > .content {
		font-size: 18.5px;
		margin: 0 22px 14px;
		padding-top: 28px;
	}

	body.reader .lens-article .content-node.heading.level-2 > .content {
		font-size: 16.5px;
		padding: 22px 22px 8px;
	}

	body.reader .lens-article .content-node.heading.level-3 > .content {
		padding: 16px 22px 6px;
	}

	body.reader .lens-article .content-node.heading.level-1 + .content-node.paragraph {
		margin: 0 22px 18px;
		padding: 16px 18px;
	}

	body.reader .lens-article .content-node.figure,
	body.reader .lens-article .content-node.table {
		margin: 20px 22px 24px;
	}
}

/* --- Print ----------------------------------------------------------------- */

@media print {
	body.reader .lens-article .menu-bar,
	body.reader .lens-article .surface-scrollbar,
	body.reader .lens-article .panel.toc {
		display: none;
	}

	body.reader .lens-article .panel.content.document {
		border-right: none;
	}

	body.reader .lens-article .content-node.paragraph,
	body.reader .lens-article .content-node.paragraph .content-node.text {
		font-size: 11pt;
		line-height: 1.5;
		color: #000;
	}

	body.reader .lens-article .content-node.figure,
	body.reader .lens-article .content-node.table {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}


/* ---------------------------------------------------------------------------
   3. Figure references — green, boxed
   The rule in section 2 colours every .resource-reference the same accent blue,
   so a "Figure 1" link was indistinguishable from a "(Smith, 2020)" citation.
   These rules split them apart: citations stay accent blue, figure links become
   green chips. Same specificity as the section 2 rule and placed after it, so
   they win on order without !important.
   --------------------------------------------------------------------------- */

body.reader {
	--acs-fig: #047857;
	--acs-fig-rule: #a7d9c5;
	--acs-fig-soft: #ecfdf5;
}

body.reader .lens-article .content-node.paragraph .annotation.figure_reference {
	color: var(--acs-fig);
	background: var(--acs-fig-soft);
	border: 1px solid var(--acs-fig-rule);
	border-radius: 3px;
	padding: 0 4px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

body.reader .lens-article .content-node.paragraph .annotation.figure_reference:hover {
	color: #ffffff;
	background: var(--acs-fig);
	border-color: var(--acs-fig);
	text-decoration: none;
}

/* Lens adds .active to the reference you last clicked */
body.reader .lens-article .content-node.paragraph .annotation.figure_reference.active {
	color: #ffffff;
	background: var(--acs-fig);
	border-color: var(--acs-fig);
	box-shadow: none;
}

@media print {
	body.reader .lens-article .content-node.paragraph .annotation.figure_reference {
		color: #000;
		background: none;
		border-color: #999;
	}
}