/*
 * Ferndale Intranet: Anchor Dashboard 1.4.0 (plugin group "anchor-dashboard").
 *
 * Loads after the plugin's stylesheet (anchor-dashboard-frontend), only on
 * pages with [anchor_dashboard] (inc/plugins/anchor-dashboard.php). Role
 * tokens only, so one sheet serves both designs:
 *   - Both versions: plain white cards (1px border, soft shadow, 12px
 *     corners) on a light page, so the links read first. The coloured top
 *     borders were removed after the administrator's feedback that the old
 *     intranet felt cleaner (9 Oct 2026).
 *
 * Rules (DESIGN-BRIEF §3):
 *   - Selectors are at least (0,2,1): "body .anchor-dashboard …" for the
 *     dashboard, "body #ad-custom-link-modal …" for the modal (the plugin's
 *     own ID; the JS moves it to <body>) and "body .ad-toast[class*=…]" for
 *     the toast (also in <body>).
 *   - !important appears only against the plugin's own !important (the
 *     modal buttons).
 *   - Layout mechanics are left alone: the JS masonry (inline position, left,
 *     top, width and grid height; the grid gap it reads), the link-menu
 *     popup's position and transform, the visibility mechanisms of the chip
 *     drop-down and the modal, tooltip geometry and the cards' stacking.
 *     Cards get no margins, no transitions and no overflow clipping.
 */

/* ------------------------------------------------------------------
 * 1. Token bridge. The plugin's colours come from --ad-* variables; map
 *    them to role tokens. The modal and the toast live in <body>, outside
 *    .anchor-dashboard, so they get the same map.
 * ------------------------------------------------------------------ */
body .entry-content .anchor-dashboard,
body #ad-custom-link-modal,
body .ad-toast[class*="ad-toast--"] {
	--ad-text-primary: var(--fi-text);
	--ad-text-secondary: var(--fi-muted);
	--ad-text-muted: var(--fi-muted);     /* Was #9ca3af (2.54:1). */
	--ad-border-color: var(--fi-border);  /* Dividers only; controls use --fi-control-border. */
	--ad-background-page: var(--fi-surface);
	--ad-primary-color: var(--fi-primary);
	--ad-primary-hover: var(--fi-primary-hover);
	--ad-accent-color: var(--fi-primary);
	--ad-danger-color: var(--fi-danger);
	--ad-danger-hover: var(--fi-danger-hover);
	--ad-success-color: var(--fi-success);
	--ad-transition-fast: var(--fi-duration) ease;
	--ad-transition-normal: 0.2s ease;
}

/* The plugin sets a system font stack on its root: use the theme's. */
body .entry-content .anchor-dashboard {
	color: var(--fi-text);
	font-family: var(--fi-font);
	line-height: 1.5;
}

/* The plugin's "margin: 0 auto" cancels the content flow gap (content.css),
 * so on /dashboard/ (no Spacer block) the cards touched the search bar.
 * A Spacer block before it still sets the gap on its own. */
body .entry-content > * + .anchor-dashboard {
	margin-top: 1.25rem;
}

body .entry-content > .wp-block-spacer + .anchor-dashboard {
	margin-top: 0;
}

/* The admin settings are inline on .anchor-dashboard, so the card look is
 * redefined one level down (they inherit). Icon size, label size, tile
 * spacing and columns stay under the admin's control. */
body .anchor-dashboard .ad-sections-grid {
	--ad-card-background: var(--fi-card-bg);
	--ad-card-border-radius: var(--fi-radius);
	--ad-card-shadow: var(--fi-shadow-sm);
	--ad-card-padding: clamp(0.875rem, 0.75rem + 0.4vw, 1.125rem);
}

/* ------------------------------------------------------------------
 * 2. Section cards: plain and quiet (12px corners, 1px border).
 * ------------------------------------------------------------------ */
/* min-width: 0: a grid item, so a long chip label must not widen the
 * one-column 1fr track on phones (main clips it); the label's ellipsis
 * takes over. The masonry above 768px sets an inline width anyway. */
body .anchor-dashboard .ad-section-card {
	min-width: 0;
	padding: var(--ad-card-padding);
	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);
}

