/**
 * APAA Core pages (templates/ folder): one look for every APAA page, whatever theme is active.
 *
 * The theme supplies only the frame around the page (header, menu, footer, page background - see
 * apaa_templates_print_page_start() in includes/templates.php). Everything inside uses these apaa- classes, each
 * written after .apaa-page so that the theme's own rules for labels, inputs and buttons do not reach it.
 * The text font is the theme's; colours and sizes are set here, in one place at the top (to restyle every APAA page,
 * change these values).
 *
 * The buttons, the Edit / Delete pictures, the Action column's layout and the on/off switch also work inside an
 * element with the class apaa-ui, for parts of older pages that use them (e.g. the Members Directory's Action column).
 *
 * A theme may give APAA pages its own colours and button shape by setting these values for .apaa-page and .apaa-ui
 * (APAA Topaz does); every other rule stays here.
 */

.apaa-page,
.apaa-ui {
	--apaa-colour-primary: #337ab7;
	--apaa-colour-primary-dark: #286090;
	--apaa-colour-heading: #333;
	--apaa-colour-text: #333;
	--apaa-colour-label: #6a7889;
	--apaa-colour-border: #ccc;
	--apaa-colour-panel: #fff;
	--apaa-colour-success-text: #3c763d;
	--apaa-colour-success-background: #dff0d8;
	--apaa-colour-success-border: #d6e9c6;
	--apaa-colour-error: #a94442;
	--apaa-colour-focus: rgba(51, 122, 183, 0.25);
	--apaa-button-radius: 4px;
	--apaa-font-size: 14px;
}

.apaa-page {
	box-sizing: border-box;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
	color: var(--apaa-colour-text);
	font-size: var(--apaa-font-size);
	line-height: 1.5;
	letter-spacing: normal;
}

.apaa-page *,
.apaa-page *::before,
.apaa-page *::after {
	box-sizing: inherit;
}

.apaa-ui,
.apaa-ui *,
.apaa-ui *::before,
.apaa-ui *::after {
	box-sizing: border-box;
}

/* The theme spaces letters apart on the whole page; APAA pages do not, so buttons are the same size everywhere. */
.apaa-ui {
	letter-spacing: normal;
}

/* Page heading, with an optional button on the right (e.g. Back). Under a theme that draws the heading as a banner,
   only the button row is left, on the right. */
.apaa-page .apaa-page__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 25px;
}

.apaa-page .apaa-page__header--buttons {
	justify-content: flex-end;
}

.apaa-page .apaa-page__title {
	margin: 0;
	color: var(--apaa-colour-heading);
	font-size: 30px;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
}

/* Member view / Manager view switch beside the heading (Members Directory, Repository; includes/screen-view.php):
   a grey pill-shaped toggle with a label, so it is not mistaken for an action button. */
.apaa-page .apaa-view-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--apaa-font-size);
}

.apaa-page .apaa-view-switch__label {
	color: var(--apaa-colour-label);
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.apaa-page .apaa-view-switch__track {
	display: inline-flex;
	padding: 3px;
	background-color: #e4e8ed;
	border-radius: 999px;
}

.apaa-page .apaa-view-switch__option {
	padding: 4px 14px;
	border-radius: 999px;
	color: #555;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.apaa-page a.apaa-view-switch__option:hover,
.apaa-page a.apaa-view-switch__option:focus {
	background-color: rgba(255, 255, 255, 0.6);
	color: var(--apaa-colour-primary-dark);
	text-decoration: none;
}

.apaa-page .apaa-view-switch__option--current {
	background-color: #fff;
	color: var(--apaa-colour-primary);
	font-weight: bold;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* While the other view loads (assets/js/apaa-core.js): the page below the heading dims. */
.apaa-page.apaa-page--switching > :not(.apaa-page__header) {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.15s;
}

.apaa-page.apaa-page--switching {
	cursor: progress;
}

/* The white box holding a page's form. */
.apaa-page .apaa-panel {
	padding: 40px;
	background-color: var(--apaa-colour-panel);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.apaa-page .apaa-panel p {
	margin: 0 0 16px;
	color: var(--apaa-colour-text);
	font-size: var(--apaa-font-size);
}

/* Form fields: label above, box below. */
.apaa-page .apaa-field {
	margin: 0 0 20px;
}

.apaa-page .apaa-field__label {
	display: block;
	margin: 0 0 6px;
	color: var(--apaa-colour-label);
	font-size: var(--apaa-font-size);
	font-weight: bold;
}

/* A value shown as text where there is nothing to choose. */
.apaa-page .apaa-field__text {
	display: block;
	padding: 7px 0;
	color: var(--apaa-colour-text);
}

.apaa-page .apaa-input,
.apaa-page .apaa-select {
	display: block;
	width: 100%;
	max-width: 480px;
	height: 38px;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--apaa-colour-border);
	border-radius: 4px;
	background-color: #fff;
	color: var(--apaa-colour-text);
	font: inherit;
	font-size: var(--apaa-font-size);
}

.apaa-page .apaa-select[multiple] {
	max-width: none;
	height: auto;
	min-height: 160px;
}

.apaa-page .apaa-input:focus,
.apaa-page .apaa-select:focus {
	border-color: var(--apaa-colour-primary);
	outline: 2px solid var(--apaa-colour-focus);
}

/* A row of radio buttons or tick boxes, each with its label. */
.apaa-page .apaa-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0 0 20px;
}

.apaa-page .apaa-choice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--apaa-colour-label);
	font-size: var(--apaa-font-size);
	font-weight: bold;
	cursor: pointer;
}

.apaa-page .apaa-choice input {
	margin: 0;
}

