/* ============================================================================
   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.
   Section 3 — figure references as green chips
   Section 4 — citation references as accent-blue chips
   Section 5 — table header band + wide-table scrolling
   Section 6 — table references as amber chips

   Sections 3-6 refine rules already set in section 2. They carry the same
   specificity and win on source order, so they must stay AFTER it and nothing
   here needs !important.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   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;
	}
}


/* ---------------------------------------------------------------------------
   4. Citation references — boxed, accent blue
   Section 3 boxed the figure links and deliberately left citations as plain
   coloured text. They now get the same chip, in the journal accent rather than
   green, so both read as links while staying tellable apart by colour.

   Two differences from the figure chip, both because "Al-Awadi and Al-Jedabi,
   2000" is far longer than "Fig. 1":
     - no white-space:nowrap, which on a citation that long would push the line
       past the measure instead of letting it wrap;
     - box-decoration-break:clone, so a citation that does wrap gets a closed
       border on both fragments instead of one box left hanging open.

   generate_jats.php puts the brackets OUTSIDE the <xref> it emits, so what
   renders is "(<chip>)" — the brackets stay plain. That is what keeps two
   citations sharing one bracket, "(Awhaaj, 1998; Al-Jedabi, 2000)", legible as
   two separate chips.
   --------------------------------------------------------------------------- */

body.reader {
	--acs-cite-rule: #bcd3dd;
}

body.reader .lens-article .content-node.paragraph .annotation.citation_reference {
	color: var(--acs-accent-dark);
	background: var(--acs-accent-soft);
	border: 1px solid var(--acs-cite-rule);
	border-radius: 3px;
	padding: 0 4px;
	font-weight: 600;
	text-decoration: none;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

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

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

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


/* ---------------------------------------------------------------------------
   5. Tables — header band, and wide tables that scroll instead of squashing
   Section 2's ruled table is right for print, but it leaves the header row
   indistinguishable from the body at a glance, and its width:100% means a
   many-column table crushes every column to fit the narrow right-hand panel
   Lens renders tables in, wrapping cell text into unreadable slivers.

   The header band uses the same tint the PDF already applies to header cells
   (pdf_mpdf.php: #eef2fb ink on #0a2a6e), so one table reads the same way in
   the reader and in the downloaded PDF. The horizontal-rules-only character is
   kept — no vertical lines, no zebra.
   --------------------------------------------------------------------------- */

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

/* Digits line up column-wise instead of drifting with proportional figures. */
body.reader .lens-article .content-node.table td {
	font-variant-numeric: tabular-nums;
}

body.reader .lens-article .content-node.table tbody tr:hover td {
	background: var(--acs-band);
}

/* min-width rather than width, so a narrow table still fills its card but a
   wide one grows to its natural width and scrolls inside the card below,
   instead of compressing every column to fit the panel. */
body.reader .lens-article .content-node.table table {
	width: auto;
	min-width: 100%;
}

body.reader .lens-article .content-node.table > .content {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media print {
	body.reader .lens-article .content-node.table th {
		background: none;
		color: #000;
	}

	/* Nothing can be scrolled on paper — let a wide table print in full. */
	body.reader .lens-article .content-node.table > .content {
		overflow-x: visible;
	}
}


/* ---------------------------------------------------------------------------
   6. Table references — boxed, amber
   generate_jats.php now emits <xref ref-type="table"> for "Table 1" /
   "Tables 1, 2, 3", so these links exist in the body text alongside the figure
   and citation ones. Amber keeps the three kinds apart at a glance: blue
   citation, green figure, amber table.

   Two selectors, because Lens names the class from its own ref-type map rather
   than from ref-type directly — "bibr" becomes citation_reference, so
   "table_reference" is an assumption. The :not() selector is the belt: it
   catches any resource-reference that is neither a citation nor a figure,
   which is the table link whatever Lens decided to call it. It cannot touch
   the other two, and it is scoped to .content-node.paragraph, so the affiliation
   and corresp markers in the cover block are out of its reach.
   --------------------------------------------------------------------------- */

body.reader {
	--acs-tbl: #b45309;
	--acs-tbl-rule: #fcd34d;
	--acs-tbl-soft: #fffbeb;
}

body.reader .lens-article .content-node.paragraph .annotation.table_reference,
body.reader .lens-article .content-node.paragraph .annotation.resource-reference:not(.citation_reference):not(.figure_reference) {
	color: var(--acs-tbl);
	background: var(--acs-tbl-soft);
	border: 1px solid var(--acs-tbl-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.table_reference:hover,
body.reader .lens-article .content-node.paragraph .annotation.resource-reference:not(.citation_reference):not(.figure_reference):hover {
	color: #ffffff;
	background: var(--acs-tbl);
	border-color: var(--acs-tbl);
	text-decoration: none;
}

body.reader .lens-article .content-node.paragraph .annotation.table_reference.active,
body.reader .lens-article .content-node.paragraph .annotation.resource-reference.active:not(.citation_reference):not(.figure_reference) {
	color: #ffffff;
	background: var(--acs-tbl);
	border-color: var(--acs-tbl);
	box-shadow: none;
}

@media print {
	body.reader .lens-article .content-node.paragraph .annotation.table_reference,
	body.reader .lens-article .content-node.paragraph .annotation.resource-reference:not(.citation_reference):not(.figure_reference) {
		color: #000;
		background: none;
		border-color: #999;
	}
}