/* ==========================================================================
   Science Publications portals (/as/, /cs/, /es/) - shared theme.

   Round 18b2: the design canvas "SciPub Portal Refresh" (Ink and signal). Its
   boards are the specification: the tokens below are theirs, as are the header,
   sidebar, cards, tables, pills and buttons. Loaded by PortalLayout::head()
   after each portal's legacy css/style.css, so it restyles the legacy classes
   there (.box, .rtable, .next, ...) as well.

   Page shell (classes/portalLayout.php, navigation in classes/portalNav.php):
     header.app-header         ink bar: menu, brand, centers or roles, search, theme, account
     div.page-container
       aside.layout-sidebar    navigation only (nav.side-nav); a page's own action
                               boxes (div.side-page) stand beside the content
       main.layout-main        title block (breadcrumb, serif h1), messages, content

   Round 23b1: the canvas's component kit (version 61, boards System and Kit*) is the
   specification now: its token values, and its components below under "Kit".

   Light and dark: every colour is a token; html[data-theme="dark"] (set before
   paint from the stored choice or the system) swaps them. The --sp-* names of
   rounds 5-17 are aliases of the board tokens, so older rules follow them.
   ========================================================================== */

:root {
	/* The boards' tokens (Main, Author, Stage names, Settings, System boards). */
	--ink: #0B1F3A;
	--ink-2: #16365F;
	--paper: #F4F6F9;
	--card: #FFFFFF;
	--sunk: #F8F9FB;
	--side: #EEF1F5;
	--hover: #E4E9F0;
	--line: #DFE4EB;
	--line-soft: #ECEFF3;
	--field: #C6CED8;
	--grid: #E9EDF2;
	--text: #16202D;
	--text-2: #3A4757;
	--muted: #5A6676;
	--blue: #1A66A8;
	--blue-hover: #14558D;
	--on-blue: #FFFFFF;
	--blue-soft: #E6EFF8;
	--blue-text: #134E83;
	--amber: #B97800;
	--amber-bg: #FCEFD3;
	--amber-text: #764500;
	--red: #C2412D;
	--red-bg: #FBE4E0;
	--red-text: #992A1B;
	--green: #2E8B57;
	--green-bg: #E1F1E7;
	--green-text: #1B6A3C;
	--within: #8EBCE4;
	--orcid: #4D7A1F;
	/* Heat cells (Work lists bottlenecks, round 23b1: one global set with the kit's values). */
	--h0: #F4F6F9;
	--h1: #DCE8F5;
	--h2: #A9C9E8;
	--h3: #5A9AD3;
	--h4: #1A66A8;
	--h5: #0F3A6D;
	/* The public site's accents (Home, Journal, Article boards). */
	--brick: #B5402B;
	--brick-hover: #9A3624;
	--gold: #F2B544;
	--hero: #12305A;
	/* Type, shape, depth. */
	--font-sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--font-mono: "Source Code Pro", ui-monospace, Menlo, Consolas, monospace;
	--radius: 8px;
	--radius-lg: 12px;
	--radius-pill: 999px;
	--shadow-row: 0 1px 2px rgba(11, 31, 58, .08);
	--shadow-pop: 0 14px 36px rgba(10, 37, 70, .18), 0 2px 6px rgba(10, 37, 70, .08);
	/* Round 23b1, the kit: dialog and drawer depth, the scrim behind them. */
	--shadow-dialog: 0 12px 40px rgba(11, 31, 58, .25);
	--shadow-drawer: -8px 0 30px rgba(11, 31, 58, .2);
	--scrim: rgba(11, 31, 58, .35);
	--focus: rgba(26, 102, 168, .35);

	/* Aliases: the names rules written before round 18b2 use. */
	--sp-navy: var(--ink);
	--sp-navy-2: var(--ink);
	--sp-header-1: var(--ink);
	--sp-header-2: var(--ink);
	--sp-primary: var(--blue);
	--sp-primary-hover: var(--blue-hover);
	--sp-btn: var(--blue);
	--sp-btn-hover: var(--blue-hover);
	--sp-primary-soft: var(--blue-soft);
	--sp-primary-line: #A9C9E6;
	--sp-link: var(--blue-text);
	--sp-link-hover: var(--blue-hover);
	--sp-text: var(--text);
	--sp-text-2: var(--text-2);
	--sp-muted: var(--muted);
	--sp-faint: var(--muted);
	--sp-heading: var(--text);
	--sp-line: var(--line);
	--sp-line-soft: var(--line-soft);
	--sp-field: var(--field);
	--sp-bg: var(--paper);
	--sp-card: var(--card);
	--sp-elev: var(--card);
	--sp-surface: var(--side);
	--sp-surface-2: var(--sunk);
	--sp-hover: var(--hover);
	--sp-row-hover: var(--sunk);
	--sp-warn: var(--amber);
	--sp-warn-bg: var(--amber-bg);
	--sp-warn-line: #EBC77A;
	--sp-warn-text: var(--amber-text);
	--sp-alert: var(--red);
	--sp-alert-bg: var(--red-bg);
	--sp-alert-line: #EDB3A8;
	--sp-alert-text: var(--red-text);
	--sp-ok: var(--green);
	--sp-ok-bg: var(--green-bg);
	--sp-ok-line: #A8D5B9;
	--sp-ok-text: var(--green-text);
	--sp-info-bg: var(--blue-soft);
	--sp-info-line: #C3D8EC;
	--sp-info-text: var(--blue-text);
	--sp-focus: var(--focus);
	--sp-shadow: var(--shadow-row);
	--sp-shadow-lg: var(--shadow-pop);
	--sp-radius: var(--radius);
	--sp-radius-lg: var(--radius-lg);
	--sp-font: var(--font-sans);
	--sp-header-h: 60px;
	--sp-sidebar-w: 250px;

	/* Type scale and spacing */
	--fs-xs: 12px;
	--fs-sm: 12.5px;
	--fs-md: 13.5px;
	--fs-base: 14px;
	--fs-lg: 15px;
	--fs-xl: 18px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	color-scheme: light;
}
:root[data-theme="dark"] {
	--ink: #09111E;
	--ink-2: #13243C;
	--paper: #0E141C;
	--card: #151C26;
	--sunk: #111821;
	--side: #121922;
	--hover: #1D2632;
	--line: #263241;
	--line-soft: #1D2733;
	--field: #3A4757;
	--grid: #222C38;
	--text: #E5EAF0;
	--text-2: #C0CAD6;
	--muted: #93A1B2;
	--blue: #5AA3E2;
	--blue-hover: #7BB6EB;
	--on-blue: #09111E;
	--blue-soft: #162E47;
	--blue-text: #93C5F1;
	--amber: #E0A42A;
	--amber-bg: #33270F;
	--amber-text: #F2CB7C;
	--red: #E3654F;
	--red-bg: #3A1C18;
	--red-text: #F5A899;
	--green: #3DB872;
	--green-bg: #122D1E;
	--green-text: #8ED9AA;
	--within: #3570A8;
	--orcid: #A6CE39;
	--h0: #151C26;
	--h1: #1B3049;
	--h2: #22496F;
	--h3: #3570A8;
	--h4: #5A9DD8;
	--h5: #A9C9E8;
	--brick: #D4624C;
	--brick-hover: #E07A66;
	--gold: #F2B544;
	--hero: #0E2340;
	--shadow-row: 0 1px 2px rgba(0, 0, 0, .3);
	--shadow-pop: 0 14px 36px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
	--shadow-dialog: 0 12px 40px rgba(0, 0, 0, .55);
	--shadow-drawer: -8px 0 30px rgba(0, 0, 0, .5);
	--scrim: rgba(0, 0, 0, .55);
	--focus: rgba(90, 163, 226, .5);
	--sp-primary-line: #2B5E89;
	--sp-warn-line: #6A5119;
	--sp-alert-line: #733A30;
	--sp-ok-line: #2A6141;
	--sp-info-line: #24466A;
	color-scheme: dark;
}

/* ---- Base and type ------------------------------------------------------ */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--paper);
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}
/* Quirks mode: tables would otherwise reset to the browser's 16px. */
table {
	font-size: inherit;
	color: inherit;
}
.table td,
.ftable td,
.stable td,
.ktable td {
	font-size: var(--fs-md);
}
textarea,
ol li {
	font-family: inherit;
}
ol li {
	height: auto;
	font-size: inherit;
	color: inherit;
}
b, strong {
	font-weight: 700;
}
code, kbd, samp, .mono {
	font-family: var(--font-mono);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: -.01em;
}
/* The pages are full of inline font-size:10-12px, sized for Verdana. */
[style*="font-size: 9px"],
[style*="font-size:10px"], [style*="font-size: 10px"],
[style*="font-size:11px"], [style*="font-size: 11px"] {
	font-size: var(--fs-sm) !important;
}
[style*="font-size:12px"], [style*="font-size: 12px"] {
	font-size: var(--fs-md) !important;
}
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
[hidden] {
	display: none !important;
}
.icon {
	display: inline-block;
	flex: none;
	width: 18px;
	height: 18px;
	vertical-align: -4px;
	fill: none;
	stroke: currentColor;
}

/* ---- Links and focus ---------------------------------------------------- */
:where(a:link, a:visited, a:active) {
	color: var(--blue-text);   /* round 23e1: underlined, as the locked kit draws links; :where() so any component's own colour wins */
}
:where(a:hover) {
	color: var(--blue-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 1px;
}

/* ---- Header (boards: Admin home, Author home) ---------------------------
   Ink bar: menu, brand, then the person's centers (staff) or roles (My SciPub)
   as a segmented control, the search (staff), theme and account. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100;
	padding: 8px 14px;
	background: var(--card);
	color: var(--text);   /* round 23e7: never a page's legacy link colour (2.98:1 in the dark theme) */
	font-weight: 600;
	border-radius: var(--radius);
	box-shadow: var(--shadow-pop);
}
.skip-link:focus {
	left: 8px;
}
.app-header {
	position: sticky;
	top: 0;
	z-index: 40;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	min-height: var(--sp-header-h);
	padding: 8px 16px;
	background: var(--ink);
	color: #FFFFFF;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
}
.app-icon-btn,
.app-icon-btn:hover {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--radius);
	color: #FFFFFF;
	cursor: pointer;
}
.app-icon-btn:hover {
	background: rgba(255, 255, 255, .1);
}
.app-icon-btn .icon {
	width: 19px;
	height: 19px;
}
.app-menu-icon,
.app-menu-icon::before,
.app-menu-icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	content: "";
}
.app-menu-icon {
	position: relative;
}
.app-menu-icon::before {
	position: absolute;
	top: -6px;
}
.app-menu-icon::after {
	position: absolute;
	top: 6px;
}
/* No sidebar on the page, nothing to toggle. */
body:not(:has(.layout-sidebar)) .app-menu-toggle {
	display: none;
}
.app-logo,
.app-logo:link,
.app-logo:visited {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: #FFFFFF;
	text-decoration: none;
}
.app-logo:hover {
	color: #FFFFFF;
	text-decoration: none;
}
.app-logo-mark {
	/* Round 23s15 (DC-13 addendum 3): the refined logo, mark and name as one image, 28 px high. */
	width: auto;
	height: 28px;
	fill: currentColor;
	stroke: none;
}
.app-logo-name {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
}
.app-divider {
	flex: none;
	width: 1px;
	height: 24px;
	background: rgba(255, 255, 255, .2);
}
.app-shell-name {
	padding: 0 4px;
	font-weight: 600;
	white-space: nowrap;
}
/* Centers (staff) and roles (My SciPub): a segmented control on the ink bar. */
.app-switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: rgba(255, 255, 255, .1);
	border-radius: 10px;
}
.app-switch a:link,
.app-switch a:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 12px;
	border-radius: var(--radius);
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.app-switch a:hover {
	background: rgba(255, 255, 255, .1);
	color: #FFFFFF;
	text-decoration: none;
}
.app-switch a[aria-current="page"] {
	background: #FFFFFF;
	color: #0B1F3A;
	font-weight: 700;
}
.app-switch .app-switch-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, .18);
	border-radius: var(--radius-pill);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
}
.app-switch a[aria-current="page"] .app-switch-count {
	background: #0B1F3A;
	color: #FFFFFF;
}
.app-switch-select {
	display: none;
}
/* More than two editor roles fold into one "Editor" menu. */
.app-switch-more {
	position: relative;
}
.app-switch-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 10px 0 12px;
	border-radius: var(--radius);
	color: #FFFFFF;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	white-space: nowrap;
}
.app-switch-more > summary::-webkit-details-marker {
	display: none;
}
.app-switch-more > summary:hover {
	background: rgba(255, 255, 255, .1);
}
.app-switch-more > summary.is-current {
	background: #FFFFFF;
	color: #0B1F3A;
	font-weight: 700;
}
.app-switch-more > summary.is-current .app-switch-count {
	background: #0B1F3A;
	color: #FFFFFF;
}
.app-switch-caret {
	width: 16px;
	height: 16px;
}
.app-switch-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 50;
	display: grid;
	min-width: 240px;
	padding: 6px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
}
.app-switch .app-switch-menu a:link,
.app-switch .app-switch-menu a:visited {
	justify-content: space-between;
	color: var(--text);
}
.app-switch .app-switch-menu a:hover {
	background: var(--hover);
	color: var(--text);
}
.app-switch .app-switch-menu a[aria-current="page"] {
	background: var(--blue-soft);
	color: var(--blue-text);
}
.app-switch .app-switch-menu .app-switch-count {
	background: var(--sunk);
	color: var(--text);
}
.app-spacer {
	flex: 1 1 40px;
}

/* Search: translucent on the ink bar, "/" focuses it. */
.app-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 320px;
	max-width: 600px;
	box-sizing: border-box;
	height: 44px;
	margin: 0 auto;
	padding: 0 10px 0 14px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	color: #FFFFFF;
}
.app-search:focus-within {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .4);
}
.app-search .app-search-icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: #FFFFFF;
	pointer-events: none;
}
.app-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 40px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #FFFFFF;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}
.app-search input[type="search"]:focus {
	border: 0;
	box-shadow: none;
	outline: none;
}
.app-search input[type="search"]::placeholder {
	color: rgba(255, 255, 255, .72);
	opacity: 1;
}
.app-search-scope {
	flex: none;
	width: auto;
	height: 30px;
	margin: 0;
	padding: 0 8px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 6px;
	color: #FFFFFF;
	font-size: var(--fs-sm);
	font-weight: 600;
}
.app-search-scope option {
	color: var(--text);
	background: var(--card);
}
.app-search-key {
	flex: none;
	padding: 2px 7px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .25);
	box-shadow: none;
	border-radius: 6px;
	color: rgba(255, 255, 255, .8);
	font-family: inherit;
	font-size: 12px;
	line-height: 16px;
}
.app-search:focus-within .app-search-key {
	visibility: hidden;
}

.app-header-actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}
.app-search + .app-header-actions {
	margin-left: 0;
}
/* The theme toggle shows what a click switches to. */
.app-theme-toggle .icon-sun,
[data-theme="dark"] .app-theme-toggle .icon-moon {
	display: none;
}
[data-theme="dark"] .app-theme-toggle .icon-sun {
	display: inline-block;
}

/* Signed out: plain links on the ink bar. */
.app-nav {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: 10px;
}
.app-nav a:link,
.app-nav a:visited {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
}
.app-nav a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.app-nav a.app-nav-help {
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: var(--radius);
}
.app-nav a.app-nav-help:hover {
	background: rgba(255, 255, 255, .1);
	text-decoration: none;
}