/* "By designation" or "By member type": only the chosen one's drop-down list is shown. */
.apaa-page .apaa-search-by:has(.apaa-search-by__member-type input:checked) .apaa-search-by__designation-field,
.apaa-page .apaa-search-by:not(:has(.apaa-search-by__member-type input:checked)) .apaa-search-by__member-type-field {
	display: none;
}

/* Buttons. */
.apaa-page .apaa-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0 0;
}

:is(.apaa-page, .apaa-ui) .apaa-button {
	display: inline-block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 8px 20px;
	border: 1px solid var(--apaa-colour-primary);
	border-radius: var(--apaa-button-radius);
	background-color: var(--apaa-colour-primary);
	color: #fff;
	font: inherit;
	font-size: var(--apaa-font-size);
	line-height: 1.4;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

:is(.apaa-page, .apaa-ui) .apaa-button:hover,
:is(.apaa-page, .apaa-ui) .apaa-button:focus {
	border-color: var(--apaa-colour-primary-dark);
	background-color: var(--apaa-colour-primary-dark);
	color: #fff;
	text-decoration: none;
}

:is(.apaa-page, .apaa-ui) .apaa-button--secondary {
	background-color: #fff;
	color: var(--apaa-colour-primary);
}

:is(.apaa-page, .apaa-ui) .apaa-button--secondary:hover,
:is(.apaa-page, .apaa-ui) .apaa-button--secondary:focus {
	background-color: #f0f5fa;
	color: var(--apaa-colour-primary-dark);
}

/* Messages after saving (closed with x). */
.apaa-page .apaa-message {
	position: relative;
	margin: 0 0 20px;
	padding: 12px 44px 12px 16px;
	border: 1px solid transparent;
	border-radius: 4px;
}

.apaa-page .apaa-message--success {
	border-color: var(--apaa-colour-success-border);
	background-color: var(--apaa-colour-success-background);
	color: var(--apaa-colour-success-text);
}

.apaa-page .apaa-message__close {
	position: absolute;
	top: 8px;
	right: 12px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	opacity: 0.5;
	cursor: pointer;
}

.apaa-page .apaa-message__close:hover,
.apaa-page .apaa-message__close:focus {
	opacity: 1;
}

/* Results shown under a form (e.g. the email addresses found). */
.apaa-page .apaa-result {
	margin: 30px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--apaa-colour-border);
}

.apaa-page .apaa-result__count {
	margin: 0 0 10px;
	color: var(--apaa-colour-label);
	font-weight: bold;
}

.apaa-page .apaa-result__list {
	color: var(--apaa-colour-text);
	overflow-wrap: anywhere;
}

/* Small buttons (in tables) and buttons that delete. */
:is(.apaa-page, .apaa-ui) .apaa-button--small {
	padding: 3px 10px;
	font-size: 13px;
}

:is(.apaa-page, .apaa-ui) .apaa-button--danger {
	border-color: var(--apaa-colour-error);
	background-color: #fff;
	color: var(--apaa-colour-error);
}

:is(.apaa-page, .apaa-ui) .apaa-button--danger:hover,
:is(.apaa-page, .apaa-ui) .apaa-button--danger:focus {
	border-color: var(--apaa-colour-error);
	background-color: var(--apaa-colour-error);
	color: #fff;
}

.apaa-page .apaa-message--error {
	border-color: #ebccd1;
	background-color: #f2dede;
	color: var(--apaa-colour-error);
}

/* E.g. "Partly saved." or "Please check:". */
.apaa-page .apaa-message--warning {
	border-color: #faebcc;
	background-color: #fcf8e3;
	color: #8a6d3b;
}

/* E.g. "No changes.". */
.apaa-page .apaa-message--info {
	border-color: #bce8f1;
	background-color: #d9edf7;
	color: #31708f;
}

/* Lists (tables) with a button bar above. */
.apaa-page .apaa-toolbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin: 0 0 20px;
}

/*
 * Filter bar of every list (one layout for all, Kar Liang 09/11/2026): a grid filled in reading order - label, box,
 * label, box ... then any tick-box option, then the buttons (Search, Reset). Nothing is placed by counting positions,
 * so hidden fields added to the form (e.g. by the theme Live Preview) cannot move anything. A bar with two rows marks
 * the filter that starts row 2 with apaa-list-filters__field--new-row. On a phone: one filter per line (label beside
 * its box), options and buttons on lines of their own. From 768px: up to two filters per row, labels and boxes lined
 * up in columns, the option or the buttons at the end of the row. Each label sits close to its own box, with a wider
 * gap before the next label, so it is plain which box a label belongs to.
 */
.apaa-page .apaa-toolbar:has(.apaa-list-filters) {
	align-items: flex-end;
}

.apaa-page .apaa-list-filters {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: center;
	gap: 10px 12px;
	width: 100%;
	margin: 0 auto 0 0;
}

.apaa-page .apaa-list-filters__field {
	display: contents;
}

.apaa-page .apaa-list-filters__label {
	margin: 0;
	color: var(--apaa-colour-label);
	font-weight: bold;
}

.apaa-page .apaa-list-filters .apaa-input,
.apaa-page .apaa-list-filters .apaa-select {
	width: 100%;
	min-width: 0;
}

.apaa-page .apaa-list-filters__option,
.apaa-page .apaa-list-filters__buttons {
	grid-column: 1 / -1;
}

.apaa-page .apaa-list-filters__option {
	white-space: nowrap;
}

