/*
 * Ferndale Intranet: third-party plugins (front end), both designs.
 *
 * Loaded by inc/plugins/third-party.php only where one of these shows:
 *   1. T4B News Ticker 1.4.5 (front page)
 *   2. Ninja Tables 5.2.17 (/phone-list/, /fcs-email-distribution-groups/)
 *   3. Nextend Social Login 3.1.26: the front-end notice toast
 *   4. Integrate Google Drive Premium 1.6.8 (257, 270; inactive on the
 *      test copies, so styled from the plugin's code)
 *   5. Reduced motion and forced colours
 *
 * Rules (DESIGN-BRIEF §3): role tokens only (the icon masks are shapes, not
 * colours); selectors at (0,2,1) or more; !important only against inline
 * styles or the plugin's own !important; JS state classes keep their
 * behaviour (only their colours change); the plugins' own z-index values
 * are unchanged, and this sheet adds only 2-3 inside the table (04 §4.5).
 */

/* ==================================================================
 * 1. T4B News Ticker: a slim notice bar.
 * Markup: div.ticker-news > span (the "News" title) + div.tickercontainer >
 * div.ticker-mask > ul#ticker.newsticker > li (the plugin's jQuery animates
 * the list's inline "left"). The shim adds button.fi-ticker-toggle and sets
 * data-fi-ticker="paused" on the bar while it is paused.
 * Static layout (all messages visible, nothing moves): when paused, while
 * a message link has keyboard focus, and under prefers-reduced-motion (§5).
 * Item widths must not change after load (the plugin measures them once),
 * so hover and focus never change font size or weight.
 * ================================================================== */
