/*
 * Ferndale Intranet: Version 3 "Launchpad" (design value "launchpad";
 * theme-work/DESIGN-V3.md).
 *
 * The idea: type to go anywhere; the news ticker under the header; your
 * most used links and the quick actions one click away. App-like and calm:
 * a white header with the full-colour logo, a light page, white cards, navy
 * for actions and current states, and the app icons as the colour.
 *
 * Loads only when the design is "launchpad" (inc/enqueue.php): on the front
 * end after the theme's and the plugin groups' sheets, and on the login page
 * after login.css. Every rule is scoped to :root[data-design="launchpad"]
 * (front end) or body.fi-design-launchpad (login page), so Versions A and B
 * never see it. Like tokens.css's Version A block, the token block below is
 * the only place with brand values; the rules use role tokens.
 *
 * Contents:
 *   1. Tokens
 *   2. The light shell: header, menu, weather chip, account, drawer, footer
 *   3. Other pages: title band, article card, plugin bands
 *   4. Home page: ticker, welcome row, command bar, most used, columns,
 *      side panel (Quick actions, My ICT Tickets, My bookings, Custom Links,
 *      Tasks / To-Dos)
 *   5. Login page
 *   6. Motion, forced colours and print
 */

/* ==================================================================
 * 1. Tokens.
 * ================================================================== */