.apaa-page .apaa-list-filters__buttons {
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.apaa-page .apaa-list-filters {
		grid-template-columns: max-content minmax(160px, 220px) max-content minmax(140px, 200px) max-content;
		width: auto;
	}

	/* The second filter of a row: a wider gap before its label. */
	.apaa-page .apaa-list-filters__label {
		margin-left: 12px;
	}

	.apaa-page .apaa-list-filters__field:first-of-type > .apaa-list-filters__label,
	.apaa-page .apaa-list-filters__field--new-row > .apaa-list-filters__label {
		margin-left: 0;
	}

	/* Starting in column 1 sends a filter to the next row. */
	.apaa-page .apaa-list-filters__field--new-row > .apaa-list-filters__label {
		grid-column: 1;
	}

	.apaa-page .apaa-list-filters__option,
	.apaa-page .apaa-list-filters__buttons {
		grid-column: auto;
	}
}

.apaa-page .apaa-list-filters__reset {
	color: var(--apaa-colour-primary);
}

.apaa-page .apaa-table-wrap {
	overflow-x: auto;
}

.apaa-page .apaa-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background-color: #fff;
	font-size: var(--apaa-font-size);
}

.apaa-page .apaa-table th,
.apaa-page .apaa-table td {
	padding: 8px 10px;
	border: 1px solid var(--apaa-colour-border);
	color: var(--apaa-colour-text);
	text-align: left;
	vertical-align: middle;
}

.apaa-page .apaa-table th {
	background-color: #f2f2f2;
	font-weight: bold;
}

.apaa-page .apaa-table tbody tr:nth-child(even) td {
	background-color: #f9f9f9;
}

.apaa-page .apaa-table .apaa-table__muted td {
	color: #999;
}

/*
 * The Action column of every list (one rule for all, Kar Liang 09/11/2026): on the right, just as wide as its buttons
 * (Edit, Delete, on/off switch, or a choose-and-apply form), so the other columns get the room. On a phone the buttons
 * go one below the other (rule further down).
 */
.apaa-page .apaa-table .apaa-table__action-column {
	width: 1%;
	white-space: nowrap;
}

/* A column kept on one line, e.g. a date such as "12 Nov 2026". */
.apaa-page .apaa-table .apaa-table__nowrap {
	white-space: nowrap;
}

:is(.apaa-page, .apaa-ui) .apaa-table__actions > * {
	flex-shrink: 0;
	white-space: nowrap;
}

/*
 * Edit and Delete buttons: a pencil / bin picture before the word, drawn here (no image files, no theme or other
 * plugin), in the button's own colour. To show the words only, delete the "content" line of the first rule below.
 */
:is(.apaa-page, .apaa-ui) .apaa-button--edit::before,
:is(.apaa-page, .apaa-ui) .apaa-button--delete::before,
:is(.apaa-page, .apaa-ui) .apaa-button--view::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin: 0 5px 0 0;
	background-color: currentColor;
	vertical-align: -2px;
	-webkit-mask: var(--apaa-button-icon) center / contain no-repeat;
	mask: var(--apaa-button-icon) center / contain no-repeat;
}

:is(.apaa-page, .apaa-ui) .apaa-button--edit {
	--apaa-button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

:is(.apaa-page, .apaa-ui) .apaa-button--delete {
	--apaa-button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}

:is(.apaa-page, .apaa-ui) .apaa-button--view {
	--apaa-button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
}

/* A short first column (code or number): narrow, so the name column gets the room. */
.apaa-page .apaa-table .apaa-table__code-column {
	width: 110px;
}

:is(.apaa-page, .apaa-ui) .apaa-table__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
}

/* Every list on a phone (below 768px): the Action buttons one below the other, so the table fits the screen. */
@media (max-width: 767px) {
	:is(.apaa-page, .apaa-ui) .apaa-table__actions {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* On/off switch (a tick box shown as a slider). */
:is(.apaa-page, .apaa-ui) .apaa-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	margin: 0;
	cursor: pointer;
}

:is(.apaa-page, .apaa-ui) .apaa-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

:is(.apaa-page, .apaa-ui) .apaa-switch__slider {
	position: absolute;
	inset: 0;
	border-radius: 22px;
	background-color: #ccc;
	transition: background-color 0.2s;
}

:is(.apaa-page, .apaa-ui) .apaa-switch__slider::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #fff;
	transition: transform 0.2s;
}

:is(.apaa-page, .apaa-ui) .apaa-switch input:checked + .apaa-switch__slider {
	background-color: var(--apaa-colour-primary);
}

:is(.apaa-page, .apaa-ui) .apaa-switch input:checked + .apaa-switch__slider::before {
	transform: translateX(18px);
}

:is(.apaa-page, .apaa-ui) .apaa-switch input:focus-visible + .apaa-switch__slider {
	outline: 2px solid var(--apaa-colour-primary-dark);
	outline-offset: 2px;
}

/* An on/off switch in a form, with the word for its current position. */
:is(.apaa-page, .apaa-ui) .apaa-switch-field {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--apaa-colour-label);
	font-weight: normal;
	cursor: pointer;
}

:is(.apaa-page, .apaa-ui) .apaa-switch-field:has(input:checked) .apaa-switch-field__off,
:is(.apaa-page, .apaa-ui) .apaa-switch-field:not(:has(input:checked)) .apaa-switch-field__on {
	display: none;
}

/* Page numbers under a list. */
.apaa-page .apaa-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.apaa-page .apaa-pagination .page-numbers {
	display: inline-block;
	min-width: 32px;
	padding: 4px 8px;
	border: 1px solid var(--apaa-colour-border);
	border-radius: 4px;
	background-color: #fff;
	color: var(--apaa-colour-primary);
	text-align: center;
	text-decoration: none;
}

.apaa-page .apaa-pagination .page-numbers.current {
	border-color: var(--apaa-colour-primary);
	background-color: var(--apaa-colour-primary);
	color: #fff;
}

/* Pop-up forms (the browser's dialog box). */
.apaa-page .apaa-dialog {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	padding: 0;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
	color: var(--apaa-colour-text);
}

