/**
 * components.css — global components
 *
 * Buttons, links, labels, icons, breadcrumbs and sidebar blocks, in the sizes
 * and states defined in the approved design. Every value below — including
 * hover, active, focus and disabled — is measured, not invented.
 *
 * Where the design draws a 1px stroke *inside* a fixed-size frame, the CSS
 * padding is the Figma padding less that 1px, so the outer box matches the
 * frame exactly. Each of those is marked.
 *
 * The sidebar rules style the OJS native block plugins and the blocks created
 * with the Custom Block Manager. The theme styles them; it does not store
 * their content (THEME_RULES.md §3 and §7).
 */

/* ---------------------------------------------------------------
   Icons — masked so a single SVG inherits the colour of its context
   --------------------------------------------------------------- */
.sup-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.sup-icon--xs { width: 12px; height: 12px; }
.sup-icon--sm { width: 14px; height: 14px; }
.sup-icon--md { width: 20px; height: 20px; }
.sup-icon--lg { width: 18px; height: 18px; }
.sup-icon--xl { width: 22px; height: 22px; }
.sup-icon--xxl { width: 24px; height: 24px; }

.sup-icon--search { -webkit-mask-image: url('../images/search.svg'); mask-image: url('../images/search.svg'); }
/* The same glyph at the heavier weight the search button is drawn with */
.sup-icon--search-strong { -webkit-mask-image: url('../images/search-strong.svg'); mask-image: url('../images/search-strong.svg'); }
.sup-icon--arrow-right { -webkit-mask-image: url('../images/arrow-right.svg'); mask-image: url('../images/arrow-right.svg'); }
.sup-icon--arrow-right-solid { -webkit-mask-image: url('../images/arrow-right-solid.svg'); mask-image: url('../images/arrow-right-solid.svg'); }
.sup-icon--chevron { -webkit-mask-image: url('../images/nav-chevron.svg'); mask-image: url('../images/nav-chevron.svg'); }
.sup-icon--plus { -webkit-mask-image: url('../images/plus.svg'); mask-image: url('../images/plus.svg'); }
.sup-icon--galley-html { -webkit-mask-image: url('../images/galley-html.svg'); mask-image: url('../images/galley-html.svg'); }
.sup-icon--galley-pdf { -webkit-mask-image: url('../images/galley-pdf.svg'); mask-image: url('../images/galley-pdf.svg'); }
.sup-icon--galley-xml { -webkit-mask-image: url('../images/galley-xml.svg'); mask-image: url('../images/galley-xml.svg'); }
.sup-icon--file { -webkit-mask-image: url('../images/file.svg'); mask-image: url('../images/file.svg'); }
.sup-icon--note-info { width: 32px; height: 32px; -webkit-mask-image: url('../images/note-info.svg'); mask-image: url('../images/note-info.svg'); }
.sup-icon--note-date { -webkit-mask-image: url('../images/note-calendar.svg'); mask-image: url('../images/note-calendar.svg'); }
.sup-icon--linkedin { -webkit-mask-image: url('../images/linkedin.svg'); mask-image: url('../images/linkedin.svg'); }
.sup-icon--globe { -webkit-mask-image: url('../images/globe.svg'); mask-image: url('../images/globe.svg'); }
.sup-icon--download { -webkit-mask-image: url('../images/download.svg'); mask-image: url('../images/download.svg'); }
.sup-icon--license-cc { width: 24px; height: 24px; -webkit-mask-image: url('../images/license-cc.svg'); mask-image: url('../images/license-cc.svg'); }
.sup-icon--license-by { width: 24px; height: 24px; -webkit-mask-image: url('../images/license-by.svg'); mask-image: url('../images/license-by.svg'); }

/* ORCID keeps its own two colours, so it is an image rather than a mask. */
.sup-icon--orcid {
	width: 16px;
	height: 16px;
	background: transparent center / contain no-repeat url('../images/orcid.svg');
}

/* ---------------------------------------------------------------
   Buttons

   Three shapes in the design:
     primary   filled brand, 4px corners     — the masthead call to action
     accent    filled accent, square corners — the section call to action
     secondary outlined brand, 4px corners   — galleys and sidebar actions
   --------------------------------------------------------------- */
.sup-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sup-space-4);
	box-sizing: border-box;
	font-family: var(--sup-font-ui);
	line-height: var(--sup-leading-flat);
	/* Filled buttons have no stroke in the design: their height is padding
	   plus one line. Only the outlined variant adds a border. */
	border: 0 solid transparent;
	border-radius: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

