/*
 * Standard components (2027 facelift), loaded on the main site after default.css.
 * See docs/design-system/proposal.md for the agreed values and /style-guide for every component.
 *
 * - Every class starts with .ds- so it never collides with the legacy .button/.btn families
 *   or with jQuery UI, which owns the .ui- prefix.
 * - Use the tokens from tokens.css, not hex values.
 * - default.css styles bare button, input, select and textarea elements globally. Until it moves
 *   into a cascade layer, these rules override every property it sets, and field selectors include
 *   the element (input.ds-field) so they win on specificity.
 */

/* Buttons */

.ds-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	box-sizing: border-box;
	width: auto;
	min-height: 36px;
	margin: 0;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	box-shadow: none;
	color: var(--color-on-primary);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ds-button:hover {
	border-color: var(--color-primary-hover);
	background: var(--color-primary-hover);
	color: var(--color-on-primary);
}

.ds-button:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

/* Secondary: white with a steel border, for the less important action and for "Add to bookshelf" */
.ds-button--secondary {
	background: var(--color-bg);
	color: var(--color-primary);
}

.ds-button--secondary:hover {
	border-color: var(--color-primary-hover);
	background: var(--color-bg-highlight);
	color: var(--color-primary-hover);
}

/* Link: looks like a text link, for "Cancel" and similar */
.ds-button--link {
	min-height: 0;
	padding: 0;
	border-color: transparent;
	background: transparent;
	color: var(--color-primary);
	font-weight: var(--font-weight-regular);
}

.ds-button--link:hover {
	border-color: transparent;
	background: transparent;
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* Destructive: red outline, filled red on hover */
.ds-button--danger {
	border-color: var(--color-error);
	background: var(--color-bg);
	color: var(--color-error);
}

.ds-button--danger:hover {
	border-color: var(--color-error);
	background: var(--color-error);
	color: var(--color-on-primary);
}

/* Destructive confirm: filled red, only for the confirming button in a "Delete ...?" modal */
.ds-button--danger-filled {
	border-color: var(--color-error);
	background: var(--color-error);
}

.ds-button--danger-filled:hover {
	border-color: var(--color-primary-hover);
	background: var(--color-primary-hover);
}

/* Promotional: pink, for marketing content only */
.ds-button--promo {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-on-accent);
}

.ds-button--promo:hover {
	border-color: var(--color-primary-hover);
	background: var(--color-primary-hover);
	color: var(--color-on-primary);
}

/* Icon-only: needs a visually hidden label (.ds-visually-hidden) for screen readers */
.ds-button--icon {
	width: 32px;
	min-height: 32px;
	height: 32px;
	padding: 0;
	border-color: transparent;
	background: transparent;
	color: var(--color-primary);
	font-size: var(--font-size-md);
}

.ds-button--icon:hover {
	border-color: var(--grey-100);
	background: var(--grey-100);
	color: var(--color-primary-hover);
}

.ds-button--small {
	min-height: 28px;
	padding: 0 var(--space-2);
	font-size: var(--font-size-xs);
}

.ds-button--large {
	min-height: 44px;
	padding: 0 var(--space-4);
	font-size: var(--font-size-md);
}

.ds-button:disabled,
.ds-button[aria-disabled="true"] {
	border-color: var(--grey-100);
	background: var(--grey-100);
	color: var(--grey-600);
	cursor: not-allowed;
}

.ds-button--link:disabled,
.ds-button--link[aria-disabled="true"],
.ds-button--icon:disabled,
.ds-button--icon[aria-disabled="true"] {
	border-color: transparent;
	background: transparent;
}

/* Loading: set aria-busy="true" while an action runs */
.ds-button[aria-busy="true"] {
	cursor: progress;
}

.ds-button[aria-busy="true"]::before {
	content: "";
	width: 12px;
	height: 12px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: var(--radius-full);
	animation: ds-spin .7s linear infinite;
}

@keyframes ds-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Split button: the main action plus a dropdown arrow, e.g. "Add to basket" */
.ds-split {
	display: inline-flex;
}

.ds-split > .ds-button:first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.ds-split > .ds-button:last-child {
	padding: 0 var(--space-2);
	border-left-color: rgba(255, 255, 255, 0.5);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.ds-split > .ds-button--secondary:last-child {
	margin-left: -1px;
	border-left-color: var(--color-primary);
}

.ds-button-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

/* Form fields */

.ds-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0 0 var(--space-4);
}