/* Account button and menu */
.app-account {
	position: relative;
}
.app-account-btn,
.app-account-btn:hover {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	min-height: 0;
	max-width: 260px;
	margin: 0;
	padding: 0 8px 0 6px;
	background: transparent;
	border: 0;
	border-radius: var(--radius);
	color: #FFFFFF;
	cursor: pointer;
	font: inherit;
	font-weight: 500;
}
.app-account-btn:hover,
.app-account-btn[aria-expanded="true"] {
	background: rgba(255, 255, 255, .1);
}
.app-account-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.app-account-caret {
	width: 16px;
	height: 16px;
	opacity: .8;
}
.app-avatar {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	background: #D9E6F4;
	border-radius: 50%;
	color: #0B1F3A;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}
.app-avatar-lg {
	width: 40px;
	height: 40px;
	font-size: 15px;
}
.app-account-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	box-sizing: border-box;
	width: 280px;
	padding: 6px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	color: var(--text);
}
.app-account-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
	padding: 10px 10px 12px;
	border-bottom: 1px solid var(--line);
}
.app-account-who {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}
.app-account-who strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--fs-base);
}
.app-account-who span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--muted);
	font-size: var(--fs-sm);
}
.app-account-who .app-account-role {
	color: var(--muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.app-account-menu a,
.app-account-menu button {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 8px 10px;
	background: transparent;
	border: 0;
	border-radius: var(--radius);
	color: var(--text-2);
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: 400;
	text-align: left;
	text-decoration: none;
}
.app-account-menu a:hover,
.app-account-menu button:hover,
.app-account-menu a:focus-visible,
.app-account-menu button:focus-visible {
	background: var(--hover);
	color: var(--text);
	text-decoration: none;
}
.app-account-menu .icon {
	color: var(--muted);
}
.app-account-menu .app-account-logout {
	margin-top: 6px;
	border-top: 1px solid var(--line);
	border-radius: 0 0 var(--radius) var(--radius);
}
/* Only when a theme was picked by hand. */
.app-account-menu .app-theme-system {
	display: none;
}
html[data-theme-set] .app-account-menu .app-theme-system {
	display: flex;
}

/* Narrow screens: the search moves to its own row; the roles become a select. */
@media (max-width: 1100px) {
	.app-account-name {
		display: none;
	}
}
@media (max-width: 760px) {
	.app-header {
		gap: 6px 8px;
		padding: 6px 10px;
	}
	.app-logo-name,
	.app-divider,
	.app-switch.has-select ~ .app-spacer,
	.app-shell-name:has(+ .app-switch) {
		display: none;
	}
	.app-header-actions {
		flex-wrap: nowrap;
	}
	.app-search {
		order: 10;
		flex: 1 1 100%;
		max-width: none;
	}
	.app-search-key {
		display: none;
	}
	.app-switch.has-select {
		display: none;
	}
	.app-switch-select {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		min-height: 40px;
		max-width: calc(100vw - 240px);
		padding: 0 8px;
		background: rgba(255, 255, 255, .1);
		border: 1px solid rgba(255, 255, 255, .25);
		border-radius: var(--radius);
		color: #FFFFFF;
		font: inherit;
		font-weight: 600;
	}
	.app-switch-select option {
		color: var(--text);
		background: var(--card);
	}
	.app-nav {
		gap: 12px;
	}
	.app-nav a:not(.app-nav-help) {
		display: none;
	}
}

/* ---- Shell: navigation on the left, content, page panels on the right ------
   Boards: the side panel is 280-320 px of --side; the content column stops at
   1,280 px; a page's own boxes ("At a glance") stand in a right-hand column. */
.page-container {
	box-sizing: border-box;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	min-height: calc(100vh - var(--sp-header-h));
}
.layout-main {
	box-sizing: border-box;
	display: block;
	min-width: 0;
	max-width: 1240px;
	padding: 20px 32px 56px;
}
.layout-sidebar {
	box-sizing: border-box;
	display: block;
	background: var(--side);
	border-right: 1px solid var(--line);
}
.layout-sidebar-inner {
	box-sizing: border-box;
	padding: 16px 12px 32px;
}
.layout-aside {
	box-sizing: border-box;
	min-width: 0;
	padding: 20px 24px 40px 0;
}
/* Shown only when the page put something in it (sidebarOpen() always opens it). */
.layout-aside:not(:has(> .side-page > :not(br))) {
	display: none;
}
@media (min-width: 900px) {
	.page-container:has(> .layout-sidebar) {
		display: grid;
		grid-template-columns: var(--sp-sidebar-w) minmax(0, 1fr);
		align-items: start;
		transition: grid-template-columns .2s ease;
	}
	.page-container > .layout-main {
		grid-column: 2;
		grid-row: 1;
	}
	.page-container > .layout-sidebar {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: stretch;
		min-width: 0;
		overflow-x: clip;
	}
	.page-container > .layout-aside {
		grid-column: 2;
		grid-row: 2;
		padding: 0 32px 40px;
	}
	/* The column runs the full height; its contents stay in view under the
	   header while the page scrolls, and scroll on their own when longer. */
	.layout-sidebar-inner {
		position: sticky;
		top: var(--app-header-h, var(--sp-header-h));
		max-height: calc(100vh - var(--app-header-h, var(--sp-header-h)));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
	html.sb-collapsed .page-container:has(> .layout-sidebar) {
		grid-template-columns: 0 minmax(0, 1fr);
	}
	html.sb-collapsed .layout-sidebar {
		visibility: hidden;
		border-right-width: 0;
	}
}
/* Wide screens: the page's boxes take a right-hand column. */
@media (min-width: 1280px) {
	.page-container:has(> .layout-aside > .side-page > :not(br)) {
		grid-template-columns: var(--sp-sidebar-w) minmax(0, 1fr) 320px;
	}
	.page-container > .layout-aside {
		grid-column: 3;
		grid-row: 1;
		padding: 20px 24px 40px 0;
	}
	html.sb-collapsed .page-container:has(> .layout-aside > .side-page > :not(br)) {
		grid-template-columns: 0 minmax(0, 1fr) 320px;
	}
}
/* Pages without a sidebar (the decline-review page): a centred column. */
.page-container:not(:has(> .layout-sidebar)) > .layout-main {
	max-width: 820px;
	margin: 0 auto;
}
/* Narrow screens: the sidebar is a drawer opened from the menu button. */
@media (max-width: 899px) {
	.layout-main {
		padding: 16px 16px 32px;
	}
	.layout-aside {
		padding: 0 16px 32px;
	}
	.layout-sidebar {
		position: fixed;
		z-index: 50;
		top: 0;
		bottom: 0;
		left: 0;
		width: 300px;
		max-width: 86vw;
		overflow-y: auto;
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform .2s ease, visibility 0s linear .2s;
	}
	html.sb-open .layout-sidebar {
		transform: none;
		visibility: visible;
		box-shadow: 0 0 0 100vmax rgba(5, 18, 36, .45);
		transition: transform .2s ease;
	}
}

/* ---- Pills and party letters (System board) ------------------------------ */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	box-sizing: border-box;
	height: 22px;
	padding: 0 9px;
	border-radius: var(--radius-pill);
	background: var(--line-soft);
	color: var(--text-2);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.pill.grey { background: var(--line-soft); color: var(--text-2); }
.pill.blue { background: var(--blue-soft); color: var(--blue-text); }
.pill.amber { background: var(--amber-bg); color: var(--amber-text); }
.pill.red { background: var(--red-bg); color: var(--red-text); }
.pill.green { background: var(--green-bg); color: var(--green-text); }
.pill.outline { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--field); }
.pill.ink { background: var(--ink); color: #FFFFFF; }
.pill.lg { height: 24px; padding: 0 10px; font-size: 12.5px; }
.party {
	display: inline-grid;
	place-items: center;
	flex: none;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 5px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
/* The party a list is filtered to, or the one that holds the manuscript now. */
.party.on { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
:root[data-theme="dark"] .party.on { background: var(--text); border-color: var(--text); color: var(--ink); }
/* Status dots (folder rows, people lists). */
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dot.green { background: var(--green); }
.dot.amber { background: var(--amber); }
.dot.red { background: var(--red); }
.dot.blue { background: var(--blue); }

/* ---- Board components (round 18b2): one rule set each, for the screens of 18b3-18b6 --------
   Names as on the boards, except .tablist (".tabs" is taken by older pages).
     .mono                          manuscript ids and codes (Source Code Pro)
     .tablist > .tab[.on]           underline tabs (Manuscript lenses, Work lists)
     .segmented > .seg-btn[.on]     segmented control (Mine / Everyone, List / Board)
     .chip[.on] (.n)                filter chips with a count
     .tile / .tilechip[.on]         number tiles (Admin home, Production sub-stages)
     .stack > span                  stack bar: well past / past / within timeline
     .bar > span.green|amber|red    progress strip of a timeline (day 6 of 7)
     .meter > span                  small meter (reviewer load)
     .journey > .seg.done|now|wait|pub   an author's journey strip
     .tog[aria-checked]             switch (Settings); .switch remains for checkbox switches
     .stepper > .step + input       number stepper (Settings)
     dialog.drawer / dialog.modal   side drawer (manuscript summary) and dialog, on <dialog>
     .pill.status-ok|expected|warn|late|none|done   timeline buckets (ReviewWorkflow, ProductionReport)
*/
.mono {
	font-family: var(--font-mono);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: -.01em;
}
.tablist {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	border-bottom: 1px solid var(--line);
}
.tab { border-radius: 0; }
textarea[style*="border: 0"], textarea[style*="border:0"] { border-radius: 0; }   /* round 23e1: a frameless editor area (the frame carries the radius) */   /* round 23e1: square, as the kit draws tabs (the page's button rule rounds them) */
.tablist .tab {
	min-height: 44px;
	margin: 0 0 -1px;
	padding: 0 14px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--muted);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tablist .tab:hover {
	background: transparent;
	color: var(--text);
}
.tablist .tab.on,
.tablist .tab[aria-selected="true"],
.tablist .tab[aria-current="page"] {
	border-bottom-color: var(--blue);
	color: var(--text);
}
.segmented {
	display: inline-flex;
	gap: 4px;
	padding: 3px;
	background: var(--line-soft);
	border-radius: 10px;
}
.segmented .seg-btn {
	min-height: 36px;
	padding: 0 12px;
	background: transparent;
	border: 0;
	border-radius: 7px;
	color: var(--text-2);
	cursor: pointer;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.segmented .seg-btn:hover {
	background: transparent;
	color: var(--text);
}
.segmented .seg-btn.on,
.segmented .seg-btn[aria-pressed="true"],
.segmented .seg-btn[aria-current="page"] {
	background: var(--card);
	box-shadow: 0 1px 2px rgba(11, 31, 58, .1);
	color: var(--text);
}
.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 12px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	color: var(--text-2);
	cursor: pointer;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}
.chip:hover {
	border-color: var(--blue);
	color: var(--text);
	text-decoration: none;
}
.chip.on,
.chip[aria-pressed="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: #FFFFFF;
}
.chip .n {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	opacity: .8;
}
.chip.on .pill {
	background: rgba(255, 255, 255, .18);
	color: #FFFFFF;
}
.tile,
.tilechip {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	color: var(--text);
	font: inherit;
	text-align: left;
	text-decoration: none;
}
.tilechip {
	gap: 2px;
	padding: 12px 14px;
	cursor: pointer;
}
/* A tile that is a link keeps the text colour (a:link would make it blue). */
a.tile:link,
a.tile:visited {
	color: var(--text);
}
.tile:hover,
.tilechip:hover {
	border-color: var(--blue);
	color: var(--text);
	text-decoration: none;
}
.tilechip.on,
.tilechip[aria-pressed="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: #FFFFFF;
}
/* The number: serif, toned when the tile counts something past (amber) or well past (red) its timeline. */
.tile .tile-n {
	font-family: var(--font-serif);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
.tile.warn .tile-n { color: var(--amber-text); }
.tile.late .tile-n { color: var(--red-text); }
.stack {
	display: flex;
	height: 8px;
	overflow: hidden;
	background: var(--line-soft);
	border-radius: var(--radius-pill);
}
.stack > span {
	display: block;
	height: 100%;
}
.stack > .late { background: var(--red); }
.stack > .warn { background: var(--amber); }
.stack > .ok { background: var(--within); }
.bar {
	display: block;
	height: 6px;
	overflow: hidden;
	background: var(--line);
	border-radius: var(--radius-pill);
}
.bar > span {
	display: block;
	height: 100%;
	background: var(--blue);
	border-radius: var(--radius-pill);
}
.bar > span.green { background: var(--green); }
.bar > span.amber { background: var(--amber); }
.bar > span.red { background: var(--red); }
.meter {
	display: block;
	width: 72px;
	height: 8px;
	overflow: hidden;
	background: var(--line-soft);
	border-radius: var(--radius-pill);
}
.meter > span {
	display: block;
	height: 100%;
	background: var(--blue);
	border-radius: var(--radius-pill);
}
.journey {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 6px;
}
.journey .seg {
	display: block;
	height: 6px;
	background: var(--line);
	border-radius: var(--radius-pill);
}
.journey .seg.done { background: var(--blue); }
.journey .seg.now { background: var(--blue); opacity: .55; }
.journey .seg.wait { background: var(--amber); }
.journey .seg.pub { background: var(--green); }
/* The labelled strip (round 23b1, Kit board): a label under each segment, the current one bold. */
.journey .slab {
	overflow: hidden;
	color: var(--muted);
	font-size: 12.5px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.journey-wrap { display: flex; flex-direction: column; gap: 6px; }
.journey .slab.done { color: var(--text-2); }
.journey .slab.now,
.journey .slab.wait,
.journey .slab.pub { color: var(--text); font-weight: 700; }
.tog {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex: none;
	box-sizing: border-box;
	width: 40px;
	height: 22px;
	min-height: 0;
	padding: 2px;
	background: var(--field);
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
}
.tog[aria-checked="true"] {
	background: var(--green);
}
.tog > span {
	width: 18px;
	height: 18px;
	background: #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	transition: transform .15s;
}
.tog[aria-checked="true"] > span {
	transform: translateX(18px);
}
.tog:hover {
	background: var(--field);
}
.tog[aria-checked="true"]:hover {
	background: var(--green);
	filter: brightness(.95);
}
@media (prefers-reduced-motion: reduce) {
	.tog > span { transition: none; }
}
/* One group (Kit board): a frame round minus, the value and plus. */
.stepper {
	display: inline-flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--field);
	border-radius: var(--radius);
	background: var(--card);
}
.stepper .step {
	width: 36px;
	height: 38px;
	min-height: 0;
	padding: 0;
	background: var(--card);
	border: 0;
	border-radius: 0;
	color: var(--text);
	cursor: pointer;
	font: inherit;
	font-size: 18px;
	font-weight: 600;
}
.stepper .step:hover { background: var(--hover); }
.stepper input,
.stepper input[type="number"] {
	width: 64px;
	min-height: 38px;
	height: 38px;
	margin: 0;
	border: 0;
	border-left: 1px solid var(--field);
	border-right: 1px solid var(--field);
	border-radius: 0;
	box-shadow: none;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
}
.stepper:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.stepper input:focus { outline: none; }
dialog.drawer,
dialog.modal {
	box-sizing: border-box;
	padding: 0;
	background: var(--card);
	border: 1px solid var(--line);
	color: var(--text);
}
dialog.drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: 520px;
	max-width: 100%;
	height: 100%;
	max-height: none;
	margin: 0;
	border-width: 0 0 0 1px;
	flex-direction: column;   /* the shadow is the kit's .drawer (round 23e1) */
}
dialog.drawer[open] { display: flex; }
dialog.modal {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 96px);
	margin: 48px auto auto;
	border-radius: 14px;
	box-shadow: var(--shadow-dialog);
	flex-direction: column;
}
dialog.modal[open] { display: flex; }
dialog.modal::backdrop { background: var(--scrim); }
dialog.drawer::backdrop { background: rgba(11, 31, 58, .3); }
:root[data-theme="dark"] dialog.drawer::backdrop { background: var(--scrim); }
.dialog-head {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
}
.dialog-head h2 {
	margin: 0;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
}
.dialog-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	overflow: auto;
	padding: 18px 20px;
}
.dialog-body > p { margin: 0; }
.dialog-foot {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 20px;
	border-top: 1px solid var(--line);
	background: var(--sunk);
	border-radius: 0 0 14px 14px;
}
dialog.drawer .dialog-foot { border-radius: 0; }
/* ---- Kit patterns (round 23b1, boards Kit · Data and Kit · Patterns) ------------------------
   For the screens of 23b2-23b6, with Screen:: helpers (classes/views/screen.php). Names as on the
   boards except the wizard rail (.rail-step, .rail-num: ".step" and ".num" are taken).
     .lbl                         small capitals label
     .card / .sec > .sec-head + .sec-body    a card; a titled section (h2 with .note)
     table.dt (tr.late|.warn)     data table: sticky small-caps head, 3px bar on rows past their timeline
     .toolbar                     filter bar above a table (.sel-count on the right: "3 selected")
     .trow                        a list row on a grid (style="grid-template-columns: …")
     .band.amber|blue|red|green|grey    a state band with an icon, words and one action
     .notice.info|warn|error|success    a message with a coloured edge
     .empty                       empty state: a dashed box, a title, a line, an action
     dl.kv                        key-value list
     .hist > .hist-row            history list: when, dot, what (and who)
     .cell.h0…h5                  heat cells (Work lists)
     .rail > .rail-step > .rail-num.done|now|todo|bad    a wizard's steps
     details.more                 disclosure with a chevron
     .check                       a checkbox with its words; .kw keyword chip; mark highlight; .avatar */
.lbl {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.card,
.sec {
	min-width: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
a.card:hover { border-color: var(--blue); text-decoration: none; }
.sec { overflow: hidden; }
.sec > .sec-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 14px;
	padding: 14px 20px;
}
.sec > .sec-head h2 {
	margin: 0;
	color: var(--text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
}
.sec > .sec-head h2 .note { color: var(--muted); font-weight: 500; }
.sec-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13.5px; }
.sec-links a { font-weight: 600; }
.sec-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 20px 18px;
}
table.dt {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}
table.dt th {
	position: sticky;
	top: 0;
	padding: 8px 14px;
	background: var(--sunk);
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}
table.dt th button,
table.dt th a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 24px;   /* the kit's (round 23e1) */
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}
table.dt td {
	padding: 10px 14px;
	border-top: 1px solid var(--line-soft);
	vertical-align: middle;
}
table.dt tbody tr:first-child td { border-top: 0; }
table.dt tbody tr:hover td { background: var(--sunk); }
table.dt td.num,
table.dt th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* table.dt td .sub: the kit's .dt .sub (two lines, then cut; round 23e1). */
table.dt tr.late > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
table.dt tr.warn > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
table.dt input[type="checkbox"] { width: 16px; height: 16px; }
table.dt .row-acts { display: flex; justify-content: flex-end; gap: 6px; }
.dt-scroll { position: relative; overflow-x: auto; }   /* positioned: holds the .sr-only labels of its cells, which otherwise widen the page */
.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	padding: 12px 20px;
	border-top: 1px solid var(--line-soft);
}
.toolbar .tb-search {
	display: flex;
	flex: 1 1 220px;
	align-items: center;
	gap: 8px;
	max-width: 360px;
	min-height: 40px;
	box-sizing: border-box;
	padding: 0 12px;
	background: var(--card);
	border: 1px solid var(--field);
	border-radius: var(--radius);
}
.toolbar .tb-search:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.toolbar .tb-search input {
	flex: 1;
	min-width: 0;
	min-height: 38px;
	padding: 0;
	background: transparent;
	border: 0;
	outline: none;
	box-shadow: none;
}
.toolbar .tb-search input:focus { outline: none; }
.toolbar .tb-search .icon { color: var(--muted); }
.toolbar label.tb-select { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13.5px; }
.toolbar select { width: auto; max-width: 280px; }   /* a select.field takes the kit's .toolbar .field (round 23e1) */
.toolbar .sel-count { margin-left: auto; color: var(--text-2); font-size: 13.5px; }
.trow {
	display: grid;
	gap: 12px;
	align-items: center;
	padding: 10px 20px;
	border-top: 1px solid var(--line-soft);
}
.trow:hover { background: var(--sunk); }
.band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
}
.band > .icon { width: 20px; height: 20px; }
.band > .band-text { flex: 1 1 320px; }
.band.amber { background: var(--amber-bg); color: var(--amber-text); }
.band.blue { background: var(--blue-soft); color: var(--blue-text); }
.band.red { background: var(--red-bg); color: var(--red-text); }
.band.green { background: var(--green-bg); color: var(--green-text); }
.band.grey { background: var(--line-soft); color: var(--text-2); }
.band a:not(.act) { color: inherit; font-weight: 700; text-decoration: underline; }
.band .act,
.band a.act:link,
.band a.act:visited { background: var(--card); border-color: transparent; color: var(--text); }
.notice {
	display: flex;
	gap: 12px;
	padding: 12px 16px;
	background: var(--card);
	border: 1px solid var(--line);
	border-left-width: 3px;
	border-radius: 10px;
}
.notice > .icon { width: 20px; height: 20px; }
.notice > .notice-text { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.notice > .notice-text > span { color: var(--text-2); font-size: 13.5px; }
.notice > .notice-acts { display: flex; align-items: center; gap: 8px; }
.notice.info { border-left-color: var(--blue); }
.notice.info > .icon { color: var(--blue); }
.notice.warn { border-left-color: var(--amber); }
.notice.warn > .icon { color: var(--amber); }
.notice.error { border-left-color: var(--red); }
.notice.error > .icon { color: var(--red); }
.notice.success { border-left-color: var(--green); }
.notice.success > .icon { color: var(--green); }
.empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 28px 24px;
	background: var(--sunk);
	border: 1px dashed var(--field);
	border-radius: var(--radius-lg);
	color: var(--text-2);
}
.empty strong { color: var(--text); font-size: 15px; }
.empty > .act { margin-top: 4px; }
.sec-body > .empty,
.sec > .empty-wrap { margin: 0; }
.sec > .empty-wrap { padding: 16px 20px; }
dl.kv {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 8px 16px;
	margin: 0;
	font-size: 14px;
}
dl.kv dt { margin: 0; color: var(--muted); font-weight: 400; }
dl.kv dd { margin: 0; color: var(--text); }
/* Round 23b4: a second line under a value, as in a table cell. */
dl.kv dd > .sub { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
@media (max-width: 480px) {
	dl.kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
	dl.kv dd { margin-bottom: 8px; }
}
.hist { display: flex; flex-direction: column; }
.hist-row {
	display: grid;
	grid-template-columns: 110px 12px minmax(0, 1fr);
	gap: 0 12px;
	align-items: start;
	padding: 8px 0;
}
.hist-row > .when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.hist-row > .dot { margin-top: 7px; background: var(--blue); }
.hist-row > .what > strong { font-weight: 600; }
.hist-row > .what > .who { display: block; color: var(--muted); font-size: 12.5px; }
.cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 56px;
	background: var(--h0);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	color: var(--text);
	font: inherit;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}
.cell.h1 { background: var(--h1); }
.cell.h2 { background: var(--h2); }
.cell.h3 { background: var(--h3); color: #FFFFFF; }
.cell.h4 { background: var(--h4); color: #FFFFFF; }
.cell.h5 { background: var(--h5); color: #FFFFFF; }
:root:not([data-theme="dark"]) .cell.h3,
:root[data-theme="dark"] .cell.h4,
:root[data-theme="dark"] .cell.h5 { color: var(--ink); }
.cell:hover { outline: 2px solid var(--blue); }
.cell.sel { outline: 2px solid var(--ink); }
.rail { display: flex; flex-direction: column; gap: 2px; }
.rail-step {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	width: 100%;
	min-height: 52px;
	box-sizing: border-box;
	padding: 0 12px;
	background: transparent;
	border: 0;
	border-radius: 10px;
	color: var(--text-2);
	font: inherit;
	text-align: left;
	text-decoration: none;
}
a.rail-step:hover,
button.rail-step:hover { background: var(--hover); color: var(--text-2); text-decoration: none; }
.rail-step.now,
.rail-step[aria-current="step"] { background: var(--card); box-shadow: 0 1px 2px rgba(11, 31, 58, .08); color: var(--text); }
.rail-step .rail-label { display: flex; flex-direction: column; min-width: 0; }
.rail-step .rail-label > strong { font-weight: 700; }
.rail-step .rail-label > span { color: var(--muted); font-size: 12.5px; }
.rail-num {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 700;
}
.rail-num.done { background: var(--green-bg); color: var(--green-text); }
.rail-num.now { background: var(--ink); color: #FFFFFF; }
:root[data-theme="dark"] .rail-num.now { background: var(--text); color: var(--ink); }
.rail-num.todo { background: var(--line-soft); color: var(--muted); }
.rail-num.bad { background: var(--red-bg); color: var(--red-text); }
details.more > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	color: var(--blue-text);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary > .icon { width: 14px; height: 14px; color: var(--muted); transition: transform .15s; }
details.more[open] > summary > .icon { transform: rotate(90deg); }
details.more > .more-body { display: flex; flex-direction: column; gap: 12px; padding: 8px 0 4px; }
.check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
}
.check input[type="checkbox"],
.check input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; }
.check .check-help { display: block; color: var(--muted); font-size: 12.5px; }
.kw {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	background: var(--line-soft);
	border-radius: var(--radius-pill);
	color: var(--text-2);
	font-size: 13px;
	font-weight: 600;
}
mark {
	padding: 0 2px;
	background: var(--amber-bg);
	border-radius: 3px;
	color: inherit;
}
.avatar {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	background: #D9E6F4;
	border-radius: 50%;
	color: #0B1F3A;
	font-size: 12px;
	font-weight: 700;
}
/* Big numbers (Kit board stat row): serif figures with a label under each. */
.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px 24px;
}
.stat-row > div { display: flex; flex-direction: column; gap: 2px; }
.stat-row .stat-n {
	font-family: var(--font-serif);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
.stat-row .stat-label { color: var(--muted); font-size: 13px; }
.stat-row .stat-sub { color: var(--text-2); font-size: 12.5px; }

/* Timeline buckets (ReviewWorkflow::timelineSla, ProductionReport::bucket) as the Kit board's glossary
   (round 23b1): within blue, expected grey, past amber, well past red, no timeline outlined, done green. */
.pill.status-ok { background: var(--blue-soft); color: var(--blue-text); }
.pill.status-expected { background: var(--line-soft); color: var(--text-2); }
.pill.status-warn { background: var(--amber-bg); color: var(--amber-text); }
.pill.status-late { background: var(--red-bg); color: var(--red-text); }
.pill.status-none { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--field); }
.pill.status-done { background: var(--green-bg); color: var(--green-text); }


/* ---- Sidebar navigation (boards: Admin home, Author home) ---------------- */
.side-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.side-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.side-list li {
	height: auto;
	margin: 0;
	padding: 0;
	text-decoration: none;
}
a.side-link,
a.side-link:link,
a.side-link:visited {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--radius);
	color: var(--text);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}