/* Primary — the Primary Button component, Size=Large: filled, a 1px
   stroke of the same colour drawn inside, 4px corners, 12px above and
   below and 14px at the sides, 15/15 medium. Without its icon it is 39px
   tall, as the masthead draws it. The stroke sits inside the padding, so
   the padding gives that 1px back. */
.sup-btn--primary {
	padding: calc(var(--sup-space-12) - var(--sup-border-width)) calc(var(--sup-space-14) - var(--sup-border-width));
	border: var(--sup-border-width) solid var(--sup-color-brand-border);
	border-radius: var(--sup-radius);
	font-size: var(--sup-text-ui);
	font-weight: var(--sup-weight-medium);
	background: var(--sup-color-brand);
	color: var(--sup-color-brand-contrast);
}
.sup-btn--primary:hover {
	background: var(--sup-color-brand-hover);
	border-color: var(--sup-color-brand-border-hover);
	color: var(--sup-color-brand-contrast);
	text-decoration: none;
}
.sup-btn--primary:active {
	background: var(--sup-color-brand-active);
	border-color: var(--sup-color-brand-dark);
	box-shadow: var(--sup-shadow-pressed);
}
/* Focus draws a 2px stroke: the second pixel is an inset shadow, so the
   button keeps its size. */
.sup-btn--primary:focus-visible {
	background: var(--sup-color-brand-tint-strong);
	border-color: var(--sup-color-focus);
	box-shadow: inset 0 0 0 var(--sup-border-width) var(--sup-color-focus);
	color: var(--sup-color-brand-focus-text);
}

/* Accent — filled, 42px tall, 16/600. The section call to action. */
.sup-btn--accent {
	min-height: 42px;
	padding: var(--sup-space-12) var(--sup-space-20);
	font-size: var(--sup-text-body);
	font-weight: var(--sup-weight-semibold);
	background: var(--sup-color-accent);
	color: var(--sup-color-brand-contrast);
}
.sup-btn--accent:hover {
	background: var(--sup-color-accent-hover);
	border-color: var(--sup-color-accent-hover);
	color: var(--sup-color-brand-contrast);
	text-decoration: none;
}
.sup-btn--accent:active {
	background: var(--sup-color-accent-active);
	border-color: var(--sup-color-accent-active);
	color: var(--sup-color-brand-contrast);
	text-decoration: none;
}
.sup-btn--accent:focus-visible {
	background: var(--sup-color-brand-dark);
	border-color: var(--sup-color-brand-dark);
	color: var(--sup-color-brand-contrast);
}

/* Secondary — outlined, 46px tall, 16/500. Padding is 12/8 in the design,
   less the 1px inside stroke. */
.sup-btn--secondary {
	min-height: 46px;
	padding: 11px 7px;
	gap: var(--sup-space-8);
	font-size: var(--sup-text-body);
	font-weight: var(--sup-weight-medium);
	border-radius: var(--sup-radius);
	background: var(--sup-color-surface);
	border: var(--sup-border-width) solid var(--sup-color-brand-border);
	color: var(--sup-color-brand-text);
}
.sup-btn--secondary:hover {
	background: var(--sup-color-brand-tint-hover);
	border-color: var(--sup-color-brand-border-hover);
	color: var(--sup-color-brand-text);
	text-decoration: none;
}
.sup-btn--secondary:active {
	background: var(--sup-color-brand-tint-active);
	border-color: var(--sup-color-brand-dark);
	color: var(--sup-color-brand-text);
}
.sup-btn--secondary:focus-visible {
	background: var(--sup-color-brand-tint-focus);
	border-color: var(--sup-color-focus);
	color: var(--sup-color-brand-text);
}

/* Small — the galley links: 32px tall, 14/500, 8/12 padding less the
   stroke, as every galley button on the JMSACL canvas is drawn */
.sup-btn--sm {
	min-height: 32px;
	padding: 7px 11px;
	gap: var(--sup-space-4);
	font-size: var(--sup-text-sm);
}

/* Disabled — identical for every variant */
.sup-btn[disabled],
.sup-btn[aria-disabled="true"],
.sup-btn--disabled {
	background: var(--sup-color-disabled-bg);
	border-color: var(--sup-color-disabled-border);
	color: var(--sup-color-disabled-text);
	cursor: not-allowed;
}

/* Accent outline — the accent button drawn as a line, 1px inside its box:
   the second action of a form, beside a filled accent button. */