body .anchor-dashboard .ad-section-card__header {
	gap: 0.75rem;
	min-height: 2.25rem;
	margin-bottom: 0.5rem;
}

/* Card titles in the interface font in both versions: labels, not headlines. */
body .anchor-dashboard .ad-section-card__title {
	margin: 0;
	padding: 0;
	color: var(--fi-heading);
	font-family: var(--fi-font);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

body .anchor-dashboard .ad-section-card__description {
	margin: -0.375rem 0 0.75rem;
	color: var(--fi-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

/* Empty states ("No custom links yet", "No tasks yet"): a quiet panel. */
body .anchor-dashboard .ad-section-card__empty {
	margin: 0;
	padding: 1.125rem 1rem;
	border: 1px dashed var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-surface);
	color: var(--fi-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
	text-align: center;
}

/* Help link (an icon-only link in some section headers). */
body .anchor-dashboard .ad-section-help-link {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	color: var(--fi-muted);
	text-decoration: none;
}

body .anchor-dashboard .ad-section-help-link:hover {
	background-color: var(--fi-tint);
	color: var(--fi-primary);
}

/* ------------------------------------------------------------------
 * 3. Link tiles (plain links and the buttons that open a sub-menu).
 * ------------------------------------------------------------------ */

/* The admin's column counts (desktop, tablet up to 1024px, mobile up to
 * 480px: the plugin's breakpoints) are a maximum, with a 5.5rem floor per
 * tile (48px icon, padding, label). Fixed counts pushed tiles up to 89px
 * out of the two-column masonry cards between 769px and about 1100px, and
 * at 481px. The 0.5px keeps rounding from dropping a column. */
body .anchor-dashboard .ad-links-grid {
	--fi-anchor-cols: var(--ad-grid-cols-desktop);
	grid-template-columns: repeat(auto-fill, minmax(max(5.5rem, calc((100% - (var(--fi-anchor-cols) - 1) * var(--ad-tile-spacing)) / var(--fi-anchor-cols) - 0.5px)), 1fr));
}

@media (max-width: 1024px) {
	body .anchor-dashboard .ad-links-grid {
		--fi-anchor-cols: var(--ad-grid-cols-tablet);
	}
}

@media (max-width: 480px) {
	body .anchor-dashboard .ad-links-grid {
		--fi-anchor-cols: var(--ad-grid-cols-mobile);
	}
}

body .anchor-dashboard .ad-link-tile {
	border-radius: var(--fi-radius);
	color: var(--fi-text);
	text-decoration: none;
}

body .anchor-dashboard .ad-link-tile:hover,
body .anchor-dashboard .ad-link-menu__trigger[aria-expanded="true"] {
	background-color: var(--fi-tint);
	color: var(--fi-text);
	text-decoration: none;
}

body .anchor-dashboard .ad-link-tile:focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 0;
	background-color: var(--fi-tint);
}

body .anchor-dashboard .ad-link-tile__label {
	color: var(--fi-text);
	font-weight: 600;
	line-height: 1.3;
}

body .anchor-dashboard .ad-link-tile__icon-placeholder {
	border-radius: var(--fi-radius);
	background: var(--fi-tint);
	color: var(--fi-primary);
}

body .anchor-dashboard .ad-link-menu__chevron {
	color: var(--fi-muted);
}

/* Tooltips (CSS only, from data-tooltip): colours and type only. They also
 * show on keyboard focus (the plugin shows them on hover only), but not
 * while the tile's menu is open. Escape dismisses them (WCAG 1.4.13): the
 * shim sets data-fi-tip="off" until focus (or the pointer) leaves. */
body .anchor-dashboard .ad-has-tooltip::after {
	border-radius: var(--fi-radius-sm);
	background: var(--fi-primary);
	color: var(--fi-on-primary);
	font-family: var(--fi-font);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
	box-shadow: var(--fi-shadow);
}

body .anchor-dashboard .ad-has-tooltip::before {
	border-top-color: var(--fi-primary);
}

body .anchor-dashboard .ad-has-tooltip:not([aria-expanded="true"], [data-fi-tip="off"]):focus-visible::after,
body .anchor-dashboard .ad-has-tooltip:not([aria-expanded="true"], [data-fi-tip="off"]):focus-visible::before {
	opacity: 1;
	visibility: visible;
}

/* Dismissed with Escape (also the plugin's hover tooltip). */
body .anchor-dashboard .ad-has-tooltip[data-fi-tip="off"]::after,
body .anchor-dashboard .ad-has-tooltip[data-fi-tip="off"]::before {
	opacity: 0;
	visibility: hidden;
}

/* Sub-menu popup (position, transform, margin and [hidden] stay the plugin's). */
body .anchor-dashboard .ad-link-menu__popup {
	padding: 0.375rem;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	box-shadow: var(--fi-shadow-lg);
}

body .anchor-dashboard .ad-link-menu__item {
	min-height: 2.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--fi-radius-sm);
	color: var(--fi-text);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

body .anchor-dashboard .ad-link-menu__item:hover,
body .anchor-dashboard .ad-link-menu__item:focus-visible {
	background: var(--fi-tint);
	color: var(--fi-text);
}

body .anchor-dashboard .ad-link-menu__item:focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: -3px;
}

body .anchor-dashboard .ad-link-menu__external {
	color: var(--fi-muted);
}

/* ------------------------------------------------------------------
 * 4. Custom links: each chip is one pill (link + options button).
 *    Every chip rule skips the drag placeholder, which shares the class.
 * ------------------------------------------------------------------ */
body .anchor-dashboard .ad-custom-links-list {
	gap: 0.5rem;
}

body .anchor-dashboard .ad-link-chip:not(.ad-link-chip-drop-placeholder) {
	max-width: 100%;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius-pill);
	background: var(--fi-surface);
	transition: background-color var(--fi-duration) ease, border-color var(--fi-duration) ease;
}