:root[data-design="launchpad"],
.fi-design-launchpad {
	/* Version 3's palette. */
	--fi-lp-navy: #0f2385;          /* White text: 13:1. Text on white: 13:1. */
	--fi-lp-navy-deep: #0a1866;
	--fi-lp-blue: #3269ff;          /* The focus ring and small accents. */
	--fi-lp-steel: #425a9e;         /* "Staff intranet" label: 6.6:1 on white. */
	--fi-lp-page: #f5f7fb;          /* The page behind the white cards. */
	--fi-lp-chip: #f3f5f9;          /* Light pills (weather chip). */
	--fi-lp-line: #e3e7ef;          /* Hairlines and card borders. */
	--fi-lp-hover: #eef2fb;         /* Hover on light surfaces (navy text on it: 12:1). */
	--fi-lp-tint: #e9efff;          /* Current and active items. */
	--fi-lp-accent-bar: linear-gradient(90deg, #0f2385 0%, #3269ff 100%);

	/* Quick action icon tiles: a soft background and a deeper glyph. */
	--fi-lp-tone-blue-bg: #e8efff;
	--fi-lp-tone-blue: #1f4fd6;
	--fi-lp-tone-gold-bg: #fff2d1;
	--fi-lp-tone-gold: #8a5a00;
	--fi-lp-tone-fern-bg: #e4f1e6;
	--fi-lp-tone-fern: #2e6b34;
	--fi-lp-tone-violet-bg: #eeeafa;
	--fi-lp-tone-violet: #5b3fa3;
	--fi-lp-tone-teal-bg: #e1f3f1;
	--fi-lp-tone-teal: #0f6e66;
	--fi-lp-tone-rose-bg: #fdeaee;
	--fi-lp-tone-rose: #b4234a;
	--fi-lp-tone-navy-bg: #e9ecf8;
	--fi-lp-tone-navy: #0f2385;

	--fi-lp-shadow-card: 0 1px 2px rgba(15, 35, 133, 0.04), 0 2px 8px -3px rgba(15, 35, 133, 0.08);
	--fi-lp-shadow-lift: 0 12px 28px -16px rgba(15, 35, 133, 0.32), 0 2px 6px -2px rgba(15, 35, 133, 0.08);
	--fi-lp-shadow-bar: 0 1px 2px rgba(15, 35, 133, 0.05), 0 8px 24px -16px rgba(15, 35, 133, 0.28);
	--fi-lp-shadow-pop: 0 28px 56px -24px rgba(15, 35, 133, 0.42), 0 2px 8px rgba(15, 35, 133, 0.08);
	--fi-lp-card-pad: 1.125rem 1.25rem 1.25rem;

	/* Role tokens: Version 3 values. */
	--fi-page-bg: var(--fi-lp-page);
	--fi-card-bg: #ffffff;
	--fi-surface: var(--fi-lp-chip);
	--fi-border: var(--fi-lp-line);
	--fi-tint: var(--fi-lp-tint);
	--fi-current-tint: var(--fi-lp-tint);
	--fi-shadow-sm: var(--fi-lp-shadow-card);
	--fi-shadow-header: 0 6px 22px -14px rgba(15, 35, 133, 0.3);

	/* The header is Version A's (administrator, 10 Oct 2026: "the blue
	 * background colour, the ferns logo and the text Intranet"): teal, the fern
	 * mark and the Merriweather wordmark, Version B's white menu with the gold
	 * current line, the gold Menu button and gold initials with teal text. */
	--fi-header-bg: #08466c;        /* Mirrored in inc/enqueue.php fi_header_colour(). */
	--fi-header-bg-deep: #063a5a;
	--fi-header-text: #ffffff;
	--fi-font-brand: var(--fcs-font-serif);
	--fi-drawer-bg: #ffffff;
	--fi-footer-bg: #ffffff;
	/* The menu hover is Version A's (a light wash on the teal header): the old
	 * white header's pale hover hid the white text. */
	--fi-menu-weight: 650;

	/* Gold Menu button and initials on the teal header, as Version A (teal
	 * text on gold: 8.35:1). */
	--fi-on-dark-btn-text: #08466c;
	--fi-avatar-text: #08466c;

	/* Light title bands (pages, room booking, chippy): navy text, a navy-to-blue bar. */
	--fi-band-bg: #ffffff;
	--fi-band-text: var(--fi-lp-navy);
	--fi-band-muted: var(--fi-muted); /* #4f566e, 7:1 on white. */
	--fi-band-accent: var(--fi-lp-accent-bar);
	--fi-band-eyebrow: var(--fi-lp-navy);
	--fi-band-watermark: 0;

	/* Content pages: a white article card on the light page. */
	--fi-article-bg: #ffffff;
	--fi-article-pad: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
	--fi-article-shadow: var(--fi-lp-shadow-card);
	--fi-article-border-top: 0;

	/* Login page: the light page with a slim navy strip. */
	--fi-login-bg: var(--fi-lp-page);
	--fi-login-band: linear-gradient(90deg, #081452 0%, #0f2385 55%, #3269ff 100%);
	--fi-login-curve: 0px;
	--fi-login-watermark: 0;
}

/* The light shell's parts (all but the header, which is Version A's teal
 * one) read the "on dark" tokens: here they are light. Not
 * set on :root, because some plugin parts stay dark in every design (table
 * header rows, tooltips, memory card backs) and keep the gold values. */
:root[data-design="launchpad"] :is(.mobile-menu, .fi-footer, .fi-title-band, #srb-booking-interface .srb-header, #chippy-order-container .chippy-order-header),
body.login.fi-design-launchpad {
	--fi-header-text: var(--fi-lp-navy);
	--fi-on-dark-border: var(--fi-lp-line);
	--fi-on-dark-hover: var(--fi-lp-hover);
	--fi-on-dark-muted: var(--fi-muted);
	--fi-focus-on-dark: var(--fi-focus);
	--fi-current: var(--fi-lp-navy);
}

/* Dark mode (Home page extras, 0.1.40; inc/portal-extras.php): only while
 * the site follows the device's setting (data-color="auto" on <html>) and the
 * device is set to dark. The same role tokens with dark values, so every rule
 * below follows; the teal header is dark already and stays. Version 3's navy
 * is only ever text or an accent, so here it becomes a light blue. Contrast,
 * on the card colour #161b30 unless stated: text 13.8:1, muted 7.9:1, links
 * 8.7:1, navy 10.4:1 (7.6:1 on the tint), white on the primary 6.3:1,
 * control borders 4.7:1, every Quick action tone 7.6:1 or more on its tile. */
@media (prefers-color-scheme: dark) {
	/* body too: the token block above also sits on body (.fi-design-launchpad). */
	:root[data-design="launchpad"][data-color="auto"],
	:root[data-design="launchpad"][data-color="auto"] .fi-design-launchpad {
		color-scheme: dark;

		--fi-lp-navy: #b9c8ff;
		--fi-lp-navy-deep: #dbe3ff;
		--fi-lp-blue: #8fb0ff;
		--fi-lp-steel: #a9b6dd;
		--fi-lp-page: #0d1120;
		--fi-lp-chip: #1c2240;
		--fi-lp-line: #2b3354;
		--fi-lp-hover: #222a48;
		--fi-lp-tint: #26315f;
		--fi-lp-accent-bar: linear-gradient(90deg, #8fb0ff 0%, #b9c8ff 100%);

		--fi-lp-tone-blue-bg: #1e2a55;
		--fi-lp-tone-blue: #a9c0ff;
		--fi-lp-tone-gold-bg: #3a2e10;
		--fi-lp-tone-gold: #f2c96b;
		--fi-lp-tone-fern-bg: #1b3320;
		--fi-lp-tone-fern: #8fd19a;
		--fi-lp-tone-violet-bg: #2c2350;
		--fi-lp-tone-violet: #c4b2ff;
		--fi-lp-tone-teal-bg: #12332f;
		--fi-lp-tone-teal: #7fd6cb;
		--fi-lp-tone-rose-bg: #3d1a26;
		--fi-lp-tone-rose: #ff9db5;
		--fi-lp-tone-navy-bg: #1f2650;
		--fi-lp-tone-navy: #b9c8ff;

		--fi-lp-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px -3px rgba(0, 0, 0, 0.45);
		--fi-lp-shadow-lift: 0 12px 28px -16px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
		--fi-lp-shadow-bar: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -16px rgba(0, 0, 0, 0.7);
		--fi-lp-shadow-pop: 0 28px 56px -24px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4);

		--fi-text: #e3e7f2;
		--fi-heading: #f4f6fc;
		--fi-h2: #f4f6fc;
		--fi-h3: #f4f6fc;
		--fi-muted: #a9b0c6;
		--fi-link: #9fb8ff;
		--fi-link-hover: #c9d6ff;
		--fi-focus: #8fb0ff;
		/* The primary is text, borders and fills alike, so on dark it is a
		 * light blue (8.7:1 on the card) with dark text on it (9.6:1). */
		--fi-primary: #9fb8ff;
		--fi-primary-hover: #c1d1ff;
		--fi-on-primary: #0d1120;

		--fi-card-bg: #161b30;
		--fi-article-bg: #161b30;
		--fi-band-bg: #161b30;
		--fi-drawer-bg: #161b30;
		--fi-footer-bg: #161b30;
		--fi-surface-2: #20274a;
		--fi-row-alt: #1a2038;
		--fi-control-bg: #0f1428;
		--fi-control-border: #7c86a8;
		--fi-placeholder: #98a0b8;

		--fi-success-tint: #1b3320;
		/* Red is text (errors, Cancel) and a fill (the ticker's "News", danger
		 * buttons) alike, so it is light here: 7.5:1 on the card, with dark
		 * text on it (8.3:1; those rules use --fi-on-primary). */
		--fi-danger: #ff8a80;
		--fi-danger-hover: #ffb3ab;
		--fi-danger-tint: #3a1a1a;
		--fi-warning-text: #f2c96b;
		--fi-warning-tint: #3a2e10;
		--fi-info: #9fb8ff;
		--fi-info-tint: #1e2a55;

		--fi-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.7);
		--fi-shadow-lg: 0 28px 60px -24px rgba(0, 0, 0, 0.8);
		--fi-shadow-header: 0 6px 22px -14px rgba(0, 0, 0, 0.7);
		--fi-backdrop: rgba(0, 0, 0, 0.6);
	}

	/* Page content written for a light page: a cell, highlight or box that
	 * sets its own background in the page (almost always a light one, like the
	 * After school clubs table's #f5f5f5 headers or a yellow highlight) keeps
	 * dark ink, or its text would vanish. A colour set in the element itself
	 * still wins. */
	:root[data-design="launchpad"][data-color="auto"] .entry-content :where(mark, [style*="background"]) {
		color: var(--fcs-ink);
	}

	/* Green fills keep white text: dark text on fern would be about 3:1
	 * (white on fern: 6.4:1). */
	:root[data-design="launchpad"][data-color="auto"] :is(.fi-btn--success, body .anchor-dashboard .ad-task-checkbox__input:checked + .ad-task-checkbox__custom) {
		color: #ffffff;
	}

	/* Images with transparent parts (logos with dark lettering) get a soft
	 * light backing on the dark cards. */
	:root[data-design="launchpad"][data-color="auto"] .entry-content :where(.wp-block-image img[src$=".png"]) {
		background: #f5f7fb;
		border-radius: var(--fi-radius-sm);
	}
}

/* ==================================================================
 * 2. The light shell.
 * ================================================================== */

/* Header: Version A's teal header (the tokens in section 1); the brand,
 * menu, weather chip and account button use Version A's own rules. */
:root[data-design="launchpad"] .site-header {
	background: var(--fi-header-bg);
}

/* Phone drawer: white, navy text, the current item tinted. */
:root[data-design="launchpad"] .mobile-menu__panel {
	border-inline-start: 1px solid var(--fi-lp-line);
}

:root[data-design="launchpad"] .mobile-nav__menu > li > .nav-link {
	padding-inline: 0.75rem;
	border-radius: var(--fi-radius-sm);
}

:root[data-design="launchpad"] .mobile-nav__menu > li > .nav-link:hover {
	background: var(--fi-lp-hover);
	color: var(--fi-lp-navy);
}

:root[data-design="launchpad"] .mobile-nav__menu > li:is(.is-current, .is-ancestor) > .nav-link {
	background: var(--fi-lp-tint);
	box-shadow: inset 3px 0 0 var(--fi-lp-navy);
	color: var(--fi-lp-navy);
	font-weight: 800;
}

:root[data-design="launchpad"] .mobile-nav__menu .submenu .is-current > .nav-link {
	background: var(--fi-lp-tint);
}

:root[data-design="launchpad"] .mobile-nav__menu > .fi-menu-item--logout > .nav-link {
	color: var(--fi-muted);
}

:root[data-design="launchpad"] .fi-drawer-account__link:hover {
	color: var(--fi-lp-navy);
}

/* Footer: white, a hairline above, navy links. */
:root[data-design="launchpad"] .fi-footer {
	border-top: 1px solid var(--fi-lp-line);
	color: var(--fi-muted);
}

/* ==================================================================
 * 3. Other pages.
 * ================================================================== */

/* A compact white title band: navy h1 at about 1.75rem, a 3px navy-to-blue
 * bar, breadcrumbs. */
:root[data-design="launchpad"] .fi-title-band {
	border-bottom: 1px solid var(--fi-lp-line);
}

:root[data-design="launchpad"] .fi-title-band::after {
	content: none;
}

:root[data-design="launchpad"] .fi-title-band__inner {
	padding-block: clamp(1rem, 0.8rem + 0.9vw, 1.6rem) clamp(1.1rem, 0.85rem + 1vw, 1.75rem);
}

:root[data-design="launchpad"] .fi-title-band__title {
	font-size: clamp(1.5rem, 1.32rem + 0.7vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

:root[data-design="launchpad"] .fi-title-band__title::after {
	width: 3rem;
	height: 3px;
	margin-top: 0.6rem;
}

:root[data-design="launchpad"] .fi-breadcrumbs a {
	color: var(--fi-link);
}

/* Content pages: a white card on the light page. Pages that are a plugin
 * tool (body.fi-lp-tool, inc/launchpad.php) show the tool straight on the
 * page instead, as its own panels already frame it. */
:root[data-design="launchpad"] .fi-article:not(.fi-article--plain) {
	border: 1px solid var(--fi-lp-line);
	border-radius: var(--fi-radius);
}

:root[data-design="launchpad"] body.fi-lp-tool {
	--fi-article-pad: 0px;
}

:root[data-design="launchpad"] body.fi-lp-tool .fi-article {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* The room booking and chippy headers follow the title band: white cards. */
:root[data-design="launchpad"] #srb-booking-interface .srb-header,
:root[data-design="launchpad"] #chippy-order-container .chippy-order-header {
	border: 1px solid var(--fi-lp-line);
	box-shadow: var(--fi-lp-shadow-card);
}

/* On the white band the date picker keeps its control border (Version B
 * drops it on its navy band). */
:root[data-design="launchpad"] #srb-booking-interface select.srb-select:not(:hover, :focus) {
	border-color: var(--fi-control-border);
}

/* Tool panels drawn on --fi-surface for Version B's white page would fade
 * into the light page here: on tool pages (no article card) they are white
 * cards instead. On a page with a reading card (a tool with more than a few
 * lines of text, such as the password generator) they keep the surface
 * colour, which stands out on the white card. :where() keeps each rule at
 * the plugin sheet's own specificity (this sheet prints later), so their
 * hover, drag and state colours still win. */
:where(:root[data-design="launchpad"] body.fi-lp-tool) .entry-content div.uk-vat-calculator {
	--uk-vat-bg: var(--fi-card-bg);
	background: var(--fi-card-bg);
}

:where(:root[data-design="launchpad"] body.fi-lp-tool) .entry-content div.pupil-password-ninja-shortcode,
:where(:root[data-design="launchpad"]) body:where(.fi-lp-tool) .pws-container .pws-sidebar,
:where(:root[data-design="launchpad"]) body:where(.fi-lp-tool) .heic-to-jpg-client .heic-to-jpg-dropzone,
:where(:root[data-design="launchpad"] body.fi-lp-tool) #pdf-compressor .pdf-compressor__options,
:where(:root[data-design="launchpad"] body.fi-lp-tool) #pdf-compressor .pdf-compressor__dropzone,
:where(:root[data-design="launchpad"] body.fi-lp-tool) #mcb-builder .mcb-dropzone,
:where(:root[data-design="launchpad"] body.fi-lp-tool) #mcb-builder .mcb-controls__section {
	background: var(--fi-card-bg);
}

:where(:root[data-design="launchpad"]) body:where(.fi-lp-tool) #memory-game-wrapper {
	background: var(--fi-card-bg);
}

/* ==================================================================
 * 4. Home page.
 * ================================================================== */
:root[data-design="launchpad"] body.fi-lp-home {
	--fi-page-bg: var(--fi-lp-page);
	background-color: var(--fi-lp-page);
}

.fi-lp {
	padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

/* --- 4.1 Welcome row (under the news ticker): small and quiet, one line
 * where it fits. --- */
.fi-lp-hero {
	position: relative;
	z-index: 30; /* The results list opens over the content below (header: 1100). */
	padding-block: clamp(1rem, 0.7rem + 1.4vw, 2rem) clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
}

/* Under the news ticker, which hangs from the header as in Version A (its
 * look and pause button come from layout.css and the third-party group):
 * less room above the welcome row, so the links start higher. */
.fi-front-ticker + .fi-lp .fi-lp-hero {
	padding-top: clamp(0.875rem, 0.6rem + 0.8vw, 1.25rem);
}

.fi-lp-welcome {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.125rem 0.75rem;
	margin: 0 0 0.875rem;
}

.fi-lp-welcome__title {
	margin: 0;
	color: var(--fi-heading);
	font-family: var(--fi-font);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.4;
}

.fi-lp-welcome__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin: 0;
	color: var(--fi-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
}

/* The school week: the one gold highlight. */
.fi-lp-chip {
	display: inline-flex;
	align-items: center;
	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;
}

/* Home page extras (inc/portal-extras.php, 0.1.40). The holiday countdown: a
 * quieter fern chip beside the gold school week (fern on its tint: 5.9:1). */
.fi-lp-chip--countdown {
	background: var(--fi-lp-tone-fern-bg);
	color: var(--fi-lp-tone-fern);
}

/* The Welsh phrase of the week: a line of its own under the date. */
.fi-lp-phrase {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: inherit;
	gap: 0.125rem 0.5rem;
	margin: 0.125rem 0 0;
	color: var(--fi-muted);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.fi-lp-phrase__label {
	color: var(--fi-lp-tone-rose);
	font-size: 0.75rem;
	font-weight: 750;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fi-lp-phrase__cy {
	color: var(--fi-heading);
	font-weight: 750;
}

.fi-lp-phrase__en {
	font-style: italic;
}

/* --- 4.2 Command bar: one large field; the results open below it. --- */
.fi-lp-command {
	position: relative;
	max-width: 46rem;
	margin: 0;
}

.fi-lp-command__field {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 3.5rem;
	border: 1px solid var(--fi-control-border);
	border-radius: 14px;
	background: var(--fi-control-bg);
	box-shadow: var(--fi-lp-shadow-bar);
	transition: border-color var(--fi-duration) ease, box-shadow var(--fi-duration) ease;
}

.fi-lp-command__field:hover {
	border-color: var(--fi-primary);
}

/* The calm focus look (the field is focused on load): a solid 2px border in
 * the primary colour (1px border plus a 1px inset), no outline, no halo. */
.fi-lp-command__field:focus-within {
	border-color: var(--fi-primary);
	box-shadow: inset 0 0 0 1px var(--fi-primary), var(--fi-lp-shadow-bar);
}

.fi-lp-command.is-open .fi-lp-command__field {
	border-color: var(--fi-primary);
}

.fi-lp-command__icon {
	position: absolute;
	top: 50%;
	left: 1.125rem;
	color: var(--fi-muted);
	pointer-events: none;
	transform: translateY(-50%);
}

.fi-lp-command__field:focus-within .fi-lp-command__icon {
	color: var(--fi-primary);
}

input.fi-lp-command__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 3.5rem;
	margin: 0;
	padding: 0.75rem 3.5rem 0.75rem 3.25rem;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: var(--fi-text);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.4;
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
}

input.fi-lp-command__input::placeholder {
	color: var(--fi-placeholder);
	opacity: 1;
}

input.fi-lp-command__input:is(:focus, :focus-visible) {
	outline: 0;
	box-shadow: none;
}

input.fi-lp-command__input::-webkit-search-cancel-button,
input.fi-lp-command__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Clear (while there is text) and the Ctrl K key hint (desktop, at rest). */
.fi-lp-command__clear {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--fi-muted);
	transform: translateY(-50%);
	cursor: pointer;
}

.fi-lp-command__clear:hover {
	background: var(--fi-lp-hover);
	color: var(--fi-primary);
}

.fi-lp-command__clear[hidden] {
	display: none;
}

.fi-lp-command__key {
	position: absolute;
	top: 50%;
	right: 1rem;
	display: none;
	gap: 0.25rem;
	transform: translateY(-50%);
	pointer-events: none;
}

.fi-lp kbd {
	display: inline-grid;
	place-items: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.375rem;
	border: 1px solid var(--fi-lp-line);
	border-bottom-width: 2px;
	border-radius: 6px;
	background: var(--fi-card-bg);
	color: var(--fi-muted);
	font-family: var(--fi-font);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* Only once the script runs (the shortcut needs it), and only at rest. The
 * field keeps room for it, so a long hint never runs under the key caps. */
@media (hover: hover) and (pointer: fine) and (min-width: 40rem) {
	.fi-lp-command.is-ready:not(.has-value) .fi-lp-command__field:not(:focus-within) .fi-lp-command__key {
		display: flex;
	}

	.fi-lp-command.is-ready input.fi-lp-command__input {
		padding-right: 5.75rem;
	}
}

/* The results list. */
.fi-lp-command__popup {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	left: 0;
	z-index: 2;
	padding: 0.375rem;
	border: 1px solid var(--fi-lp-line);
	border-radius: 14px;
	background: var(--fi-card-bg);
	box-shadow: var(--fi-lp-shadow-pop);
	animation: fi-lp-pop 0.12s ease-out;
}

.fi-lp-command__popup[hidden] {
	display: none;
}

.fi-lp-command__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fi-lp-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-height: 3.25rem;
	padding: 0.45rem 0.75rem;
	border-radius: 10px;
	color: var(--fi-heading);
	line-height: 1.3;
	cursor: pointer;
}

.fi-lp-option:hover {
	background: var(--fi-surface);
}

/* With nothing chosen yet, Enter opens the first option: it shows a quiet
 * "Enter" hint (desktop). */
.fi-lp-option__enter {
	display: none;
	flex: none;
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--fi-lp-line);
	border-radius: 6px;
	background: var(--fi-card-bg);
	color: var(--fi-muted);
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
	.fi-lp-command__popup:not(.has-active) .fi-lp-option__enter {
		display: inline-flex;
	}
}

.fi-lp-command__popup:not(.has-active) .fi-lp-option:first-child {
	background: var(--fi-surface);
}

.fi-lp-option.is-active {
	background: var(--fi-lp-tint);
	box-shadow: inset 3px 0 0 var(--fi-primary);
	color: var(--fi-primary);
}

.fi-lp-option__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	overflow: hidden;
	border-radius: 8px;
}