.entry-content div.ticker-news {
	display: flex;
	align-items: stretch;
	height: auto;
	min-height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	box-shadow: var(--fi-shadow-sm);
	color: var(--fi-text);
	font-family: var(--fi-font);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* The "News" title: white on --fi-danger (6.57:1; the plugin's #dd3737 is 4.49:1). */
.entry-content div.ticker-news > span:first-child {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.45rem;
	float: none;
	height: auto;
	margin: 0;
	padding: 0 0.95rem 0 0.85rem;
	background: var(--fi-danger);
	color: var(--fi-on-primary);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* No icon before the title: the administrator asked for just the word (9 Oct 2026). */

/* The track. Its overflow and position stay the plugin's. */
.entry-content div.ticker-news .tickercontainer {
	flex: 1 1 auto;
	min-width: 0;
	height: 2.75rem;
	background: transparent;
}

.entry-content div.ticker-news .tickercontainer ul.newsticker li {
	height: 2.75rem;
	margin: 0 3rem 0 0; /* Static values only: the plugin sums the items' outer widths once. */
	padding: 0;
	background: transparent;
	color: var(--fi-text);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 2.75rem;
	list-style: none;
}

/* A dot before each message (decorative: --fi-accent-line). */
.entry-content div.ticker-news .tickercontainer ul.newsticker li::before {
	content: "";
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	margin-inline-end: 0.7rem;
	border-radius: 50%;
	background: var(--fi-accent-line);
	vertical-align: 0.12em;
}

.entry-content div.ticker-news .tickercontainer ul.newsticker li a {
	padding: 0;
	color: var(--fi-link);
	font-size: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.entry-content div.ticker-news .tickercontainer ul.newsticker li a:hover {
	color: var(--fi-link-hover);
	text-decoration-thickness: 2px;
}

.entry-content div.ticker-news .tickercontainer ul.newsticker li a:focus-visible {
	border-radius: 2px;
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

/* The plugin styles every span in the bar as the title; spans inside a
 * message are plain text. */
.entry-content div.ticker-news ul.newsticker li span {
	float: none;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

/* Pause / play (added by the shim). */
.entry-content div.ticker-news > button.fi-ticker-toggle {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-inline-start: 1px solid var(--fi-border);
	border-radius: 0;
	background: transparent;
	color: var(--fi-muted);
	cursor: pointer;
	transition: background-color var(--fi-duration) ease, color var(--fi-duration) ease;
}

.entry-content div.ticker-news > button.fi-ticker-toggle::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	/* Phosphor "pause" (fill), MIT. */
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,48V208a16,16,0,0,1-16,16H160a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h40A16,16,0,0,1,216,48ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,48V208a16,16,0,0,1-16,16H160a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h40A16,16,0,0,1,216,48ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.entry-content div.ticker-news[data-fi-ticker="paused"] > button.fi-ticker-toggle::before {
	/* Phosphor "play" (fill), MIT. */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,128a15.74,15.74,0,0,1-7.6,13.51L88.32,229.65a16,16,0,0,1-16.2.3A15.86,15.86,0,0,1,64,216.13V39.87a15.86,15.86,0,0,1,8.12-13.82,16,16,0,0,1,16.2.3L232.4,114.49A15.74,15.74,0,0,1,240,128Z'/%3E%3C/svg%3E");
}

.entry-content div.ticker-news > button.fi-ticker-toggle:hover {
	background: var(--fi-tint);
	color: var(--fi-primary);
}

/* Inside the bar's clipped edge, so the ring is drawn inwards. */
.entry-content div.ticker-news > button.fi-ticker-toggle:focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: -4px;
}

/* Static layout: paused, or a message link has keyboard focus (so it can't
 * scroll out of view). :has() is forgiving inside :is(). */
.entry-content div.ticker-news:is([data-fi-ticker="paused"], :has(a:focus-visible)) .tickercontainer {
	height: auto;
}

.entry-content div.ticker-news:is([data-fi-ticker="paused"], :has(a:focus-visible)) .tickercontainer .ticker-mask {
	left: 0;
	width: auto;
}

.entry-content div.ticker-news:is([data-fi-ticker="paused"], :has(a:focus-visible)) .tickercontainer ul.newsticker {
	position: static; /* The animated inline "left" no longer applies. */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 2rem;
	width: auto !important; /* Overrides the inline width the plugin sets. */
	padding: 0.6rem 0.9rem;
}

.entry-content div.ticker-news:is([data-fi-ticker="paused"], :has(a:focus-visible)) .tickercontainer ul.newsticker li {
	float: none;
	height: auto;
	margin: 0;
	line-height: 1.55;
}

.entry-content div.ticker-news:is([data-fi-ticker="paused"], :has(a:focus-visible)) .tickercontainer ul.newsticker li a {
	display: inline; /* The plugin's inline-block would wrap a long link away from its text. */
	white-space: normal;
}

/* Phones: the title and the button on top, the messages full width below. */
@media (max-width: 40rem) {
	.entry-content div.ticker-news:is([data-fi-ticker="paused"], :has(a:focus-visible)) {
		flex-wrap: wrap;
	}

	.entry-content div.ticker-news:is([data-fi-ticker="paused"], :has(a:focus-visible)) > span:first-child {
		min-height: 2.75rem;
	}

	.entry-content div.ticker-news:is([data-fi-ticker="paused"], :has(a:focus-visible)) > button.fi-ticker-toggle {
		margin-inline-start: auto;
	}

	.entry-content div.ticker-news:is([data-fi-ticker="paused"], :has(a:focus-visible)) > .tickercontainer {
		flex-basis: 100%;
		order: 2;
		border-top: 1px solid var(--fi-border);
	}
}

/* ==================================================================
 * 2. Ninja Tables (FooTable engine, Semantic UI skin).
 * The wrapper is the frame (it already scrolls sideways on narrow
 * screens, inside the frame). Rows are painted, not cells, so the row
 * hover shows on every row. Untouched (behaviour): FooTable's inline
 * display on cells, the loader, sorting, paging and dropdown state classes.
 * ================================================================== */
div.footable_parent.ninja_table_wrapper {
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	color: var(--fi-text);
}

div.ninja_table_wrapper.semantic_ui table.ui.table.foo-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--fi-card-bg);
	color: var(--fi-text);
	font-family: var(--fi-font);
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
}

/* Decision 12: the theme font at 1rem. Ninja prints #footable_N {
 * font-size: 14px } (an ID selector, in a <style> after this sheet).
 * :is() takes the weight of its heaviest argument, so the plugin's own ID
 * prefix (#footable) lifts this rule above it without !important. */
div.ninja_table_wrapper > table.foo-table:is([id^="footable_"], #footable) {
	font-family: var(--fi-font);
	font-size: 1rem;
}

/* --- Search row: a toolbar on the surface colour. --- */
div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-filtering > th {
	padding: 0.75rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--fi-border);
	border-radius: 0;
	background: var(--fi-surface);
	color: var(--fi-text);
	font-weight: 400;
}

/* The search box: the one form-control spec (04 §3 row 6). */
div.ninja_table_wrapper .foo-table .footable-filtering-search .input-group > input.form-control {
	height: 2.75rem;
	min-height: 2.75rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--fi-control-border);
	border-radius: var(--fi-radius-control) 0 0 var(--fi-radius-control);
	background-color: var(--fi-control-bg);
	color: var(--fi-text);
	font-family: var(--fi-font);
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
}

div.ninja_table_wrapper .foo-table .footable-filtering-search .input-group > input.form-control::placeholder {
	color: var(--fi-placeholder);
	opacity: 1;
}

div.ninja_table_wrapper .foo-table .footable-filtering-search .input-group > input.form-control:focus-visible {
	position: relative;
	z-index: 3;
	border-color: var(--fi-primary);
	outline: 3px solid var(--fi-focus);
	outline-offset: 1px;
}

/* The plugin pins the buttons' height and padding with !important. */
div.ninja_table_wrapper .foo-table .form-group.footable-filtering-search .input-group-btn > button.btn {
	display: inline-grid;
	place-items: center;
	height: 2.75rem !important;
	min-height: 2.75rem !important;
	padding: 0 0.85rem !important;
	border: 1px solid var(--fi-primary);
	border-radius: 0;
	font-family: var(--fi-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: none;
	transition: background-color var(--fi-duration) ease, border-color var(--fi-duration) ease, color var(--fi-duration) ease;
}

div.ninja_table_wrapper .foo-table .footable-filtering-search .input-group-btn > button.btn.btn-primary {
	min-width: 2.75rem;
	background-color: var(--fi-primary);
	color: var(--fi-on-primary);
}

div.ninja_table_wrapper .foo-table .footable-filtering-search .input-group-btn > button.btn.btn-primary:is(:hover, :focus) {
	border-color: var(--fi-primary-hover);
	background-color: var(--fi-primary-hover);
	color: var(--fi-on-primary);
}

/* "Search in" (the column chooser). */
div.ninja_table_wrapper .foo-table .footable-filtering-search .input-group-btn > button.btn.dropdown-toggle {
	min-width: 2.5rem;
	border-color: var(--fi-control-border);
	border-radius: 0 var(--fi-radius-control) var(--fi-radius-control) 0;
	background-color: var(--fi-control-bg);
	color: var(--fi-primary);
}

div.ninja_table_wrapper .foo-table .footable-filtering-search .input-group-btn > button.btn.dropdown-toggle:is(:hover, :focus),
div.ninja_table_wrapper .foo-table .footable-filtering-search .input-group-btn.open > button.btn.dropdown-toggle {
	border-color: var(--fi-primary);
	background-color: var(--fi-tint);
	color: var(--fi-primary);
}

div.ninja_table_wrapper .foo-table .footable-filtering-search .input-group-btn > button.btn .caret {
	border-top-width: 5px;
	border-right-width: 5px;
	border-left-width: 5px;
	color: currentColor;
}

div.ninja_table_wrapper .foo-table .footable-filtering-search .input-group-btn > button.btn:focus-visible {
	position: relative;
	z-index: 3;
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

/* Icons are drawn with currentColor masks (the plugin's search icon is a
 * black image, invisible on the filled button). */
div.footable_parent.ninja_table_wrapper .footable-filtering-search span.fooicon::before {
	width: 1.125rem;
	height: 1.125rem;
	background-color: currentColor;
	background-image: none;
	vertical-align: middle;
	-webkit-mask: var(--fi-icon-search) center / contain no-repeat;
	mask: var(--fi-icon-search) center / contain no-repeat;
}

/* While a search is applied the button clears it (fooicon-remove): an x. */
div.footable_parent.ninja_table_wrapper .footable-filtering-search span.fooicon.fooicon-remove::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E");
}

/* The column chooser panel (shown by the plugin's .open class). */
div.ninja_table_wrapper .foo-table .footable-filtering-search ul.dropdown-menu {
	min-width: 13rem;
	margin-top: 0.375rem;
	padding: 0.375rem;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background-color: var(--fi-card-bg);
	box-shadow: var(--fi-shadow);
	color: var(--fi-text);
	font-size: 0.9375rem;
	text-align: start;
}

div.ninja_table_wrapper .foo-table .footable-filtering-search ul.dropdown-menu > li.dropdown-header {
	padding: 0.35rem 0.6rem 0.25rem;
	color: var(--fi-muted);
	font-size: 0.75rem;
	font-weight: 750;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

div.ninja_table_wrapper table.footable > thead > tr.footable-filtering > th ul.dropdown-menu > li > a.checkbox {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: inherit;
}

div.ninja_table_wrapper table.footable > thead > tr.footable-filtering > th ul.dropdown-menu > li > a.checkbox > label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 2.5rem;
	margin: 0;
	padding: 0.4rem 0.6rem;
	border-radius: var(--fi-radius-sm);
	color: var(--fi-text);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}

div.ninja_table_wrapper table.footable > thead > tr.footable-filtering > th ul.dropdown-menu > li > a.checkbox > label:hover {
	background: var(--fi-tint);
}

/* The theme draws the checkbox; the plugin positions it for its old one. */
div.ninja_table_wrapper table.footable > thead > tr.footable-filtering > th ul.dropdown-menu > li > a.checkbox input[type="checkbox"] {
	position: static;
	margin: 0;
}

/* --- Header row: --fi-primary, like the theme's content tables. --- */
div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th {
	padding: 0.85rem 1rem;
	border: 0;
	border-left: 1px solid var(--fi-on-dark-border);
	border-radius: 0;
	background: var(--fi-primary);
	color: var(--fi-on-primary);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-align: start;
	vertical-align: middle;
}

div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th:first-child {
	border-left: 0;
}

div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th.footable-sortable {
	padding-right: 2.25rem;
	transition: background-color var(--fi-duration) ease;
}

div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th.footable-sortable:hover {
	background: var(--fi-primary-hover);
}

/* The sorted column: the theme's gold "current" bar. */
div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th:is(.footable-asc, .footable-desc) {
	box-shadow: inset 0 -3px 0 var(--fi-current);
}

/* Gold ring on the dark header (blue is too faint on it). */
div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th.footable-sortable:focus-visible {
	outline: 3px solid var(--fi-focus-on-dark);
	outline-offset: -4px;
}

/* Sort arrows: always shown, so sortable columns are visible without a mouse. */
div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th.footable-sortable > span.fooicon {
	display: flex;
	right: 0.85rem;
	margin-top: 0;
	line-height: 1;
	opacity: 0.6;
	transform: translateY(-50%); /* Centred on the label (the plugin's -7px sat low). */
}

div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th.footable-sortable:is(:hover, :focus-visible, .footable-asc, .footable-desc) > span.fooicon {
	opacity: 1;
}

div.footable_parent.ninja_table_wrapper span.fooicon:is(.fooicon-sort, .fooicon-sort-asc, .fooicon-sort-desc, .fooicon-plus, .fooicon-minus)::before {
	background-color: currentColor;
}

/* --- Body rows. --- */
div.ninja_table_wrapper.semantic_ui table.ui.table > tbody > tr > td {
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--fi-border);
	color: inherit;
	vertical-align: middle;
}

div.ninja_table_wrapper.semantic_ui table.ui.table > tbody > tr:first-child > td {
	border-top: 0;
}

div.ninja_table_wrapper.semantic_ui table.ui.striped.table > tbody > tr:nth-child(2n) {
	background-color: var(--fi-row-alt);
}

/* The plugin's hover uses !important. */
div.ninja_table_wrapper.semantic_ui table.ui.selectable.table > tbody > tr:hover {
	background: var(--fi-tint) !important;
	color: var(--fi-text) !important;
}

div.ninja_table_wrapper table.footable > tbody > tr.footable-empty > td {
	padding: 2rem 1rem;
	color: var(--fi-muted);
	font-size: 1rem;
	text-align: center;
}

/* "Search in" opens below the toolbar, inside the frame. The frame scrolls
 * (the plugin's overflow-x: auto makes overflow-y auto too), so on a short
 * table (no results, or one row) the panel was cut off. While it is open
 * the frame is at least tall enough for the toolbar and a panel for three
 * columns (both tables today; a panel for more columns scrolls in the frame). */
div.footable_parent.ninja_table_wrapper:has(.footable-filtering-search .input-group-btn.open) {
	min-height: 16rem;
}

/* Responsive rows (only when a column has a breakpoint; none today). */
div.footable_parent.ninja_table_wrapper table > tbody > tr > td > span.footable-toggle:focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 0;
}