a.side-link:hover {
	background: var(--hover);
	color: var(--text);
	text-decoration: none;
}
.side-link .icon,
.side-group > summary .icon {
	color: var(--muted);
}
.side-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
a.side-link.is-current,
a.side-link.is-current:hover {
	background: var(--card);
	box-shadow: 0 1px 2px rgba(11, 31, 58, .08);
	color: var(--text);
	font-weight: 600;
}
a.side-link.is-current .icon {
	color: var(--blue);
}
.side-ext {
	width: 14px;
	height: 14px;
	color: var(--muted);
}
/* Groups (Kit board): a leading chevron, the name, the late and total pills; its rows indented under a rule. */
.side-group {
	display: flex;
	flex-direction: column;
}
.side-group > summary {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 10px;
	border-radius: var(--radius);
	color: var(--text);
	cursor: pointer;
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 20px;
	list-style: none;
	-webkit-user-select: none;
	user-select: none;
}
.side-group > summary::-webkit-details-marker {
	display: none;
}
/* A group's name wraps rather than being cut: its pills take part of the row. */
.side-group > summary .side-label {
	padding: 8px 0;
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
}
.side-group > summary:hover {
	background: var(--hover);
}
.side-caret {
	width: 14px;
	height: 14px;
	color: var(--muted);
	transition: transform .15s ease;
}
.side-group[open] > summary .side-caret {
	transform: rotate(90deg);
}
/* A phase of one stage: its total opens the whole stage. */
a.pill.side-total:link,
a.pill.side-total:visited { color: var(--text-2); text-decoration: none; }
a.pill.side-total:hover { box-shadow: inset 0 0 0 1px var(--blue); color: var(--text); text-decoration: none; }
a.pill.amber.side-total:link,
a.pill.amber.side-total:visited { color: var(--amber-text); }
.side-flag {
	flex: none;
	width: 8px;
	height: 8px;
	background: var(--amber);
	border-radius: 50%;
}
.side-flag.is-urgent {
	background: var(--red);
}
.side-group > summary .pill + .side-flag,
.side-group > summary .pill ~ .side-flag {
	display: none;
}
.side-group > .side-list {
	margin: 0 0 6px 10px;
	padding-left: 6px;
	border-left: 1px solid var(--line);
}
.side-group a.side-link,
.side-group a.side-link:link,
.side-group a.side-link:visited {
	gap: 8px;
	min-height: 34px;
	padding: 0 10px;
	border-radius: 6px;
	color: var(--text-2);
	font-size: 14px;
	font-weight: 400;
}
.side-group a.side-link.is-current {
	color: var(--text);
	font-weight: 600;
}
.side-group li.is-sub > a.side-link {
	margin-left: 14px;
}
.side-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	padding: 0 12px 6px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 16px;
	text-transform: uppercase;
}
.side-heading .side-tools { display: inline-flex; gap: 10px; padding: 0; }
.side-heading .side-tools button { text-transform: none; letter-spacing: 0; }
.side-heading a:link,
.side-heading a:visited,
.side-heading button {
	padding: 0;
	background: none;
	border: 0;
	color: var(--blue-text);
	cursor: pointer;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.side-heading a.is-current {
	text-decoration: underline;
}
/* The role's primary action ("Submit a manuscript"): a full-width blue button. */
a.side-link.side-cta,
a.side-link.side-cta:link,
a.side-link.side-cta:visited {
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin: 4px 0 12px;
	background: var(--blue);
	box-shadow: none;
	color: var(--on-blue);
	font-weight: 700;
}
a.side-link.side-cta:hover {
	background: var(--blue-hover);
	color: var(--on-blue);
}
a.side-link.side-cta .icon {
	color: var(--on-blue);
}
a.side-link.side-cta .side-label {
	flex: none;
}
/* "Holds it:" under the Admin Center's Workflow heading (Kit board). */
.side-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	padding: 2px 12px 8px;
	color: var(--muted);
	font-size: 12px;
}
.side-legend strong {
	font-weight: 700;
	letter-spacing: .04em;
}
.side-legend > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.side-legend .party {
	width: 18px;
	height: 18px;
	font-size: 10.5px;
}

/* Counts: grey totals, amber past timeline or needing attention, red well past. */
.nav-count {
	display: inline-flex;
	align-items: center;
	flex: none;
	box-sizing: border-box;
	height: 22px;
	min-width: 22px;
	justify-content: center;
	padding: 0 8px;
	background: var(--line-soft);
	border-radius: var(--radius-pill);
	color: var(--text-2);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.side-link .nav-count {
	margin-left: auto;
}
li.is-zero > a,
li.is-zero > a:link,
li.is-zero > a:visited {
	color: var(--muted);
}
li.is-zero .nav-count {
	background: none;
	color: var(--muted);
	font-weight: 500;
}
li.needs-attention .nav-count {
	background: var(--amber-bg);
	box-shadow: none;
	color: var(--amber-text);
}
li.is-urgent .nav-count {
	background: var(--red-bg);
	box-shadow: none;
	color: var(--red-text);
}
li.needs-attention > a,
li.is-urgent > a {
	font-weight: 600;
}
.nav-party {
	display: inline-grid;
	place-items: center;
	flex: none;
	order: -1;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 5px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* ---- A page's own boxes, beside the content ("At a glance") -------------- */
.side-page {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.side-page:empty,
.side-page:not(:has(> *)) {
	display: none;
}
.side-page > br,
.side-page > form > br {
	display: none;
}
.side-page .box,
.pp-cards .pp-card {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: none;
	overflow: hidden;
}
.side-page .box h2,
.pp-cards .pp-card h2 {
	display: block;
	margin: 0;
	padding: 14px 16px;
	background: none;
	border-bottom: 1px solid var(--line-soft);
	border-radius: 0;
	color: var(--text);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}
.side-page .box h2[style*="border-top"],
.pp-cards .pp-card h2[style*="border-top"] {
	border-top: 1px solid var(--line-soft) !important;
}
.side-page .box ul,
.pp-cards .pp-card ul {
	margin: 0;
	padding: 6px;
}
.side-page .box li,
.pp-cards .pp-card li {
	height: auto;
	padding: 6px 10px;
	font-size: var(--fs-md);
	line-height: 20px;
}
.side-page .box li.nav-item,
.pp-cards .pp-card li.nav-item {
	padding: 0;
}
.side-page .box li > a.nav-link,
.pp-cards .pp-card li > a.nav-link {
	display: flex;
	padding: 8px 10px;
	border-radius: var(--radius);
}
.side-page .box > div,
.side-page .box > p,
.side-page .box > table,
.pp-cards .pp-card > div,
.pp-cards .pp-card > p,
.pp-cards .pp-card > table {
	margin: 12px 16px;
}
.side-page .box > form,
.pp-cards .pp-card > form {
	margin: 0;
}
.side-page .box > div.member-add,
.pp-cards .pp-card > div.member-add {
	margin: 0;
}
.side-page .box li > strong:first-child,
.pp-cards .pp-card li > strong:first-child {
	color: var(--muted);
	font-weight: 600;
}
.side-page .box li select,
.pp-cards .pp-card li select {
	width: 100%;
	min-width: 0;
}
.side-page a.side-danger,
.side-page a.side-danger:link,
.side-page a.side-danger:visited,
.pp-cards a.side-danger,
.pp-cards a.side-danger:link,
.pp-cards a.side-danger:visited {
	color: var(--red-text);
}
.side-page a.side-danger:hover,
.pp-cards a.side-danger:hover {
	background: var(--red-bg);
}

/* ---- Title block: breadcrumb, serif title, meta line, page actions -------- */
.page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
}
.page-head-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	max-width: 900px;
}
.page-title {
	margin: 0;
	color: var(--text);
	font-family: var(--font-serif);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.01em;
}
.page-meta {
	margin: 0;
	color: var(--muted);
}
.page-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.breadcrumbs {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: 13px;
	line-height: 20px;
}
.breadcrumbs li {
	display: flex;
	align-items: center;
	height: auto;
	margin: 0;
	padding: 0;
}
.breadcrumbs li + li::before {
	margin: 0 6px;
	color: var(--muted);
	content: "\203A";
}
.breadcrumbs a:link,
.breadcrumbs a:visited {
	color: var(--blue-text);
	text-decoration: none;
}
.breadcrumbs li[aria-current] {
	color: var(--muted);
	font-weight: 400;
}
@media (max-width: 899px) {
	.page-title {
		font-size: 26px;
	}
}

/* Legacy buttons sized inline (style="width:100%", "width: 98%; height: 20px"): the boards'
   buttons fit their label (round 18b2). Fields keep their inline widths. */
.layout-main button[style*="width"],
.layout-main input[type="submit"][style*="width"],
.layout-main input[type="button"][style*="width"] {
	width: auto !important;
	height: auto !important;
}

/* ---- Messages: errors and warnings stand out, info stays quiet ---------- */
/* Round 23e1: the old message boxes only; the kit's .notice.info|error|success and .band take the same words. */
.success:not(.notice):not(.band),
.error:not(.notice):not(.band),
.info:not(.notice):not(.band),
.warning:not(.notice):not(.band) {
	margin: 0 0 var(--space-4);
	padding: 10px 14px;
	border: 1px solid;
	border-radius: var(--radius);
	font-size: var(--fs-base);
	line-height: 21px;
}
.info:not(.notice):not(.band) {
	background: var(--sp-info-bg);
	border-color: var(--sp-info-line);
	color: var(--sp-info-text);
}
.warning:not(.notice):not(.band) {
	background: var(--sp-warn-bg);
	border-color: var(--sp-warn-line);
	color: var(--sp-warn-text);
}
.error:not(.notice):not(.band) {
	background: var(--sp-alert-bg);
	border-color: var(--sp-alert-line);
	color: var(--sp-alert-text);
}
.success:not(.notice):not(.band) {
	background: var(--sp-ok-bg);
	border-color: var(--sp-ok-line);
	color: var(--sp-ok-text);
}
.info:not(.notice):not(.band) a, .warning:not(.notice):not(.band) a, .error:not(.notice):not(.band) a, .success:not(.notice):not(.band) a {
	color: inherit;
	text-decoration: underline;
}
.success:empty,
.error:empty,
.info:empty,
.warning:empty,
.layout-messages:empty {
	display: none;
}
.erros {
	color: var(--sp-alert-text);
}
.line {
	border-bottom-color: var(--sp-line-soft);
}

/* ---- Cards (.box) ------------------------------------------------------- */
.box {
	background: var(--sp-card);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
}
.layout-main .box {
	margin: 0 0 var(--space-4);
	box-shadow: none;
	overflow: hidden;
}
/* The pages space their boxes with <br>; the cards' own margin does that now. */
.layout-main > br,
.layout-messages > br,
.layout-main .box + br,
.layout-main > form > br:first-child {
	display: none;
}
.box h2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 14px 16px;
	background: none;
	border-bottom: 1px solid var(--line-soft);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	color: var(--text);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0;
	text-shadow: none;
}
.box h2 > span[style*="font-weight:normal"],
.box h2 > span[style*="font-weight: normal"] {
	font-size: var(--fs-md);
}
.box h2 a:link,
.box h2 a:visited {
	font-size: var(--fs-md);
	font-weight: 600;
}
/* Count after a report title: "Sent for Production (12)" (portal.js). */
.box-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	box-sizing: border-box;
	height: 22px;
	padding: 0 8px;
	background: var(--line-soft);
	border-radius: var(--radius-pill);
	color: var(--text-2);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.box-count.is-zero {
	background: transparent;
	color: var(--muted);
	font-weight: 500;
}
.box > p {
	padding: 0 var(--space-4);
}
/* The portals' stylesheets colour these #333, unreadable on the dark theme. */
.box p,
.button p {
	color: var(--sp-text-2);
}

/* Boxes joined with inline border-top:none are sections of one card. */
.layout-main .box[style*="border-top:none"],
.layout-main .box[style*="border-top: none"] {
	margin-top: calc(-1 * var(--space-4) - 1px);
	border-top: 1px solid var(--sp-line-soft) !important;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	box-shadow: none;
}
.layout-main .box:has(+ .box[style*="border-top:none"]),
.layout-main .box:has(+ .box[style*="border-top: none"]),
.layout-main .box:has(+ br + .box[style*="border-top:none"]) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.layout-main .box[style*="border-top:none"] > h2,
.layout-main .box[style*="border-top: none"] > h2 {
	padding: 14px var(--space-4) 4px;
	background: none;
	border-bottom: 0;
	border-radius: 0;
	color: var(--sp-muted);
	font-size: var(--fs-xs);
	letter-spacing: .07em;
	text-transform: uppercase;
}
/* border-bottom:none was there because the last table drew the edge. */
.box[style*="border-bottom:none"] {
	border-bottom: 1px solid var(--sp-line) !important;
}
.layout-main .box:not(:has(+ .box[style*="border-top:none"])):not(:has(+ .box[style*="border-top: none"])) {
	border-bottom-left-radius: var(--sp-radius-lg);
	border-bottom-right-radius: var(--sp-radius-lg);
}
.box > table:last-child,
.box > form:last-child > table:last-child,
.box > div:last-child > table:last-child {
	border-bottom-width: 0 !important;
}
.box > table:last-child > tbody > tr:last-child > td,
.box > form:last-child > table:last-child > tbody > tr:last-child > td {
	border-bottom-width: 0 !important;
}
/* Label/value tables in a card line up with the heading. */
.box > .ftable > tbody > tr > td:first-child,
.box > form > .ftable > tbody > tr > td:first-child {
	padding-left: var(--space-4);
}
.box > .ftable > tbody > tr > td:last-child,
.box > form > .ftable > tbody > tr > td:last-child {
	padding-right: var(--space-4);
}
.ftable td {
	padding: 8px 10px;
	line-height: 1.5;
}
.ftable td p {
	margin: 0;
}

/* ---- Action buttons: Edit, View History, Delete ------------------------- */
.box-actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.box h2 > .box-actions ~ .box-actions {
	margin-left: 0;
}
/* The page actions themselves (PortalLayout::actions, portal.js) are the kit's small buttons: see .act below. */

/* ---- "Member of": role chips ------------------------------------------- */
.member-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 10px 14px 12px !important;
	list-style: none;
}
.member-list li,
.side-page .box .member-list li,
.pp-cards .pp-card .member-list li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: auto;
	padding: 3px 4px 3px 10px;
	background: var(--sp-surface-2);
	border: 1px solid var(--sp-line);
	border-radius: 999px;
	font-size: var(--fs-sm);
	line-height: 20px;
}
.member-list li:not(:has(.member-remove)) {
	padding-right: 10px;
}
.member-journal {
	font-weight: 700;
}
.member-role {
	color: var(--sp-muted);
}
a.member-remove,
a.member-remove:link,
a.member-remove:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: var(--sp-muted);
	text-decoration: none;
}
a.member-remove:hover {
	background: var(--sp-alert-bg);
	color: var(--sp-alert);
}
a.member-remove .icon {
	width: 14px;
	height: 14px;
}
.member-add {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 6px;
	margin: 0 !important;
	padding: 10px 14px 14px;
}
.member-add select {
	min-width: 0;
	width: 100%;
}
.member-add select:first-child {
	grid-column: 1 / -1;
}
.member-add input[type="submit"] {
	width: auto;
}

/* ---- Lists in cards ----------------------------------------------------- */
.box ul {
	margin: 0;
	padding: 8px 10px 10px;
}
.box li {
	height: auto;
	min-height: 0;
	padding: 4px 6px;
	line-height: 22px;
	text-decoration: none;
}
.box li[style*="padding-left"] {
	position: relative;
}
/* Link rows (portal.js adds .nav-item/.nav-link to items that are one link). */
.box li.nav-item {
	padding: 0;
}
.box a.nav-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	border-radius: var(--sp-radius);
}
.box a.nav-link:hover {
	background: var(--sp-hover);
	text-decoration: none;
}