.apaa-page .apaa-dialog::backdrop {
	background-color: rgba(0, 0, 0, 0.45);
}

.apaa-page .apaa-dialog__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid var(--apaa-colour-border);
}

.apaa-page .apaa-dialog__title {
	margin: 0;
	color: var(--apaa-colour-heading);
	font-size: 18px;
	font-weight: bold;
}

.apaa-page .apaa-dialog__body {
	padding: 20px;
}

/* A second form in the same pop-up (e.g. Merge under Edit Topic): set apart by a line. */
.apaa-page .apaa-dialog__body--more {
	border-top: 1px solid var(--apaa-colour-border);
}

.apaa-page .apaa-dialog .apaa-input,
.apaa-page .apaa-dialog .apaa-select {
	max-width: none;
}

.apaa-page .apaa-dialog .apaa-actions {
	justify-content: flex-end;
	margin-top: 20px;
}

/*
 * Notes under a field (Kar Liang 04/11/2026): set apart from the parts of the form that are filled in - a soft tinted
 * box with a blue edge and an "i" mark. Notes that follow one another share one box. (Also inside a panel, whose own
 * paragraph spacing would otherwise win.)
 */
.apaa-page .apaa-field__hint,
.apaa-page .apaa-panel .apaa-field__hint {
	position: relative;
	max-width: 480px;
	margin: 8px 0 0;
	padding: 7px 12px 7px 34px;
	border-left: 3px solid #9cc3e6;
	border-radius: 0 6px 6px 0;
	background-color: #f2f7fb;
	color: #55636f;
	font-size: 13px;
	line-height: 1.45;
}

/*
 * A note about the whole page or list (not one field) takes the width of the page; a field's note stays as wide as the
 * field.
 */
.apaa-page .apaa-field__hint--page,
.apaa-page .apaa-field__hint.apaa-list-note {
	max-width: none;
}

.apaa-page .apaa-field__hint::before {
	content: "i";
	position: absolute;
	top: 8px;
	left: 10px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #9cc3e6;
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	line-height: 16px;
	text-align: center;
}

.apaa-page .apaa-field__hint + .apaa-field__hint,
.apaa-page .apaa-panel .apaa-field__hint + .apaa-field__hint {
	margin-top: 0;
	padding-top: 0;
	border-radius: 0 0 6px 0;
}

.apaa-page .apaa-field__hint + .apaa-field__hint::before {
	content: none;
}

.apaa-page .apaa-field__hint:has(+ .apaa-field__hint),
.apaa-page .apaa-panel .apaa-field__hint:has(+ .apaa-field__hint) {
	padding-bottom: 6px;
	border-radius: 0 6px 0 0;
}

.apaa-page .apaa-field__hint + .apaa-field__hint:has(+ .apaa-field__hint),
.apaa-page .apaa-panel .apaa-field__hint + .apaa-field__hint:has(+ .apaa-field__hint) {
	border-radius: 0;
}

.apaa-page .apaa-separator {
	margin: 20px 0;
	border: 0;
	border-top: 1px solid var(--apaa-colour-border);
}

/* "Not authorised" and other short notices. */
.apaa-page .apaa-notice {
	margin: 0 0 16px;
	color: var(--apaa-colour-error);
	text-align: center;
}

@media (max-width: 600px) {

	.apaa-page .apaa-panel {
		padding: 20px;
	}

	.apaa-page .apaa-page__title {
		font-size: 24px;
	}
}

/* Newsletters: a list of links (e.g. the newsletters for members) and a section heading. */
.apaa-page .apaa-section-title {
	margin: 0 0 15px;
	color: var(--apaa-colour-label);
	font-size: 20px;
	font-weight: bold;
}

.apaa-page .apaa-link-list {
	margin: 0;
	padding: 0 0 0 20px;
}

.apaa-page .apaa-link-list li {
	margin: 0 0 8px;
}

/* Manage Newsletters: the editor. The article picker: a search box and a fixed-width list that scrolls, long titles
   wrapping (a drop-down list grew as wide as the longest title). */
.apaa-page .apaa-article-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px 32px;
	align-items: start;
}

/* Wide screens: "Available articles" on the left, "Selected articles" on the right, same width, headings level. */
@media (min-width: 992px) {
	.apaa-page .apaa-article-columns {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.apaa-page .apaa-article-columns .apaa-article-list__label {
		margin-top: 0;
	}
}

.apaa-page .apaa-article-picker {
	margin: 0;
}

.apaa-page .apaa-article-picker__controls {
	margin: 0 0 8px;
}

/* The line under each heading (the options on the left, the hint on the right) has the same height, so the search box
   on the left is level with the first selected article on the right. Written to outrank the white panel's paragraph
   spacing (.apaa-panel p). */
.apaa-page .apaa-article-columns .apaa-article-columns__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 24px;
	min-height: 26px;
	margin: 0 0 8px;
}

.apaa-page .apaa-article-picker__search {
	max-width: none;
}

.apaa-page .apaa-article-picker__list {
	max-height: 420px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	border: 1px solid var(--apaa-colour-border);
	border-radius: 4px;
	background-color: #fff;
	list-style: none;
}

.apaa-page .apaa-article-picker__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-bottom: 1px solid #eee;
}

.apaa-page .apaa-article-picker__item[hidden] {
	display: none;
}

.apaa-page .apaa-article-picker__text {
	flex: 1;
	min-width: 0;
}

.apaa-page .apaa-article-picker__title {
	display: block;
	color: var(--apaa-colour-text);
	font-weight: bold;
	overflow-wrap: anywhere;
}

.apaa-page .apaa-article-picker__details {
	display: block;
	color: #777;
	font-size: 13px;
}