.fi-lp-option__icon img {
	display: block;
	width: 2rem;
	height: 2rem;
	object-fit: contain;
}

.fi-lp-option__icon--glyph {
	background: var(--fi-lp-tone-navy-bg);
	color: var(--fi-lp-tone-navy);
}

.fi-lp-option__icon--glyph svg {
	width: 1.25rem;
	height: 1.25rem;
}

.fi-lp-option__text {
	display: flex;
	flex: 1 1 auto;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.125rem 1rem;
	min-width: 0;
}

/* Names in a regular weight, the typed part bold, so it stands out. */
.fi-lp-option__label {
	min-width: 0;
	overflow: hidden;
	font-size: 1rem;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fi-lp-hit {
	color: inherit;
	font-weight: 750;
}

.fi-lp-option__tag {
	flex: none;
	max-width: 45%;
	overflow: hidden;
	color: var(--fi-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fi-lp-option__newtab {
	display: inline-grid;
	flex: none;
	place-items: center;
	color: var(--fi-muted);
}

.fi-lp-option__newtab svg {
	width: 0.875rem;
	height: 0.875rem;
}

.fi-lp-option--google .fi-lp-option__label {
	font-weight: 600;
}

.fi-lp-option__query {
	color: var(--fi-primary);
	font-weight: 750;
}

.fi-lp-option--google .fi-lp-option__icon--glyph {
	background: var(--fi-surface);
	color: var(--fi-muted);
}

/* A second line of key hints (desktop only). */
.fi-lp-command__keys {
	display: none;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0.25rem 0 0;
	padding: 0.5rem 0.75rem 0.375rem;
	border-top: 1px solid var(--fi-lp-line);
	color: var(--fi-muted);
	font-size: 0.8125rem;
	font-weight: 500;
}

.fi-lp-command__keys span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

@media (hover: hover) and (pointer: fine) and (min-width: 40rem) {
	.fi-lp-command__keys {
		display: flex;
	}
}

@keyframes fi-lp-pop {
	from {
		transform: translateY(-4px);
	}

	to {
		transform: none;
	}
}

/* --- 4.4 Section heads ("Your most used"). --- */
.fi-lp-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.125rem 1rem;
	margin: 0 0 0.75rem;
}

.fi-lp-head__title {
	margin: 0;
	color: var(--fi-heading);
	font-family: var(--fi-font);
	font-size: 1.0625rem;
	font-weight: 750;
	letter-spacing: -0.005em;
	line-height: 1.35;
}

.fi-lp-head__title:focus {
	outline: none;
}

.fi-lp-head__title:focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 4px;
	border-radius: 4px;
}

/* "Built from what you open on this device · Clear": under the tiles, so the
 * first Tab stop after the search box is a tile. */
.fi-lp-most__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.4rem;
	margin: 0.5rem 0 0;
	color: var(--fi-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.fi-lp-most__note[hidden] {
	display: none;
}

@media (min-width: 40rem) {
	.fi-lp-most__note {
		justify-content: flex-end;
	}
}

/* "Clear": a text button (at least 24px tall). */
.fi-lp-textbutton {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	margin: 0;
	padding: 0.125rem 0.25rem;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--fi-link);
	font: inherit;
	font-weight: 650;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.fi-lp-textbutton:hover {
	color: var(--fi-link-hover);
	text-decoration-thickness: 2px;
}

/* --- 4.5 Your most used: up to 8 app tiles at the top of the main column,
 * in full rows so app names have room (WCAG 1.4.10 at 320px): 3 a row on
 * phones (6 shown), 4 on tablets (8), 6 from 56rem (6), and beside the side
 * panel 5 from 64rem (5) and 6 from 75rem (6). --- */
.fi-lp-most {
	margin: 0 0 clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

.fi-lp-most[hidden] {
	display: none;
}

.fi-lp-most__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 39.99rem), (min-width: 56rem) {
	.fi-lp-most__list > li:nth-child(n + 7) {
		display: none;
	}
}

@media (min-width: 64rem) and (max-width: 74.99rem) {
	.fi-lp-most__list > li:nth-child(n + 6) {
		display: none;
	}
}

.fi-lp-most__list[hidden] {
	display: none;
}

/* Just after "Clear": a quiet confirmation in place of the tiles. */
.fi-lp-most__empty {
	margin: 0;
	padding: 0.875rem 1rem;
	border: 1px dashed var(--fi-control-border);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	color: var(--fi-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.fi-lp-most__empty[hidden],
.fi-lp-textbutton[hidden] {
	display: none;
}

.fi-lp-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start; /* Icons stay in line when a label takes two lines. */
	gap: 0.45rem;
	height: 100%;
	min-height: 5.75rem;
	padding: 0.75rem 0.375rem 0.625rem;
	border: 1px solid var(--fi-lp-line);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	box-shadow: var(--fi-lp-shadow-card);
	color: var(--fi-heading);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--fi-duration) ease, box-shadow var(--fi-duration) ease;
}

.fi-lp-tile:hover {
	border-color: var(--fi-lp-tone-navy-bg);
	box-shadow: var(--fi-lp-shadow-lift);
	color: var(--fi-primary);
}

.fi-lp-tile__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 10px;
}

.fi-lp-tile__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fi-lp-tile__icon--glyph {
	background: var(--fi-lp-tone-navy-bg);
	color: var(--fi-lp-tone-navy);
}

.fi-lp-tile__icon--glyph svg {
	width: 1.375rem;
	height: 1.375rem;
}

/* Names wrap between words (a word breaks only if it can't fit a line on its
 * own) and are never cut short, like the dashboard's own tiles: a long name
 * makes its row a little taller instead (WCAG 1.4.10 at 320px). */
.fi-lp-tile__label {
	display: block;
	max-width: 100%;
	font-size: 0.8125rem;
	font-weight: 650;
	line-height: 1.25;
	overflow-wrap: break-word;
	-webkit-hyphens: manual;
	hyphens: manual;
}

@media (max-width: 39.99rem) {
	.fi-lp-tile {
		padding-inline: 0.25rem;
	}
}

@media (min-width: 40rem) {
	.fi-lp-most__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.fi-lp-tile {
		min-height: 6.5rem;
		padding: 0.875rem 0.5rem 0.75rem;
	}

	.fi-lp-tile__icon {
		width: 2.5rem;
		height: 2.5rem;
	}

	.fi-lp-tile__label {
		font-size: 0.875rem;
	}
}

@media (min-width: 56rem) {
	.fi-lp-most__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.fi-lp-most__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Small laptops: labels a touch smaller, as in the dashboard beside them,
 * so "Documentation" stays whole at 1024px. */
@media (min-width: 64rem) and (max-width: 74.99rem) {
	.fi-lp-tile__label {
		font-size: 0.8125rem;
	}
}

@media (min-width: 75rem) {
	.fi-lp-most__list {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* --- 4.6 Two columns from 64rem: the dashboard and the side panel. --- */
.fi-lp-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
	align-items: start;
}

/* A stacking context of its own, so the dashboard's raised cards (open
 * pop-up menus) stay under the command bar's results list. */
.fi-lp-body {
	position: relative;
	z-index: 1;
}

.fi-lp-main,
.fi-lp-side {
	min-width: 0;
}

.fi-lp-content {
	margin: 0;
}

/* The dashboard beside the side panel: tiles a little narrower than on a
 * full-width page, so long names break at hyphens, never mid-word, and from
 * 75rem each tile gets at least 7rem (three a row in each card), so names
 * like "MyConcern" stay whole. The admin's column counts stay the maximum. */
:root[data-design="launchpad"] body.fi-lp-home .anchor-dashboard .ad-link-tile {
	padding-inline: 4px;
}

:root[data-design="launchpad"] body.fi-lp-home .anchor-dashboard .ad-link-tile__label {
	-webkit-hyphens: auto;
	hyphens: auto;
}

@media (min-width: 75rem) {
	:root[data-design="launchpad"] body.fi-lp-home .anchor-dashboard .ad-links-grid {
		grid-template-columns: repeat(auto-fill, minmax(max(7rem, calc((100% - (var(--fi-anchor-cols) - 1) * var(--ad-tile-spacing)) / var(--fi-anchor-cols) - 0.5px)), 1fr));
	}
}

/* No side panel: the cards are wide again, so the 7rem minimum above would
 * leave four tiles a row where Version A has five. Use the admin's column
 * count, as Version A does (administrator, 10 Oct 2026: "the icons now only
 * show 4 icons per row instead of 5"; staff screens are 1920 x 1080). */
@media (min-width: 75rem) {
	:root[data-design="launchpad"] body.fi-lp-home .fi-lp-body--single .anchor-dashboard .ad-links-grid {
		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));
	}
}

/* Small laptops (64rem to 75rem): three tiles a row with labels a touch
 * smaller, so names like "SchoolCloud" and "Maintenance" stay whole. */
@media (min-width: 64rem) and (max-width: 74.99rem) {
	:root[data-design="launchpad"] body.fi-lp-home .anchor-dashboard .ad-link-tile__label {
		font-size: 0.8125rem;
	}
}

.fi-lp-side {
	display: grid;
	gap: 1rem;
}

/* The side panel is narrower on small laptops, so the dashboard's cards keep
 * three tiles a row at 1024px and four from about 1200px (each tile needs
 * 5.5rem: anchor-dashboard.css). */
@media (min-width: 64rem) {
	.fi-lp-body {
		grid-template-columns: minmax(0, 1fr) 18rem;
		gap: 1.25rem;
	}
}

@media (min-width: 80rem) {
	.fi-lp-body {
		grid-template-columns: minmax(0, 1fr) 21rem;
		gap: 1.75rem;
	}
}

/* Side panel first (fi_launchpad_side_first(), the pupils' portal): it is
 * printed before the dashboard, so phones and tablets show the Quick actions
 * straight after the search bar. From 64rem it goes back to the right-hand
 * column, level with the top of the dashboard, exactly as before. */
@media (min-width: 64rem) {
	.fi-lp-body--side-first > .fi-lp-main {
		grid-column: 1;
		grid-row: 1;
	}

	.fi-lp-body--side-first > .fi-lp-side {
		grid-column: 2;
		grid-row: 1;
	}
}

/* No card in the side panel (Quick actions switched off, and no bookings or
 * tickets to show): the dashboard takes the full width, and "Your most
 * used" shows all 8 links in one row from 64rem. */
.fi-lp-body.fi-lp-body--single {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64rem) {
	.fi-lp-body--single .fi-lp-most__list {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.fi-lp-body--single .fi-lp-most__list > li:nth-child(n) {
		display: list-item;
	}

	.fi-lp-body--single .fi-lp-tile__label {
		font-size: 0.875rem;
	}
}

/* --- 4.7 Cards: Quick actions, My ICT Tickets, My bookings, Custom Links,
 * Tasks / To-Dos. --- */
.fi-lp-card {
	padding: var(--fi-lp-card-pad);
	border: 1px solid var(--fi-lp-line);
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
	box-shadow: var(--fi-lp-shadow-card);
	color: var(--fi-text);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.fi-lp-card__title {
	margin: 0 0 0.75rem;
	color: var(--fi-heading);
	font-family: var(--fi-font);
	font-size: 1.0625rem;
	font-weight: 750;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

/* My bookings: the plugin's card, drawn like the other side cards. */
.fi-lp-bookings {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

:root[data-design="launchpad"] .fi-lp-bookings div.srb-my-bookings {
	padding: var(--fi-lp-card-pad);
	border: 1px solid var(--fi-lp-line);
	border-radius: var(--fi-radius);
	box-shadow: var(--fi-lp-shadow-card);
}

:root[data-design="launchpad"] .fi-lp-bookings .srb-my-bookings h3 {
	min-height: 0;
	margin: 0 0 0.75rem;
	color: var(--fi-heading);
	font-size: 1.0625rem;
	font-weight: 750;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

:root[data-design="launchpad"] .fi-lp-bookings .srb-my-bookings p.srb-no-bookings {
	padding: 0.75rem 0.875rem;
	font-size: 0.875rem;
	text-align: start;
}

:root[data-design="launchpad"] .fi-lp-bookings .srb-my-bookings .srb-booking-item {
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
}

/* Custom Links and Tasks / To-Dos: the Anchor Dashboard's own cards, each
 * drawn on its own under My bookings (inc/launchpad.php
 * fi_launchpad_dashboard_part(); administrator, 15 Oct 2026), and drawn like
 * the other side cards. The plugin's masonry lays out only the page's first
 * grid (the dashboard in the main column), so each grid here is a plain
 * block holding one card. */
.fi-lp-dash {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

:root[data-design="launchpad"] .fi-lp-dash .anchor-dashboard {
	max-width: none;
	margin: 0;
}

:root[data-design="launchpad"] .fi-lp-dash .ad-sections-grid {
	display: block;
}

:root[data-design="launchpad"] .fi-lp-dash .ad-section-card {
	padding: var(--fi-lp-card-pad);
	border-color: var(--fi-lp-line);
	box-shadow: var(--fi-lp-shadow-card);
}

:root[data-design="launchpad"] .fi-lp-dash .ad-section-card__title {
	font-size: 1.0625rem;
	font-weight: 750;
	letter-spacing: -0.005em;
}

:root[data-design="launchpad"] .fi-lp-dash .ad-section-card__empty {
	padding: 0.75rem 0.875rem;
	font-size: 0.875rem;
	text-align: start;
}

/* My ICT Tickets: HelpDesk's [helpdesk_my_tickets] (inc/launchpad.php
 * fi_launchpad_tickets()), drawn like My bookings above: the same card,
 * heading, rows, meta text and empty box (the rows, pills and links are in
 * the helpdesk group sheet, assets/css/plugins/helpdesk.css). The theme's
 * "New ticket" link follows the plugin's "View all tickets" in the last
 * row, and wraps under it when the panel is narrow. The plugin's widget box
 * gives way to this card (display: contents), so its parts are the card's
 * rows. Every rule starts with :root[data-design], so it wins whether the
 * plugin's sheet prints before this one (the head) or after it (the footer). */
.fi-lp-tickets {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

:root[data-design="launchpad"] .fi-lp-tickets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	padding: var(--fi-lp-card-pad);
	border: 1px solid var(--fi-lp-line);
	border-radius: var(--fi-radius);
	background-color: var(--fi-card-bg);
	box-shadow: var(--fi-lp-shadow-card);
	color: var(--fi-text);
}

:root[data-design="launchpad"] .fi-lp-tickets div.hd-widget {
	display: contents;
}

/* The card is also .entry-content: its clearfix would be a third, empty
 * flex item, and "space-between" would then leave "New ticket" short of the
 * card's right edge. */
:root[data-design="launchpad"] .fi-lp-tickets::before,
:root[data-design="launchpad"] .fi-lp-tickets::after {
	content: none;
	display: none;
}

:root[data-design="launchpad"] .fi-lp-tickets div.hd-widget > :is(.hd-widget__head, .hd-ticket-list, .hd-widget__empty) {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
}

:root[data-design="launchpad"] .fi-lp-tickets div.hd-widget h3.hd-widget__title {
	min-height: 0;
	color: var(--fi-heading);
	font-size: 1.0625rem;
	font-weight: 750;
	letter-spacing: -0.005em;
	line-height: 1.3;
}

:root[data-design="launchpad"] .fi-lp-tickets div.hd-widget p.hd-widget__empty {
	padding: 0.75rem 0.875rem;
	font-size: 0.875rem;
	text-align: start;
}

:root[data-design="launchpad"] .fi-lp-tickets div.hd-widget .hd-widget__foot,
:root[data-design="launchpad"] .fi-lp-tickets .fi-lp-tickets__all {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

/* "View all tickets": one 36px row with the "New ticket" button, so it is
 * as easy to hit. */
:root[data-design="launchpad"] .fi-lp-tickets .hd-widget__foot a.hd-link,
:root[data-design="launchpad"] .fi-lp-tickets .fi-lp-tickets__all a.hd-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
}

/* "New ticket": the small outlined button of My bookings ("Cancel"), in
 * the primary colour. */
:root[data-design="launchpad"] .fi-lp-tickets a.fi-lp-tickets__new {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	margin: 0;
	/* Flush right, also when it wraps under "View all tickets". */
	margin-inline-start: auto;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--fi-primary);
	border-radius: var(--fi-radius-control);
	background-color: var(--fi-card-bg);
	color: var(--fi-primary);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--fi-duration) ease, color var(--fi-duration) ease;
}

:root[data-design="launchpad"] .fi-lp-tickets a.fi-lp-tickets__new:hover {
	background-color: var(--fi-primary);
	color: var(--fi-on-primary);
}

:root[data-design="launchpad"] .fi-lp-tickets a.fi-lp-tickets__new:focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

/* Quick actions: big rows with an icon tile, a label and a description. */
.fi-lp-actions__list {
	display: grid;
	gap: 0.125rem;
	margin: 0 -0.5rem;
	padding: 0;
	list-style: none;
}

.fi-lp-action {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-height: 3.5rem;
	padding: 0.5rem;
	border-radius: 10px;
	color: var(--fi-heading);
	text-decoration: none;
	transition: background-color var(--fi-duration) ease;
}

.fi-lp-action:hover {
	background: var(--fi-surface);
	color: var(--fi-primary);
}

.fi-lp-action__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 10px;
	background: var(--fi-lp-tone-navy-bg);
	color: var(--fi-lp-tone-navy);
}

.fi-lp-tone--blue {
	background: var(--fi-lp-tone-blue-bg);
	color: var(--fi-lp-tone-blue);
}

.fi-lp-tone--gold {
	background: var(--fi-lp-tone-gold-bg);
	color: var(--fi-lp-tone-gold);
}

.fi-lp-tone--fern {
	background: var(--fi-lp-tone-fern-bg);
	color: var(--fi-lp-tone-fern);
}

.fi-lp-tone--violet {
	background: var(--fi-lp-tone-violet-bg);
	color: var(--fi-lp-tone-violet);
}

.fi-lp-tone--teal {
	background: var(--fi-lp-tone-teal-bg);
	color: var(--fi-lp-tone-teal);
}

.fi-lp-tone--rose {
	background: var(--fi-lp-tone-rose-bg);
	color: var(--fi-lp-tone-rose);
}

.fi-lp-tone--navy {
	background: var(--fi-lp-tone-navy-bg);
	color: var(--fi-lp-tone-navy);
}

.fi-lp-action__text {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
}

.fi-lp-action__label {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
}

.fi-lp-action__desc {
	color: var(--fi-muted);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
}


/* --- 4.8 Desktop: the welcome row and command bar centred. --- */
@media (min-width: 64rem) {
	.fi-lp-welcome {
		justify-content: center;
		text-align: center;
	}

	.fi-lp-command,
	.fi-lp-answer {
		margin-inline: auto;
	}
}

/* --- 4.9 Phones: a tighter command bar and results. --- */
@media (max-width: 39.99rem) {
	input.fi-lp-command__input {
		padding-left: 3rem;
		font-size: 1.0625rem; /* At least 16px, so phones don't zoom in. */
	}

	/* The Clear button's room only while there is text, so the short hint
	 * fits at 320px. */
	.fi-lp-command:not(.has-value) input.fi-lp-command__input {
		padding-right: 1rem;
	}

	.fi-lp-command__icon {
		left: 1rem;
	}

	.fi-lp-option {
		gap: 0.75rem;
		padding-inline: 0.5rem;
	}

	.fi-lp-option__text {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
	}

	.fi-lp-option__label {
		max-width: 100%;
	}

	.fi-lp-option__tag {
		max-width: 100%;
		font-size: 0.75rem;
	}
}

/* ==================================================================
 * 5. Login page: the light page with a slim navy strip at the top, a white
 *    card with the full-colour logo and "Staff intranet". The Google
 *    button comes first, "Admin login" under the card.
 * ================================================================== */
body.login.fi-login.fi-design-launchpad::before {
	height: 0.375rem;
	border-radius: 0;
	background: var(--fi-login-band);
}

body.login.fi-login.fi-design-launchpad::after {
	content: none;
}

body.login.fi-login.fi-design-launchpad #login {
	margin-top: clamp(2.5rem, 12vh, 7rem);
	border: 1px solid var(--fi-lp-line);
	border-radius: var(--fi-radius-lg);
	box-shadow: var(--fi-lp-shadow-lift);
}

body.login.fi-login.fi-design-launchpad div#login h1 a::before {
	width: 3rem;
	height: 3px;
	background: var(--fi-lp-accent-bar);
}

body.login.fi-login.fi-design-launchpad div#login h1 a {
	color: var(--fi-lp-navy);
}

body.login.fi-login.fi-design-launchpad .hwdl-admin-login-toggle-link a {
	border: 1px solid var(--fi-lp-line);
	box-shadow: none;
}

@media (max-width: 40rem) {
	body.login.fi-login.fi-design-launchpad::before {
		height: 0.375rem;
		border-radius: 0;
	}
}

body.login.fi-login.fi-design-launchpad.interim-login::before {
	height: 0.25rem;
}

@media (max-width: 30rem) {
	body.login.fi-login.fi-design-launchpad #login {
		margin-top: 1.75rem;
	}
}