/* ---- Tables ------------------------------------------------------------- */
.rtable th,
.layout-main table.dataTable > thead > tr > th,
table.bf th,
table.ex-table th,
table.rs-table th {
	height: auto;
	padding: 8px 12px;
	background: var(--sunk);
	border-right: 0;
	border-bottom: 0;
	box-shadow: inset 0 -1px 0 var(--line), inset 0 1px 0 var(--line-soft);
	color: var(--muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 16px;
	text-align: left;
	text-transform: uppercase;
	vertical-align: bottom;
}
.rtable th:first-child,
.rtable td:first-child {
	padding-left: 16px;
}
.rtable th:last-child,
.rtable td:last-child {
	padding-right: 16px;
}
/* Headings stay in view under the header while a long table scrolls (only
   tables that sit straight in a card: inside a scrolling box they would stick
   to that box instead). */
.layout-main .box > .rtable > thead > tr > th,
.layout-main .box > form > .rtable > thead > tr > th,
.layout-main > .rtable > thead > tr > th,
.layout-main .dt-container table.dataTable > thead > tr > th {
	position: sticky;
	top: var(--app-header-h, var(--sp-header-h));
	z-index: 2;
}
.table-scroll .rtable > thead > tr > th,
.table-scroll table.dataTable > thead > tr > th {
	position: static;
}
.rtable td {
	height: auto;
	padding: 10px 12px;
	border-right: 0;
	border-bottom: 1px solid var(--sp-line-soft);
	font-size: var(--fs-md);
	line-height: 1.5;
	vertical-align: top;
}
.rtable tbody tr:hover > td {
	background-color: var(--sunk);
}
.rtable tbody tr:last-child > td {
	border-bottom: 0;
}
td.empty-row,
.rtable td.empty-row {
	padding: 22px 16px;
	color: var(--sp-muted);
	font-style: italic;
	text-align: center;
}
.table-scroll {
	position: relative; /* holds .sr-only labels in its cells, which otherwise widen the page */
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
/* In a scroller a table keeps readable columns instead of squeezing them. */
.table-scroll > .rtable {
	min-width: 680px;
}
.ftable .head {
	background-color: var(--sp-surface-2);
	border-color: var(--sp-line);
}
.keywords,
.r {
	border-color: var(--sp-line);
	border-radius: var(--sp-radius);
}

/* ---- Buttons: primary (blue), secondary (outlined), danger -------------- */
button,
input[type="button"],
input[type="reset"],
.btn {
	box-sizing: border-box;
	min-height: 44px;
	height: auto;
	padding: 8px 16px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	text-shadow: none;
	vertical-align: middle;
	transition: background-color .15s, border-color .15s, color .15s;
}
.btn {
	display: inline-block;
	width: auto;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.btn:hover {
	background: var(--hover);
	border-color: var(--line);
	color: var(--text);
	text-decoration: none;
}
input[type="submit"],
button[type="submit"],
.btn-primary,
button.btn-primary,
.next,
.next_2 {
	box-sizing: border-box;
	min-height: 44px;
	height: auto;
	padding: 8px 18px;
	background: var(--blue);
	border: 1px solid var(--blue);
	border-radius: var(--radius);
	color: var(--on-blue);
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 20px;
	text-shadow: none;
	transition: background-color .15s, border-color .15s;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.btn-primary:hover,
button.btn-primary:hover,
.next:hover,
.next_2:hover {
	background: var(--blue-hover);
	border-color: var(--blue-hover);
	color: var(--on-blue);
}
/* Buttons written as links keep the button's text colour (a:link would win otherwise). Round 18b3 defect fix. */
a.btn:link,
a.btn:visited {
	color: var(--text);
	text-decoration: none;
}
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover {
	color: var(--on-blue);
	text-decoration: none;
}
a.btn-danger:link,
a.btn-danger:visited {
	color: var(--red-text);
}
/* The legacy 70px width is too tight for the padding; inline widths still win. */
.next,
.next_2,
.previous,
.previous_2 {
	width: auto;
	min-width: 76px;
}
.previous,
.previous_2 {
	box-sizing: border-box;
	min-height: 44px;
	height: auto;
	padding: 8px 16px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
	font-size: var(--fs-base);
	font-weight: 600;
	text-shadow: none;
}
/* Destructive actions are text-red, as on the System board ("Close manuscript…"). */
.btn-danger,
button.btn-danger {
	background: transparent;
	border-color: transparent;
	color: var(--red-text);
}
.btn-danger:hover,
button.btn-danger:hover {
	background: var(--sp-alert-bg);
	border-color: var(--sp-alert);
	color: var(--sp-alert-text);
}
.btn-small,
button.btn-small {
	min-height: 36px;
	padding: 4px 12px;
	font-size: var(--fs-md);
	line-height: 18px;
}
/* The kit's buttons (round 23b1). The System board: 44 px, small 36 px; one primary action per view;
   danger is red text; ghost has no frame. .btn / .btn-primary / .btn-danger / .btn-small stay as aliases. */
.act,
button.act,
a.act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 44px;
	height: auto;
	padding: 0 16px;   /* the kit's (round 23e1) */
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
	cursor: pointer;
	font: inherit;
	font-size: var(--fs-base);
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
}
/* a.act needs no :link/:visited colour since the page's link colour is :where() (round 23e1). */
.act:hover { background: var(--hover); border-color: var(--line); color: var(--text); text-decoration: none; }
.act.primary {   /* beats the page's button[type="submit"]; the kit's .bulkbar .act still wins (round 23e1) */
	background: var(--blue);
	border-color: var(--blue);
	color: var(--on-blue);
	font-weight: 700;
}
.act.primary:hover,
a.act.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: var(--on-blue); }
.act.danger,
a.act.danger:link,
a.act.danger:visited { color: var(--red-text); }
.act.danger:hover { background: var(--red-bg); border-color: var(--red); color: var(--red-text); }
/* The confirming button of a destructive dialog: filled red, named after its action ("Delete 3 rows"). */
.act.danger.solid,
button.act.danger.solid { background: var(--red); border-color: var(--red); color: #FFFFFF; font-weight: 700; }
.act.danger.solid:hover { background: var(--red-text); border-color: var(--red-text); color: #FFFFFF; }
:root[data-theme="dark"] .act.danger.solid,
:root[data-theme="dark"] .act.danger.solid:hover { color: var(--ink); }
.act.ghost,
button.act.ghost { background: transparent; border-color: transparent; }
.act.ghost:hover { background: var(--hover); border-color: transparent; }
.act.sm,
button.act.sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
.act.icon-only { width: 44px; padding: 0; }
.act.sm.icon-only { width: 36px; }
.act[disabled],
.act[aria-disabled="true"] { cursor: not-allowed; opacity: .5; pointer-events: none; }
/* The older page actions (PortalLayout::actions in a card's heading, portal.js's "(View Comments)" links)
   were a 28 px row of their own; they are the kit's small buttons now, with the old modifiers kept. */
.box-actions .act,
a.act.act-sm,
a.act.act-icon-only { min-height: 36px; padding: 0 12px; font-size: 13px; }
a.act .icon { width: 16px; height: 16px; vertical-align: 0; }
a.act.act-danger,
a.act.act-danger:link,
a.act.act-danger:visited { color: var(--red-text); }
a.act.act-danger:hover { background: var(--red-bg); border-color: var(--red); color: var(--red-text); }
a.act + a.act { margin-left: 4px; }
.box-actions a.act + a.act,
.page-actions a.act + a.act { margin-left: 0; }
/* Title-block actions are full-size (Kit: one primary action per view, the rest default). */
.act-icon-only { width: 36px; padding: 0; justify-content: center; }
button[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
.btn[disabled],
.next:disabled,
.next_2:disabled,
.previous:disabled,
.previous_2:disabled {
	cursor: default;
	opacity: .45;
}
.progress-bar {
	background: var(--sp-primary) !important;
}

/* ---- Form fields -------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
input:not([type]),
select,
textarea {
	box-sizing: border-box;
	padding-left: 12px;
	background-color: var(--card);
	border: 1px solid var(--field);
	border-radius: var(--radius);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	transition: border-color .15s, box-shadow .15s;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="url"],
input:not([type]),
select {
	min-height: 40px;
}
.ktable td input {
	min-height: 0;
}
textarea {
	padding: 10px 12px;
	line-height: 1.5;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
	border-color: var(--blue);
	box-shadow: none;
	outline: 2px solid var(--blue);
	outline-offset: 1px;
}
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
	border-color: var(--red);
}
input::placeholder,
textarea::placeholder {
	color: var(--muted);
	opacity: 1;
}
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--sp-primary);
	cursor: pointer;
}
input[type="file"] {
	color: var(--sp-text-2);
}
.required {
	color: var(--sp-alert-text);
}
/* The rich-text field (TinyMCE, assets/portal/editor.js) in the kit's frame: a sunk toolbar, the field's border,
   the placeholder hint and the word count in the line under it. */
.tox.tox-tinymce {
	border: 1px solid var(--field) !important;
	border-radius: var(--radius) !important;
}
.tox.tox-tinymce:focus-within {
	outline: 2px solid var(--blue);
	outline-offset: 1px;
	border-color: var(--blue) !important;
}
.tox .tox-editor-header,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar-overlord {
	background: var(--sunk) !important;
}
.tox .tox-editor-header {
	border-bottom: 1px solid var(--line-soft) !important;
	box-shadow: none !important;
}
.tox .tox-statusbar {
	border-top: 1px solid var(--line-soft) !important;
	color: var(--muted) !important;
	font-size: 12px !important;
}
.tox .tox-statusbar__text-container {
	justify-content: space-between !important;
}
/* The portals' button rule (44 px, a frame) must not reach TinyMCE's own small buttons. */
.tox .tox-statusbar__wordcount,
.tox .tox-statusbar__wordcount:hover {
	min-height: 0 !important;
	height: auto !important;
	padding: 0 4px !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--muted) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
}
.sp-editor-hint {
	margin-right: auto;
	color: var(--muted);
	font-size: 12px;
}
/* Round 23e27 (Design's as-e-3): the toolbar in the kit's face and size - 32 px buttons, 18 px icons - not TinyMCE's own. */
.tox.tox-tinymce,
.tox .tox-tbtn,
.tox .tox-tbtn__select-label,
.tox .tox-collection__item-label {
	font-family: var(--font-sans, 'Source Sans 3', system-ui, sans-serif) !important;
}
.tox .tox-tbtn {
	width: auto !important;
	min-width: 32px !important;
	height: 32px !important;
	margin: 3px 1px !important;
}
.tox .tox-tbtn svg {
	width: 18px !important;
	height: 18px !important;
}
.tox .tox-tbtn__select-label {
	font-size: 13.5px !important;
}
/* Pages that show the kit's own word count under the field (data-fe-count) hide TinyMCE's. */
.fe-details .tox .tox-statusbar__wordcount,
.si-form .tox .tox-statusbar__wordcount,
.nt-form .tox .tox-statusbar__wordcount {
	display: none !important;
}

/* Field anatomy (Kit board, round 23b1): label, the control, help, then an inline error.
     <label class="fld" for="x"><span class="fld-label">Email <span class="req" aria-hidden="true">*</span></span>
       <input id="x" aria-describedby="x-help x-err" aria-invalid="true"><span class="fld-help" id="x-help">…</span>
       <span class="fld-error" id="x-err">…</span></label> */
.fld {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}
.fld-label {
	color: var(--text-2);
	font-size: 13px;
	font-weight: 700;
}
.fld-label .req,
.fld .req {
	color: var(--red-text);
}
.fld-help {
	color: var(--muted);
	font-size: 12.5px;
}
.fld-error {
	color: var(--red-text);
	font-size: 12.5px;
	font-weight: 600;
}
.fld-error:empty { display: none; }
.fld > input,
.fld > select,
.fld > textarea { width: 100%; }
/* A form's fields in rows of two or more on wide screens (Kit board, form(cols=2)). */
.fld-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 14px 16px;
}
.fld-grid > .fld-wide { grid-column: 1 / -1; }
/* Upload zone: a dashed, sunk box with the icon, the hint and "Choose file". */
.upload-zone {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	min-height: 64px;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px dashed var(--field);
	border-radius: 10px;
	background: var(--sunk);
	color: var(--text-2);
	font-size: 13.5px;
}
.upload-zone.is-over { border-color: var(--blue); background: var(--blue-soft); }
.upload-zone > .icon { color: var(--muted); }
.upload-zone .upload-hint { flex: 1 1 200px; }
.upload-zone input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}
.upload-zone .upload-name { font-weight: 600; color: var(--text); }

/* ---- Pagination: one pager everywhere (Kit board, round 23b1) ---------------
   "Showing 26–50 of 93" on the left, ‹ 1 2 3 … 24 › on the right, under the table in the same card.
     Screen::pager($total, $perPage, $page, $href)   new screens and the site
     .pager > .pager-info + .pager-controls           the older reports (Previous/Next become ‹ ›, portal.js)
     ul.paginate (as/classes/db/pages.php)            numbered pages, drawn as .pg squares */
.pager {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 var(--space-4);
	padding: 10px 20px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	color: var(--muted);
	font-size: 13px;
}
/* Inside a card (the new screens): a row under the table. */
.sec > .pager,
.scr-card > .pager,
.card > .pager {
	margin: 0;
	border: 0;
	border-top: 1px solid var(--line-soft);
	border-radius: 0;
	background: transparent;
}
.box + .pager,
.box:has(> .rtable) + .pager {
	margin-top: calc(-1 * var(--space-4) - 1px);
	border-top-color: var(--line-soft);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.box:has(+ .pager) {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.pager-info {
	order: -1;
	margin-right: auto;
}
/* One page only: nothing to page through. */
.pager-controls:has(> .previous:disabled):has(> .next:disabled),
.pager-controls:has(> .previous_2:disabled):has(> .next_2:disabled) {
	display: none;
}
.pager:not(:has(.pager-info)):not(:has(.pager-extra)):has(.previous:disabled):has(.next:disabled) {
	display: none;
}
.pager-info strong,
.pager-info #range {
	color: var(--text-2);
	font-weight: 600;
}
.pager-controls,
.pager-pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.pager .pg,
.pager-controls .previous,
.pager-controls .next,
.pager-controls .previous_2,
.pager-controls .next_2,
.paginate li a,
.paginate li > span {
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	min-width: 34px;
	width: auto;
	height: 34px;
	min-height: 34px;
	margin: 0;
	padding: 0 8px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
}
.pager .pg:hover,
.pager-controls .previous:hover:not(:disabled),
.pager-controls .next:hover:not(:disabled),
.pager-controls .previous_2:hover:not(:disabled),
.pager-controls .next_2:hover:not(:disabled),
.paginate li a:hover {
	background: var(--card);
	border-color: var(--blue);
	color: var(--text);
	text-decoration: none;
}
.pager .pg.on,
.paginate li a.active,
.paginate li > span.active,
.paginate li.active a {
	background: var(--ink);
	border-color: var(--ink);
	color: #FFFFFF;
}
:root[data-theme="dark"] .pager .pg.on,
:root[data-theme="dark"] .paginate li > span.active,
:root[data-theme="dark"] .paginate li a.active {
	background: var(--text);
	border-color: var(--text);
	color: var(--ink);
}
.pager .pg[aria-disabled="true"],
.paginate li > span.disabled,
.pager-controls button:disabled {
	opacity: .45;
	cursor: default;
	pointer-events: none;
}
.pager .pg-gap,
.paginate li.ellipsis {
	padding: 0 2px;
	color: var(--muted);
}
.pager-extra {
	display: flex;
	gap: 6px;
}
.pager-extra .next_2,
.pager-extra button {
	float: none !important;
	margin: 0;
}
.paginate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	height: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}
.paginate li {
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	line-height: normal;
}
form.pager {
	margin-top: 0;
}

/* ---- Report toolbar, legend and timeline colours ------------------------ */
/* Shared by the review, review approval and production reports. */
.review-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0 0 12px;
	padding: 14px var(--space-4);
	background: var(--sp-card);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow);
}
.review-filter {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 150px;
}
.review-filter-wide {
	flex: 1;
	min-width: 260px;
}
.review-filter-action {
	flex-direction: row;
	justify-content: flex-end;
	gap: 6px;
	min-width: 0;
}
.review-filter-push {
	margin-left: auto;
}
.review-filter label {
	margin: 0;
	color: var(--sp-muted);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.review-filter select,
.review-filter input {
	box-sizing: border-box;
	width: 100%;
	height: 34px;
	padding: 3px 9px;
	font-size: var(--fs-md);
}
.review-filter button {
	height: 34px;
	padding: 0 16px;
}
.review-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 0 0 12px;
	color: var(--sp-muted);
	font-size: var(--fs-sm);
}
.review-legend .rv-key-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.rv-key {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 3px;
	vertical-align: middle;
}
.rv-key-ok { background: var(--blue); }
.rv-key-warn { background: var(--amber); }
.rv-key-late { background: var(--red); }
.rv-key-none { background: transparent; box-shadow: inset 0 0 0 1px var(--field); }
.rv-key-expected { background: var(--muted); }
.review-legend-note {
	font-style: italic;
}
#reviewStatus,
.report-status {
	display: none;
	margin: 0 0 12px;
	padding: 11px 16px;
	background: var(--sp-alert-bg);
	border: 1px solid var(--sp-alert-line);
	border-left: 4px solid var(--sp-alert);
	border-radius: var(--sp-radius);
	color: var(--sp-alert-text);
	font-size: var(--fs-base);
}
/* Row colour: a stripe at the start of the row, not a fill. */
tr.rv-sla-ok > td:first-child,
tr.rv-sla-warn > td:first-child,
tr.rv-sla-late > td:first-child,
tr.rv-sla-none > td:first-child {
	box-shadow: inset 4px 0 0 var(--sp-line);
}
/* Kit board: only rows past (amber) or well past (red) their timeline carry the 3px bar. */
tr.rv-sla-ok > td:first-child,
tr.rv-sla-none > td:first-child,
tr.rv-sla-expected > td:first-child { box-shadow: none; }
tr.rv-sla-warn > td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
tr.rv-sla-late > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
tr.rv-sla-ok > td:first-child,
tr.rv-sla-warn > td:first-child,
tr.rv-sla-late > td:first-child,
tr.rv-sla-none > td:first-child,
tr.rv-sla-expected > td:first-child {
	padding-left: 16px;
}
.rv-days {
	display: inline-block;
	margin-top: 2px;
	color: var(--sp-muted);
	font-size: var(--fs-xs);
}
tr.rv-sla-warn .rv-days { color: var(--sp-warn-text); font-weight: 600; }
tr.rv-sla-late .rv-days { color: var(--sp-alert-text); font-weight: 700; }

/* Cells of the review reports */
.rv-title { font-weight: 600; }
.rv-meta, .rv-ext { color: var(--sp-muted); font-size: var(--fs-xs); }
.rv-sub { color: var(--sp-text-2); }
.rv-set { color: var(--sp-link); font-style: normal; }
.rv-none { color: var(--sp-muted); }
.rv-office { color: var(--sp-warn-text); font-style: italic; }
.rv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}
.rv-chip {
	display: inline-block;
	padding: 0 8px;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: 10px;
	color: var(--sp-text-2);
	font-size: var(--fs-xs);
	line-height: 1.6;
	white-space: nowrap;
}
.rv-sent { background: var(--sp-surface); border-color: var(--sp-line); }
.rv-prog { background: var(--sp-primary-soft); border-color: var(--sp-primary-line); color: var(--sp-link); }
.rv-done { background: var(--sp-primary-soft); border-color: var(--sp-primary-line); color: var(--sp-link); font-weight: 600; }
.rv-approved { background: var(--sp-ok-bg); border-color: var(--sp-ok-line); color: var(--sp-ok-text); }
.rv-declined { background: var(--sp-alert-bg); border-color: var(--sp-alert-line); color: var(--sp-alert-text); }
.rv-stopped { background: var(--sp-surface); border-color: var(--sp-line); color: var(--sp-muted); }

/* Review approval (QA) report */
.qa-badge { padding: 1px 7px; border-radius: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.qa-internal { background: var(--sp-primary-soft); border: 1px solid var(--sp-primary-line); color: var(--sp-link); }
.qa-external { background: var(--sp-warn-bg); border: 1px solid var(--sp-warn-line); color: var(--sp-warn-text); }
.qa-comment { max-width: 520px; }
.qa-meta { color: var(--sp-muted); font-size: var(--fs-xs); }
.qa-state { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: var(--fs-xs); font-weight: 600; }
.qa-state-pending { background: var(--sp-warn-bg); border: 1px solid var(--sp-warn-line); color: var(--sp-warn-text); }
.qa-state-approved { background: var(--sp-ok-bg); border: 1px solid var(--sp-ok-line); color: var(--sp-ok-text); }
.qa-state-declined { background: var(--sp-alert-bg); border: 1px solid var(--sp-alert-line); color: var(--sp-alert-text); }
.qa-actions { display: flex; flex-direction: column; gap: 4px; }
.qa-actions button { min-height: 0; padding: 3px 10px; font-size: var(--fs-sm); line-height: 16px; white-space: nowrap; }
.qa-bulk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 8px 14px;
	background: var(--sp-surface-2);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}
.qa-bulk button { padding: 4px 12px; font-size: var(--fs-sm); }
.qa-bulk #qaSelectedCount { min-width: 80px; font-size: var(--fs-sm); font-weight: 700; }
.qa-pick { display: flex; align-items: center; gap: 5px; margin: 0; font-weight: normal; }
#reviewQa tr.qa-dupe td { background: var(--sp-warn-bg); }

/* Saved filters (production report) */
.saved-report-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.saved-report-filters select {
	width: auto;
	min-width: 170px;
}
.saved-report-filters button,
.saved-report-filters select {
	height: 34px;
	padding: 3px 10px;
	font-size: var(--fs-md);
}
#savedReportFilterStatus {
	color: var(--sp-ok-text);
	font-size: var(--fs-sm);
}
#savedReportFilterStatus.saved-filter-error {
	color: var(--sp-alert-text);
}

/* ---- DataTables --------------------------------------------------------- */
.layout-main div.dt-container {
	color: var(--sp-text);
	font-size: var(--fs-md);
}
.layout-main table.dataTable {
	border-collapse: collapse !important;
}
.layout-main table.dataTable > tbody > tr > td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--sp-line-soft);
	font-size: var(--fs-md);
	vertical-align: top;
}
.layout-main table.dataTable > tbody > tr:hover > td {
	background-color: var(--sp-row-hover);
}
.layout-main table.dataTable.display > tbody > tr > td,
.layout-main table.dataTable.stripe > tbody > tr > td {
	background-color: transparent;
}
.layout-main div.dt-container .dt-layout-row {
	margin: 0;
}
.layout-main div.dt-container .dt-layout-row:first-child,
.layout-main div.dt-container .dt-layout-row:last-child {
	padding: 10px 0;
}
.layout-main div.dt-container .dt-info {
	color: var(--sp-muted);
}
.layout-main div.dt-container .dt-search input,
.layout-main div.dt-container select.dt-input,
.layout-main div.dt-container .dt-input {
	width: auto;
	height: 32px;
	margin: 0 6px;
	padding: 3px 9px;
	background: var(--sp-card);
	border: 1px solid var(--sp-field);
	border-radius: var(--sp-radius);
	color: var(--sp-text);
}
.layout-main div.dt-container .dt-paging .dt-paging-button {
	min-width: 32px;
	margin: 0 2px;
	padding: 0 9px !important;
	background: var(--sp-card) !important;
	border: 1px solid var(--sp-line) !important;
	border-radius: var(--sp-radius) !important;
	color: var(--sp-text-2) !important;
	line-height: 30px;
}
.layout-main div.dt-container .dt-paging .dt-paging-button:hover {
	background: var(--sp-surface-2) !important;
	border-color: var(--sp-primary-line) !important;
	color: var(--sp-link) !important;
}
.layout-main div.dt-container .dt-paging .dt-paging-button.current,
.layout-main div.dt-container .dt-paging .dt-paging-button.current:hover {
	background: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: var(--on-blue) !important;
}
.layout-main div.dt-container .dt-paging .dt-paging-button.disabled,
.layout-main div.dt-container .dt-paging .dt-paging-button.disabled:hover {
	background: var(--sp-card) !important;
	border-color: var(--sp-line-soft) !important;
	color: var(--sp-faint) !important;
}
.layout-main div.dt-container .dt-processing > div:last-child > div {
	background: var(--sp-primary);
}
.layout-main table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
.layout-main table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after {
	opacity: .35;
}

/* ---- Submission steps --------------------------------------------------- */
.progress td {
	background-color: var(--sp-surface-2);
	border: 1px solid var(--sp-line);
	color: var(--sp-muted);
}
.progress td a:link,
.progress td a:visited {
	color: var(--sp-muted);
}
td.selected {
	background-color: var(--sp-primary-soft);
	border: 1px solid var(--sp-primary-line);
	color: var(--sp-link);
}
.progress td.selected a:link,
.progress td.selected a:visited {
	color: var(--sp-link);
}
/* Five steps fit a phone: tighter cells, and long words may break. */
@media (max-width: 480px) {
	table.progress td {
		padding: 6px 3px;
		font-size: var(--fs-xs);
		overflow-wrap: anywhere;
	}
}
/* Legacy grey wrappers around the submission and entry text areas. */
[data-theme="dark"] [style*="background-color: #f4f4f4" i] {
	background-color: transparent !important;
}

/* ---- "Needs attention" strip on the home pages (portal.js) -------------- */
.attention-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--space-4);
	padding: 12px var(--space-4);
	background: var(--sp-card);
	border: 1px solid var(--sp-line);
	border-left: 4px solid var(--sp-warn);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow);
}
.attention-strip.is-urgent {
	border-left-color: var(--sp-alert);
}
.attention-title {
	margin-right: 4px;
	color: var(--sp-text);
	font-size: var(--fs-base);
	font-weight: 700;
}
a.attention-chip:link,
a.attention-chip:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 11px;
	background: var(--sp-warn-bg);
	border: 1px solid var(--sp-warn-line);
	border-radius: 999px;
	color: var(--sp-warn-text);
	font-size: var(--fs-md);
	font-weight: 600;
	text-decoration: none;
}
a.attention-chip.is-urgent:link,
a.attention-chip.is-urgent:visited {
	background: var(--sp-alert-bg);
	border-color: var(--sp-alert-line);
	color: var(--sp-alert-text);
}
a.attention-chip:hover {
	border-color: currentColor;
	text-decoration: none;
}
.attention-chip b {
	font-weight: 700;
}