.sup-btn--accent-outline {
	min-height: 35px;
	padding: 0 var(--sup-space-20);
	font-size: var(--sup-text-body);
	font-weight: var(--sup-weight-semibold);
	background: var(--sup-color-surface);
	border: var(--sup-border-width) solid var(--sup-color-accent-border);
	color: var(--sup-color-accent-text);
}
.sup-btn--accent-outline:hover,
.sup-btn--accent-outline:active {
	background: var(--sup-color-brand-tint-hover);
	border-color: var(--sup-color-brand-border);
	color: var(--sup-color-brand-text);
	text-decoration: none;
}
.sup-btn--accent-outline:active { background: var(--sup-color-brand-tint-active); }
.sup-btn--accent-outline:focus-visible {
	background: var(--sup-color-brand-tint-focus);
	border-color: var(--sup-color-focus);
	color: var(--sup-color-brand-text-strong);
}

/* ---------------------------------------------------------------
   Form fields

   One component on the Search, Login and Register canvases: a 13/20
   label with a red asterisk when the field is required, 6px above a white
   field ruled in a half-pixel line with 3px corners. The field's height
   is a minimum and its text is centred in it, so the field grows with the
   reader's type size instead of cutting the text.
   --------------------------------------------------------------- */
.sup-field {
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-6);
	min-width: 0;
}

/* The label's row is 24px tall in the component, its text 20px of it. */
.sup-field__label,
.pkp_structure_page .sup-field__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--sup-space-2);
	min-height: 24px;
	margin: 0;
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-text);
	font-weight: var(--sup-weight-regular);
	color: var(--sup-color-field);
}

.sup-field__label .required,
.sup-required {
	color: var(--sup-color-required);
	text-decoration: none;
	border: 0;
}

.sup-field__control,
.pkp_structure_page .sup-field__control {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--sup-field-height);
	margin: 0;
	padding: 0 var(--sup-space-12);
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-field);
	background: var(--sup-color-surface);
	border: var(--sup-field-stroke) solid var(--sup-color-field);
	border-radius: var(--sup-radius-field);
	box-shadow: none;
}

.sup-field__control::placeholder { color: var(--sup-color-placeholder); opacity: 1; }

/* Focus, from the component's Focus state: a 2px ring in the field's own
   pale blue, in place of the theme's usual outline. */
.sup-field__control:focus-visible,
.sup-field__control:focus {
	outline: 2px solid var(--sup-color-field-focus);
	outline-offset: 0;
}

/* The component's error message: white on the required red. OJS writes a
   refused login or registration as one line above the form. */
.sup-form-error,
.pkp_structure_page .sup-form-error {
	margin: 0;
	padding: var(--sup-space-6) var(--sup-space-12);
	font-size: var(--sup-text-xxs);
	line-height: var(--sup-leading-text);
	font-weight: var(--sup-weight-semibold);
	color: var(--sup-color-surface);
	background: var(--sup-color-required);
	border-radius: var(--sup-radius-field);
}
.sup-form-error ul { margin: 0; padding-left: var(--sup-space-16); }
.sup-form-error a { color: inherit; text-decoration: underline; }

/* A select draws the component's own chevron, 19px at the right edge. */
select.sup-field__control,
.pkp_structure_page select.sup-field__control {
	-webkit-appearance: none;
	appearance: none;
	padding-right: var(--sup-select-padding-end);
	background: var(--sup-color-surface) no-repeat right var(--sup-space-12) center / var(--sup-select-chevron) var(--sup-select-chevron) url('../images/select-chevron-strong.svg');
	cursor: pointer;
}

/* The small link under a field — "Forgot your password?" */
.sup-field__link {
	align-self: flex-start;
	margin-top: var(--sup-space-4);
	font-size: var(--sup-text-xxs);
	line-height: var(--sup-leading-flat);
	letter-spacing: var(--sup-tracking-tight);
	color: var(--sup-color-link-field);
	text-decoration: underline;
}
.sup-field__link:hover,
.sup-field__link:focus-visible { color: var(--sup-color-link-strong); }

/* A checkbox and its sentence: a 12px box with 2px corners, blue with a
   white tick when it is ticked, 8px from a 13/19.5 line. */
.sup-check,
.pkp_structure_page .sup-check {
	display: flex;
	align-items: flex-start;
	gap: var(--sup-space-8);
	margin: 0;
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-text);
	font-weight: var(--sup-weight-regular);
	color: var(--sup-color-field);
	cursor: pointer;
}