/* --- "Ask Claude" (Appearance > Search; VB-HelpDesk's "Ask the intranet"):
 * the option in the results, and the answer card under the search box. --- */
.fi-lp-option--ask .fi-lp-option__label {
	font-weight: 600;
}

.fi-lp-option--ask .fi-lp-option__icon--glyph {
	background: var(--fi-lp-tone-violet-bg);
	color: var(--fi-lp-tone-violet);
}

.fi-lp-option__tag--ai {
	padding: 0 0.4375rem;
	border-radius: 999px;
	background: var(--fi-lp-tone-violet-bg);
	color: var(--fi-lp-tone-violet);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
}

.fi-lp-answer {
	max-width: 46rem;
	margin-top: 0.75rem; /* Only the top: 4.8 centres it under the command bar on desktops. */
	padding: 0.875rem 1.25rem 1.125rem;
	border: 1px solid var(--fi-lp-line);
	border-radius: 14px;
	background: var(--fi-card-bg);
	box-shadow: var(--fi-lp-shadow-card);
}

.fi-lp-answer[hidden] {
	display: none;
}

.fi-lp-answer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.fi-lp-answer__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--fi-heading);
	font-family: var(--fi-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}

.fi-lp-answer__title svg {
	flex: none;
	color: var(--fi-lp-tone-violet);
}