.ds-label {
	color: var(--color-text);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.ds-help {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.ds-error-message {
	display: flex;
	align-items: baseline;
	gap: var(--space-1);
	margin: 0;
	color: var(--color-error);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
}

input.ds-field,
select.ds-field,
textarea.ds-field {
	box-sizing: border-box;
	width: 100%;
	min-height: 36px;
	margin: 0;
	padding: 0 var(--space-2);
	border: 1px solid var(--color-border-field);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	box-shadow: none;
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-body);
	transition: border-color .15s ease;
}

textarea.ds-field {
	min-height: 80px;
	padding: var(--space-2);
	resize: vertical;
}

select.ds-field {
	appearance: none;
	padding-right: var(--space-5);
	background-image: var(--icon-chevron);
	background-position: right var(--space-2) center;
	background-repeat: no-repeat;
	cursor: pointer;
}

input.ds-field::placeholder,
textarea.ds-field::placeholder {
	color: var(--grey-600);
	opacity: 1;
}

input.ds-field:hover,
select.ds-field:hover,
textarea.ds-field:hover {
	border-color: var(--color-text);
}

input.ds-field:focus-visible,
select.ds-field:focus-visible,
textarea.ds-field:focus-visible {
	border-color: var(--color-primary);
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

input.ds-field[aria-invalid="true"],
select.ds-field[aria-invalid="true"],
textarea.ds-field[aria-invalid="true"] {
	border-color: var(--color-error);
	box-shadow: inset 0 0 0 1px var(--color-error);
}

input.ds-field:disabled,
select.ds-field:disabled,
textarea.ds-field:disabled {
	border-color: var(--grey-300);
	background-color: var(--grey-50);
	color: var(--grey-600);
	cursor: not-allowed;
}

/*
 * Searchable dropdown: Selectr, the site's one dropdown library, with customClass "ds-selectr"
 * (new Selectr(el, {customClass: 'ds-selectr'}), or SearchableSelect in React). Matches the text
 * field. Selectr without the class keeps its old look until its page is migrated.
 */
.ds-selectr {
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-body);
}

.ds-selectr .selectr-selected {
	min-height: 36px;
	padding: 7px var(--space-5) 7px var(--space-2);
	border: 1px solid var(--color-border-field);
	border-radius: var(--radius-sm);
	background: var(--color-surface) var(--icon-chevron) no-repeat right var(--space-2) center;
	transition: border-color .15s ease;
}

.ds-selectr .selectr-selected::before {
	display: none;
}

.ds-selectr .selectr-selected:hover {
	border-color: var(--color-text);
}

.ds-selectr .selectr-selected:focus-visible {
	border-color: var(--color-primary);
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

.ds-selectr.open .selectr-selected,
.ds-selectr.open.inverted .selectr-selected {
	border-color: var(--color-primary);
}

.ds-selectr .selectr-placeholder {
	color: var(--grey-600);
}

.ds-selectr .selectr-options-container,
.ds-selectr .selectr-notice {
	background-color: var(--color-surface);
}

.ds-selectr .selectr-options-container {
	border-color: transparent var(--color-primary) var(--color-primary);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	box-shadow: var(--shadow-md);
}

.ds-selectr.inverted .selectr-options-container {
	border-color: var(--color-primary) var(--color-primary) transparent;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.ds-selectr .selectr-input {
	width: calc(100% - var(--space-4));
	min-height: 36px;
	margin: var(--space-2);
	padding: 0 var(--space-5) 0 var(--space-2);
	border: 1px solid var(--color-border-field);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	box-shadow: none;
	color: var(--color-text);
	font: inherit;
}

.ds-selectr .selectr-input:focus-visible {
	border-color: var(--color-primary);
	outline: none;
}

.ds-selectr .selectr-option {
	padding: var(--space-1) var(--space-3);
}

.ds-selectr .selectr-option.selected {
	background-color: var(--grey-100);
	font-weight: var(--font-weight-semibold);
}

.ds-selectr .selectr-option.active {
	background-color: var(--color-bg-highlight);
	color: var(--color-text);
}

.ds-selectr .selectr-optgroup--label {
	margin-top: var(--space-1);
	padding: var(--space-1) var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
}

.ds-selectr .selectr-match {
	text-decoration: none;
	font-weight: var(--font-weight-bold);
}

.ds-selectr .selectr-notice {
	border-top-color: var(--color-border-subtle);
	color: var(--color-text-muted);
}

.ds-selectr .selectr-tag {
	padding: 2px 25px 2px var(--space-2);
	border-radius: var(--radius-sm);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-body);
}

.ds-selectr .selectr-tag-remove::before,
.ds-selectr .selectr-tag-remove::after {
	background-color: var(--color-on-primary);
}

/* Selectr's clear and remove controls are buttons, which default.css styles globally */
.ds-selectr .selectr-clear,
.ds-selectr .selectr-input-clear,
.ds-selectr .selectr-tag-remove,
.ds-selectr .selectr-clear:hover,
.ds-selectr .selectr-input-clear:hover,
.ds-selectr .selectr-tag-remove:hover {
	width: 20px;
	min-height: 0;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-transform: none;
}

.ds-selectr .selectr-clear::before,
.ds-selectr .selectr-clear::after,
.ds-selectr .selectr-input-clear::before,
.ds-selectr .selectr-input-clear::after {
	background-color: var(--color-text);
}

/* Text field with an icon inside, e.g. a date picker */
.ds-field-icon {
	position: relative;
}

.ds-field-icon > .ds-field {
	padding-right: var(--space-6);
}

.ds-field-icon > i {
	position: absolute;
	top: 50%;
	right: var(--space-2);
	color: var(--grey-600);
	pointer-events: none;
	transform: translateY(-50%);
}

/* Checkbox and radio: the browser's own controls, coloured steel */
.ds-check {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text);
	font-size: var(--font-size-sm);
	cursor: pointer;
}

.ds-check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--color-primary);
	cursor: pointer;
}