/* ---- Reports page: one card per section --------------------------------- */
.report-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-4);
	margin: 0 0 var(--space-4);
}
.report-grid .box {
	margin: 0;
}
.report-card-desc {
	margin: 0;
	padding: 16px var(--space-4) 12px;
	border-bottom: 1px solid var(--sp-line-soft);
	color: var(--sp-muted);
	font-size: var(--fs-md);
	line-height: 1.5;
}
ul.report-links {
	margin: 0;
	padding: 10px 8px 12px;
	list-style: none;
}
/* Retired features: last, and quieter than the live sections. */
.report-grid .report-retired {
	background: var(--sp-surface-2);
	box-shadow: none;
}
.report-retired h2 .icon,
.report-retired .report-link-name {
	color: var(--sp-muted);
}
ul.report-links li {
	height: auto;
	padding: 0;
}
ul.report-links a:link,
ul.report-links a:visited {
	display: block;
	padding: 7px 10px;
	border-radius: var(--sp-radius);
	text-decoration: none;
}
ul.report-links a:hover {
	background: var(--sp-hover);
	text-decoration: none;
}
.report-link-name {
	display: block;
	color: var(--sp-link);
	font-size: var(--fs-base);
	font-weight: 600;
}
.report-link-desc {
	display: block;
	color: var(--sp-muted);
	font-size: var(--fs-sm);
	line-height: 1.4;
}
.box h2 .icon {
	color: var(--sp-primary);
}

/* ---- Legacy markup: inline colours made theme-aware --------------------- */
[style*="background-color:#fcfcfc" i],
[style*="background-color: #fcfcfc" i],
[style*="background:#fcfcfc" i],
[style*="background:#f8f8f8" i] {
	background-color: var(--sp-surface-2) !important;
}
[style*="background:#fff;" i], [style$="background:#fff" i],
[style$="background: #fff" i], [style*="background: #ffffff" i],
[style*="background-color:#fff;" i],
[style*="background-color: #fff;" i], [style$="background-color: #fff" i],
[style*="background-color:#ffffff" i], [style*="background-color: #ffffff" i] {
	background-color: var(--sp-card) !important;
}
[style*="solid #ccc" i],
[style*="solid #dedede" i],
[style*="solid #efefef" i],
[style*="solid #f1f1f1" i],
[style*="solid #e9e9e9" i] {
	border-color: var(--sp-line) !important;
}

[data-theme="dark"] [style*="color: #08486d" i] {
	color: var(--sp-link) !important;
}

[data-theme="dark"] [style*="color:#777" i],
[data-theme="dark"] [style*="color:#333" i],
[data-theme="dark"] [style*="color:#000" i] {
	color: var(--sp-text-2) !important;
}
[data-theme="dark"] font[color] {
	color: var(--sp-text-2);
}
/* Emails and other HTML from the database keep their own light page. */
[data-theme="dark"] .mail-preview,
[data-theme="dark"] .wysiwyg iframe {
	background: #fff;
	color: #222;
	color-scheme: light;
}
[data-theme="dark"] img[src*="ext-link"] {
	filter: invert(.85);
}

/* ---- Third-party widgets in the dark theme ------------------------------ */
[data-theme="dark"] .ui-widget-content,
[data-theme="dark"] .ui-datepicker {
	background: var(--sp-elev);
	border-color: var(--sp-line);
	color: var(--sp-text);
}
[data-theme="dark"] .ui-widget-header {
	background: var(--sp-surface-2);
	border-color: var(--sp-line);
	color: var(--sp-text);
}
[data-theme="dark"] .ui-state-default,
[data-theme="dark"] .ui-widget-content .ui-state-default {
	background: var(--sp-card);
	border-color: var(--sp-line);
	color: var(--sp-text-2);
}
[data-theme="dark"] .ui-state-highlight,
[data-theme="dark"] .ui-state-active {
	background: var(--sp-primary-soft);
	border-color: var(--sp-primary-line);
	color: var(--sp-link);
}
[data-theme="dark"] .selectize-input,
[data-theme="dark"] .selectize-dropdown,
[data-theme="dark"] .selectize-input input {
	background: var(--sp-card) !important;
	border-color: var(--sp-field) !important;
	box-shadow: none !important;
	color: var(--sp-text) !important;
}
[data-theme="dark"] .selectize-dropdown .active {
	background: var(--sp-hover) !important;
	color: var(--sp-text) !important;
}
[data-theme="dark"] .selectize-control.multi .selectize-input > div {
	background: var(--sp-primary-soft) !important;
	border-color: var(--sp-primary-line) !important;
	color: var(--sp-link) !important;
}

/* ---- Print: content only ------------------------------------------------ */
@media print {
	.app-header,
	.skip-link,
	.layout-sidebar,
	.attention-strip,
	.pager,
	.box-actions {
		display: none !important;
	}
	.page-container {
		display: block !important;
		min-height: 0;
	}
	.breadcrumbs {
		margin: 0 0 12px;
		padding: 0;
		border: 0;
	}
	.layout-main .rtable > thead > tr > th {
		position: static;
	}
}

/* Comment rows: who and when, then small actions. */
.comment-actions {
	margin-top: 6px;
}
.comment-actions .box-actions {
	margin-left: 0;
}

/* Production report toolbar: an issue is a volume and an issue number. */
.review-filter-pair {
	display: flex;
	gap: 6px;
}
.review-filter-pair input {
	width: 90px;
}
.review-filter-saved {
	flex-basis: 100%;
	padding-top: 10px;
	border-top: 1px solid var(--sp-line-soft);
}
#productionFiles select.is-saving,
#productionFiles input.is-saving {
	background-color: var(--sp-warn-bg);
}
#productionFiles select.is-saved,
#productionFiles input.is-saved {
	background-color: var(--sp-ok-bg);
	border-color: var(--sp-ok);
}
#productionFiles select.is-failed,
#productionFiles input.is-failed {
	background-color: var(--sp-alert-bg);
	border-color: var(--sp-alert);
}
#productionFiles td select,
#productionFiles td input {
	max-width: 100%;
}
#productionFiles td:first-child {
	white-space: nowrap;
}

/* Printed editorial board: one heading row per role. */
.rtable tr.board-role > th {
	position: static;
	padding-top: 16px;
	background: none;
	box-shadow: none;
	color: var(--sp-heading);
	font-size: var(--fs-xs);
	letter-spacing: .07em;
	text-transform: uppercase;
}

/* A checkbox among the toolbar filters ("Assigned to me" on the staff production report). */
.review-filter-check {
	justify-content: flex-end;
	min-width: 0;
}
.review-filter .review-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--sp-field);
	border-radius: var(--sp-radius);
	background: var(--sp-card);
	color: var(--sp-text);
	font-size: var(--fs-md);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}
.review-filter .review-check input {
	width: auto;
	height: auto;
	margin: 0;
}

/* "12 days ago" with the date on hover. */
.days-ago {
	text-decoration: underline dotted var(--sp-faint);
	text-underline-offset: 3px;
	cursor: help;
	white-space: nowrap;
}

/* Article page, Manuscript card: stage > sub-stage, timeline, what the author sees. */
.side-page .box li.ms-row,
.pp-cards .pp-card li.ms-row {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 8px;
	align-items: baseline;
}
.side-page .box li.ms-row > span,
.pp-cards .pp-card li.ms-row > span {
	min-width: 0;
	overflow-wrap: anywhere;
}
.ms-note {
	display: block;
	color: var(--sp-muted);
	font-size: var(--fs-xs);
	font-style: normal;
	line-height: 16px;
}
.ms-timeline {
	display: inline-block;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--sp-surface);
	color: var(--sp-text-2);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 20px;
}
.ms-timeline.is-ok { background: var(--sp-ok-bg); color: var(--sp-ok-text); }
.ms-timeline.is-warn { background: var(--sp-warn-bg); color: var(--sp-warn-text); }
.ms-timeline.is-late { background: var(--sp-alert-bg); color: var(--sp-alert-text); }
.ms-timeline.is-expected { background: var(--sp-info-bg); color: var(--sp-info-text); }
.ms-timeline a { font-weight: 400; }

/* Article page, top (round 12, classes/articleSummaryView.php): the manuscript's summary
   as a grid of facts, then its action bar. It was the sidebar's Manuscript box. */
.ms-summary {
	margin: 0 0 var(--space-4);
	background: var(--sp-card);
	border: 1px solid var(--sp-line);
	border-top: 3px solid var(--sp-primary);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow);
}
.ms-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 0;
	margin: 0;
	padding: 4px 0;
	list-style: none;
}
.ms-facts > li.ms-row {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	margin: 0;
	padding: 9px var(--space-4);
	border: 0;
	list-style: none;
}
.ms-facts > li.ms-row > strong {
	color: var(--sp-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.ms-facts > li.ms-row > span {
	min-width: 0;
	color: var(--sp-text);
	font-size: var(--fs-md);
	overflow-wrap: anywhere;
}
.ms-facts > li.ms-author,
.ms-facts > li.ms-expected {
	grid-column: span 2;
}
.ms-facts > li.ms-form {
	grid-column: 1 / -1;
	margin: 0 var(--space-4) 8px;
	list-style: none;
}
.ms-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 14px;
	padding: 10px var(--space-4) 12px;
	border-top: 1px solid var(--sp-line-soft);
	background: var(--sp-surface-2);
	border-radius: 0 0 var(--sp-radius-lg) var(--sp-radius-lg);
}
.ms-action-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	color: var(--sp-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
}
.ms-action-field select {
	min-width: 180px;
	max-width: 280px;
}
.ms-switch-msg:empty { display: none; }
.ms-switch-msg {
	display: block;
	color: var(--sp-muted);
	font-size: var(--fs-xs);
}
@media (max-width: 600px) {
	.ms-facts {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.ms-facts > li.ms-row {
		padding: 8px 12px;
	}
	.ms-facts > li.ms-author,
	.ms-facts > li.ms-expected,
	.ms-facts > li.pp-roles-fact {
		grid-column: 1 / -1;
	}
	.ms-action-field,
	.ms-action-field select {
		width: 100%;
		max-width: none;
	}
}

/* Person page, top (round 12, classes/personSummaryView.php): facts, then the account
   cards that were the sidebar (Account, Member of, Add to a journal, certificates, tools). */
.pp-summary {
	margin: 0 0 var(--space-4);
}
.pp-summary .pp-facts {
	margin: 0 0 12px;
	background: var(--sp-card);
	border: 1px solid var(--sp-line);
	border-top: 3px solid var(--sp-primary);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow);
}
.pp-facts > li.pp-roles-fact {
	grid-column: span 2;
}
.pp-role {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 6px 4px 0;
	padding: 1px 9px;
	border: 1px solid var(--sp-line);
	border-radius: 999px;
	background: var(--sp-surface-2);
	font-size: var(--fs-sm);
	line-height: 20px;
}
.pp-role-journal {
	font-weight: 700;
}
.pp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
	align-items: start;
}
.pp-cards > br {
	display: none;
}
.pp-cards .pp-card {
	min-width: 0;
	margin: 0;
}
.pp-cards .pp-card li {
	list-style: none;
}
.pp-account > ul:first-of-type {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	padding: 10px 14px 12px;
}
.pp-cards .pp-account > ul:first-of-type > li {
	padding: 0;
}
.pp-cards .pp-account > ul:first-of-type > li:has(> strong) {
	flex: 1 1 40%;
	padding: 0 0 4px;
}
.pp-account > ul:first-of-type > li > a,
.pp-account > ul:first-of-type > li > a:link,
.pp-account > ul:first-of-type > li > a:visited {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--sp-line);
	border-radius: 999px;
	background: var(--sp-surface-2);
	color: var(--sp-link);
	font-size: var(--fs-sm);
	line-height: 20px;
	text-decoration: none;
}
.pp-account > ul:first-of-type > li > a:hover {
	border-color: var(--sp-primary-line);
	background: var(--sp-primary-soft);
}
.pp-account > ul:first-of-type > li > a.side-danger {
	border-color: var(--sp-alert-line);
	color: var(--sp-alert-text);
}
@media (min-width: 1000px) {
	.pp-cards > .pp-card:first-child {
		grid-column: span 2;
	}
}

/* An on/off switch: <label class="switch"><input type="checkbox" role="switch"> <span>Label</span></label>. */
.switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 0;
	color: var(--sp-text-2);
	font-size: var(--fs-sm);
	cursor: pointer;
}
.switch input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: none;
	width: 40px;
	height: 22px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: var(--field);
	cursor: pointer;
	transition: background-color .15s;
}
/* Kit board: 40 x 22, an 18 px white knob, green when on. */
.switch input[type="checkbox"]::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #FFFFFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	transition: transform .15s;
}
.switch input[type="checkbox"]:checked {
	background: var(--green);
}
.switch input[type="checkbox"]:checked::before {
	transform: translateX(18px);
}
.switch input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 1px;
}
.switch input[type="checkbox"]:disabled {
	opacity: .5;
	cursor: wait;
}
@media (prefers-reduced-motion: reduce) {
	.switch input[type="checkbox"],
	.switch input[type="checkbox"]::before {
		transition: none;
	}
}

/* A row's own actions (Delete) in a narrow last column, aligned with the row. */
.rtable th.col-actions,
.rtable td.col-actions {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}
.rtable td.col-actions .box-actions {
	margin: 0;
	float: none;
}

/* ---- Sub-stages & Timelines (as/info.php?type=substages) ---------------- */
.sub-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
}
.sub-tabs a,
.sub-tabs a:link,
.sub-tabs a:visited {
	padding: 7px 14px;
	border: 1px solid var(--sp-line);
	border-radius: 999px;
	background: var(--sp-card);
	color: var(--sp-text-2);
	font-size: var(--fs-md);
	font-weight: 600;
	text-decoration: none;
}
.sub-tabs a:hover {
	background: var(--sp-hover);
}
.sub-tabs a.is-current {
	border-color: var(--sp-btn);
	background: var(--sp-btn);
	color: var(--on-blue);
}
.sub-message:empty {
	display: none;
}
.sub-message {
	margin: 0 0 12px;
}
.sub-help {
	margin: 12px var(--space-4) 4px;
	color: var(--sp-muted);
	font-size: var(--fs-md);
	line-height: 1.55;
}
.sub-list {
	padding: 4px var(--space-4) var(--space-4);
}
.sub-group {
	margin: 16px 0 6px;
	color: var(--sp-heading);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.sub-empty {
	padding: 20px;
	color: var(--sp-muted);
	text-align: center;
}
.add-form {
	display: flex;
	gap: 10px;
	margin: 12px var(--space-4) 4px;
}
.add-form input {
	flex: 1;
	min-width: 0;
	padding: 7px 10px;
}
.substage-item {
	display: grid;
	grid-template-columns: auto minmax(160px, 1fr) auto minmax(180px, 1.2fr) auto auto;
	align-items: center;
	gap: 8px 16px;
	margin: 8px 0;
	padding: 10px 12px;
	background: var(--sp-surface-2);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}
.substage-item:not([draggable]) {
	grid-template-columns: minmax(160px, 1fr) auto minmax(180px, 1.2fr) auto;
}
.substage-item[draggable] {
	cursor: move;
}
.substage-item.dragging {
	opacity: .5;
}
.drag-handle {
	color: var(--sp-muted);
	font-size: 18px;
}
.substage-name {
	font-weight: 700;
}
.substage-order {
	color: var(--sp-muted);
	font-size: var(--fs-sm);
}
.substage-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
	color: var(--sp-muted);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.substage-field input {
	font-size: var(--fs-md);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.substage-days-input {
	color: var(--sp-muted);
	font-size: var(--fs-sm);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}
.substage-days-input input {
	width: 64px;
	margin-right: 4px;
	padding: 4px 6px;
	text-align: right;
}
.substage-author input {
	width: 100%;
	box-sizing: border-box;
	padding: 5px 8px;
}
.substage-switch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--sp-text-2);
	font-size: var(--fs-sm);
	white-space: nowrap;
	cursor: pointer;
}
.substage-switch input {
	margin: 0;
}
@media (max-width: 760px) {
	.substage-item,
	.substage-item:not([draggable]) {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.substage-item .drag-handle {
		display: none;
	}
	.substage-author {
		grid-column: 1 / -1;
	}
}

/* ---- Admin and staff home dashboards ------------------------------------ */
.dash-section {
	margin: 0 0 var(--space-5);
}
.dash-heading {
	margin: 0 0 12px;
	color: var(--sp-heading);
	font-size: var(--fs-xl);
	font-weight: 700;
}
.dash-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 12px;
	margin: 0 0 var(--space-4);
}
a.dash-tile,
a.dash-tile:link,
a.dash-tile:visited {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	border: 1px solid var(--sp-line);
	border-left: 4px solid var(--sp-primary);
	border-radius: var(--sp-radius-lg);
	background: var(--sp-card);
	box-shadow: var(--sp-shadow);
	color: var(--sp-text);
	text-decoration: none;
}
a.dash-tile:hover {
	background: var(--sp-row-hover);
}
a.dash-tile.is-warn { border-left-color: var(--sp-warn); }
a.dash-tile.is-late { border-left-color: var(--sp-alert); }
a.dash-tile.is-quiet { border-left-color: var(--sp-line); }
.dash-tile-count {
	color: var(--sp-heading);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
}
a.dash-tile.is-quiet .dash-tile-count {
	color: var(--sp-faint);
}
.dash-tile-label {
	font-weight: 700;
}
.dash-tile-note {
	color: var(--sp-muted);
	font-size: var(--fs-sm);
	line-height: 1.35;
}
a.dash-tile.is-late .dash-tile-note { color: var(--sp-alert-text); }
a.dash-tile.is-warn .dash-tile-note { color: var(--sp-warn-text); }
.dash-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
	margin: 0 0 var(--space-4);
}
.dash-panels .box {
	margin: 0;
}
.box h2 .dash-panel-sum {
	margin-left: auto;
	color: var(--sp-muted);
	font-size: var(--fs-sm);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}
.dash-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 12px var(--space-4) var(--space-4);
	list-style: none;
}
.dash-chip {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	padding: 6px 10px;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	background: var(--sp-surface-2);
	font-size: var(--fs-md);
}
.dash-chip.is-late { border-color: var(--sp-alert-line); }
.dash-chip.is-warn { border-color: var(--sp-warn-line); }
.dash-chip-name {
	font-weight: 600;
}
a.dash-chip-count,
a.dash-chip-count:link,
a.dash-chip-count:visited {
	padding: 0 7px;
	border-radius: 999px;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
}
a.dash-chip-count.is-late { background: var(--sp-alert-bg); color: var(--sp-alert-text); }
a.dash-chip-count.is-warn { background: var(--sp-warn-bg); color: var(--sp-warn-text); }
a.dash-chip-count:hover { text-decoration: underline; }
.dash-empty {
	margin: 0;
	padding: 14px var(--space-4) var(--space-4);
	color: var(--sp-muted);
}
.dash-row-title {
	display: block;
	max-width: 46em;
	overflow: hidden;
	color: var(--sp-muted);
	font-size: var(--fs-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dash-muted {
	color: var(--sp-muted);
}
.dash-nowrap {
	white-space: nowrap;
}
.rtable th.dash-num,
.rtable td.dash-num {
	text-align: right;
	white-space: nowrap;
}
a.dash-late,
a.dash-late:link,
a.dash-late:visited {
	color: var(--sp-alert-text);
	font-weight: 700;
}
.dash-overdue,
.dash-journals,
.dash-recent {
	margin-bottom: var(--space-4);
}
@media (max-width: 600px) {
	.dash-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.dash-row-title {
		max-width: 60vw;
	}
}

/* ---- Editorial Overview: who was seen when ------------------------------ */
ul.eo-people {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.eo-people li {
	height: auto;
	margin: 0 0 4px;
	padding: 0;
	line-height: 1.45;
}
.eo-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 7px 1px 0;
	border-radius: 50%;
	background: var(--sp-ok);
	vertical-align: middle;
}
.eo-dot.is-inactive { background: var(--sp-warn); }
.eo-dot.is-never { background: var(--sp-faint); }
.eo-seen {
	color: var(--sp-muted);
	font-size: var(--fs-sm);
	white-space: nowrap;
}
.eo-seen.is-inactive { color: var(--sp-warn-text); }
.eo-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.eo-stat,
a.eo-stat:link,
a.eo-stat:visited {
	padding: 1px 8px;
	border: 1px solid var(--sp-line);
	border-radius: 999px;
	background: var(--sp-surface-2);
	color: var(--sp-text-2);
	font-size: var(--fs-sm);
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
}
a.eo-stat:hover { border-color: currentColor; }
a.eo-stat.is-active { border-color: var(--sp-ok-line); background: var(--sp-ok-bg); color: var(--sp-ok-text); }
a.eo-stat.is-inactive { border-color: var(--sp-warn-line); background: var(--sp-warn-bg); color: var(--sp-warn-text); }
.eo-stat.is-zero { color: var(--sp-faint); }

/* Review Workflow panel: its move controls (sized to their longest option)
   must not widen the panel on a phone. */
@media (max-width: 600px) {
	#reviewWorkflowPanel table.rwp-current select,
	#reviewWorkflowPanel .rwp-office table select,
	#reviewWorkflowPanel .rwp-office table input[type=date] {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
	}
}

/* Article page: final entry details, up front while an approval is open. */
.final-entry-callout {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 12px var(--space-4) 4px;
	padding: 12px 16px;
	border: 1px solid var(--sp-primary-line);
	border-left: 4px solid var(--sp-primary);
	border-radius: var(--sp-radius);
	background: var(--sp-primary-soft);
}
.final-entry-callout .final-entry-icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--sp-primary);
}
.final-entry-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	color: var(--sp-text-2);
	font-size: var(--fs-md);
}
.final-entry-text strong {
	color: var(--sp-heading);
	font-size: var(--fs-base);
}
a.final-entry-btn,
a.final-entry-btn:link,
a.final-entry-btn:visited {
	flex: none;
	color: var(--on-blue);
	text-decoration: none;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.final-entry-callout {
		flex-wrap: wrap;
	}
	a.final-entry-btn {
		width: 100%;
		text-align: center;
	}
}