body .anchor-dashboard .ad-link-chip:not(.ad-link-chip-drop-placeholder):hover {
	border-color: var(--fi-control-border);
	background: var(--fi-tint);
}

body .anchor-dashboard .ad-link-chip__link {
	min-width: 0;
	min-height: 2.5rem;
	padding: 0.375rem 0.375rem 0.375rem 0.75rem;
	border-radius: var(--fi-radius-pill) 0 0 var(--fi-radius-pill);
	background: transparent;
	color: var(--fi-text);
	font-size: 0.875rem;
	text-decoration: none;
}

body .anchor-dashboard .ad-link-chip__link:hover {
	background: transparent;
	color: var(--fi-text);
	text-decoration: none;
}

body .anchor-dashboard .ad-link-chip__label {
	min-width: 0;
	max-width: 15rem;
	overflow: hidden;
	font-weight: 600;
	line-height: 1.3;
	text-overflow: ellipsis;
}

body .anchor-dashboard .ad-link-chip__icon {
	border-radius: 4px;
}

/* The fallback favicon is an indigo SVG <img> that CSS can't recolour, so
 * its bitmap is moved out of view and the box is painted as a globe
 * (Phosphor "globe-hemisphere-east", MIT) in the design's primary colour. */
body .anchor-dashboard .ad-link-chip__icon[src$="default-favicon.svg"] {
	object-position: -99em 0;
	border-radius: 0;
	background-color: var(--fi-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,16a87.5,87.5,0,0,1,48,14.28V74L153.83,99.74,122.36,104l-.31-.22L102.38,90.92A16,16,0,0,0,79.87,95.1L58.93,126.4a16,16,0,0,0-2.7,8.81L56,171.44l-3.27,2.15A88,88,0,0,1,128,40ZM62.29,186.47l2.52-1.65A16,16,0,0,0,72,171.53l.21-36.23L93.17,104a3.62,3.62,0,0,0,.32.22l19.67,12.87a15.94,15.94,0,0,0,11.35,2.77L156,115.59a16,16,0,0,0,10-5.41l22.17-25.76A16,16,0,0,0,192,74V67.67A87.87,87.87,0,0,1,211.77,155l-16.14-14.76a16,16,0,0,0-16.93-3l-30.46,12.65a16.08,16.08,0,0,0-9.68,12.45l-2.39,16.19a16,16,0,0,0,11.77,17.81L169.4,202l2.36,2.37A87.88,87.88,0,0,1,62.29,186.47ZM185,195l-4.3-4.31a16,16,0,0,0-7.26-4.18L152,180.85l2.39-16.19L184.84,152,205,170.48A88.43,88.43,0,0,1,185,195Z'/%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' fill='black'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,16a87.5,87.5,0,0,1,48,14.28V74L153.83,99.74,122.36,104l-.31-.22L102.38,90.92A16,16,0,0,0,79.87,95.1L58.93,126.4a16,16,0,0,0-2.7,8.81L56,171.44l-3.27,2.15A88,88,0,0,1,128,40ZM62.29,186.47l2.52-1.65A16,16,0,0,0,72,171.53l.21-36.23L93.17,104a3.62,3.62,0,0,0,.32.22l19.67,12.87a15.94,15.94,0,0,0,11.35,2.77L156,115.59a16,16,0,0,0,10-5.41l22.17-25.76A16,16,0,0,0,192,74V67.67A87.87,87.87,0,0,1,211.77,155l-16.14-14.76a16,16,0,0,0-16.93-3l-30.46,12.65a16.08,16.08,0,0,0-9.68,12.45l-2.39,16.19a16,16,0,0,0,11.77,17.81L169.4,202l2.36,2.37A87.88,87.88,0,0,1,62.29,186.47ZM185,195l-4.3-4.31a16,16,0,0,0-7.26-4.18L152,180.85l2.39-16.19L184.84,152,205,170.48A88.43,88.43,0,0,1,185,195Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body .anchor-dashboard .ad-link-chip__icon--placeholder {
	background: var(--fi-tint);
	color: var(--fi-primary);
}

/* The options (kebab) button: the right-hand end of the pill. */
body .anchor-dashboard .ad-link-chip__menu-trigger {
	width: 2rem;
	min-height: 2.5rem;
	margin: 0;
	border-radius: 0 var(--fi-radius-pill) var(--fi-radius-pill) 0;
	background: transparent;
	color: var(--fi-muted);
}

body .anchor-dashboard .ad-link-chip__menu-trigger:hover,
body .anchor-dashboard .ad-link-chip__menu-trigger[aria-expanded="true"] {
	background: var(--fi-surface-2);
	color: var(--fi-primary);
}

body .anchor-dashboard .ad-link-chip__link:focus-visible,
body .anchor-dashboard .ad-link-chip__menu-trigger:focus-visible {
	position: relative;
	z-index: 1;
	outline: 3px solid var(--fi-focus);
	outline-offset: 0;
}

/* Options drop-down (its aria-hidden opacity and visibility stay the plugin's). */
body .anchor-dashboard .ad-link-chip__dropdown {
	min-width: 9rem;
	padding: 0.375rem;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	box-shadow: var(--fi-shadow-lg);
}

body .anchor-dashboard .ad-link-chip__dropdown-item {
	min-height: 2.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--fi-radius-sm);
	color: var(--fi-text);
	font-family: var(--fi-font);
	font-size: 0.875rem;
	font-weight: 600;
}

body .anchor-dashboard .ad-link-chip__dropdown-item:hover {
	background: var(--fi-tint);
	color: var(--fi-primary);
}

body .anchor-dashboard .ad-link-chip__dropdown-item--danger,
body .anchor-dashboard .ad-link-chip__dropdown-item--danger:hover {
	color: var(--fi-danger);
}

body .anchor-dashboard .ad-link-chip__dropdown-item--danger:hover {
	background: var(--fi-danger-tint);
}

body .anchor-dashboard .ad-link-chip__dropdown-item:focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: -3px;
}