.fi-lp-answer__close {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: -0.25rem -0.625rem -0.25rem 0;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--fi-muted);
	cursor: pointer;
}

.fi-lp-answer__close:hover {
	background: var(--fi-lp-hover);
	color: var(--fi-heading);
}

.fi-lp-answer__question {
	margin: 0.25rem 0 0;
	color: var(--fi-muted);
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.fi-lp-answer__asked {
	font-weight: 600;
}

.fi-lp-answer__body {
	margin-top: 0.625rem;
	color: var(--fi-text);
	font-size: 1rem;
	line-height: 1.55;
}

.fi-lp-answer__body p {
	margin: 0 0 0.5rem;
}

.fi-lp-answer__body p:last-child {
	margin-bottom: 0;
}

.fi-lp-answer__loading {
	color: var(--fi-muted);
	animation: fi-lp-thinking 1.4s ease-in-out infinite;
}

@keyframes fi-lp-thinking {
	50% {
		opacity: 0.45;
	}
}

.fi-lp-answer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.875rem 0 0;
	padding: 0;
	list-style: none;
}

.fi-lp-answer__links[hidden] {
	display: none;
}

.fi-lp-answer__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.5rem;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--fi-lp-line);
	border-radius: 999px;
	background: var(--fi-surface);
	color: var(--fi-heading);
	font-size: 0.9375rem;
	font-weight: 650;
	text-decoration: none;
}