.ds-check input:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

/* A group of checkboxes or radios, with the question as its legend */
.ds-fieldset {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
	margin: 0 0 var(--space-4);
	padding: 0;
	border: 0;
}

.ds-fieldset legend {
	margin-bottom: var(--space-1);
	padding: 0;
	color: var(--color-text);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

/* Tables: grey header, striped rows, grey hover, light blue with a steel edge when selected */

/* Wrap every table so it scrolls sideways on small screens */
.ds-table-wrap {
	overflow-x: auto;
}

.ds-table {
	width: 100%;
	border-collapse: collapse;
	color: var(--color-text);
	font-size: var(--font-size-sm);
}

.ds-table th {
	padding: var(--space-2);
	border-bottom: 1px solid var(--color-border);
	background: var(--grey-100);
	font-weight: var(--font-weight-semibold);
	text-align: left;
	white-space: nowrap;
}

.ds-table td {
	padding: var(--space-2);
	border-bottom: 1px solid var(--color-border-subtle);
	vertical-align: middle;
}

.ds-table tbody tr:nth-child(even) {
	background: var(--grey-50);
}

.ds-table tbody tr:hover {
	background: var(--grey-100);
}

.ds-table tbody tr.is-selected {
	background: var(--color-bg-highlight);
}

.ds-table tbody tr.is-selected > :first-child {
	box-shadow: inset 3px 0 0 var(--color-primary);
}

.ds-table .ds-table__check {
	width: 1%;
}

.ds-table .ds-table__actions {
	width: 1%;
	text-align: right;
	white-space: nowrap;
}

.ds-table .ds-table__number {
	text-align: right;
}

/* Sortable column: a button inside the th, which carries aria-sort */
.ds-table__sort {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-transform: none;
	cursor: pointer;
}

.ds-table__sort:hover {
	background: transparent;
	color: var(--color-primary);
}

.ds-table__sort:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

.ds-table__sort i {
	color: var(--grey-600);
}

.ds-table--compact th,
.ds-table--compact td {
	padding: var(--space-1) var(--space-2);
}

/* Tabs: filled, steel when active */

.ds-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	border-bottom: 2px solid var(--color-primary);
}