/* Drag and drop (colours only). */
body .anchor-dashboard .ad-link-chip-drop-placeholder {
	border-color: var(--fi-focus);
	background: var(--fi-tint);
}

/* "Add custom link" (+) in the card header. */
body .anchor-dashboard .ad-add-link-btn {
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid transparent;
	border-radius: var(--fi-radius-control);
	background: var(--fi-tint);
	color: var(--fi-primary);
}

body .anchor-dashboard .ad-add-link-btn:hover {
	border-color: var(--fi-primary);
	background: var(--fi-primary);
	color: var(--fi-on-primary);
}

/* ------------------------------------------------------------------
 * 5. Tasks.
 * ------------------------------------------------------------------ */

/* "3 tasks": a pill like the week badge in the greeting band. */
body .anchor-dashboard .ad-tasks-count {
	flex: none;
	padding: 0.125rem 0.625rem;
	border-radius: var(--fi-radius-pill);
	background: var(--fi-accent);
	color: var(--fi-on-accent);
	font-size: 0.8125rem;
	font-weight: 750;
	line-height: 1.5;
	white-space: nowrap;
}

body .anchor-dashboard .ad-tasks-add {
	margin-bottom: 0.5rem;
}

body .anchor-dashboard .ad-task-add-form {
	gap: 0.5rem;
}