/* ---- Follow-ups: expected dates, final approval, reminders --------------
   classes/followupsView.php (as, cs) and the author's box in es/info.php. */
.rv-expected {
	display: inline-block;
	margin-top: 3px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--sp-info-bg);
	color: var(--sp-info-text);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
}
.rv-expected[title] { cursor: help; }
.rv-expected.rv-expected-passed { background: var(--sp-warn-bg); color: var(--sp-warn-text); }
button.fu-link {
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--sp-link);
	font: inherit;
	font-size: var(--fs-sm);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
button.fu-link:hover { color: var(--sp-primary); background: none; }
.fu-inline { display: inline; margin: 0; }
.fu-inline-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.side-page .box li.ms-form,
.pp-cards .pp-card li.ms-form { padding: 4px 8px 10px; }
.fu-expect-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	background: var(--sp-surface);
}
.fu-expect-form label {
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: var(--sp-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
}
.fu-expect-form input[type=date],
.fu-expect-form input[type=text],
.fu-expect-form select {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
.fu-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.fu-quick button {
	min-height: 0;
	height: auto;
	padding: 2px 8px;
	border: 1px solid var(--sp-line);
	border-radius: 999px;
	background: var(--sp-card);
	color: var(--sp-text-2);
	font-size: var(--fs-xs);
	line-height: 18px;
	cursor: pointer;
}
.fu-quick button:hover { border-color: var(--sp-primary-line); color: var(--sp-primary); }
.fu-buttons { display: flex; gap: 6px; }
.fu-help {
	margin: 0;
	color: var(--sp-muted);
	font-size: var(--fs-xs);
	line-height: 16px;
}
.followup-msg { display: block; font-size: var(--fs-sm); }
.followup-msg:empty { display: none; }
.followup-msg.is-ok { color: var(--sp-ok-text); }
.followup-msg.is-error { color: var(--sp-alert-text); font-weight: 600; }
.fu-inline .followup-msg { display: inline; margin-left: 8px; }
.followup-box .fu-facts {
	display: grid;
	grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
	gap: 8px 16px;
	margin: 14px var(--space-4) 0;
	font-size: var(--fs-md);
}
.followup-box .fu-facts > div { display: contents; }
.followup-box .fu-facts dt { color: var(--sp-muted); font-weight: 600; }
.followup-box .fu-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--sp-text-2); }
.fu-status {
	display: inline-block;
	padding: 0 8px;
	white-space: nowrap;
	border-radius: 999px;
	background: var(--sp-surface);
	color: var(--sp-text-2);
	font-weight: 600;
	line-height: 22px;
}
.fu-status.is-open { background: var(--sp-info-bg); color: var(--sp-info-text); }
.fu-status.is-ok { background: var(--sp-ok-bg); color: var(--sp-ok-text); }
.fu-status.is-warn { background: var(--sp-warn-bg); color: var(--sp-warn-text); }
.fu-note {
	margin: 6px 0 0;
	padding: 8px 12px;
	border-left: 3px solid var(--sp-line);
	background: var(--sp-surface);
	border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
	white-space: normal;
}
.fu-files { margin: 6px 0 0; padding-left: 18px; }
.followup-box .fu-actions,
.followup-box .fu-upload {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 14px var(--space-4);
}
.followup-box > p.fu-help { margin: 12px var(--space-4) 0; font-size: var(--fs-md); line-height: 20px; }
.followup-box > div > p.fu-help { margin: -6px var(--space-4) 14px; }
.fu-upload label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--sp-muted);
	font-weight: 600;
}
.fu-upload input[type=file] { max-width: 100%; }
.fu-upload .followup-msg { flex-basis: 100%; }
@media (max-width: 600px) {
	.followup-box .fu-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.followup-box .fu-facts dd { margin-bottom: 8px; }
}
.fu-author .final-entry-callout { margin: 14px var(--space-4) 0; }
.fu-author .final-entry-callout.fu-done { margin-bottom: 14px; border-left-color: var(--sp-ok); background: var(--sp-ok-bg); border-color: var(--sp-line); }
.fu-author-choices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 14px var(--space-4);
}
.fu-author-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}
.fu-author-form h3 { margin: 0; color: var(--sp-heading); font-size: var(--fs-base); }
.fu-author-form label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--sp-muted);
	font-size: var(--fs-sm);
	font-weight: 600;
}
.fu-author-form textarea { width: 100%; box-sizing: border-box; }
.fu-author-form .btn { align-self: flex-start; }
.fu-optional { font-weight: 400; }
@media (max-width: 700px) {
	.fu-author-choices { grid-template-columns: minmax(0, 1fr); }
}
.fu-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-4); }
.fu-stat {
	padding: 6px 12px;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	background: var(--sp-card);
	color: var(--sp-text-2);
	font-size: var(--fs-md);
}
.fu-stat strong { margin-right: 3px; color: var(--sp-heading); font-size: var(--fs-base); }
.fu-stat.is-warn { border-color: var(--sp-warn-line); background: var(--sp-warn-bg); color: var(--sp-warn-text); }
.fu-stat.is-warn strong { color: var(--sp-warn-text); }
.fu-stat.is-ok { border-color: var(--sp-ok-line); background: var(--sp-ok-bg); color: var(--sp-ok-text); }
.fu-stat.is-ok strong { color: var(--sp-ok-text); }
.followup-list > p.fu-list-help { margin: 10px var(--space-4); font-size: var(--fs-md); line-height: 20px; }
.fu-table td { vertical-align: top; }
.fu-table td.col-actions .followup-msg { display: block; margin: 4px 0 0; white-space: normal; }
.fu-scope { margin: 0 0 12px; color: var(--sp-muted); font-size: var(--fs-md); }

/* ---- Mass Messages (as/messages.php) ------------------------------------ */
.mm-choose { margin-bottom: var(--space-4); }
.mm-empty { margin: 14px var(--space-4); color: var(--sp-muted); font-size: var(--fs-md); }
.mm-template { display: flex; flex-direction: column; gap: 4px; margin: 14px var(--space-4) 0; max-width: 720px; }
.mm-template label { color: var(--sp-muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mm-template select { width: 100%; }
.mm-hint { margin: 0; color: var(--sp-muted); font-size: var(--fs-xs); }
.mm-preview { margin: 12px var(--space-4) 0; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden; }
.mm-preview-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 12px; background: var(--sp-surface); border-bottom: 1px solid var(--sp-line); }
.mm-preview-head span { color: var(--sp-muted); font-size: var(--fs-xs); }
.mm-preview-head strong { color: var(--sp-heading); font-size: var(--fs-md); }
.mm-preview iframe { display: block; width: 100%; height: 260px; border: 0; background: #fff; }
.mm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px var(--space-4); }
.mm-progress { color: var(--sp-muted); font-size: var(--fs-md); }
.mm-progress.is-ok { color: var(--sp-ok-text); font-weight: 600; }
.mm-progress.is-error { color: var(--sp-alert-text); font-weight: 600; }
.mm-table th.mm-check, .mm-table td.mm-check { width: 28px; text-align: center; }
.mm-table td { vertical-align: top; }
.mm-title { display: inline-block; max-width: 520px; font-weight: 400; }
.mm-result { white-space: nowrap; font-size: var(--fs-sm); }
.mm-result.is-sent { color: var(--sp-ok-text); font-weight: 600; }
.mm-result.is-failed { color: var(--sp-alert-text); font-weight: 600; }
.mm-result.is-skipped { color: var(--sp-warn-text); }
@media (max-width: 700px) {
	.mm-title { max-width: none; }
}

/* ---- Accounts (as/accounts.php) and the article page's Payment box ------- */
.acc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-4); }
.acc-tabs a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	background: var(--sp-card);
	color: var(--sp-text-2);
	font-size: var(--fs-md);
	font-weight: 600;
	text-decoration: none;
}
.acc-tabs a.is-current { border-color: var(--sp-primary-line); background: var(--sp-primary-soft); color: var(--sp-link); }
.acc-filter { margin: 0 var(--space-4) 10px; }
.acc-filter input { width: 100%; max-width: 360px; box-sizing: border-box; }
.pay-notice { padding: 8px 12px; border-left: 3px solid var(--sp-primary); background: var(--sp-info-bg); color: var(--sp-info-text) !important; }
.pay-letters { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pay-letters a { display: inline-flex; align-items: center; gap: 4px; }
.pay-letters .icon, .pay-letters svg { width: 14px; height: 14px; }
.pay-invoice select { margin-right: 6px; }
.followup-box > div > .pay-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 var(--space-4) 14px;
	padding: 12px 14px;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	background: var(--sp-surface);
}
.pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pay-grid label { display: flex; flex-direction: column; gap: 3px; color: var(--sp-muted); font-size: var(--fs-xs); font-weight: 600; }
.pay-grid input, .pay-grid select { width: 100%; box-sizing: border-box; }
@media (max-width: 600px) {
	.pay-grid { grid-template-columns: minmax(0, 1fr); }
}
.acc-label { color: var(--sp-muted); font-size: var(--fs-sm); font-weight: 600; }

/* ---- Indexing (as/indexing.php) ----------------------------------------- */
.ix-dry { margin: 0 0 var(--space-4); border-radius: var(--sp-radius); font-size: var(--fs-md); }
.ix-inline { display: inline-block; margin: 0 0 0 6px; }
.ix-xml { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; font-size: var(--fs-sm); }
.ix-xml svg { width: 14px; height: 14px; }
.ix-table td.col-actions { white-space: nowrap; }
.ix-manual { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px var(--space-4); }
.ix-manual select { max-width: 320px; }
.ix-manual input[type=number] { width: 90px; }
.ix-queue { margin: 0 var(--space-4) 14px; padding: 10px 14px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); }
.ix-queue .ix-inline { margin: 8px 0 0; }

/* A submit button for a secondary action: outlined, like other buttons. */
button[type="submit"].btn-secondary,
input[type="submit"].btn-secondary {
	background: var(--sp-card);
	border-color: var(--sp-field);
	color: var(--sp-text-2);
}
button[type="submit"].btn-secondary:hover,
input[type="submit"].btn-secondary:hover {
	background: var(--sp-surface);
	border-color: var(--sp-muted);
	color: var(--sp-text);
}

/* ---- Handling-editor picker (classes/editorSelectionView.php) ----------- */
.ed-picker { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.ed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ed-filter { width: 100%; max-width: 320px; box-sizing: border-box; }
.ed-count, .ed-empty { color: var(--sp-muted); font-size: var(--fs-sm); }
.ed-list {
	max-height: 420px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	background: var(--sp-card);
}
.ed-list .ed-row { height: auto; padding: 8px 12px; line-height: 20px; }
.ed-list .ed-row + .ed-row { border-top: 1px solid var(--sp-line-soft); }
.ed-list .ed-row[hidden] { display: none; }
.ed-row.is-sink { background: var(--sp-surface); }
.ed-row.is-sink .ed-name { color: var(--sp-muted); }
.ed-row:has(input:checked) { background: var(--sp-primary-soft); }
.ed-pick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ed-pick input { flex: none; margin: 0; vertical-align: middle; }
.ed-name { color: var(--sp-heading); font-weight: 600; }
.ed-role { color: var(--sp-muted); font-size: var(--fs-sm); }
.ed-profile { margin-left: 6px; font-size: var(--fs-sm); }
.ed-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0 22px; }
.ed-chip {
	padding: 0 7px;
	border-radius: 9px;
	background: var(--sp-surface);
	color: var(--sp-text-2);
	font-size: var(--fs-xs);
	line-height: 18px;
}
.ed-chip.is-ok { background: var(--sp-ok-bg); color: var(--sp-ok-text); }
.ed-chip.is-info { background: var(--sp-info-bg); color: var(--sp-info-text); }
.ed-chip.is-warn { background: var(--sp-warn-bg); color: var(--sp-warn-text); }
.ed-chip.is-alert { background: var(--sp-alert-bg); color: var(--sp-alert-text); font-weight: 600; }
.ed-chip.is-muted { color: var(--sp-muted); font-style: italic; }
.ed-chip[title] { cursor: help; }
.ed-office { background: var(--sp-surface); }
.ed-more { align-self: flex-start; }
/* The legacy two-column form rows around a picker stack on phones. */
@media (max-width: 700px) {
	tr:has(> td > [data-ed-picker]) > td,
	tr:has(> td > [data-ed-picker]) + tr > td {
		display: block;
		width: auto !important;
	}
	.ed-chips { margin-left: 0; }
	.ed-list { max-height: 360px; }
}

/* ---- People (as/people.php) and the person page's account tools -------- */
.pp-group { margin: 0 var(--space-4) 14px; }
.pp-group h3 { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; color: var(--sp-heading); font-size: var(--fs-base); }
.pp-group .col-actions .btn { margin: 0 0 4px 4px; }
.pp-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 var(--space-4); color: var(--sp-muted); font-size: var(--fs-md); }
.pp-tools form { margin: 0; }
.pp-tools .pp-merge { display: flex; flex-direction: column; gap: 6px; }
.pp-tools .pp-merge input[type=text] { width: 100%; box-sizing: border-box; }
.side-page .box li .side-danger-button,
.pp-cards .pp-card li .side-danger-button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--sp-alert-text);
	font: inherit;
	cursor: pointer;
}
.side-page .box li .side-danger-button:hover,
.pp-cards .pp-card li .side-danger-button:hover { text-decoration: underline; background: none; }
.pp-merges { margin: 4px 0 0; padding: 0; list-style: none; }
.pp-merges li { padding: 4px 0 !important; font-size: var(--fs-sm) !important; }
.view-as-banner {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 14px;
	padding: 8px 16px;
	background: var(--sp-warn-bg);
	border-bottom: 1px solid var(--sp-warn-line);
	color: var(--sp-warn-text);
	font-size: var(--fs-md);
}
.view-as-banner a { font-weight: 700; color: var(--sp-warn-text); }
.followup-list > .fu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px var(--space-4); }

/* ---- Special issues and issues (as/special_issues.php, as/issues.php) ---- */
.si-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; margin: 14px var(--space-4); }
.si-grid label { display: flex; flex-direction: column; gap: 4px; color: var(--sp-muted); font-size: var(--fs-xs); font-weight: 600; }
.si-grid input, .si-grid select, .si-grid textarea { width: 100%; box-sizing: border-box; font-weight: 400; }
.si-grid textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-sm); line-height: 1.5; }
.si-grid .si-wide { grid-column: 1 / -1; }
.si-grid p.fu-help { margin: 0; }
.si-hint, .si-optional { color: var(--sp-muted); font-size: var(--fs-xs); font-weight: 400; }
.si-optional { font-style: italic; }
.si-error { color: var(--sp-alert-text); font-size: var(--fs-xs); font-weight: 600; }
.si-note { font-size: var(--fs-sm); font-weight: 400; }
.si-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 var(--space-4) 14px; }
.si-grid .si-actions { margin: 0; align-self: end; }
.si-title { margin: 6px var(--space-4) 0; color: var(--sp-heading); font-size: var(--fs-base); font-weight: 600; line-height: 1.4; }
.si-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px var(--space-4) 12px; }
.si-buttons form { margin: 0; }
.si-publish select { width: auto; max-width: 230px; }
.si-details th { width: 180px; text-align: left; color: var(--sp-muted); font-weight: 600; vertical-align: top; }
.si-description { margin: 0 var(--space-4) 14px; }
.si-description summary { cursor: pointer; color: var(--sp-link, inherit); font-size: var(--fs-md); font-weight: 600; }
.si-description-body { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); line-height: 1.55; overflow-x: auto; }
.si-description-body table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; }
.si-description-body td { padding: 4px 8px; border: 1px solid var(--sp-line); }
.si-description-body h3 { margin: 12px 0 6px; font-size: var(--fs-base); }
.si-unlinked { margin: 0 var(--space-4) 14px; font-size: var(--fs-md); line-height: 1.6; }
.si-unlinked .si-name { display: inline-block; margin: 4px 10px 0 0; padding: 2px 8px; border: 1px solid var(--sp-line); border-radius: 9px; }
.si-unlinked .si-name a { font-size: var(--fs-xs); }
.si-add { margin: 0 var(--space-4) 14px; padding: 12px 14px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); }
.si-add h3 { margin: 0 0 8px; color: var(--sp-heading); font-size: var(--fs-base); }
.si-add .rtable { margin: 8px 0; }
.si-find { display: flex; gap: 8px; margin: 0; }
.si-find input[type=search] { flex: 1; max-width: 360px; }
.si-new { margin-top: 10px; }
.si-new summary { cursor: pointer; font-size: var(--fs-md); font-weight: 600; }
.si-new .si-grid { margin: 10px 0 0; }
.si-mail { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; color: var(--sp-text-2); font-size: var(--fs-sm); font-weight: 400; }
.si-comment { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 12px var(--space-4) 14px; }
.si-comment textarea { width: 100%; box-sizing: border-box; }
.si-comment-by { width: 180px; }
.si-row-title { color: var(--sp-text-2); font-size: var(--fs-sm); }
.si-list td { vertical-align: top; }
.iss-add { grid-template-columns: repeat(4, minmax(0, 140px)); }
@media (max-width: 700px) {
	.si-grid, .iss-add { grid-template-columns: minmax(0, 1fr); }
	.si-details th { width: auto; }
	.si-find input[type=search] { max-width: none; }
}
.si-late { white-space: nowrap; }
.si-list td:nth-child(3) { min-width: 120px; }
.followup-list > p.si-warn { padding: 8px 12px; border: 1px solid var(--sp-warn-line); border-radius: var(--sp-radius); background: var(--sp-warn-bg); color: var(--sp-warn-text); }
.followup-list > table.si-details { width: 100%; }
.si-buttons form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.si-page .followup-list > table.rtable { width: 100%; }
.si-page .pp-group > table.rtable { width: 100%; }
.iss-table td:not(:first-child), .iss-table th:not(:first-child) { width: 18%; }