.fi-lp-answer__link:hover {
	border-color: var(--fi-primary);
	background: var(--fi-lp-hover);
	color: var(--fi-heading);
}

.fi-lp-answer__tag {
	color: var(--fi-muted);
	font-size: 0.8125rem;
	font-weight: 500;
}

.fi-lp-answer__link--ticket,
.fi-lp-answer__link--ticket:hover {
	border-color: var(--fi-primary);
	background: var(--fi-primary);
	color: var(--fi-on-primary);
}

.fi-lp-answer__link--ticket:hover {
	background: var(--fi-primary-hover);
}

/* The conversation: each question and its answer, then the follow-up box. */
.fi-lp-answer__turn + .fi-lp-answer__turn {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--fi-lp-line);
}

.fi-lp-answer__badge {
	display: inline-block;
	margin: 0.5rem 0 0;
	padding: 0.0625rem 0.5rem;
	border-radius: 999px;
	background: var(--fi-lp-tone-gold-bg);
	color: var(--fi-lp-tone-gold);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.6;
}

.fi-lp-answer__body ol,
.fi-lp-answer__body ul {
	margin: 0.25rem 0 0.5rem;
	padding-left: 1.5rem;
}

.fi-lp-answer__body li {
	margin: 0.1875rem 0;
	padding-left: 0.125rem;
}