.apaa-page .apaa-article-picker__add {
	flex-shrink: 0;
}

.apaa-page .apaa-article-picker__empty {
	margin: 8px 0 0;
	color: #777;
}

.apaa-page .apaa-article-list__label {
	margin-top: 10px;
}

.apaa-page .apaa-article-columns__chosen .apaa-article-list {
	margin-top: 0;
}

/* A section that folds away (e.g. Header and Footer Content of the newsletter editor), closed until opened. */
.apaa-page .apaa-fold {
	padding: 10px 14px;
	border: 1px solid var(--apaa-colour-border);
	border-radius: 4px;
	background-color: #fff;
}

.apaa-page .apaa-fold__summary {
	color: var(--apaa-colour-label);
	font-weight: bold;
	cursor: pointer;
}

.apaa-page .apaa-fold__state {
	margin-left: 6px;
	color: #777;
	font-weight: normal;
}

.apaa-page .apaa-fold[open] .apaa-fold__summary {
	margin: 0 0 10px;
}

/* Manage Newsletters: the rest of the editor. */
.apaa-page .apaa-newsletter-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}

.apaa-page .apaa-newsletter-form__title {
	flex: 1 1 320px;
}

/* Manage Articles: Add / Edit Article - fields side by side on wide screens; the list's "Only my articles" and Delete. */
/* Add / Edit Article: the writing on the left (title, content, excerpt), boxes on the right (Publish, Author, Topics),
   as in WordPress's own editor. Up to 900px one column: title, Publish, Author, content, excerpt, Topics. */
.apaa-page .apaa-article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
}

/* The writing box reaches as far down as the boxes on the right. */
.apaa-page .apaa-article-layout__main {
	align-self: stretch;
	margin: 0;
}

/* The Excerpt shows 4 lines to start with (text boxes are otherwise one line high). */
.apaa-page .apaa-article-layout__excerpt textarea.apaa-input {
	height: auto;
	min-height: 6.5em;
	resize: vertical;
}

.apaa-page .apaa-article-layout__main .apaa-input {
	max-width: none;
}

.apaa-page .apaa-article-layout__side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.apaa-page .apaa-side-box {
	padding: 16px;
	border: 1px solid var(--apaa-colour-border);
	border-radius: 4px;
	background: #fafafa;
}

.apaa-page .apaa-side-box__title,
.apaa-page .apaa-side-box__heading {
	margin: 0 0 14px;
	padding: 0 0 6px;
	border-bottom: 2px solid #9cc3e6;
	color: var(--apaa-colour-label);
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.apaa-page .apaa-side-box__heading {
	margin: 0;
	padding: 0;
	border: 0;
}

.apaa-page .apaa-side-box__heading-note {
	font-weight: normal;
	letter-spacing: 0;
	text-transform: none;
}

.apaa-page .apaa-side-box .apaa-field {
	margin: 0 0 14px;
}

.apaa-page .apaa-side-box .apaa-input,
.apaa-page .apaa-side-box .apaa-select {
	max-width: none;
}

.apaa-page .apaa-side-box__fieldset {
	padding: 0;
	border: 0;
}

.apaa-page .apaa-side-box__fieldset .apaa-choice {
	display: flex;
	margin: 0 0 6px;
	font-weight: normal;
}

.apaa-page .apaa-side-box__hint {
	margin: 6px 0 0;
	color: var(--apaa-colour-label);
	font-size: 13px;
	line-height: 1.4;
}

.apaa-page .apaa-side-box__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--apaa-colour-border);
}

.apaa-page .apaa-side-box__label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

/* A small "?" that opens a short explanation. */
.apaa-page .apaa-help__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1px solid var(--apaa-colour-border);
	border-radius: 50%;
	background: #fff;
	color: var(--apaa-colour-label);
	font-size: 12px;
	font-weight: bold;
	list-style: none;
	cursor: pointer;
}

.apaa-page .apaa-help__button::-webkit-details-marker {
	display: none;
}

/*
 * The "?" stays where it is when opened: the explanation opens under its row, over what follows, instead of moving
 * the "?" to a line of its own.
 */
.apaa-page .apaa-side-box__label-row {
	position: relative;
}

.apaa-page .apaa-help .apaa-help__text {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 5;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.apaa-page .apaa-help__text {
	margin: 6px 0 4px;
	padding: 8px 10px;
	border-left: 3px solid #9cc3e6;
	background: #fff;
	color: var(--apaa-colour-text);
	font-size: 13px;
	font-weight: normal;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}

.apaa-page .apaa-topic-choices {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 12px;
}

.apaa-page .apaa-topic-choices .apaa-choice {
	font-weight: normal;
}

@media (max-width: 900px) {
	.apaa-page .apaa-article-layout {
		display: flex;
		flex-direction: column;
	}

	.apaa-page .apaa-article-layout__main,
	.apaa-page .apaa-article-layout__side {
		display: contents;
	}

	.apaa-page .apaa-article-layout__title {
		order: 1;
	}

	.apaa-page .apaa-article-layout__publish {
		order: 2;
	}

	.apaa-page .apaa-article-layout__author {
		order: 3;
	}

	.apaa-page .apaa-article-layout__content {
		order: 4;
	}

	.apaa-page .apaa-article-layout__excerpt {
		order: 5;
	}

	.apaa-page .apaa-article-layout__topics {
		order: 6;
	}
}

/* The member picker (includes/member-picker.php: article member authors, Assign Member History Event, Manage
   Newsletters): the chosen members, the search box and its results. */
.apaa-page .apaa-member-picker {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.apaa-page .apaa-member-picker__chosen,
.apaa-page .apaa-member-picker__results {
	margin: 0;
	padding: 0;
	list-style: none;
}

.apaa-page .apaa-member-picker__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 8px 8px 0;
	padding: 4px 4px 4px 12px;
	border: 1px solid var(--apaa-colour-border);
	border-radius: 16px;
	background: #f3f7fb;
}

.apaa-page .apaa-member-picker__remove,
.apaa-page .apaa-member-picker__pick {
	padding: 2px 10px;
	border: 1px solid var(--apaa-colour-border);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	font-size: 13px;
}

.apaa-page .apaa-member-picker__results {
	margin-top: 4px;
}

.apaa-page .apaa-member-picker__results li {
	margin: 0 0 4px;
}

.apaa-page .apaa-member-picker__pick {
	width: 100%;
	border-radius: 4px;
	text-align: left;
}

.apaa-page .apaa-member-picker__pick:hover,
.apaa-page .apaa-member-picker__pick:focus {
	border-color: var(--apaa-colour-primary);
}

.apaa-page .apaa-member-picker__none {
	color: var(--apaa-colour-label);
	font-size: 13px;
}

/* Article Topics screen: a topic's Rename / Merge / Delete forms, and the old tags' forms. */
.apaa-page .apaa-topic-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px 12px;
	margin: 0 0 16px;
}