/* The task field and the modal fields follow the theme's form-control spec
 * (04 §3 row 6). 1rem text, so phones don't zoom in on focus. */
body .anchor-dashboard .ad-task-add-input,
body #ad-custom-link-modal .ad-form-input {
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--fi-control-border);
	border-radius: 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;
}

body .anchor-dashboard .ad-task-add-input::placeholder,
body #ad-custom-link-modal .ad-form-input::placeholder {
	color: var(--fi-placeholder);
	opacity: 1;
}

body .anchor-dashboard .ad-task-add-input:focus,
body #ad-custom-link-modal .ad-form-input:focus {
	border-color: var(--fi-primary);
	box-shadow: none;
}

body .anchor-dashboard .ad-task-add-input:focus-visible,
body #ad-custom-link-modal .ad-form-input:focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 1px;
}

body .anchor-dashboard .ad-task-add-btn {
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: var(--fi-radius-control);
	background: var(--fi-primary);
	color: var(--fi-on-primary);
}

body .anchor-dashboard .ad-task-add-btn:hover {
	background: var(--fi-primary-hover);
	color: var(--fi-on-primary);
}

body .anchor-dashboard .ad-task-item {
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--fi-border);
}

body .anchor-dashboard .ad-task-item:last-child {
	border-bottom: 0;
}