.sup-check a { color: inherit; text-decoration: underline; }
.sup-check a:hover,
.sup-check a:focus-visible { color: var(--sup-color-link-strong); }

.sup-check input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--sup-check-size);
	height: var(--sup-check-size);
	/* Centred on the first line of the sentence */
	margin: var(--sup-check-offset) 0 0;
	background: var(--sup-color-surface);
	border: var(--sup-border-width) solid var(--sup-color-check-border);
	border-radius: var(--sup-radius-check);
	cursor: pointer;
}

.sup-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--sup-color-field-focus); outline-offset: 1px; }

.sup-check input[type="checkbox"]:checked {
	background: var(--sup-color-check) center / 10px 10px no-repeat url('../images/check.svg');
	border-color: var(--sup-color-check);
}

/* ---------------------------------------------------------------
   Text links — 12 to 18px, regular to semibold, optional underline
   --------------------------------------------------------------- */
.sup-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sup-space-2);
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	color: var(--sup-color-link);
	text-decoration: none;
}
.sup-link:hover,
.sup-link:active { color: var(--sup-color-link-strong); }
.sup-link--disabled { color: var(--sup-color-disabled-link); pointer-events: none; }
.sup-link--xs { font-size: var(--sup-text-xxs); }
.sup-link--ui { font-size: var(--sup-text-ui); line-height: var(--sup-leading-flat); }
.sup-link--md { font-size: var(--sup-text-body); line-height: var(--sup-leading-flat); }
.sup-link--lg { font-size: var(--sup-text-lead); line-height: var(--sup-leading-flat); }
.sup-link--medium { font-weight: var(--sup-weight-medium); }
.sup-link--semibold { font-weight: var(--sup-weight-semibold); }
.sup-link--underlined,
.sup-link--underlined:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   Navigation buttons — dark text, underline on interaction
   --------------------------------------------------------------- */
.sup-navlink {
	display: inline-flex;
	align-items: center;
	gap: var(--sup-space-4);
	padding: var(--sup-space-14) var(--sup-space-8);
	border-radius: var(--sup-radius-sm);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-flat);
	color: var(--sup-color-heading);
	background: transparent;
	text-decoration: none;
}
.sup-navlink:hover,
.sup-navlink:active,
.sup-navlink[aria-current] {
	color: var(--sup-color-heading);
	text-decoration: underline;
}
.sup-navlink:focus-visible {
	background: var(--sup-color-brand-tint);
	outline: var(--sup-border-width) solid var(--sup-color-focus);
	outline-offset: 0;
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Labels — uppercase section headings above modules and blocks.
   Source Sans 3 500, 14/18, muted grey.
   --------------------------------------------------------------- */
/* The parent theme styles headings as `.pkp_structure_main h2` — a class
   plus an element — which outweighs a bare component class. Every heading
   the theme styles is therefore also matched one level deeper. */
.sup-label,
.pkp_structure_page .sup-label {
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-muted);
	text-transform: uppercase;
	margin: 0;
}

/* ---------------------------------------------------------------
   Breadcrumbs — 14px, 12px gap, current page in muted grey, on a row
   24px tall as the component is drawn
   --------------------------------------------------------------- */
.cmp_breadcrumbs { margin: 0; padding: 0; }
.cmp_breadcrumbs ol,
.sup-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sup-space-12);
	margin: 0;
	padding: 0;
	list-style: none;
	min-height: 24px;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
}
/* OJS writes each separator inside the item before it; the design sets every
   link, slash and title as one row 12px apart. Each item is therefore laid
   out with the same gap, and the parent theme's 0.5em of padding around the
   slash is taken back. */
.cmp_breadcrumbs li,
.sup-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: var(--sup-space-12);
	font-size: inherit;
	line-height: inherit;
}
.cmp_breadcrumbs a { color: var(--sup-color-link); text-decoration: underline; }
.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus-visible { color: var(--sup-color-link-strong); }
.cmp_breadcrumbs .current,
.cmp_breadcrumbs [aria-current] { color: var(--sup-color-muted); }
.cmp_breadcrumbs .separator { padding: 0; color: var(--sup-color-muted); }

/* ---------------------------------------------------------------
   Sidebar blocks — native OJS block plugins + Custom Block Manager.
   The column is 320px wide with 280px of content: a 40px inner gutter.
   Blocks are separated by 40px; consecutive editorial cards share their
   1px border, as the design draws them.
   --------------------------------------------------------------- */
/* The parent theme pads every block; in this design the block's own card
   carries the padding, and the information block has none at all. */