.apaa-page .apaa-topic-form .apaa-field {
	margin: 0;
}

.apaa-page .apaa-topic-form .apaa-input,
.apaa-page .apaa-topic-form .apaa-select {
	width: auto;
	min-width: 240px;
}

.apaa-page .apaa-table .apaa-topic-form {
	flex-wrap: nowrap;
	margin: 0;
}

.apaa-page .apaa-table .apaa-topic-form .apaa-select {
	min-width: 200px;
}

.apaa-page .apaa-article__topics {
	color: var(--apaa-colour-label);
	font-size: 14px;
}

/* Manage Articles: the buttons beside the filters - Tidy Jurisdictions (editors only, while needed) on top, right;
   Article Topics and Add Article side by side below it. */
.apaa-page .apaa-article-actions {
	display: grid;
	grid-auto-flow: column;
	justify-content: end;
	align-items: end;
	gap: 10px 8px;
}

.apaa-page .apaa-article-actions__tidy {
	grid-row: 1;
	grid-column: 1 / span 2;
	justify-self: end;
}

.apaa-page .apaa-article-actions:has(.apaa-article-actions__tidy) > :not(.apaa-article-actions__tidy) {
	grid-row: 2;
}

/* A short note under a list (e.g. what article reporters see in Manage Articles). */
.apaa-page .apaa-list-note {
	margin: 12px 0 0;
}

.apaa-page .apaa-inline-form {
	display: inline;
	margin: 0;
}

.apaa-page .apaa-field__note {
	color: var(--apaa-colour-label);
	font-size: 13px;
}

/* An article's page: the newsletter it appeared in, "Author (Jurisdiction)", the text, and the copyright note. */
.apaa-page .apaa-article__newsletter {
	margin: 0 0 16px;
	padding: 6px 12px;
	background-color: #5ca3ea;
	text-align: right;
}

.apaa-page .apaa-article__newsletter a {
	color: #fff;
}

.apaa-page .apaa-article__byline {
	margin: 0 0 20px;
	color: var(--apaa-colour-label);
	font-style: italic;
}

.apaa-page .apaa-article__content img {
	max-width: 100%;
	height: auto;
}

.apaa-page .apaa-article__footer {
	margin: 30px 0 0;
	padding: 12px 16px;
	border-top: 1px solid var(--apaa-colour-border);
	color: var(--apaa-colour-label);
	font-size: 13px;
}

.apaa-page .apaa-newsletter-form__article-choice {
	display: flex;
	gap: 10px;
	margin: 0 0 10px;
}

.apaa-page .apaa-article-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.apaa-page .apaa-article-list__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	padding: 8px 12px;
	border: 1px solid var(--apaa-colour-border);
	border-radius: 4px;
	background-color: #fff;
	cursor: move;
}

.apaa-page .apaa-article-list__title {
	flex: 1;
	font-weight: bold;
}

.apaa-page .apaa-article-list__remove {
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--apaa-colour-error);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

/* A member picker in a light panel (chosen members above the search box): Manage Newsletters "Selected members
   only", Assign Member History Event. */
.apaa-page .apaa-member-panel {
	max-width: 520px;
	margin: 0 0 8px;
	padding: 12px 14px 4px;
	border: 1px solid var(--apaa-colour-border);
	border-radius: 6px;
	background: #f8fafc;
}

.apaa-page .apaa-member-panel[hidden] {
	display: none;
}

.apaa-page .apaa-member-panel .apaa-member-picker__item {
	background: #fff;
}

.apaa-page .apaa-member-panel .apaa-member-picker__search {
	margin-bottom: 8px;
}

/* Manage Newsletters, Sent To: the panel opens right under the two choices; the notes follow below it. */
.apaa-page .apaa-recipient-picker {
	margin: -8px 0 16px;
}

/* Manage Newsletters: the "Sending now" panel above the list - each newsletter being sent (Stop sending only as wide as
   the button), then the queue's controls once: Keep sending and Send next batch now, with what it is doing below. */
.apaa-page .apaa-sending {
	margin: 0 0 30px;
	padding: 20px;
	border: 1px solid var(--apaa-colour-border);
	border-radius: 4px;
	background-color: #fafafa;
}

/* Its table (the queue) lighter than the lists: no vertical lines or stripes, thin lines between rows, small capital
   headings in the label colour over a blue line. */
.apaa-page .apaa-sending .apaa-table {
	background-color: transparent;
}

.apaa-page .apaa-sending .apaa-table th,
.apaa-page .apaa-sending .apaa-table td {
	padding: 10px 12px;
	border-width: 0 0 1px;
	border-color: #e3e7eb;
}