div.ninja_table_wrapper table.footable table.footable-details > tbody > tr > th {
	color: var(--fi-heading);
	font-weight: 700;
}

/* --- Paging row (table 364). --- */
div.ninja_table_wrapper.semantic_ui table.ui.table > tfoot > tr.footable-paging > td {
	padding: 0.75rem 1rem;
	border-top-color: var(--fi-border) !important; /* The plugin sets the border with !important. */
	border-radius: 0;
	background: var(--fi-surface);
}

div.ninja_table_wrapper .foo-table tr.footable-paging .footable-pagination-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem 1rem;
}

div.ninja_table_wrapper .foo-table.footable-paging-center tr.footable-paging .footable-pagination-wrapper {
	justify-content: center;
}

div.ninja_table_wrapper .foo-table.footable-paging-left tr.footable-paging .footable-pagination-wrapper {
	justify-content: flex-start;
}

/* An empty spacer from the plugin. */
div.ninja_table_wrapper .foo-table .footable-pagination-wrapper > div.divider {
	display: none;
}

div.ninja_table_wrapper .foo-table .footable-pagination-wrapper ul.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

div.ninja_table_wrapper .foo-table ul.pagination > li > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius-control);
	background-color: var(--fi-card-bg);
	color: var(--fi-primary);
	font-weight: 700;
	line-height: 1;
	transition: background-color var(--fi-duration) ease, border-color var(--fi-duration) ease, color var(--fi-duration) ease;
}

div.ninja_table_wrapper .foo-table ul.pagination > li > a:is(:hover, :focus) {
	border-color: var(--fi-primary);
	background-color: var(--fi-tint);
	color: var(--fi-primary);
}