body .anchor-dashboard .ad-task-item__title {
	min-width: 0;
	color: var(--fi-text);
	font-size: 0.9375rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

body .anchor-dashboard .ad-task-item--completed .ad-task-item__title {
	color: var(--fi-muted);
	text-decoration: line-through;
}

body .anchor-dashboard .ad-task-item__due-date {
	flex: none;
	color: var(--fi-muted);
	font-size: 0.8125rem;
}

/* The round checkbox (the real input is visually hidden by the plugin).
 * A larger hit area around the 22px circle. */
body .anchor-dashboard .ad-task-checkbox {
	flex: none;
	margin: -0.3125rem;
	padding: 0.3125rem;
}

body .anchor-dashboard .ad-task-checkbox__custom {
	width: 1.375rem;
	height: 1.375rem;
	border: 2px solid var(--fi-control-border);
	background: var(--fi-control-bg);
	color: transparent;
}

body .anchor-dashboard .ad-task-checkbox:hover .ad-task-checkbox__custom {
	border-color: var(--fi-primary);
}

/* Done: fern green with a white tick (6.4:1). */
body .anchor-dashboard .ad-task-checkbox__input:checked + .ad-task-checkbox__custom {
	border-color: var(--fi-success);
	background: var(--fi-success);
	color: var(--fi-on-primary);
}

body .anchor-dashboard .ad-task-checkbox__input:focus + .ad-task-checkbox__custom {
	box-shadow: none;
}

body .anchor-dashboard .ad-task-checkbox__input:focus-visible + .ad-task-checkbox__custom {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

/* Delete (x): the plugin shows it on row hover only. Also show it when the
 * row has keyboard focus, and always on touch screens. */
body .anchor-dashboard .ad-task-item__delete {
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: var(--fi-radius-sm);
	background: transparent;
	color: var(--fi-muted);
}

body .anchor-dashboard .ad-task-item:focus-within .ad-task-item__delete {
	opacity: 1;
}

body .anchor-dashboard .ad-task-item__delete:hover {
	background: var(--fi-danger-tint);
	color: var(--fi-danger);
}

@media (hover: none) {
	body .anchor-dashboard .ad-task-item__delete {
		opacity: 1;
	}
}

/* Completed tasks (a disclosure under the list). */
body .anchor-dashboard .ad-tasks-completed {
	margin-top: 0.5rem;
	padding-top: 0.25rem;
	border-top-color: var(--fi-border);
}

body .anchor-dashboard .ad-tasks-completed-toggle {
	min-height: 2.5rem;
	padding: 0.5rem 0.25rem;
	border-radius: var(--fi-radius-sm);
	background: transparent;
	color: var(--fi-muted);
	font-family: var(--fi-font);
	font-size: 0.875rem;
	font-weight: 700;
}

body .anchor-dashboard .ad-tasks-completed-toggle:hover {
	background: transparent;
	color: var(--fi-primary);
}

body .anchor-dashboard .ad-tasks-completed-count {
	color: inherit;
	font-weight: 600;
}

/* One focus ring for the dashboard's remaining buttons and links. */
body .anchor-dashboard :is(.ad-section-help-link, .ad-add-link-btn, .ad-task-add-btn, .ad-task-item__delete, .ad-tasks-completed-toggle):focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * 6. Add/edit link modal (moved to <body> by the plugin's JS).
 * ------------------------------------------------------------------ */
body #ad-custom-link-modal {
	color: var(--fi-text);
	font-family: var(--fi-font);
	line-height: 1.5;
}

body #ad-custom-link-modal .ad-modal__backdrop {
	background: var(--fi-backdrop);
}

body #ad-custom-link-modal .ad-modal__container {
	max-width: 30rem;
	border-top: 4px solid var(--fi-card-accent);
	border-radius: var(--fi-radius-lg);
	background: var(--fi-card-bg);
	box-shadow: var(--fi-shadow-lg);
}

body #ad-custom-link-modal .ad-modal__header {
	gap: 1rem;
	padding: 1.125rem 1.25rem 1rem 1.5rem;
	border-bottom: 1px solid var(--fi-border);
}

body #ad-custom-link-modal .ad-modal__title {
	color: var(--fi-heading);
	font-family: var(--fi-font-display); /* As the card titles. */
	font-size: 1.25rem;
	font-weight: var(--fi-heading-weight);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* The plugin forces width/height: auto on every modal button, so size the
 * close button with min-width and min-height. */
body #ad-custom-link-modal .ad-modal__close {
	min-width: 2.5rem;
	min-height: 2.5rem;
	align-items: center;
	justify-content: center;
	border-radius: var(--fi-radius-control);
	background: transparent;
	color: var(--fi-muted);
}

body #ad-custom-link-modal .ad-modal__close:hover {
	background: var(--fi-surface-2);
	color: var(--fi-heading);
}

body #ad-custom-link-modal .ad-modal__form {
	padding: 1.25rem 1.5rem 1.5rem;
}

body #ad-custom-link-modal .ad-form-group {
	margin-bottom: 1.125rem;
}

body #ad-custom-link-modal .ad-form-label {
	margin-bottom: 0.375rem;
	color: var(--fi-heading);
	font-size: 0.9375rem;
	font-weight: 700;
}

body #ad-custom-link-modal .ad-form-label .required {
	color: var(--fi-danger);
}

body #ad-custom-link-modal .ad-form-help {
	margin: 0.375rem 0 0;
	color: var(--fi-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

body #ad-custom-link-modal .ad-checkbox-label {
	gap: 0.5rem;
	color: var(--fi-text);
	font-size: 0.9375rem;
}

/* The checkbox itself is drawn by the theme (base.css); match its size. */
body #ad-custom-link-modal .ad-checkbox-label input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
}

body #ad-custom-link-modal .ad-modal__actions {
	gap: 0.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--fi-border);
	background: var(--fi-card-bg);
}