/* ---- Site & journals settings (as/journals.php, pages.php, announcements.php, templates.php) ---- */
fieldset.si-grid { border: 0; padding: 0; min-width: 0; }
fieldset.si-grid[disabled] input, fieldset.si-grid[disabled] select, fieldset.si-grid[disabled] textarea { opacity: .85; cursor: default; }
.st-codes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 10px 12px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); }
.st-code-label { color: var(--sp-muted); font-size: var(--fs-xs); font-weight: 600; margin-right: 4px; }
.st-codes .si-hint { flex-basis: 100%; }
.st-history { margin: 4px var(--space-4) 14px; }
.st-history > summary { cursor: pointer; font-size: var(--fs-md); font-weight: 600; }
.st-history .rtable { width: 100%; margin-top: 8px; }
.st-when { width: 170px; white-space: nowrap; }
.st-inline-edit, .st-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.st-inline-edit input[type=text] { flex: 1; min-width: 160px; max-width: 420px; }
.followup-list > .st-add-row { margin: 12px var(--space-4) 14px; }
.st-add-row input[type=text] { flex: 1; min-width: 160px; max-width: 360px; }
.st-add-row select { max-width: 360px; }
.st-area-tools { margin: 0 var(--space-4) 10px; }
.st-area-filter { width: 100%; max-width: 360px; box-sizing: border-box; }
.st-areas { margin: 0 var(--space-4) 8px; padding: 0; list-style: none; }
.st-area { padding: 6px 0; border-bottom: 1px solid var(--sp-line-soft); }
.st-area-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.st-area-row .st-area-name { font-weight: 600; color: var(--sp-heading); }
.st-subs { margin: 4px 0 2px 18px; padding: 0; list-style: none; font-size: var(--fs-md); }
.st-subs > li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 2px 0; }
.st-add-sub { margin-top: 4px; }
.st-add-sub input[type=text] { max-width: 260px; }
.st-edit { font-size: var(--fs-xs); }
.st-area-edit form.st-add-row { margin: 10px var(--space-4); }
.st-danger-box h2 { color: var(--sp-alert-text); }
.st-placeholders { margin: 0 var(--space-4) 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-placeholders .fu-help { margin: 0; }
.st-preview-subject { margin: 8px 0; }
.st-preview { width: 100%; height: 360px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: #fff; }
.st-confirm span { display: inline-flex; align-items: center; gap: 6px; color: var(--sp-text); font-weight: 600; }
@media (max-width: 700px) {
	.st-when { width: auto; white-space: normal; }
	.st-subs { margin-left: 10px; }
}
.st-nowrap { white-space: nowrap; }

/* ---- Statistics and final entries (as/statistics.php, as/final_entry.php) ---- */
:root { --stat-0: #1779ba; --stat-1: #d9822b; --stat-2: #2e9e5b; --stat-3: #a33ea1; --stat-4: #cc4b37; --stat-5: #0f8b8d; --stat-6: #7a5c2e; --stat-7: #5f6b7c; }
:root[data-theme="dark"] { --stat-0: #5aacea; --stat-1: #f0a65e; --stat-2: #5fcf8e; --stat-3: #d07fce; --stat-4: #f0806e; --stat-5: #4cc6c8; --stat-6: #c9a36a; --stat-7: #a3adbb; }
.stat-filters { grid-template-columns: minmax(0, 180px) minmax(0, 1fr) repeat(2, minmax(0, 110px)); }
.stat-chart-wrap { margin: 4px var(--space-4) 0; }
.stat-chart { display: block; width: 100%; height: auto; max-height: 300px; }
.stat-grid { stroke: var(--sp-line); stroke-width: 1; }
.stat-axis { fill: var(--sp-muted); font-size: 11px; font-family: var(--sp-font); }
.stat-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.stat-c0 { stroke: var(--stat-0); background: var(--stat-0); }
.stat-c1 { stroke: var(--stat-1); background: var(--stat-1); }
.stat-c2 { stroke: var(--stat-2); background: var(--stat-2); }
.stat-c3 { stroke: var(--stat-3); background: var(--stat-3); }
.stat-c4 { stroke: var(--stat-4); background: var(--stat-4); }
.stat-c5 { stroke: var(--stat-5); background: var(--stat-5); }
.stat-c6 { stroke: var(--stat-6); background: var(--stat-6); }
.stat-c7 { stroke: var(--stat-7); background: var(--stat-7); }
.stat-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px var(--space-4) 12px; padding: 0; list-style: none; font-size: var(--fs-md); }
.stat-legend li { display: inline-flex; align-items: center; gap: 6px; }
.stat-swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.stat-scroll { position: relative; margin: 0 var(--space-4) 14px; overflow-x: auto; }
.si-page .followup-list .stat-scroll > table.rtable { width: 100%; }
.stat-table th:not(:first-child), .stat-table td:not(:first-child) { text-align: right; white-space: nowrap; }
.stat-table tfoot th { border-top: 2px solid var(--sp-line); }
@media (max-width: 700px) {
	.stat-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.stat-filters label:nth-child(2) { grid-column: 1 / -1; }
}
.fe-authors td { vertical-align: top; }
.fe-edit { margin-top: 4px; }
.fe-edit > summary, .fe-add > summary { cursor: pointer; color: var(--sp-link); font-size: var(--fs-sm); font-weight: 600; }
.fe-author-form { margin: 8px 0 4px; }
.fe-add .fe-author-form { margin: 10px 0 0; }
.fe-keywords .st-area { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fe-keywords .st-inline-edit { flex: 1; }
.fe-author-form .si-actions { margin: 0; }
@media (max-width: 700px) {
	/* Earlier versions (all settings pages): one version per block, so long summaries wrap. */
	.st-history .rtable, .st-history .rtable tbody, .st-history .rtable tr, .st-history .rtable td { display: block; width: auto; }
	.st-history .rtable tr { padding: 8px 0; border-bottom: 1px solid var(--sp-line-soft); }
	.st-history .rtable td { padding: 2px 0; border: 0; }
	.st-history .rtable td.col-actions { white-space: normal; text-align: left; }
}

/* ---- Round 10: accounts, sidebar, home, final entries ---- */
.fu-status.is-late { background: var(--sp-alert-bg); color: var(--sp-alert-text); }
.acc-tabs .nav-count.is-late { background: var(--sp-alert); color: var(--on-blue); }
.acc-overdue { align-items: center; }
.acc-overdue input[type=number] { width: 72px; }
.acc-overdue .rv-meta { margin-left: 6px; }
tr.acc-overdue-row > td:first-child { box-shadow: inset 3px 0 0 var(--sp-alert); }
.dash-idle { margin: 0; border-top: 1px solid var(--sp-line); }
.dash-idle > summary { cursor: pointer; padding: 10px var(--space-4); color: var(--sp-link); font-size: var(--fs-md); font-weight: 600; }
.dash-idle > summary:hover { background: var(--sp-row-hover); }
.dash-idle[open] > summary { border-bottom: 1px solid var(--sp-line-soft); }

/* Quick search results under the header search bar. */
.app-quick { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; max-height: 70vh; overflow-y: auto; padding: 6px 0; background: var(--sp-elev); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-lg); color: var(--sp-text); }
.app-quick-group { padding: 8px 16px 4px; color: var(--sp-muted); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.app-quick-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 16px; color: var(--sp-text); text-decoration: none; }
.app-quick-item:hover, .app-quick-item.is-active { background: var(--sp-hover); text-decoration: none; }
.app-quick-label { font-weight: 600; }
.app-quick-sub { color: var(--sp-muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-quick-none, .app-quick-all { padding: 8px 16px; color: var(--sp-muted); font-size: var(--fs-sm); }
.app-quick-all { border-top: 1px solid var(--sp-line-soft); margin-top: 4px; }
.fe-aff { border: 1px solid var(--sp-line-soft); border-radius: var(--sp-radius); padding: 8px 10px 10px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px 12px; }
.fe-aff legend { padding: 0 4px; color: var(--sp-muted); font-size: var(--fs-xs); font-weight: 600; }
.fe-aff .st-confirm { grid-column: 1 / -1; }
.fe-affs { margin: 0; padding-left: 18px; }
.fe-affs li { margin: 0 0 4px; }
@media (max-width: 700px) { .fe-aff { grid-template-columns: minmax(0, 1fr); } }
.fe-step th { padding-top: 14px; background: var(--sp-surface); color: var(--sp-heading); text-align: left; font-size: var(--fs-md); }
.fu-second { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 var(--space-4) 12px; padding: 8px 12px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-surface); font-size: var(--fs-md); }
.fu-second.is-due { border-color: var(--sp-warn-line); background: var(--sp-warn-bg); }
.mm-table input[type=checkbox] { width: 16px; height: 16px; margin: 0; vertical-align: middle; }
.mm-table th.mm-check, .mm-table td.mm-check { width: 36px; text-align: center; }
.mm-sort { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; text-align: left; }
.mm-sort::after { content: ""; display: inline-block; margin-left: 4px; opacity: .45; }
th[aria-sort="ascending"] .mm-sort::after { content: "\25B2"; font-size: 9px; opacity: 1; }
th[aria-sort="descending"] .mm-sort::after { content: "\25BC"; font-size: 9px; opacity: 1; }
details.ix-section > summary { list-style: none; cursor: pointer; }
details.ix-section > summary::-webkit-details-marker { display: none; }
details.ix-section > summary h2 { display: flex; align-items: center; gap: 8px; }
details.ix-section > summary h2::before { content: "\25B8"; font-size: 12px; color: var(--sp-muted); transition: transform .15s; }
details.ix-section[open] > summary h2::before { transform: rotate(90deg); }
.substage-seen { display: inline-block; margin-top: 3px; padding: 0 8px; border-radius: 999px; background: var(--sp-surface); color: var(--sp-muted); font-size: var(--fs-xs); line-height: 20px; }
.substage-seen.is-on { background: var(--sp-ok-bg); color: var(--sp-ok-text); font-weight: 600; }
.pp-certs .fu-help { margin: 0 var(--space-4) 8px; }
.pp-cert-form { margin: 0 var(--space-4) 14px; align-items: flex-end; gap: 10px; }
.pp-cert-form label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); color: var(--sp-muted); }
.pp-cert-form input[type=number] { width: 90px; }

/* ---- Round 11b: sign-in, registration and no-access pages ------------------
   The whole page is the header's blue (the same tokens, darker in dark mode), with
   the drifting network of portal.js initAuthNetwork behind it; the card floats on it. */
.auth-body { margin: 0; min-height: 100vh; background: var(--ink); color: #E8EEF7; }
.auth-page { position: relative; display: flex; flex-direction: column; min-height: 100vh; isolation: isolate; }
.auth-net { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.auth-top { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 24px; }
/* DC-18 (round 23s15): the logo centred above the card, 52 px, 24 px between them. */
.auth-logo { display: flex; color: #FFFFFF; text-decoration: none; border-radius: 6px; }
.auth-logo:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 4px; }
.auth-logo svg { display: block; flex: none; }
/* SignIn board (round 23b1): a 520 px card near the top, a small-capitals label over the serif h1, a lead line. */
.auth-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; padding: 8px 16px 48px; }
.auth-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
	max-width: 520px;
	padding: 32px;
	background: var(--card);
	color: var(--text);
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.auth-card > * { margin-top: 0; margin-bottom: 0; }
.auth-card.is-wide { max-width: 780px; }
.login-head { display: flex; flex-direction: column; gap: 6px; }
.auth-card h1 { margin: 0; color: var(--text); font-family: var(--font-serif); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 18px 20px 24px; color: #C9D5E4; font-size: 14px; }
.auth-foot > span[aria-hidden] { display: none; }
.auth-foot a { color: inherit; text-decoration: none; }
.auth-foot a:hover, .auth-foot a:focus-visible { color: #FFFFFF; text-decoration: underline; }

.login-lead { margin: 0; color: var(--text-2); line-height: 1.5; }
.login-form { display: flex; flex-direction: column; gap: 22px; }
.login-form .fld > input { width: 100%; min-height: 42px; font-size: 15px; }
.login-form input[type=email], .login-form input[type=password], .login-form input[type=text], .auth-field input[type=email], .auth-field input[type=password], .auth-field input[type=text], .auth-field input[type=tel], .auth-field select { box-sizing: border-box; width: 100%; height: 42px; padding: 0 12px; font-size: 15px; }
/* Password with Show inside the frame. */
.login-password { position: relative; display: flex; align-items: center; }
.login-password input { flex: 1; padding-right: 70px !important; }
.login-show,
button.login-show,
.login-show:hover {
	position: absolute;
	top: 1px;
	right: 1px;
	min-height: 40px;
	padding: 0 12px;
	background: transparent;
	border: 0;
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--blue-text);
	font-size: 15px;
	font-weight: 600;
}
.login-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.login-row.is-start { justify-content: flex-start; }
.login-row a:not(.btn) { font-weight: 600; }
.login-submit,
button.login-submit { width: auto; min-height: 46px; padding: 0 22px; font-size: 15px; }
.login-hint { font-weight: 400; color: var(--muted); }
.login-note { color: var(--muted); font-size: 13.5px; }
.login-links { margin: 0; color: var(--text-2); font-size: 14px; }
.login-links.login-new { padding-top: 14px; border-top: 1px solid var(--line-soft); }
.login-links a { font-weight: 600; }
.login-notice { padding: 12px 14px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-text); font-size: 14px; line-height: 1.45; }
.login-notice.is-success { background: var(--green-bg); color: var(--green-text); }
.login-notice.is-error { background: var(--red-bg); color: var(--red-text); }
.login-notice.is-warning { background: var(--amber-bg); color: var(--amber-text); }   /* round 23d32: a sign-in link no longer works */
.login-notice[role="note"] { background: var(--amber-bg); color: var(--amber-text); }
.login-centers { display: flex; flex-direction: column; gap: 8px; }
.login-centers .btn { text-align: center; }

/* The registration form: sections of fields, two per row on wide screens. */
.auth-form { display: flex; flex-direction: column; gap: 22px; }
.auth-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.auth-section legend { width: 100%; margin: 0 0 12px; padding: 0 0 6px; border-bottom: 1px solid var(--sp-line); font-size: 16px; font-weight: 700; color: var(--sp-heading); }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.auth-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.auth-field.is-wide { grid-column: 1 / -1; }
.auth-field > label { font-weight: 600; font-size: var(--fs-sm); color: var(--sp-text); }
.auth-field [aria-invalid="true"], .auth-keywords[aria-invalid="true"] { border-color: var(--sp-alert-line) !important; }
.auth-error { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--sp-alert-text); }
.auth-note { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--sp-muted); }
/* Round 23b6, the Register board: required marks, help lines, the button row, and the screens after the form. */
.auth-field .req, .auth-check .req { color: var(--red-text); }
.auth-help { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.auth-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.auth-submit .auth-help { font-size: 13px; }
.auth-next { display: flex; flex-direction: column; gap: 14px; }
.auth-next h1 { margin: 0; }
.auth-next p { margin: 0; }
.auth-next a.login-submit { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.auth-resend p { color: var(--text-2); font-size: 14px; }
/* Round 23e6: the sign-in and register boards are site boards: the site kit's 44 px fields, 15 px controls and wider primary button. */
.auth-body .field { min-height: 44px; font-size: 15px; }
.auth-body .act { font-size: 15px; }
.auth-body .act.primary { padding-left: 22px; padding-right: 22px; }
.auth-body h1 { line-height: 1.5; }
.auth-body button.auth-link { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--blue-text); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.login-notice.is-info { background: var(--blue-soft); color: var(--blue-text); }
.auth-check { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; font-weight: 400; line-height: 1.4; cursor: pointer; }
.auth-check input { flex: none; margin: 3px 0 0; }
.auth-keywords { max-height: 300px; overflow: auto; padding: 8px 12px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); background: var(--sp-field); }
.auth-keywords[aria-busy="true"] { opacity: .5; }
.auth-keywords .auth-check { margin: 4px 0; }
.auth-keywords .is-main { margin-top: 10px; font-weight: 600; }
.auth-keywords .is-main:first-child { margin-top: 2px; }
.auth-keywords .is-sub { padding-left: 24px; }
@media (max-width: 640px) {
	.auth-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
	.auth-top { padding: 8px 16px; }
	.auth-main { align-items: center; padding: 4px 12px 28px; }   /* DC-18: a column now; the logo stays centred */
	.auth-card { padding: 24px 18px 20px; border-radius: 12px; }
	.auth-card h1 { font-size: 23px; }
}

/* ---- Round 11: account boxes, staff, applications, roles ------------------ */
.pp-signin .fu-help, .pp-roles .fu-help { margin: 0 var(--space-4) 8px; }
.pp-flash { margin: 0 var(--space-4) 10px; padding: 8px 10px; border-radius: var(--sp-radius); }
.pp-signin-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 var(--space-4) 8px; }
.pp-signin-actions form { margin: 0; }
.pp-link { margin: 0 var(--space-4) 10px; }
.pp-link label { display: block; font-weight: 600; margin-bottom: 4px; }
.pp-link-row { display: flex; gap: 6px; }
.pp-link-row input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-sm); }
.pp-setpw { margin: 0 var(--space-4) 12px; }
.pp-setpw summary { cursor: pointer; color: var(--sp-link); }
.pp-setpw-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pp-setpw-form label { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); color: var(--sp-muted); }
.pp-role-list { list-style: none; margin: 0; padding: 0 var(--space-4) 6px; }
.pp-role-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--sp-line-soft); }
.pp-role-list li:last-child { border-bottom: 0; }
.pp-role-list form { margin-left: auto; }
.pp-role { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--sp-primary-soft); color: var(--sp-link); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.pp-role.is-staff { background: var(--sp-warn-bg); color: var(--sp-warn-text); }
.pp-role-journal { font-size: var(--fs-sm); font-weight: 600; color: var(--sp-muted); }
.pp-role-remove { font-size: var(--fs-sm); color: var(--sp-alert-text); }
.pp-role-add { display: flex; flex-direction: column; gap: 6px; margin: 6px var(--space-4) 12px; }
.pp-role-add select { width: 100%; }
.pp-account-log ul { list-style: none; margin: 0; padding: 0 var(--space-4) 10px; max-height: 320px; overflow-y: auto; }
.pp-account-log li { padding: 5px 0; border-bottom: 1px solid var(--sp-line-soft); font-size: var(--fs-sm); line-height: 1.4; }
.st-roles, .st-journals { border: 0; margin: 10px 0; padding: 0; }
.st-roles legend, .st-journals legend { font-weight: 600; margin-bottom: 6px; }
.st-role { display: block; padding: 4px 0; }
.st-journals select { width: 100%; max-width: 640px; }
.st-check { display: block; margin: 8px 0; }
.st-table td .pp-role { margin: 1px 2px 1px 0; }
.rl-status { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; background: var(--sp-info-bg); color: var(--sp-info-text); }
.rl-status.is-info_requested { background: var(--sp-warn-bg); color: var(--sp-warn-text); }
.rl-status.is-approved { background: var(--sp-ok-bg); color: var(--sp-ok-text); }
.rl-status.is-declined, .rl-status.is-withdrawn { background: var(--sp-surface); color: var(--sp-muted); }
.rl-held { padding: 6px var(--space-4) 12px; }
.rl-held li { justify-content: flex-start; }
.rl-app { margin: 0 var(--space-4) 10px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); padding: 8px 12px; }
.rl-app summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rl-app summary .ms-note { margin-left: auto; }
.rl-statement { white-space: normal; line-height: 1.5; }
.rl-msg { margin: 8px 0; padding: 8px 12px; border-radius: var(--sp-radius); background: var(--sp-surface); line-height: 1.45; }
.rl-msg.is-office { border-left: 3px solid var(--sp-primary); }
.rl-msg.is-applicant { border-left: 3px solid var(--sp-ok); }
.rl-reply { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rl-reply label { display: flex; flex-direction: column; gap: 4px; }
.ap-facts th { width: 120px; text-align: left; vertical-align: top; color: var(--sp-muted); font-weight: 600; }
.ap-sub { margin: 14px var(--space-4) 6px; font-size: var(--fs-md); }
.ap-detail .rl-msg { margin-left: var(--space-4); margin-right: var(--space-4); }
.ap-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 14px var(--space-4) 14px; }
.ap-action { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); }
.ap-action label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--sp-muted); }
.ap-action button { align-self: flex-start; }

/* ---- Round 11b: collapsible sections (portal.js initSections) -------------
   Information pages: each section opens and closes from its heading; the
   manuscript's stage decides which start open (classes/pageSections.php). */
.box[data-section] > h2, .side-page > .box > h2 { cursor: pointer; }
.sec-toggle, .sec-toggle:hover { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; min-height: 0; margin: 0 6px 0 -4px; padding: 0; border: 0; border-radius: var(--sp-radius); background: transparent; color: var(--sp-muted); cursor: pointer; }
.sec-toggle:hover { background: var(--sp-hover); color: var(--sp-text); }
.sec-toggle .icon { width: 16px; height: 16px; transition: transform .15s ease; }
.box.is-collapsed > h2 .sec-toggle .icon { transform: rotate(-90deg); }
.box.is-collapsed > :not(h2) { display: none !important; }
.box.is-collapsed > h2 { margin-bottom: 0; border-bottom-color: transparent; }
.sec-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin: 0 0 10px; }
.sec-note { margin-right: auto; font-size: var(--fs-sm); color: var(--sp-muted); }
.sec-tools button { min-height: 0; padding: 3px 10px; font-size: var(--fs-xs); font-weight: 600; background: transparent; color: var(--sp-link); border: 1px solid var(--sp-line); border-radius: 999px; cursor: pointer; }
.sec-tools button:hover { background: var(--sp-hover); color: var(--sp-link-hover); }
/* Expand all / Collapse all under Home, as on the Admin home board. */
.side-tools { display: flex; justify-content: flex-end; gap: 10px; padding: 8px 6px 0; font-size: 12.5px; }
.side-tools button, .side-tools button:hover { min-height: 0; padding: 4px 0; background: none; border: 0; color: var(--blue-text); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.side-tools button:hover { text-decoration: underline; }
html.sb-collapsed .side-tools { display: none; }
/* The old rich-text editor measures itself when the page loads: inside a section
   that starts collapsed it would measure 0. */
.box .wysiwyg { width: auto !important; max-width: 100%; }
.box .wysiwyg iframe { width: 100% !important; min-height: 160px; }
@media (prefers-reduced-motion: reduce) {
	.sec-toggle .icon { transition: none; }
}
@media print {
	.box.is-collapsed > :not(h2) { display: revert !important; }
	.sec-tools, .side-tools, .sec-toggle { display: none !important; }
}

/* Accounts › Payment pending: reminders one by one or ticked in bulk, with a preview (round 12). */
.acc-remind {
	margin: 0 var(--space-4) 10px;
	align-items: center;
	gap: 10px;
}
.acc-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-sm);
}
.acc-pick {
	margin: 0 4px 0 0;
	vertical-align: middle;
}
.acc-send {
	margin-top: 4px;
}
.acc-preview {
	margin: 0 var(--space-4) 12px;
}
.acc-preview-mail {
	display: block;
	width: 100%;
	height: 380px;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	background: #fff;
}

/* Article page: the similarity check (round 12, classes/similarity.php). */
.sim-body {
	padding: 10px var(--space-4) 14px;
}
.sim-figure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 8px;
}
.sim-percent {
	color: var(--sp-heading);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}
.sim-percent.is-high {
	color: var(--sp-alert-text);
}
.sim-none {
	color: var(--sp-muted);
	font-weight: 600;
}
.sim-reports {
	margin: 0 0 10px;
	padding: 0 0 0 18px;
}
.sim-reports li {
	margin: 2px 0;
}
.sim-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px 12px;
	margin: 0 0 10px;
	padding-top: 10px;
	border-top: 1px solid var(--sp-line-soft);
}
.sim-form label {
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: var(--sp-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
}
.sim-input {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--sp-text);
}
.sim-input input[type="number"] {
	width: 80px;
}
.sim-send .rv-meta,
.sim-threshold .rv-meta {
	align-self: center;
}
.production-report tr.is-similarity-high td.col-similarity,
td.sim-high {
	color: var(--sp-alert-text);
	font-weight: 700;
}
.sim-high input[type="number"] {
	border-color: var(--sp-alert-line);
	color: var(--sp-alert-text);
	font-weight: 700;
}

/* Stage owners (as/stage_owners.php, round 12). */
.so-table td {
	vertical-align: top;
}
.so-owners {
	padding: 0 !important;
}
.so-owners form {
	display: inline-flex;
	margin: 0;
}
button.member-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--sp-muted);
	cursor: pointer;
}
button.member-remove:hover {
	background: var(--sp-alert-bg);
	color: var(--sp-alert-text);
}
.so-add {
	margin: 0;
	gap: 6px;
}
.so-add select {
	min-width: 180px;
}