.pkp_block {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-text);
}

.pkp_block + .pkp_block { margin-top: var(--sup-space-40); }

/* The label is the design's Label Tag: 14/19.6 on a 24px band, 2px above
   and below, 8px over what it labels. */
.pkp_block > .title,
.pkp_block > h2.title {
	font-family: var(--sup-font-ui);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-card);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-muted);
	text-transform: uppercase;
	margin: 0 0 var(--sup-space-8);
	padding-block: var(--sup-space-2);
}

.pkp_block .content > *:last-child { margin-bottom: 0; }
.pkp_block .content p { font-size: var(--sup-text-sm); line-height: var(--sup-leading-text); margin: 0 0 var(--sup-space-8); }
/* The parent theme pads every sidebar list item. Both kinds of block in
   this design space their items themselves — the information block with the
   list's own gap, the editorial card with the leading — so the padding goes. */
.pkp_block .content li,
.pkp_block .content ul li,
.pkp_block .content ol li { font-size: var(--sup-text-sm); line-height: var(--sup-leading-text); padding: 0; }
.pkp_block .content a { color: var(--sup-color-link); }
.pkp_block .content a:hover { color: var(--sup-color-link-strong); }

/* The information block is a stack of outlined buttons in the design. */
.pkp_block.block_information .content ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sup-space-8);
}
.pkp_block.block_information .content li a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sup-space-8);
	box-sizing: border-box;
	min-height: 46px;
	padding: 11px 7px;   /* 12/8 in the design, less the 1px inside stroke */
	border: var(--sup-border-width) solid var(--sup-color-brand-border);
	border-radius: var(--sup-radius);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-brand-text);
	background: var(--sup-color-surface);
	text-decoration: none;
}
.pkp_block.block_information .content li a:hover {
	background: var(--sup-color-brand-tint-hover);
	border-color: var(--sup-color-brand-border-hover);
	color: var(--sup-color-brand-text);
	text-decoration: none;
}

/* Each information link carries its own 22px icon. The links are matched on
   the core OJS route, not on their position, so the block keeps its icons
   whichever of the three the journal chooses to show. */
.pkp_block.block_information .content li a::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.pkp_block.block_information .content a[href*="/information/readers"]::before {
	-webkit-mask-image: url('../images/info-readers.svg');
	mask-image: url('../images/info-readers.svg');
}
.pkp_block.block_information .content a[href*="/information/authors"]::before {
	-webkit-mask-image: url('../images/info-authors.svg');
	mask-image: url('../images/info-authors.svg');
}
.pkp_block.block_information .content a[href*="/information/librarians"]::before {
	-webkit-mask-image: url('../images/info-librarians.svg');
	mask-image: url('../images/info-librarians.svg');
}

/* Editorial blocks — the journal facts, indexing and metrics cards. These
   are Custom Block Manager blocks: the theme gives them the card, the
   journal gives them the content. */
.pkp_block.block_custom {
	padding: var(--sup-space-24);
	background: var(--sup-color-surface-raised);
	border: var(--sup-border-width) solid var(--sup-color-border);
}

.pkp_block.block_custom + .pkp_block.block_custom { margin-top: -1px; }

.pkp_block.block_custom > .title {
	font-family: var(--sup-font-display);
	font-size: var(--sup-text-body);
	line-height: var(--sup-leading-card);
	font-weight: var(--sup-weight-semibold);
	color: var(--sup-color-text);
	text-transform: none;
	margin: 0 0 var(--sup-space-8);
	padding-block: 0;
}

/* The base rule spaces sidebar lists out for the stacked buttons of the
   information block. An editorial card reads as continuous copy instead,
   so its list falls back to plain leading and carries its bullets. */
.pkp_block.block_custom .content ul {
	display: block;
	gap: 0;
	margin: 0;
	padding-left: var(--sup-space-16);
	list-style: disc;
}
.pkp_block.block_custom .content li { margin: 0; }

/* A link inside an editorial card is a reference within a sentence, not a
   call to action: the design keeps it in the card's own colour and marks it
   with an underline instead of the link blue. */
.pkp_block.block_custom .content a {
	color: inherit;
	text-decoration: underline;
}
.pkp_block.block_custom .content a:hover,
.pkp_block.block_custom .content a:focus-visible { color: var(--sup-color-link-strong); }

/* A note under the list — the source line beneath a metrics table. */
.pkp_block.block_custom .content ul + p {
	margin: var(--sup-space-8) 0 0;
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-text);
}