div.ninja_table_wrapper .foo-table ul.pagination > li > a:focus-visible {
	position: relative;
	z-index: 2;
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

div.ninja_table_wrapper .foo-table ul.pagination > li.active > a,
div.ninja_table_wrapper .foo-table ul.pagination > li.active > a:is(:hover, :focus) {
	border-color: var(--fi-primary);
	background-color: var(--fi-primary);
	color: var(--fi-on-primary);
}

div.ninja_table_wrapper .foo-table ul.pagination > li.disabled > a,
div.ninja_table_wrapper .foo-table ul.pagination > li.disabled > a:is(:hover, :focus) {
	border-color: transparent;
	background-color: transparent;
	color: var(--fi-muted);
}

/* "1 of 3" (the plugin's label had white text on no background). */
div.ninja_table_wrapper .foo-table .footable-pagination-wrapper span.label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.3rem 0.75rem;
	border-radius: var(--fi-radius-pill);
	background: var(--fi-surface-2);
	color: var(--fi-text);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
}

/* Ninja leaves the label empty when its page count is switched off. */
div.ninja_table_wrapper .foo-table .footable-pagination-wrapper span.label:empty {
	display: none;
}

/* "Edit Table" (administrators only), as a footer strip inside the frame. */
div.footable_parent.ninja_table_wrapper > a.nt_edit_link {
	display: block;
	padding: 0.55rem 1rem;
	border-top: 1px solid var(--fi-border);
	background: var(--fi-surface);
	color: var(--fi-link);
	font-size: 0.875rem;
	font-weight: 600;
}

@media (min-width: 48rem) {
	div.ninja_table_wrapper .foo-table .footable-filtering-search .input-group > input.form-control {
		min-width: 16rem;
	}

	/* If a wide table scrolls inside the frame, the right-aligned search
	 * stays at the frame's visible right edge. */
	div.ninja_table_wrapper table.foo-table > thead > tr.footable-filtering > th .form-inline > div.form-group.footable-filtering-search {
		position: sticky;
		right: 1rem;
		z-index: 3; /* Its column chooser opens over the header cells. */
	}
}

/* Phones and small tablets: tighter cells, so the table needs less sideways
 * scrolling. When it still scrolls (inside the frame), the search controls
 * and the pager stay at the frame's visible edge instead of the table's far
 * right. The frame is a size container, so 100cqw is its visible width
 * whatever the page gutters, the article's padding or a scrollbar take. */
@media (max-width: 47.99rem) {
	div.footable_parent.ninja_table_wrapper {
		container-type: inline-size;
	}

	div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-filtering > th {
		padding: 0.75rem;
	}

	div.ninja_table_wrapper table.foo-table > thead > tr.footable-filtering > th .form-inline {
		text-align: start;
	}

	div.ninja_table_wrapper table.foo-table > thead > tr.footable-filtering > th .form-inline > div.form-group.footable-filtering-search {
		position: sticky;
		left: 0.75rem;
		z-index: 3; /* Its column chooser opens over the header cells. */
		display: inline-block;
		width: min(100%, calc(100cqw - 1.5rem)); /* Less this cell's padding. */
		vertical-align: top;
	}

	/* The pager keeps the table's alignment, within the visible width; its
	 * 44px links wrap onto a second line on small phones. */
	div.ninja_table_wrapper .foo-table tr.footable-paging .footable-pagination-wrapper {
		position: sticky;
		left: 0.75rem;
		width: min(100%, calc(100cqw - 1.5rem)); /* Less this cell's padding. */
	}

	div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th {
		padding: 0.75rem;
	}

	div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th.footable-sortable {
		padding-right: 1.75rem;
	}

	div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th.footable-sortable > span.fooicon {
		right: 0.5rem;
	}

	div.ninja_table_wrapper.semantic_ui table.ui.table > tbody > tr > td {
		padding: 0.625rem 0.75rem;
	}

	div.ninja_table_wrapper.semantic_ui table.ui.table > tfoot > tr.footable-paging > td {
		padding: 0.75rem;
	}
}

/* ==================================================================
 * 2b. Directory: the Phone list as contact tiles (administrator: "design
 * better", 9 Oct 2026). assets/js/directory.js marks a Ninja table that has
 * an "Extension" column (.fi-directory) and adds the count, "Print list",
 * the initials circles, the highlighted search words, the cell classes used
 * here and the ARIA table roles (the table's parts become blocks and grids
 * here, which some browsers would otherwise read as plain text).
 * The plugin's own search and sorting do the work: its column headings
 * are the sort buttons. Role tokens only, so it suits every design.
 * ================================================================== */

/* No frame: the search card and the tiles sit on the page. The wrapper is
 * a size container, so the tiles a row follow the room the table has (less
 * inside Version A's article card than on Version 3's open page). */
div.footable_parent.ninja_table_wrapper.fi-directory {
	container: fi-directory / inline-size;
	overflow: visible; /* The plugin's frame scrolls sideways (overflow-x: auto); tiles never need to. */
	border: 0;
	border-radius: 0;
	background: none;
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table,
div.fi-directory.ninja_table_wrapper table.foo-table > :is(thead, tbody, tfoot),
div.fi-directory.ninja_table_wrapper table.foo-table > thead > tr.footable-filtering {
	display: block;
	background: none;
}

/* --- The search card. --- */
div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-filtering > th {
	display: block !important; /* Over FooTable's display on its cells. */
	padding: 1rem 1.25rem;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	box-shadow: var(--fi-shadow-sm);
	text-align: start;
}

div.fi-directory.ninja_table_wrapper table.foo-table > thead > tr.footable-filtering > th .form-inline,
div.fi-directory.ninja_table_wrapper table.foo-table > thead > tr.footable-filtering > th .form-inline > div.form-group.footable-filtering-search {
	position: static;
	display: block;
	float: none;
	width: 100%;
	margin: 0;
}

div.fi-directory.ninja_table_wrapper .foo-table .footable-filtering-search .input-group {
	display: flex;
	width: 100%;
}

div.fi-directory.ninja_table_wrapper .foo-table .footable-filtering-search .input-group > input.form-control {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 3.25rem;
	min-height: 3.25rem;
	padding-inline: 1rem;
	font-size: 1.0625rem;
}

/* Focus: a firmer primary border, no outer ring (as the home page's
 * Google search box, decision 25). */
div.fi-directory.ninja_table_wrapper .foo-table .footable-filtering-search .input-group > input.form-control:is(:focus, :focus-visible) {
	border-color: var(--fi-primary);
	outline: 0;
	box-shadow: inset 0 0 0 1px var(--fi-primary);
}

div.fi-directory.ninja_table_wrapper .foo-table .form-group.footable-filtering-search .input-group-btn {
	display: flex;
	width: auto;
}

div.fi-directory.ninja_table_wrapper .foo-table .form-group.footable-filtering-search .input-group-btn > button.btn.btn-primary {
	height: 3.25rem !important; /* Over the plugin's !important (and the rule above). */
	min-height: 3.25rem !important;
	min-width: 3.25rem;
	border-radius: 0 var(--fi-radius-control) var(--fi-radius-control) 0;
}

/* "Search in" isn't needed: the search covers every column. */
div.fi-directory.ninja_table_wrapper .foo-table .form-group.footable-filtering-search .input-group-btn > button.btn.dropdown-toggle,
div.fi-directory.ninja_table_wrapper .foo-table .footable-filtering-search ul.dropdown-menu {
	display: none;
}

div.fi-directory .fi-dir-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-top: 0.75rem;
}