/* Screening checklist (round 13, classes/screening.php). */
.scr-body {
	padding: 10px var(--space-4) 14px;
}
.scr-dups {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px solid var(--sp-warn-line);
	border-radius: var(--sp-radius);
	background: var(--sp-warn-bg);
}
.scr-dups-head {
	margin: 0 0 6px;
}
.scr-dups ul {
	margin: 0;
	padding: 0 0 0 18px;
}
.scr-dups li {
	margin: 6px 0;
}
.scr-dup-title {
	color: var(--sp-text);
}
.scr-nodups {
	margin: 0 0 10px;
}
.scr-check {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: start;
	gap: 6px 14px;
	margin: 0 0 10px;
	padding: 10px 0 0;
	border: 0;
	border-top: 1px solid var(--sp-line-soft);
}
.scr-check legend {
	float: left;
	grid-column: 1 / -1;
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	font-weight: 600;
}
.scr-check legend .rv-meta {
	font-weight: 400;
}
.scr-check textarea {
	grid-column: 1 / -1;
	width: 100%;
	box-sizing: border-box;
}
.scr-check > .rv-meta {
	grid-column: 1 / -1;
}
.scr-choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}
.scr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Round 13: the note for a handling editor new to the manuscript (review panel). */
.rwp-handover {
	margin: 10px 0;
	padding: 10px 12px;
	border-left: 3px solid var(--sp-primary);
	background: var(--sp-surface);
}
.rwp-handover[hidden] {
	display: none;
}
.rwp-handover textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	font: inherit;
}
.ed-handover {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-left: 3px solid var(--sp-primary);
	background: var(--sp-primary-soft);
	line-height: 1.5;
}

/* Round 13: a returning reviewer's own earlier comments (review pages). */
.rv-earlier-note {
	margin: 8px 14px 0;
	color: var(--sp-muted);
	font-size: 12px;
}
.rv-earlier-item {
	margin: 10px 14px 14px;
}
.rv-earlier-item p {
	margin: 0 0 6px;
}
.rv-earlier-text {
	padding: 8px 12px;
	border-left: 3px solid var(--sp-primary-line);
	background: var(--sp-surface);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

/* Round 13: work lists (as/work_lists.php). */
.wl-summary {
	margin: 10px 14px;
}
.wl-scroll {
	position: relative;
	overflow-x: auto;
}
.wl-table td {
	vertical-align: top;
}
.wl-title {
	max-width: 44ch;
}
.wl-flag {
	color: var(--sp-alert-text);
	font-weight: 600;
}
.wl-rule {
	padding: 4px 14px 10px;
}
.wl-rule input[type="number"] {
	width: 5em;
}
.wl-journals {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 6px 14px;
	margin: 8px 0;
}
.wl-journals label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* Round 13: "Return to editor" in the Editor Center rounds table. */
.ed-return summary {
	cursor: pointer;
	color: var(--sp-link);
}
.ed-return form {
	display: grid;
	gap: 6px;
	margin: 6px 0;
	min-width: 220px;
}
.ed-return textarea {
	width: 100%;
	box-sizing: border-box;
}

/* Round 13: review details by role (Editor Center article pages). */
.rd-note {
	margin: 8px 14px 0;
	color: var(--sp-muted);
	font-size: 12px;
}
.rd-round {
	margin: 10px 14px 16px;
}
.rd-round h3 {
	margin: 0 0 8px;
	font-size: 14px;
}
.rd-decision,
.rd-review,
.rd-shared {
	margin: 0 0 10px;
	padding: 8px 12px;
	border: 1px solid var(--sp-line);
	border-radius: 4px;
}
.rd-decision {
	background: var(--sp-primary-soft);
	border-color: var(--sp-primary-line);
}
.rd-own {
	border-left: 3px solid var(--sp-primary);
}
.rd-review p,
.rd-decision p {
	margin: 0 0 6px;
}
.rd-label {
	margin: 8px 0 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sp-muted);
}
.rd-text {
	line-height: 1.55;
	overflow-wrap: anywhere;
}
.rd-confidential {
	padding: 6px 10px;
	background: var(--sp-warn-bg);
	border-left: 3px solid var(--sp-warn-line);
}

/* Round 13: revision due dates (panel and author page). */
.rv-deadlines {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}
.rv-deadlines li {
	margin: 0 0 6px;
}

/* Round 13: who a manuscript waits on (every list). */
.wo-badge {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	background: var(--sp-surface);
	color: var(--sp-text);
	border: 1px solid var(--sp-line);
}
.wo-author,
.wo-payment {
	background: var(--sp-warn-bg);
	border-color: var(--sp-warn-line);
	color: var(--sp-warn-text);
}
.wo-editor,
.wo-reviewer {
	background: var(--sp-primary-soft);
	border-color: var(--sp-primary-line);
	color: var(--sp-link);
}
.wo-office {
	background: var(--sp-ok-bg);
	border-color: var(--sp-ok);
	color: var(--sp-text);
}
.wo-note {
	color: var(--sp-muted);
	font-size: 12px;
}

.wo-line {
	margin-top: 4px;
}

/* Round 13: payment flags (Payment box). */
.pay-flag {
	display: inline-block;
	margin: 0 4px 4px 0;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 12px;
	border: 1px solid var(--sp-line);
	background: var(--sp-surface);
}
.pay-flag-warn {
	background: var(--sp-warn-bg);
	border-color: var(--sp-warn-line);
	color: var(--sp-warn-text);
}
.pay-flag-alert {
	background: var(--sp-alert-bg);
	border-color: var(--sp-alert-line);
	color: var(--sp-alert-text);
}
.pay-flag-info {
	background: var(--sp-primary-soft);
	border-color: var(--sp-primary-line);
	color: var(--sp-link);
}
.pay-calls {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--sp-line-soft);
}
.pay-invited summary {
	cursor: pointer;
	color: var(--sp-link);
	margin: 6px 0;
}
.wl-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 12px;
}
.wl-tabs a {
	padding: 6px 12px;
	border: 1px solid var(--sp-line);
	border-radius: 4px;
	background: var(--sp-card);
	text-decoration: none;
}
.wl-tabs a.is-current {
	background: var(--sp-btn);
	border-color: var(--sp-btn);
	color: var(--on-blue);
}
.wl-matrix td,
.wl-matrix th {
	text-align: center;
}
.wl-matrix th[scope="row"] {
	text-align: left;
}
.wl-hot {
	background: var(--sp-alert-bg);
}
.wl-sub {
	margin: 14px 14px 6px;
	font-size: 14px;
}

/* Round 13: changes since submission (locking, authorship). */
.ac-reason {
	display: grid;
	gap: 6px;
	margin: 8px 0;
}
.ac-reason label span {
	display: block;
	font-size: 12px;
	color: var(--sp-muted);
	margin-bottom: 2px;
}
.ac-reason textarea {
	width: 100%;
	box-sizing: border-box;
}
.ac-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px 14px;
	margin: 8px 0;
}
.ac-grid label span {
	display: block;
	font-size: 12px;
	color: var(--sp-muted);
}
.ac-grid input,
.ac-grid select {
	width: 100%;
	box-sizing: border-box;
}
.ac-form {
	padding: 4px 14px 10px;
}
.ac-history {
	list-style: none;
	margin: 10px 14px;
	padding: 0;
}
.ac-history > li {
	margin: 0 0 12px;
	padding: 8px 12px;
	border: 1px solid var(--sp-line);
	border-radius: 4px;
}
.ac-history p {
	margin: 0 0 6px;
}
.ac-diff {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 6px 0;
	font-size: 12px;
}
.ac-diff > div {
	padding: 6px 8px;
	background: var(--sp-surface);
	border-radius: 3px;
	overflow-wrap: anywhere;
}
@media (max-width: 640px) {
	.ac-diff {
		grid-template-columns: 1fr;
	}
}
.ac-request {
	margin: 10px 14px;
	padding: 8px 12px;
	border-left: 3px solid var(--sp-warn-line);
	background: var(--sp-warn-bg);
}
.ac-request.ac-done,
.ac-request.ac-declined {
	border-left-color: var(--sp-line);
	background: var(--sp-surface);
}
.ac-answer {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
.ac-answer input[type="text"] {
	flex: 1;
	min-width: 200px;
}
.ac-delete summary,
.ac-ask > summary {
	cursor: pointer;
}
.ac-delete form {
	min-width: 240px;
}

/* Round 13's coloured party letters gave way to the boards' plain ones (.nav-party above, round 18b2). */

.sn-table input[type="text"] {
	width: 100%;
	box-sizing: border-box;
}
.sn-skip {
	opacity: .6;
}

/* Round 14: issue checks (Issues page, final entries). */
.ic-flags {
	list-style: none;
	margin: 8px 14px 12px;
	padding: 0;
}
.ic-flags > li {
	margin: 0 0 6px;
	padding: 6px 10px;
	border-left: 3px solid var(--sp-line);
	background: var(--sp-surface);
}
.ic-flags > li.ic-ok {
	border-left-color: var(--sp-ok);
}
.ic-flags > li.ic-warn {
	border-left-color: var(--sp-warn-line);
	background: var(--sp-warn-bg);
}
.ic-flags > li.ic-alert {
	border-left-color: var(--sp-alert-line);
	background: var(--sp-alert-bg);
}
.ic-flags ul {
	margin: 4px 0 0 18px;
	font-size: 12px;
}
.ic-badge {
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	border: 1px solid var(--sp-line);
}
.ic-badge.ic-ok {
	background: var(--sp-ok-bg);
}
.ic-badge.ic-warn {
	background: var(--sp-warn-bg);
	color: var(--sp-warn-text);
}
.ic-badge.ic-alert {
	background: var(--sp-alert-bg);
	color: var(--sp-alert-text);
}

/* Round 14: my reviews and certificates (es). */
.mr-certs {
	list-style: none;
	margin: 8px 14px 12px;
	padding: 0;
	columns: 2 320px;
}
.mr-certs li {
	margin: 0 0 6px;
	break-inside: avoid;
}

.inst-matches {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	font-size: 12px;
}
.inst-actions {
	white-space: nowrap;
}

/* Round 14: the person's own expertise terms (es/profile.php). */
.ex-terms {
	list-style: none;
	margin: 8px 14px 10px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ex-terms li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 12px;
	background: var(--sp-surface);
	color: var(--sp-text);
}
.ex-terms li em {
	font-style: normal;
	color: var(--sp-warn-text);
}
.ex-terms form {
	display: inline;
	margin: 0;
}

/* Round 14: a special issue's manuscripts by stage (as/special_issues.php). */
.si-progress {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 8px 14px 10px;
	padding: 0;
}
.si-progress li {
	flex-basis: 110px;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--sp-surface);
	color: var(--sp-text);
	font-size: var(--fs-xs);
}
.si-progress li strong {
	display: block;
	font-size: 1.25em;
}
.si-progress .si-progress-review,
.si-progress .si-progress-screening { background: var(--sp-info-bg); color: var(--sp-info-text); }
.si-progress .si-progress-confirm { background: var(--sp-warn-bg); color: var(--sp-warn-text); }
.si-progress .si-progress-production,
.si-progress .si-progress-published { background: var(--sp-ok-bg); color: var(--sp-ok-text); }
tr.si-confirm td { background: var(--sp-warn-bg); }

/* Round 15: Setup > Settings (as/settings.php). */
.st-rows {
	margin: 4px 14px 8px;
}
.st-row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 6px 18px;
	padding: 10px 0;
	border-bottom: 1px solid var(--sp-line-soft);
}
.st-row:last-child {
	border-bottom: none;
}
.st-row label {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.st-input {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
.st-input input[type="number"] {
	width: 7em;
}
.st-input input[type="text"],
.st-input input[type="email"] {
	width: 100%;
}
@media (max-width: 700px) {
	.st-row {
		grid-template-columns: 1fr;
	}
}
/* Round 23b4: the announcement's "On the site" card (as/announcements.php). */
.an-site { display: flex; flex-direction: column; gap: 4px; margin: 12px 16px; padding: 12px 16px; }

/* Round 23b4: the live reports (peer-review workflow, production) on the boards' anatomy: saved views as chips above
   the section, the kit's filter bar, the legend as pills under the table (as/reports.php, cs/production.php). */
.pr-views { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.pr-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.rr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line-soft); }
.rr-legend .scr-note { margin-left: 4px; }
.rr-sec .report-status:empty, .pr-sec .report-status:empty { display: none; }
.layout-main .rr-sec div.dt-container, .layout-main .pr-sec div.dt-container { margin: 0; border: 0; box-shadow: none; }
.rr-table td .sub, .pr-table td .sub { max-width: 28ch; }
.layout-main .rr-table.dataTable > tbody > tr > td, .layout-main .pr-table.dataTable > tbody > tr > td { padding: 10px; }
.pr-table select { width: 160px !important; max-width: 100%; }
.qa-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-table td:nth-child(2) { text-align: right; }
.qa-note { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--line-soft); }
/* Round 23b4: the secondary detail pages (as/info.php?type=comment|ercomment|email|issue). */
.cm-body { display: flex; flex-direction: column; gap: 14px; }
.cm-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-q { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; border: 0; }
.cm-q legend { width: 100%; margin-bottom: 4px; }

/* Round 23e7 (the locked My SciPub boards): the sidebar's "Find a manuscript". */
.side-find { display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 10px; }
.side-find-box { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px 0 10px; border: 1px solid var(--field); border-radius: 8px; background: var(--card); box-sizing: border-box; color: var(--muted); }
.side-find-box:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.side-find-box svg { width: 18px; height: 18px; flex: none; }
.side-find-box input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--text); min-height: 36px; padding: 0; }
.side-find-box .act.sm { min-height: 32px; }
.side-find-help { padding: 0 2px; font-size: 12px; color: var(--muted); }
/* Round 23e7: "Admin view." across the top (the boards' .simbar). */
.simbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 16px; min-height: 58px; box-sizing: border-box; padding: 8px 24px; background: var(--amber-bg); color: var(--amber-text); border-bottom: 1px solid var(--line); font-size: 14px; }
.simbar > svg { width: 18px; height: 18px; flex: none; }
.simbar > span { flex: 1 1 320px; }
.simbar .act, .simbar .act.sm { background: var(--card); color: var(--text); margin-left: auto; font-weight: 600; min-height: 32px; }
.side-link .nav-pill, .side-link .nav-zero { margin-left: auto; flex: none; }
.side-link .nav-zero { font-variant-numeric: tabular-nums; color: var(--muted); }
/* Round 23e8: pages that still load the old Author Center stylesheet (es/css/style.css) keep the kit's colours for the
   skip link and the confirmation page's links (its a:link colour was 2.98:1 in the dark theme). */
a.skip-link, a.skip-link:link, a.skip-link:visited { color: var(--text); }
.cf-screen a:not(.act), .cf-screen a:not(.act):link, .cf-screen a:not(.act):visited { color: var(--blue-text); }
.cf-screen .notice.success h1 { color: var(--text); }
/* Round 23e9: the author lens (classes/views/authorLensView.php) keeps the kit's link colour over es/css/style.css. */
.mv-author a:not(.act):not(.tab), .mv-author a:not(.act):not(.tab):link, .mv-author a:not(.act):not(.tab):visited { color: var(--blue-text); }
.mv-author .mv-dialog > summary::-webkit-details-marker { display: none; }

/* Round 23e11 (the Editor board): the folders under Needs your action, indented with a coloured dot. */
.side-top li.is-sub > a.side-link { padding-left: 22px; font-weight: 400; }
.nav-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; background: var(--muted); }
.nav-dot-blue { background: var(--blue); }
.nav-dot-amber { background: var(--amber); }
.nav-dot-red { background: var(--red); }

/* Round 23e11 (the Decision board): its links keep the kit colour over the legacy stylesheet (dark theme contrast). */
.dc-screen a:not(.act), .ep-split a:not(.act), .ep-head .breadcrumbs a, .rl-page a:not(.act), .pr-page a:not(.act), .mr-page a:not(.act) { color: var(--blue-text, var(--blue)); }

/* Round 23e17 (the Production board): the Staff Center's department menu at the top of the sidebar, the "◷ 3 late" and
   "2 back with you" chips before a plain count, the party letter before the label, and the sidebar's foot. */
.side-dept { display: flex; flex-direction: column; gap: 4px; padding: 0 0 12px; }
.side-dept > .lbl { padding: 0 12px; }
.side-dept-menu { display: block; }
.side-dept-menu > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: 8px; background: var(--card); color: var(--text); font-weight: 700; cursor: pointer; }
.side-dept-menu > summary .icon { width: 18px; height: 18px; flex: none; }
.side-dept-icon { color: var(--blue); }
.side-dept-caret { color: var(--muted); }
.side-dept-name { flex: 1; min-width: 0; }
.side-dept-menu .menu-panel { left: 0; right: 0; min-width: 0; }
.side-dept-menu .menu-item .icon { width: 16px; height: 16px; }
.side-dept-menu a.menu-item:link, .side-dept-menu a.menu-item:visited { color: var(--text); text-decoration: none; }
.side-dept-note { padding: 4px 12px 6px; font-size: 12.5px; color: var(--muted); }
.side-spacer { flex: 1 1 auto; min-height: 24px; }
@media (min-width: 900px) {
	.side-nav:has(> .side-spacer) { min-height: calc(100vh - var(--app-header-h, var(--sp-header-h)) - 48px); }
}
.side-link .nav-num, .side-group > summary .nav-num { margin-left: auto; flex: none; min-width: 18px; text-align: right; font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.side-link .nav-pill + .nav-pill, .side-link .nav-pill + .nav-num, .side-group > summary .nav-pill + .nav-pill, .side-group > summary .nav-pill + .nav-num { margin-left: 6px; }
.side-group > summary .nav-pill { margin-left: auto; flex: none; }
li.is-zero .nav-num { color: var(--muted); font-weight: 500; }
.nav-pill .icon { width: 12px; height: 12px; margin-right: 3px; }
.side-link > .party { flex: none; }
/* The kit's segmented control as links (the boards' Mine / Everyone / Not taken, List / Board), over the legacy link colour. */
a.seg { display: inline-flex; align-items: center; text-decoration: none; }
a.seg:link, a.seg:visited { color: var(--text-2); }
a.seg.on:link, a.seg.on:visited, a.seg:hover { color: var(--text); text-decoration: none; }
/* Round 23e17: the Staff Center's sidebar is as wide as the Production board draws it (the late chips beside the names). */
html.portal-cs { --sp-sidebar-w: 320px; }   /* Design's cs-a-3: the board's 320 px, so the names and their chips fit */
/* Round 23e18 (Design's cs-a-1, cs-a-4): the production board's lanes wrap on desktop and scroll sideways on phones; each
   lane on the sunk tint. */
.pq-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.pq-lane { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--sunk); min-height: 160px; min-width: 0; }
.pq-lane-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; font-size: 13.5px; font-weight: 700; }
.pq-lane-head .pill .icon { width: 12px; height: 12px; margin-right: 3px; }
a.card.pq-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; text-decoration: none; color: inherit; }
.pq-card-title { font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 720px) {
	.pq-board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(230px, 82%); overflow-x: auto; scroll-snap-type: x mandatory; }
	.pq-lane { scroll-snap-align: start; }
}
.side-note { margin: 8px 16px 4px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* Round 23e24 (the Admin board's sidebar, cs-22): a sub-stage with "n late" lets its label wrap rather than cut it. */
.side-link.has-late .side-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
/* Round 23e24 (the Admin board's sidebar): its rows are the longest ("Reports to approve", "Decisions with editors"); the
   board draws the Admin sidebar wider than the 250 px minimum (flex 1 1 250px, at most 320). */
@media (min-width: 1200px) {
	html.portal-as { --sp-sidebar-w: 288px; }
}
/* Design's as-c-4: an Admin group's name stays on one line beside its pills. */
html.portal-as .side-group > summary .side-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Round 23s13 (V portal-findings 5): a list's search as its own GET form inside the toolbar (Institutions, Expertise,
   Possible duplicates): the form takes the search field's place in the row. */
.toolbar .tb-form { display: flex; flex: 1 1 220px; max-width: 366px; margin: 0; }
.toolbar .tb-form .tb-search { max-width: none; }
.toolbar .tb-form + .sel-count { margin-left: auto; }

/* Round 23s13 (V portal-findings 4): a row's header cell in a table body is a cell, not a column header: the boards draw it
   in text colour, semibold, as written (table.dt th above styles every th as a column header: upper case, 12px, tinted). */
table.dt tbody th:not(.w) {   /* .w: Settings, which Build A rebuilds to the board (its own rows) */
	position: static;
	padding: 10px 14px;
	background: none;
	border-top: 1px solid var(--line-soft);
	border-bottom: 0;
	color: var(--text);
	font-size: inherit;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	white-space: normal;
	vertical-align: middle;
}
table.dt tbody tr:first-child th:not(.w) { border-top: 0; }
table.dt tbody tr:hover th:not(.w) { background: var(--sunk); }

/* Round 23s13 (Design's S4 on the 23s13 review): Institutions' and Expertise's row actions stay on one line at desktop widths. */
@media (min-width: 900px) {
	table.in-table .row-acts { flex-wrap: nowrap; white-space: nowrap; }
	table.in-table .row-acts > form { display: inline-flex; margin: 0; }
}