/* Theme buttons: 10px radius, weight 700, 44px tall (04 §3 row 7). */
body #ad-custom-link-modal .ad-btn {
	min-height: 2.75rem;
	padding: 0.6rem 1.25rem;
	border-radius: var(--fi-radius-control);
	font-family: var(--fi-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}

/* The plugin pins these colours with "#id #id … !important"; same weapons. */
body #ad-custom-link-modal #ad-link-submit {
	border: 2px solid transparent !important;
	background: var(--fi-primary) !important;
	color: var(--fi-on-primary) !important;
}

body #ad-custom-link-modal #ad-link-submit:hover {
	background: var(--fi-primary-hover) !important;
}

body #ad-custom-link-modal .ad-modal__cancel {
	border: 2px solid var(--fi-primary) !important;
	background: var(--fi-card-bg) !important;
	color: var(--fi-primary) !important;
}

body #ad-custom-link-modal .ad-modal__cancel:hover {
	background: var(--fi-primary) !important;
	color: var(--fi-on-primary) !important;
}

body #ad-custom-link-modal :is(button, a):focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

@media (max-width: 768px) {
	body #ad-custom-link-modal .ad-modal__header {
		padding: 1rem 1rem 0.875rem;
	}

	body #ad-custom-link-modal .ad-modal__form {
		padding: 1rem;
	}

	body #ad-custom-link-modal .ad-modal__actions {
		box-shadow: var(--fi-shadow-sheet);
	}
}

/* ------------------------------------------------------------------
 * 7. Toast (appended to <body>; the plugin's z-index 100001 stays).
 * ------------------------------------------------------------------ */
body .ad-toast[class*="ad-toast--"] {
	right: 1rem;
	bottom: 1.5rem;
	max-width: min(26rem, calc(100vw - 2rem));
	gap: 0.75rem;
	padding: 0.625rem 0.625rem 0.625rem 1.125rem;
	border-radius: var(--fi-radius);
	background: var(--fi-primary);
	color: var(--fi-on-primary);
	font-family: var(--fi-font);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	box-shadow: var(--fi-shadow-lg);
}

body .ad-toast.ad-toast--success {
	background: var(--fi-success);
}

body .ad-toast.ad-toast--error {
	background: var(--fi-danger);
}

body .ad-toast .ad-toast__close {
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	min-height: 2rem;
	border-radius: var(--fi-radius-sm);
	color: inherit;
	opacity: 1;
}

body .ad-toast .ad-toast__close:hover {
	background: var(--fi-on-dark-hover);
}

body .ad-toast .ad-toast__close:focus-visible {
	outline: 3px solid var(--fi-focus-on-dark);
	outline-offset: 1px;
}

@media (min-width: 48rem) {
	body .ad-toast[class*="ad-toast--"] {
		right: 1.5rem;
	}
}

/* ------------------------------------------------------------------
 * 8. Reduced motion, forced colours.
 * ------------------------------------------------------------------ */
@keyframes fi-anchor-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* No sliding, scaling or turning; colour and opacity changes stay. The
 * saving spinner keeps turning (it shows work in progress), more slowly. */
@media (prefers-reduced-motion: reduce) {
	body .anchor-dashboard .ad-link-tile {
		transition: background-color var(--fi-duration) ease;
	}

	body .anchor-dashboard .ad-link-tile:active {
		transform: none;
	}

	body .anchor-dashboard .ad-link-chip__dropdown {
		transform: none;
		transition: opacity var(--fi-duration) ease, visibility var(--fi-duration) ease;
	}

	body .anchor-dashboard :is(.ad-link-menu__chevron, .ad-chevron) {
		transition: none;
	}

	body .ad-toast[class*="ad-toast--"] {
		animation: fi-anchor-fade 0.2s ease;
	}

	body #ad-custom-link-modal .ad-spinner {
		animation-duration: 2s;
	}
}

@media (forced-colors: active) {
	body .anchor-dashboard .ad-task-checkbox__input:checked + .ad-task-checkbox__custom {
		border-color: Highlight;
		background: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}

	body .anchor-dashboard .ad-link-chip__icon[src$="default-favicon.svg"] {
		background-color: CanvasText;
		forced-color-adjust: none;
	}
}