.apaa-page .apaa-sending .apaa-table th {
	border-bottom: 2px solid #9cc3e6;
	background-color: transparent;
	color: var(--apaa-colour-label);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.apaa-page .apaa-sending .apaa-table tbody tr:nth-child(even) td {
	background-color: transparent;
}

.apaa-page .apaa-sending .apaa-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Its notes are not in a table cell: they may use the whole width of the box. */
.apaa-page .apaa-sending .apaa-field__hint {
	max-width: none;
}

/* "Stop sending" on one line: the narrow Action column widens to fit it. */
.apaa-page .apaa-sending .apaa-stop-sending {
	white-space: nowrap;
}

.apaa-page .apaa-sending__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 12px 0 0;
}

.apaa-page .apaa-sending__switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: normal;
	cursor: pointer;
}

.apaa-page .apaa-sending__status {
	margin: 8px 0 0;
}

/* A wide pop-up (the newsletter preview) showing a page in a frame. */
.apaa-page .apaa-dialog--wide {
	width: min(920px, calc(100vw - 32px));
}

.apaa-page .apaa-preview-frame {
	display: block;
	width: 100%;
	height: calc(100vh - 160px);
	border: 0;
	background-color: #fff;
}

.apaa-page .apaa-section-title--spaced {
	margin-top: 30px;
}

/* Buttons in two groups, e.g. the newsletter editor: editing on the left, sending on the right; on a narrow screen the
   second group goes below the first, under a line. */
.apaa-page .apaa-actions--split {
	justify-content: space-between;
	gap: 16px;
}

.apaa-page .apaa-actions__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.apaa-page .apaa-actions__group .apaa-field__hint {
	max-width: 360px;
	margin: 0;
}

@media (max-width: 767px) {
	.apaa-page .apaa-actions__group--send {
		width: 100%;
		padding-top: 16px;
		border-top: 1px solid var(--apaa-colour-border);
	}
}

/* Newsletter Bounces: the paste box (several notices) and the tick column of the result. */
.apaa-page .apaa-bounces-form__text {
	max-width: none;
	height: auto;
	min-height: 220px;
	font-family: Consolas, "Courier New", monospace;
	font-size: 13px;
	font-weight: normal;
}

.apaa-page .apaa-bounces-form__file {
	font-weight: normal;
}

.apaa-page .apaa-bounces-table td {
	font-weight: normal;
	overflow-wrap: anywhere;
}

/* An address is kept on one line on a wide screen; on a phone it may break rather than widen the page. */
@media (min-width: 768px) {
	.apaa-page .apaa-bounces-table .apaa-bounces-table__address {
		overflow-wrap: normal;
		white-space: nowrap;
	}
}

.apaa-page .apaa-bounces-table .apaa-bounces-table__tick {
	width: 1%;
	text-align: center;
	white-space: nowrap;
}

/* Tabs: a row of buttons, each showing its part of the page (apaa-core.js); the chosen one joins the part below. */
.apaa-page .apaa-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 10px 0 25px;
	border-bottom: 1px solid var(--apaa-colour-border);
}

.apaa-page .apaa-tabs__tab {
	margin: 0 0 -1px;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 4px 4px 0 0;
	background: none;
	color: var(--apaa-colour-primary);
	font: inherit;
	font-size: var(--apaa-font-size);
	font-weight: bold;
	cursor: pointer;
}

.apaa-page .apaa-tabs__tab:hover,
.apaa-page .apaa-tabs__tab:focus-visible {
	background-color: #f0f5fa;
	color: var(--apaa-colour-primary-dark);
}

.apaa-page .apaa-tabs__tab[aria-selected="true"] {
	border-color: var(--apaa-colour-border) var(--apaa-colour-border) var(--apaa-colour-panel);
	background-color: var(--apaa-colour-panel);
	color: var(--apaa-colour-text);
}

/* On a phone the tabs share one row, a long name taking two lines, rather than one tab dropping to a second row. */
@media (max-width: 600px) {
	.apaa-page .apaa-tabs {
		flex-wrap: nowrap;
		gap: 2px;
	}

	.apaa-page .apaa-tabs__tab {
		flex: 1 1 0;
		padding: 8px 6px;
		line-height: 1.3;
		text-align: center;
	}
}

/* Member form (Edit Member): two columns on a wide screen, one below the other on a phone. */
.apaa-page .apaa-member-form__columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 40px;
}