.fi-lp-answer__body > :last-child {
	margin-bottom: 0;
}

.fi-lp-answer__follow {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
}

.fi-lp-answer__follow[hidden] {
	display: none;
}

.fi-lp-answer__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--fi-control-border);
	border-radius: 10px;
	background: var(--fi-control-bg);
	color: var(--fi-text);
	font: inherit;
	font-size: 1rem; /* At least 16px, so phones don't zoom in. */
}

/* Like the command bar: a solid 2px border in the primary colour. */
.fi-lp-answer__input:focus {
	border-color: var(--fi-primary);
	outline: none;
	box-shadow: inset 0 0 0 1px var(--fi-primary);
}

.fi-lp-answer__send {
	flex: none;
	min-height: 2.75rem;
	padding: 0.375rem 1.125rem;
	border: 0;
	border-radius: 10px;
	background: var(--fi-primary);
	color: var(--fi-on-primary);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}

.fi-lp-answer__send:hover {
	background: var(--fi-primary-hover);
}

.fi-lp-answer__send:disabled {
	opacity: 0.6;
	cursor: progress;
}

.fi-lp-answer__note {
	margin: 0.875rem 0 0;
	color: var(--fi-muted);
	font-size: 0.8125rem;
	line-height: 1.45;
}

/* ==================================================================
 * 6. Motion, forced colours and print.
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
	.fi-lp-answer__loading,
	.fi-lp-command__field,
	.fi-lp-command__popup,
	.fi-lp-tile,
	.fi-lp-action,
	:root[data-design="launchpad"] .fi-lp-tickets a.fi-lp-tickets__new {
		animation: none;
		transition: none;
	}
}

@media (forced-colors: active) {
	.fi-lp-answer,
	.fi-lp-answer__badge,
	.fi-lp-answer__input,
	.fi-lp-answer__send,
	.fi-lp-answer__link,
	.fi-lp-command__field,
	.fi-lp-command__popup,
	.fi-lp-tile,
	.fi-lp-card,
	.fi-lp-bookings div.srb-my-bookings,
	:root[data-design="launchpad"] .fi-lp-tickets {
		border: 1px solid CanvasText;
	}

	.fi-lp-command__field:focus-within {
		outline: 2px solid Highlight;
	}

	.fi-lp-option.is-active {
		outline: 2px solid Highlight;
		outline-offset: -2px;
	}

	.fi-lp-chip {
		border: 1px solid CanvasText;
	}
}

@media print {
	.fi-lp-command,
	.fi-lp-most {
		display: none !important;
	}
}