div.fi-directory .fi-dir-count {
	margin: 0;
	color: var(--fi-muted);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

div.fi-directory button.fi-dir-print {
	min-height: 2.25rem;
	margin: 0;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--fi-control-border);
	border-radius: var(--fi-radius-pill);
	background: var(--fi-control-bg);
	color: var(--fi-primary);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--fi-duration) ease, border-color var(--fi-duration) ease;
}

div.fi-directory button.fi-dir-print:hover {
	border-color: var(--fi-primary);
	background: var(--fi-tint);
	color: var(--fi-primary);
}

div.fi-directory button.fi-dir-print:focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

/* --- The column headings: "Sort by" buttons. --- */
div.fi-directory.ninja_table_wrapper table.foo-table > thead > tr.footable-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0.75rem;
	background: none;
}

div.fi-directory.ninja_table_wrapper table.foo-table > thead > tr.footable-header::before {
	content: "Sort by";
	content: "Sort by" / ""; /* Shown, not read: the headings say what they are. */
	margin-inline-end: 0.25rem;
	color: var(--fi-muted);
	font-size: 0.875rem;
	font-weight: 600;
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-header > th {
	position: relative;
	display: inline-flex !important; /* Over FooTable's display on its cells. */
	align-items: center;
	min-height: 2.25rem;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--fi-control-border);
	border-radius: var(--fi-radius-pill);
	background: var(--fi-control-bg);
	box-shadow: none;
	color: var(--fi-text);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-header > th.footable-sortable {
	padding-right: 2rem;
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-header > th.footable-sortable:hover {
	border-color: var(--fi-primary);
	background: var(--fi-tint);
	color: var(--fi-text);
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-header > th:is(.footable-asc, .footable-desc) {
	border-color: var(--fi-primary);
	background: var(--fi-primary);
	box-shadow: none;
	color: var(--fi-on-primary);
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-header > th:is(.footable-asc, .footable-desc):hover {
	border-color: var(--fi-primary-hover);
	background: var(--fi-primary-hover);
	color: var(--fi-on-primary);
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-header > th.footable-sortable:focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-header > th.footable-sortable > span.fooicon {
	right: 0.75rem;
}

/* --- The tiles: one a row, two from 600px of room, three from 1100px (so
 * a tile keeps about 300px or more). Browsers without container queries
 * fit in as many 20rem tiles as there is room for. --- */
div.fi-directory.ninja_table_wrapper table.foo-table > tbody {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 0.625rem;
}

@container fi-directory (min-width: 37.5rem) {
	div.fi-directory.ninja_table_wrapper table.foo-table > tbody {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container fi-directory (min-width: 68.75rem) {
	div.fi-directory.ninja_table_wrapper table.foo-table > tbody {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* :nth-child(n) outweighs the striped rows (2. above). */
div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr:nth-child(n) {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "name ext" "dept ext";
	align-content: center;
	align-items: center;
	gap: 0.1rem 0.75rem;
	min-height: 4.25rem;
	padding: 0.7rem 0.875rem 0.7rem 3.875rem;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	box-shadow: var(--fi-shadow-sm);
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr > td {
	display: block !important; /* Over FooTable's display: table-cell. */
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: start;
}

/* A column FooTable hides (none today) stays hidden. */
div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr > td[style*="none"] {
	display: none !important;
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr > td.fi-dir-cell--name {
	grid-area: name;
	color: var(--fi-heading);
	font-weight: 650;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr > td.fi-dir-cell--dept {
	grid-area: dept;
	font-size: 0.9375rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr > td.fi-dir-cell--ext {
	grid-area: ext;
	text-align: end;
}

/* Any further column (none today) goes under the department. */
div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr > td:not(.fi-dir-cell--name, .fi-dir-cell--dept, .fi-dir-cell--ext) {
	grid-column: 1;
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr.footable-empty {
	grid-column: 1 / -1;
	display: block;
	min-height: 0;
	padding: 0;
}

div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr.footable-empty > td {
	padding: 2rem 1rem;
	color: var(--fi-muted);
	text-align: center;
}

div.fi-directory .fi-dir-avatar {
	position: absolute;
	top: 50%;
	left: 0.875rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--fi-tint);
	color: var(--fi-primary);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
	transform: translateY(-50%);
}

/* The row hover paints the tile in --fi-tint (2. above). */
div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.selectable.table > tbody > tr:hover .fi-dir-avatar {
	background: var(--fi-card-bg);
}

div.fi-directory .fi-dir-dept {
	color: var(--fi-text);
}

div.fi-directory .fi-dir-room {
	color: var(--fi-muted);
}

div.fi-directory .fi-dir-room::before {
	content: "\00B7";
	content: "\00B7" / "";
	margin-inline: 0.1rem 0.4rem;
}

div.fi-directory .fi-dir-ext {
	display: inline-block;
	min-width: 3.5rem;
	padding: 0.3rem 0.7rem;
	border-radius: var(--fi-radius-pill);
	background: var(--fi-surface-2);
	color: var(--fi-heading);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

div.fi-directory mark.fi-dir-hit {
	padding: 0;
	border-radius: 0.15em;
	background: var(--fi-warning-tint);
	box-shadow: inset 0 -2px 0 var(--fi-warning-line);
	color: inherit;
}

/* "Edit Table" (administrators only): a plain link under the tiles. */
div.footable_parent.ninja_table_wrapper.fi-directory > a.nt_edit_link {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.25rem 0;
	border: 0;
	background: none;
}

@media (max-width: 47.99rem) {
	div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-filtering > th {
		padding: 0.875rem;
	}

	/* 16px: the smallest size at which phones don't zoom in on the box. */
	div.fi-directory.ninja_table_wrapper .foo-table .footable-filtering-search .input-group > input.form-control {
		padding-inline: 0.875rem;
		font-size: 1rem;
	}

	div.fi-directory.ninja_table_wrapper table.foo-table > thead > tr.footable-header {
		gap: 0.375rem;
		margin: 1rem 0 0.625rem;
	}

	div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-header > th {
		padding: 0.3rem 0.7rem;
		font-size: 0.8125rem;
	}

	div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-header > th.footable-sortable {
		padding-right: 1.6rem;
	}

	div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-header > th.footable-sortable > span.fooicon {
		right: 0.55rem;
	}

	div.fi-directory.ninja_table_wrapper table.foo-table > tbody {
		gap: 0.5rem;
	}

	div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr:nth-child(n) {
		min-height: 4rem;
		padding: 0.625rem 0.75rem 0.625rem 3.5rem;
	}

	div.fi-directory .fi-dir-avatar {
		left: 0.75rem;
		width: 2rem;
		height: 2rem;
		font-size: 0.75rem;
	}

	div.fi-directory .fi-dir-ext {
		min-width: 3.25rem;
		font-size: 1rem;
	}
}

/* Narrow room (phones): "Sort by" on its own line, so the three buttons
 * can share one; a tighter search card when the room is very narrow
 * (Version A's article card on a phone). */
@container fi-directory (max-width: 29.99rem) {
	div.fi-directory.ninja_table_wrapper table.foo-table > thead > tr.footable-header::before {
		flex-basis: 100%;
		margin: 0;
	}
}

@container fi-directory (max-width: 21.99rem) {
	div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > thead > tr.footable-filtering > th {
		padding: 0.75rem;
	}
}

/* Printing: a compact list in two columns, black on white (a deliberate
 * print-only exception to the role-token rule). */
@media print {
	div.fi-directory table.foo-table > thead,
	div.fi-directory > a.nt_edit_link,
	div.fi-directory .fi-dir-avatar {
		display: none !important;
	}

	div.fi-directory.ninja_table_wrapper table.foo-table > tbody {
		display: block;
		columns: 2;
		column-gap: 10mm;
	}

	div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr:nth-child(n) {
		break-inside: avoid;
		min-height: 0;
		padding: 1mm 0;
		border: 0;
		border-bottom: 0.5pt solid #999;
		border-radius: 0;
		background: none !important;
		box-shadow: none;
		color: #000 !important;
	}

	div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr > td.fi-dir-cell--name {
		color: #000;
		font-size: 9.5pt;
		line-height: 1.2;
	}

	div.fi-directory.ninja_table_wrapper.semantic_ui table.ui.table.foo-table > tbody > tr > td.fi-dir-cell--dept {
		font-size: 8pt;
		line-height: 1.2;
	}

	div.fi-directory .fi-dir-dept,
	div.fi-directory .fi-dir-room {
		color: #333;
	}

	div.fi-directory .fi-dir-ext {
		min-width: 0;
		padding: 0;
		background: none;
		color: #000;
		font-size: 10.5pt;
	}

	div.fi-directory mark.fi-dir-hit {
		background: none;
		box-shadow: none;
	}
}

/* ==================================================================
 * 3. Nextend Social Login: the notice toast (after ?nsl-notice=1). The
 * plugin removes it on click (anywhere on it); the shim adds Enter and
 * Escape. It sits below the header.
 * ================================================================== */
body:not(.login) #nsl-notices-fallback {
	top: calc(var(--fi-header-h) + var(--wp-admin--admin-bar--height, 0px) + 0.75rem);
	right: var(--fi-gutter);
	left: auto;
	width: min(26rem, calc(100vw - 2 * var(--fi-gutter)));
	font-family: var(--fi-font);
	cursor: pointer;
}

body:not(.login) #nsl-notices-fallback > div {
	margin: 0 0 0.5rem;
	padding: 0.85rem 2.75rem 0.85rem 1rem;
	border: 1px solid var(--fi-border);
	border-inline-start: 4px solid var(--fi-info);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	box-shadow: var(--fi-shadow-lg);
	color: var(--fi-text);
	font-size: 0.9375rem;
	line-height: 1.5;
}

body:not(.login) #nsl-notices-fallback > div.error {
	border-inline-start-color: var(--fi-danger);
	background: var(--fi-danger-tint);
}

body:not(.login) #nsl-notices-fallback > div.updated {
	border-inline-start-color: var(--fi-success);
	background: var(--fi-success-tint);
}

body:not(.login) #nsl-notices-fallback > div p {
	margin: 0;
	padding: 0;
}

body:not(.login) #nsl-notices-fallback > div::after {
	top: 0.7rem;
	right: 0.75rem;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--fi-muted);
	font-size: 1.35rem;
	line-height: 1.5rem;
}

/* The shim makes the toast focusable (Enter or Escape closes it); the ring
 * is drawn round its notices, not round the bare container. */
body:not(.login) #nsl-notices-fallback:focus {
	outline: none;
}

body:not(.login) #nsl-notices-fallback:focus-visible > div {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

/* ==================================================================
 * 4. Integrate Google Drive (inactive on the test copies; from its code).
 * Its CSS prints in the footer; this sheet follows it there on its pages.
 * The plugin's colours come from its own :root variables. They are
 * re-pointed on the plugin's roots, where no plugin rule competes (so the
 * specificity floor doesn't apply). These names are the plugin's: the
 * theme never uses them for its own tokens (04 §4.10).
 * ================================================================== */
.igd,
.igd-swal,
.igd-context-menu,
.igd-lightbox {
	--color-primary: var(--fi-primary);
	--color-primary-dark: var(--fi-primary-hover);
	--color-primary-light: var(--fi-control-border);       /* Dashed borders, scrollbar thumbs. */
	--color-primary-light-alt: var(--fi-primary-hover);    /* Fills with white text. */
	--color-primary-lighter: var(--fi-tint);
	--color-primary-lighter-alt: var(--fi-primary);        /* Selected rows, white text. */
}

/* Module frame (browser, search, gallery). */
.entry-content div.igd-shortcode-wrap:is(.igd-shortcode-browser, .igd-shortcode-search, .igd-shortcode-gallery) {
	border-color: var(--fi-border);
	border-radius: var(--fi-radius);
	color: var(--fi-text);
}

/* Header: the plugin forces its background with !important and offsets the
 * sticky header by the admin bar's 32px. */
div.igd-shortcode-wrap .igd-file-browser .igd-file-browser-header {
	top: 0;
	border-bottom-color: var(--fi-border);
	background: var(--fi-surface) !important;
}

div.igd-shortcode-wrap .igd-file-browser-header button.header-action-item {
	color: var(--fi-muted);
}

div.igd-shortcode-wrap .igd-file-browser-header button.header-action-item:hover {
	background: var(--fi-tint);
	color: var(--fi-primary);
}

div.igd-shortcode-wrap .igd-file-browser .igd-breadcrumb button.breadcrumb-item {
	color: var(--fi-muted);
	font-family: var(--fi-font);
}

div.igd-shortcode-wrap .igd-file-browser .igd-breadcrumb button.breadcrumb-item.active {
	color: var(--fi-heading);
}

div.igd-shortcode-wrap .igd-file-browser .igd-breadcrumb button.breadcrumb-item:hover {
	background: var(--fi-tint);
	color: var(--fi-primary);
}

/* Search: the control spec as a pill; the ring is on the whole bar (the
 * plugin removes the input's own outline). */
@media (min-width: 768px) {
	div.igd-shortcode-wrap .igd-file-browser form.igd-search-bar {
		height: 2.75rem;
		border-color: var(--fi-control-border);
		border-radius: var(--fi-radius-pill);
		background: var(--fi-control-bg);
	}
}

div.igd-shortcode-wrap .igd-file-browser-header form.igd-search-bar.active {
	border-color: var(--fi-control-border);
	background: var(--fi-control-bg);
}

div.igd-shortcode-wrap .igd-file-browser form.igd-search-bar:focus-within {
	border-color: var(--fi-primary);
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

div.igd-shortcode-wrap .igd-file-browser form.igd-search-bar.error {
	border-color: var(--fi-danger);
}

div.igd-shortcode-wrap .igd-file-browser form.igd-search-bar input {
	color: var(--fi-text);
	font-family: var(--fi-font);
	font-size: 1rem;
}

/* Sidebar and details panel. */
div.igd-shortcode-wrap .igd-file-browser .igd-sidebar-wrap {
	border-right-color: var(--fi-border);
	background: var(--fi-surface);
}

div.igd-shortcode-wrap .igd-file-browser .igd-sidebar .tree-item {
	color: var(--fi-text);
}

div.igd-shortcode-wrap .igd-file-browser .igd-details-wrap {
	border-left-color: var(--fi-border);
}

/* Toolbar above the files. */
div.igd-shortcode-wrap .igd-body div.body-action {
	border-color: var(--fi-border);
	border-radius: var(--fi-radius-sm);
	background: var(--fi-surface);
}

div.igd-shortcode-wrap .igd-body div.body-action-item {
	border-color: var(--fi-border);
	border-radius: var(--fi-radius-sm);
	background: var(--fi-card-bg);
	color: var(--fi-text);
}

div.igd-shortcode-wrap .igd-body div.body-action-item:hover {
	background: var(--fi-tint);
}

div.igd-shortcode-wrap .igd-body div.body-action .body-action-files-count {
	color: var(--fi-muted);
}

/* List view: a light tint with dark text on hover (the plugin's white text
 * on light blue failed contrast); selected rows stay filled. */
div.igd-shortcode-wrap .igd-body .file-list.list-view .list-view-header {
	color: var(--fi-muted);
	font-weight: 700;
}

div.igd-shortcode-wrap .igd-body .file-list.list-view div.file-item {
	border-bottom-color: var(--fi-border);
	background: var(--fi-card-bg);
	color: var(--fi-text);
}

div.igd-shortcode-wrap .igd-body .file-list.list-view div.file-item:hover {
	background: var(--fi-tint);
	color: var(--fi-heading);
}

div.igd-shortcode-wrap .igd-body .file-list.list-view div.file-item.active {
	background: var(--fi-primary);
	color: var(--fi-on-primary);
}

div.igd-shortcode-wrap .igd-body .file-list div.file-item:not(.active) :is(.file-item-size, .file-item-date, .file-item-options) {
	color: var(--fi-muted);
}

/* Buttons: 10px radius, weight 700 (decision 19). */
:is(.igd, .igd-swal, .igd-lightbox) .igd-btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-light, .btn-dark, .btn-link, .btn-outline-primary) {
	min-height: 2.75rem;
	padding: 0.6rem 1.1rem;
	border-radius: var(--fi-radius-control);
	font-family: var(--fi-font);
	font-weight: 700;
}

:is(.igd, .igd-swal, .igd-lightbox) .igd-btn.btn-primary,
div.igd-shortcode-wrap .igd-file-browser .btn-primary {
	border-color: var(--fi-primary);
	background: var(--fi-primary);
	color: var(--fi-on-primary);
}

:is(.igd, .igd-swal, .igd-lightbox) .igd-btn.btn-primary:hover,
div.igd-shortcode-wrap .igd-file-browser .btn-primary:hover {
	border-color: var(--fi-primary-hover);
	background: var(--fi-primary-hover);
	color: var(--fi-on-primary);
}

:is(.igd, .igd-swal, .igd-lightbox) .igd-btn.btn-success {
	border-color: var(--fi-success);
	background: var(--fi-success);
	color: var(--fi-on-primary);
}

:is(.igd, .igd-swal, .igd-lightbox) .igd-btn.btn-success:hover {
	border-color: var(--fi-success-hover);
	background: var(--fi-success-hover);
}

:is(.igd, .igd-swal, .igd-lightbox) .igd-btn.btn-danger {
	border-color: var(--fi-danger);
	background: var(--fi-danger-tint);
	color: var(--fi-danger);
}

:is(.igd, .igd-swal, .igd-lightbox) .igd-btn:is(.btn-danger:hover, .btn-danger:focus) {
	border-color: var(--fi-danger);
	background: var(--fi-danger);
	color: var(--fi-on-primary);
}

:is(.igd, .igd-swal, .igd-lightbox) .igd-btn:is(.btn-secondary, .btn-light) {
	border-color: var(--fi-control-border);
	background: var(--fi-card-bg);
	color: var(--fi-primary);
}

:is(.igd, .igd-swal, .igd-lightbox) .igd-btn:is(.btn-secondary, .btn-light):hover {
	background: var(--fi-tint);
	color: var(--fi-primary);
}

:is(.igd, .igd-swal, .igd-lightbox) .igd-btn:is(.btn-dark, .btn-link) {
	color: var(--fi-link);
}

:is(.igd, .igd-swal, .igd-lightbox) .igd-btn.btn-dark {
	border-color: var(--fi-primary);
	background: var(--fi-primary);
	color: var(--fi-on-primary);
}

:is(.igd, .igd-swal, .igd-lightbox) .igd-btn.disabled {
	color: var(--fi-muted);
}

/* Dialogs (SweetAlert2). The plugin's confirm and cancel colours are
 * !important (white on green 2.7:1, white on coral 2.4:1). */
.igd-swal.swal2-container .swal2-popup {
	border-radius: var(--fi-radius-lg);
	background: var(--fi-card-bg);
	color: var(--fi-text);
	font-family: var(--fi-font);
}

.igd-swal.swal2-container .swal2-title {
	color: var(--fi-heading);
	font-weight: 750;
}

.igd-swal.swal2-container .swal2-html-container {
	color: var(--fi-text);
}

.igd-swal.swal2-container .swal2-actions button.swal2-styled {
	min-height: 2.75rem;
	border-radius: var(--fi-radius-control);
	font-weight: 700;
}

.igd-swal.swal2-container button.swal2-confirm,
.igd-swal.igd-swal-reverse.swal2-container :is(button.swal2-cancel, button.swal2-deny) {
	background-color: var(--fi-primary) !important;
	color: var(--fi-on-primary);
}

.igd-swal.swal2-container :is(button.swal2-cancel, button.swal2-deny) {
	border: 1px solid var(--fi-control-border);
	background-color: var(--fi-card-bg) !important;
	color: var(--fi-primary);
}

.igd-swal.igd-swal-reverse.swal2-container button.swal2-confirm {
	background-color: var(--fi-danger) !important;
	color: var(--fi-on-primary);
}

.igd-swal.swal2-container :is(button, a[href], input, select, textarea):focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

/* Context menu (appended to the body). */
body:not(.login) .igd-context-menu {
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background-color: var(--fi-card-bg);
	box-shadow: var(--fi-shadow);
	color: var(--fi-text);
	font-family: var(--fi-font);
}

body:not(.login) .igd-context-menu .context-menu-item:hover {
	background-color: var(--fi-tint);
}

body:not(.login) .igd-context-menu .context-menu-item:is(.details, .import, .upload) {
	border-bottom-color: var(--fi-border);
}

body:not(.login) .igd-context-menu .context-menu-item:is(.delete, .download, .view) {
	border-top-color: var(--fi-border);
}

body:not(.login) .igd-context-menu .context-menu-item :is(i, img) {
	color: var(--fi-muted);
}

body:not(.login) .igd-context-menu .context-menu-item.disabled {
	color: var(--fi-muted);
	opacity: 0.6;
}

/* Pagination. */
div.igd-shortcode-wrap ul.igd-pagination li {
	min-height: 2.75rem;
	border-color: var(--fi-border);
	color: var(--fi-primary);
}

div.igd-shortcode-wrap ul.igd-pagination li:first-child {
	border-radius: var(--fi-radius-control) 0 0 var(--fi-radius-control);
}

div.igd-shortcode-wrap ul.igd-pagination li:last-child {
	border-radius: 0 var(--fi-radius-control) var(--fi-radius-control) 0;
}

div.igd-shortcode-wrap ul.igd-pagination li:is(.selected, :hover) {
	color: var(--fi-on-primary);
}

div.igd-shortcode-wrap ul.igd-pagination li.disabled {
	background: var(--fi-surface-2);
	color: var(--fi-muted);
}

/* Busy indicator. */
div.igd .igd-spinner,
div.igd-shortcode-wrap .igd-spinner {
	border-color: var(--fi-surface-2);
	border-top-color: var(--fi-primary);
}

/* Embedded document (/supply/). */
.entry-content div.igd-embed-wrap iframe {
	max-height: 80vh;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-surface);
}

/* Focus: the plugin removes outlines in places. */
div.igd-shortcode-wrap :is(button, a[href], [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

/* ==================================================================
 * 5. Reduced motion and forced colours.
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
	/* Decision 13: the ticker is a static notice bar (no pause button needed). */
	.entry-content div.ticker-news > button.fi-ticker-toggle {
		display: none;
	}

	.entry-content div.ticker-news .tickercontainer {
		height: auto;
	}

	.entry-content div.ticker-news .tickercontainer .ticker-mask {
		left: 0;
		width: auto;
	}

	.entry-content div.ticker-news .tickercontainer ul.newsticker {
		position: static;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.2rem 2rem;
		width: auto !important; /* Overrides the inline width the plugin sets. */
		padding: 0.6rem 0.9rem;
	}

	.entry-content div.ticker-news .tickercontainer ul.newsticker li {
		float: none;
		height: auto;
		margin: 0;
		line-height: 1.55;
	}

	.entry-content div.ticker-news .tickercontainer ul.newsticker li a {
		display: inline;
		white-space: normal;
	}

	/* Busy indicators keep turning, slowly. */
	div.footable_parent div.footable-loader > span.fooicon {
		animation-duration: 6s;
	}

	div.igd .igd-spinner,
	div.igd-shortcode-wrap .igd-spinner {
		animation-duration: 4s;
	}

	div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th.footable-sortable > span.fooicon,
	div.ninja_table_wrapper .foo-table ul.pagination > li > a,
	.entry-content div.ticker-news > button.fi-ticker-toggle {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) and (max-width: 40rem) {
	.entry-content div.ticker-news {
		flex-wrap: wrap;
	}

	.entry-content div.ticker-news > span:first-child {
		min-height: 2.75rem;
		border-end-end-radius: var(--fi-radius-sm);
	}

	.entry-content div.ticker-news > .tickercontainer {
		flex-basis: 100%;
		order: 2;
	}
}

@media (forced-colors: active) {
	.entry-content div.ticker-news > span:first-child {
		border-inline-end: 1px solid CanvasText;
	}

	/* The pause/play glyph is a masked background, which forced colours
	 * would repaint as Canvas (an empty button): draw it in ButtonText. */
	.entry-content div.ticker-news > button.fi-ticker-toggle::before {
		forced-color-adjust: none;
		background: ButtonText;
	}

	div.ninja_table_wrapper.semantic_ui table.ui.table > thead > tr.footable-header > th {
		border-bottom: 1px solid CanvasText;
	}

	div.ninja_table_wrapper .foo-table ul.pagination > li.active > a {
		border: 2px solid Highlight;
	}
}