@media (min-width: 768px) {
	.apaa-page .apaa-member-form__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The four short details at the top (Member ID, Member Type, Recognised Group, Jurisdiction): two columns everywhere,
   lined up with the boxes below on a wide screen, closer together on a phone. */
.apaa-page .apaa-member-form__columns--summary {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
	.apaa-page .apaa-member-form__columns--summary {
		gap: 0 20px;
	}
}

/* The part above the tabs (Member ID, Member Type, Recognised Group, Jurisdiction): on a wide screen each label beside
   its value, so the form fits a monitor better (Kar Liang 03/11/2026); on a narrower screen the label stays above. */
@media (min-width: 992px) {
	.apaa-page .apaa-member-form__top .apaa-field {
		display: grid;
		grid-template-columns: 140px minmax(0, 1fr);
		align-items: center;
		gap: 0 12px;
		margin: 0 0 10px;
	}

	.apaa-page .apaa-member-form__top .apaa-field__label {
		margin: 0;
	}

	.apaa-page .apaa-member-form__top .apaa-field__text {
		padding: 0;
	}
}

/* A part of the member form for some choices only (e.g. one member type): no border of its own. Hidden means hidden,
   whatever display a class gives it. */
.apaa-page .apaa-member-form__part {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.apaa-page .apaa-member-form [hidden] {
	display: none !important;
}

/* The designations to tick: in columns, long names wrapping under their own tick box. */
/* Read down each column, then the next (up to three; one on a phone), as a list is read (Kar Liang 03/11/2026). */
.apaa-page .apaa-member-form__designations {
	column-width: 220px;
	column-count: 3;
	column-gap: 24px;
}

.apaa-page .apaa-member-form__designations .apaa-choice {
	display: flex;
	align-items: flex-start;
	margin: 0 0 10px;
	color: var(--apaa-colour-text);
	font-weight: normal;
	break-inside: avoid;
}

.apaa-page .apaa-member-form__designations .apaa-choice input {
	margin-top: 3px;
}

/* A list of tick boxes read down each column (e.g. a folder's document administrators and Access Groups). */
.apaa-page .apaa-choice-list {
	column-width: 220px;
	column-count: 3;
	column-gap: 24px;
}

.apaa-page .apaa-choice-list .apaa-choice {
	display: flex;
	align-items: flex-start;
	margin: 0 0 10px;
	color: var(--apaa-colour-text);
	font-weight: normal;
	break-inside: avoid;
}

.apaa-page .apaa-choice-list .apaa-choice input {
	margin-top: 3px;
}

/* One column only: names read straight down. */
.apaa-page .apaa-choice-list--single {
	column-count: 1;
}

/*
 * Add / Edit Folder (Kar Liang 04/11/2026): two columns from 768px - Parent Folder, Name, Owner and Document
 * Administrators on the left, Access Groups on the right; one below the other on a phone.
 */
@media (min-width: 768px) {
	.apaa-page .apaa-repo-folder-form__columns {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 40px;
	}
}

.apaa-page .apaa-member-form__when-column {
	width: 32%;
}

/* Manage Repository: where the list is (left of the toolbar, its buttons on the right). */
.apaa-page .apaa-breadcrumb {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin-right: auto;
}

.apaa-page .apaa-breadcrumb [aria-current="page"] {
	font-weight: bold;
}

.apaa-page .apaa-breadcrumb__separator {
	color: var(--apaa-colour-label);
}

.apaa-page .apaa-toolbar__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Manage Repository list: a small icon before each name; a row being dragged, and the folders it may be dropped on. */
.apaa-page .apaa-repo-table__icon {
	width: 20px;
	height: auto;
	margin-right: 6px;
	vertical-align: middle;
}

.apaa-page .apaa-repo-table__row[data-can-move="1"] {
	cursor: move;
}

.apaa-page .apaa-repo-table__row--drop-target td {
	background-color: #f0f5fa;
}

.apaa-page .apaa-repo-table__row--drop-hover td {
	background-color: #d9edf7;
	box-shadow: inset 0 0 0 1px var(--apaa-colour-primary);
}

.apaa-repo-table__row.ui-draggable-dragging {
	opacity: 0.8;
	background-color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Repository: the breadcrumb on its own line above the search box and buttons; the line saying what a search found. */
.apaa-page .apaa-repo-breadcrumb {
	margin: 0 0 16px;
}

.apaa-page .apaa-repo-search-summary {
	margin: 0 0 12px;
	color: var(--apaa-colour-label);
}

.apaa-page .apaa-repo-table__size {
	white-space: nowrap;
}

/* Repository on a phone (below 768px): Type, Size, Added, In folder and Owner give way to one line under the name, so
   the table fits the screen. */
.apaa-page .apaa-repo-table__phone {
	display: none;
	margin: 4px 0 0;
	color: var(--apaa-colour-label);
	font-size: 14px;
}

@media (max-width: 767px) {
	.apaa-page .apaa-repo-table .apaa-repo-table__wide {
		display: none;
	}

	.apaa-page .apaa-repo-table__phone {
		display: block;
	}
}

/* Repository document page: type, size and date on the left, the buttons on the right; then the document itself. */
.apaa-page .apaa-repo-document__toolbar {
	align-items: center;
}

.apaa-page .apaa-repo-document__details {
	margin: 0 auto 0 0;
	color: var(--apaa-colour-label);
}

.apaa-page .apaa-repo-document__frame {
	display: block;
	width: 100%;
	height: 80vh;
	min-height: 500px;
	border: 1px solid #ccc;
}

.apaa-page .apaa-repo-document__image {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid #ccc;
}

/* Members Directory on a phone (below 768px): Rec. Group, Type and Contact give way to the firm, address and telephone
   under the name, so the table fits the screen (the Action buttons go one below the other, as in every list). */
.apaa-page .apaa-member-list__phone {
	display: none;
	margin: 4px 0 0;
	color: var(--apaa-colour-label);
}

@media (max-width: 767px) {
	.apaa-page .apaa-member-list .apaa-member-list__wide {
		display: none;
	}

	.apaa-page .apaa-member-list__phone {
		display: block;
	}
}

/* Sort arrows in a column heading: the arrow of the order in use highlighted. */
.apaa-page .apaa-sort {
	display: inline-flex;
	gap: 2px;
	margin-left: 6px;
	vertical-align: middle;
}

.apaa-page .apaa-sort__link {
	color: var(--apaa-colour-label);
	font-size: 11px;
	line-height: 1;
	text-decoration: none;
	opacity: 0.45;
}

.apaa-page .apaa-sort__link:hover,
.apaa-page .apaa-sort__link:focus,
.apaa-page .apaa-sort__link--current {
	color: var(--apaa-colour-primary);
	text-decoration: none;
	opacity: 1;
}

/* Members Directory table: headings on one line (sort arrows beside the name), each row's text from the top. */
.apaa-page .apaa-member-list th {
	white-space: nowrap;
}

.apaa-page .apaa-member-list td {
	vertical-align: top;
}