.ds-tab {
	width: auto;
	margin: 0;
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	background: var(--grey-100);
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

.ds-tab:hover {
	background: var(--grey-200);
	color: var(--color-text);
}

.ds-tab[aria-selected="true"] {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.ds-tab:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

.ds-tab-panel {
	padding: var(--space-4) 0;
}

/* Pagination */

.ds-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-pagination a,
.ds-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 32px;
	height: 32px;
	padding: 0 var(--space-1);
	border-radius: var(--radius-full);
	color: var(--color-primary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.ds-pagination a:hover {
	background: var(--grey-100);
	color: var(--color-primary-hover);
}

.ds-pagination a:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

.ds-pagination [aria-current="page"] {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.ds-pagination .ds-pagination__gap {
	color: var(--color-text-muted);
}

/* Breadcrumbs */

.ds-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	list-style: none;
}

.ds-breadcrumbs li + li::before {
	content: "/";
	margin-right: var(--space-1);
	color: var(--grey-500);
}

.ds-breadcrumbs a {
	color: var(--color-primary);
	text-decoration: none;
}

.ds-breadcrumbs a:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* Alerts: light tint, coloured border and icon, navy text */

.ds-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	box-sizing: border-box;
	padding: var(--space-3);
	border: 1px solid;
	border-left-width: 4px;
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-body);
}

.ds-alert__icon {
	flex: none;
	font-size: var(--font-size-md);
	line-height: inherit;
}

.ds-alert__body {
	flex: 1;
}

.ds-alert__title {
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
}

.ds-alert__body p {
	margin: 0;
}

.ds-alert--info {
	border-color: var(--color-info);
	background: var(--color-info-bg);
}

.ds-alert--info .ds-alert__icon {
	color: var(--color-info);
}

.ds-alert--success {
	border-color: var(--color-success);
	background: var(--color-success-bg);
}

.ds-alert--success .ds-alert__icon {
	color: var(--color-success);
}

/* Yellow is too light for an icon on white, so the warning icon is navy on a yellow border */
.ds-alert--warning {
	border-color: var(--color-warning);
	background: var(--color-warning-bg);
}

.ds-alert--warning .ds-alert__icon {
	color: var(--color-text);
}

.ds-alert--error {
	border-color: var(--color-error);
	background: var(--color-error-bg);
}

.ds-alert--error .ds-alert__icon {
	color: var(--color-error);
}

/* Toast: an alert that pops up over the page */
.ds-alert--toast {
	max-width: 400px;
	box-shadow: var(--shadow-md);
}

.ds-alert .ds-button--icon {
	flex: none;
	width: 24px;
	min-height: 24px;
	height: 24px;
	margin: -2px 0 0;
	color: var(--color-text);
	font-size: var(--font-size-sm);
}

/* Modal: a native <dialog>, opened with showModal() */

dialog.ds-modal {
	box-sizing: border-box;
	width: calc(100% - var(--space-6));
	max-width: 520px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-md);
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--font-size-sm);
}

dialog.ds-modal::backdrop {
	background: var(--color-overlay);
}

.ds-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--color-border-subtle);
}

.ds-modal__title {
	margin: 0;
	color: var(--color-text);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
}

.ds-modal__body {
	padding: var(--space-4);
	line-height: var(--line-height-body);
}

.ds-modal__body p {
	margin: 0 0 var(--space-2);
}

.ds-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border-top: 1px solid var(--color-border-subtle);
}

/*
 * Theme toggle: System, Light or Dark, as a radio group (assets/js/theme.js does the switching).
 * The radios are invisible over their labels, so they keep keyboard and screen reader support.
 * Add ds-theme-toggle--compact to show icons only.
 */
.ds-theme-toggle {
	display: inline-flex;
	gap: 2px;
	margin: 0;
	padding: 2px;
	border: 1px solid var(--color-border-field);
	border-radius: var(--radius-full);
	background: var(--color-surface);
}

.ds-theme-toggle label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 4px var(--space-2);
	border-radius: var(--radius-full);
	color: var(--color-text-muted);
	font-family: var(--font-family);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-body);
	cursor: pointer;
}

.ds-theme-toggle input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ds-theme-toggle label:hover {
	color: var(--color-text);
}

.ds-theme-toggle label:has(input:checked) {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.ds-theme-toggle label:has(input:focus-visible) {
	outline: var(--focus-ring);
	outline-offset: 1px;
}

/* Set by theme.js for the moment the theme changes, so colours switch instantly */
[data-theme-switching],
[data-theme-switching] *,
[data-theme-switching] *::before,
[data-theme-switching] *::after {
	transition: none !important;
}

.ds-theme-toggle--compact label span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Headings and text */

.ds-page-title {
	margin: 0 0 var(--space-4);
	color: var(--color-title);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
}

.ds-heading {
	margin: 0 0 var(--space-3);
	color: var(--color-text);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-heading);
}

/* Secondary headline: Light 300, never below 20px */
.ds-heading--light {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-light);
}

.ds-text-muted {
	color: var(--color-text-muted);
}

.ds-link {
	color: var(--color-primary);
	text-decoration: none;
}

.ds-link:hover {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

.ds-link:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

.ds-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}