/*
 * Ferndale Intranet: plugin group "small-tools".
 *
 * 1. School Week Tracker: the [school_week] heading (page 207), given the
 *    classes .fi-school-week, .is-week-1/-2, .is-half-term or .is-no-data
 *    and the spans __week / __date by inc/plugins/small-tools.php.
 * 2. The Google Calendar embed on the School Calendar page (207).
 * 3. Pupil Password Generator ([pupil_password_ninja], page 430).
 * 4. UK VAT Calculator ([uk_vat_calculator] and its block, page 943).
 *
 * Rules (DESIGN-BRIEF §3): role tokens only; selectors at least (0,2,1);
 * !important only against the plugins' inline style="" attributes (each one
 * is marked "inline"). JS-driven state (the password button's disabled
 * property, the VAT error's hidden attribute, the visually hidden VAT
 * radios) only gets colours and never a display change. Content stays light
 * in a dark OS: every surface and control sets its own colours.
 *
 * Digest: theme-work/plugins/small-tools.md.
 */

/* ------------------------------------------------------------------
 * 1. School week heading: a week pill and the date as the page's
 *    visible heading (page 207 hides its title), with the same short
 *    accent bar as the title bands. (The front-page welcome line shows
 *    the same week as plain text: layout.css .fi-welcome__week.)
 * ------------------------------------------------------------------ */
.entry-content h2.fi-school-week {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.9rem;
	max-width: 100%;
	margin: 0 0 1.75rem !important; /* inline: margin: 0 */
	padding: 0;
	color: var(--fi-h2) !important; /* inline: color (plugin setting, default #000) */
	font-family: var(--fi-font-display);
	font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem) !important; /* inline: font-size (38px) */
	font-style: normal !important; /* inline: font-style */
	font-weight: var(--fi-display-weight) !important; /* inline: font-weight */
	letter-spacing: var(--fi-display-tracking);
	line-height: 1.15;
	text-align: start !important; /* inline: text-align */
	text-wrap: balance;
}

.entry-content h2.fi-school-week::after {
	content: "";
	width: 3.5rem;
	height: 4px;
	margin-top: 0.3rem;
	margin-inline-end: calc(100% - 3.5rem); /* Always on a line of its own. */
	border-radius: 4px;
	background: var(--fi-accent-line);
}

.entry-content .fi-school-week span.fi-school-week__week {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 0.3em 0.95em;
	border-radius: 1em; /* A pill on one line, a rounded box if a long state wraps. */
	background: var(--fi-accent);
	color: var(--fi-on-accent);
	font-family: var(--fi-font);
	font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.35;
	text-wrap: balance;
}

.entry-content .fi-school-week span.fi-school-week__date {
	min-width: 0;
}

/* Half term: the cycle is paused, so a quieter tint. */
.entry-content .fi-school-week.is-half-term span.fi-school-week__week {
	background: var(--fi-tint);
	color: var(--fi-primary);
}

/* Holidays (no term data) and the plugin's error text. */
.entry-content .fi-school-week.is-no-data span.fi-school-week__week {
	background: var(--fi-surface-2);
	color: var(--fi-muted);
	font-weight: 700;
}

/* ------------------------------------------------------------------
 * 2. Google Calendar embed (page content on 207). The inside of the
 *    frame is Google's and can't be styled.
 * ------------------------------------------------------------------ */
.entry-content iframe[src*="calendar.google.com"] {
	display: block;
	width: 100%;
	border: 1px solid var(--fi-border) !important; /* inline: border: solid 1px #777 */
	border-radius: var(--fi-radius);
	background: var(--fi-card-bg);
}

/* ------------------------------------------------------------------
 * Tool panels (password generator and VAT calculator): Version B's page
 * is open, so they are page-level tool cards (18px, soft shadow;
 * DESIGN-BRIEF decision 19). Version A puts the content in a white
 * article card, so there they are nested panels (12px, flat). The same
 * split as the file tools (file-tools.css).
 * ------------------------------------------------------------------ */
.entry-content div.uk-vat-calculator,
.entry-content div.pupil-password-ninja-shortcode {
	border-radius: var(--fi-radius-lg);
	box-shadow: var(--fi-shadow-sm);
}

.fi-design-classic .entry-content div.uk-vat-calculator,
.fi-design-classic .entry-content div.pupil-password-ninja-shortcode {
	border-radius: var(--fi-radius);
	box-shadow: none;
}

/* ------------------------------------------------------------------
 * 3. Pupil Password Generator: a tool panel with a .fi-btn button and
 *    the password in a monospaced box (l, I and 1, O and 0 differ).
 *    assets/js/a11y/small-tools.js makes the result a live region and
 *    marks the box data-fi-state="busy|password|message".
 * ------------------------------------------------------------------ */
.entry-content div.pupil-password-ninja-shortcode {
	margin: 0 !important; /* inline: margin: 1em 0 */
	padding: clamp(1rem, 0.85rem + 0.6vw, 1.375rem);
	border: 1px solid var(--fi-border);
	background: var(--fi-surface);
	color: var(--fi-text);
}

/* Side by side (page 430's columns): line up with the first paragraph
 * of the next column, which keeps its 1em top margin. The column is
 * only about 240px wide, so the panel padding is tighter (see the
 * password box at the end of this section). */
@media (min-width: 782px) {
	.wp-block-column > div.pupil-password-ninja-shortcode:first-child {
		margin-top: 1em !important; /* inline: margin: 1em 0 */
		padding: 1rem;
	}
}

/* The .fi-btn spec (base.css). */
.pupil-password-ninja-shortcode button.pupil-password-ninja-generate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.7rem 1rem !important; /* inline: padding: 0.5em 1em */
	border: 2px solid transparent;
	border-radius: var(--fi-radius-control);
	background-color: var(--fi-primary);
	color: var(--fi-on-primary);
	font-family: var(--fi-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--fi-duration) ease;
}

.pupil-password-ninja-shortcode button.pupil-password-ninja-generate:hover,
.pupil-password-ninja-shortcode button.pupil-password-ninja-generate:active {
	background-color: var(--fi-primary-hover);
	color: var(--fi-on-primary);
}

/* The plugin disables the button only while it fetches a password: the
 * label gives way to a spinner of the same size (no change in height). */
.pupil-password-ninja-shortcode button.pupil-password-ninja-generate:disabled {
	position: relative;
	background-color: var(--fi-primary);
	color: transparent;
	cursor: progress !important; /* inline: cursor: pointer */
}

.pupil-password-ninja-shortcode button.pupil-password-ninja-generate:disabled::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin: auto;
	border: 2px solid var(--fi-on-primary);
	border-right-color: transparent;
	border-radius: 50%;
	animation: fi-small-tools-spin 0.8s linear infinite;
}

.pupil-password-ninja-shortcode div.pupil-password-ninja-result {
	margin-top: 1.125rem !important; /* inline: margin-top: 1em */
}

.pupil-password-ninja-shortcode .pupil-password-ninja-result > strong {
	display: block;
	color: var(--fi-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
}

.pupil-password-ninja-shortcode p.pupil-password-ninja-password {
	display: flex;
	align-items: center;
	min-height: 3.25rem;
	margin: 0.4rem 0 0 !important; /* inline: margin-top: 5px */
	padding: 0.55rem 0.9rem;
	border: 1px dashed var(--fi-control-border);
	border-radius: var(--fi-radius-control);
	background: var(--fi-control-bg);
	color: var(--fi-heading);
	font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 1.125rem !important; /* inline: font-size: 1.2em */
	font-weight: 600;
	font-variant-numeric: slashed-zero;
	letter-spacing: 0.02em;
	line-height: 1.35;
	overflow-wrap: anywhere;
	-webkit-user-select: all; /* One click selects the whole password to copy. */
	user-select: all;
}

.pupil-password-ninja-shortcode p.pupil-password-ninja-password:empty::before {
	content: "Not generated yet";
	color: var(--fi-placeholder);
	font-family: var(--fi-font);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0;
}

.pupil-password-ninja-shortcode p.pupil-password-ninja-password[data-fi-state="busy"] {
	color: var(--fi-muted);
}

/* Error sentences ("Too many requests…"): plain text, in the danger colours. */
.pupil-password-ninja-shortcode p.pupil-password-ninja-password[data-fi-state="message"] {
	border-style: solid;
	border-color: var(--fi-danger);
	background: var(--fi-danger-tint);
	color: var(--fi-danger);
	font-family: var(--fi-font);
	font-size: 0.9375rem !important; /* inline: font-size: 1.2em */
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.45;
	-webkit-user-select: text;
	user-select: text;
}

/* In page 430's narrow column (from 782px) a 16px box with less padding
 * keeps passwords of up to 16–19 characters on one line, so they are
 * not split mid-word where a pupil could copy them wrongly. Longer ones
 * still wrap (overflow-wrap above). (0,3,1): beats the base rule and
 * leaves the message state alone. */
@media (min-width: 782px) {
	.wp-block-column p.pupil-password-ninja-password:not([data-fi-state="message"]) {
		padding-inline: 0.65rem;
		font-size: 1rem !important; /* inline: font-size: 1.2em */
		letter-spacing: 0;
	}
}

/* ------------------------------------------------------------------
 * 4. UK VAT Calculator: a tool panel on --fi-surface with the theme's
 *    form controls, a segmented control filled with --fi-primary when
 *    selected, .fi-btn buttons and the results as a white receipt.
 *    The plugin's own --uk-vat-* properties are re-pointed at role
 *    tokens as a fallback for anything not restyled below.
 * ------------------------------------------------------------------ */
.entry-content div.uk-vat-calculator {
	--uk-vat-accent: var(--fi-primary);
	--uk-vat-accent-strong: var(--fi-primary-hover);
	--uk-vat-border: var(--fi-border);
	--uk-vat-muted: var(--fi-muted);
	--uk-vat-bg: var(--fi-surface);
	--uk-vat-button-text: var(--fi-on-primary);
	width: 100%;
	max-width: 34rem;
	margin-inline: 0;
	padding: clamp(0.875rem, 0.6rem + 1.4vw, 1.75rem);
	border: 1px solid var(--fi-border);
	background: var(--fi-surface);
	color: var(--fi-text);
}

.uk-vat-calculator form.uk-vat-calculator__form {
	gap: 1.25rem;
}

.uk-vat-calculator label.uk-vat-calculator__label,
.uk-vat-calculator legend.uk-vat-calculator__legend {
	display: block;
	margin: 0 0 0.4rem;
	padding: 0;
	color: var(--fi-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
}

/* The one form-control spec (base.css), a little larger for the amount. */
.uk-vat-calculator input.uk-vat-calculator__input {
	width: 100%;
	min-height: 3rem;
	margin: 0;
	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-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.uk-vat-calculator input.uk-vat-calculator__input::placeholder {
	color: var(--fi-placeholder);
	opacity: 1;
}

.uk-vat-calculator input.uk-vat-calculator__input:focus-visible {
	border-color: var(--fi-primary);
	outline: 3px solid var(--fi-focus);
	outline-offset: 1px;
}

.uk-vat-calculator input.uk-vat-calculator__input[aria-invalid="true"] {
	border-color: var(--fi-danger);
	box-shadow: inset 0 0 0 1px var(--fi-danger);
}

/* Error text: colours only. Its hidden attribute is never overridden. */
.uk-vat-calculator p.uk-vat-calculator__error {
	margin: 0.45rem 0 0;
	color: var(--fi-danger);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
}

/* Segmented control. overflow stays visible so the focus ring isn't cut. */
.uk-vat-calculator div.uk-vat-calculator__segment {
	gap: 0.25rem;
	padding: 0.25rem;
	overflow: visible;
	border: 1px solid var(--fi-control-border);
	border-radius: var(--fi-radius-control);
	background-color: var(--fi-control-bg);
}

.uk-vat-calculator label.uk-vat-calculator__segment-label {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.4rem 0.75rem;
	border: 0;
	border-radius: calc(var(--fi-radius-control) - 3px);
	color: var(--fi-text);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	transition: background-color var(--fi-duration) ease, color var(--fi-duration) ease;
}

.uk-vat-calculator label.uk-vat-calculator__segment-label:hover {
	background-color: var(--fi-tint);
	color: var(--fi-primary);
}

.uk-vat-calculator input.uk-vat-calculator__radio:checked + label.uk-vat-calculator__segment-label {
	background-color: var(--fi-primary);
	color: var(--fi-on-primary);
	font-weight: 700;
}

.uk-vat-calculator input.uk-vat-calculator__radio:focus-visible + label.uk-vat-calculator__segment-label {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

.uk-vat-calculator div.uk-vat-calculator__actions {
	gap: 0.75rem;
}

/* Calculate: the .fi-btn spec; Reset: .fi-btn--secondary. Both restate
 * :focus so no other button rule can repaint them after a click. */
.uk-vat-calculator button.uk-vat-calculator__button,
.uk-vat-calculator button.uk-vat-calculator__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.7rem 1.3rem;
	border: 2px solid transparent;
	border-radius: var(--fi-radius-control);
	font-family: var(--fi-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--fi-duration) ease, color var(--fi-duration) ease, border-color var(--fi-duration) ease;
}

.uk-vat-calculator button.uk-vat-calculator__button,
.uk-vat-calculator button.uk-vat-calculator__button:focus {
	background-color: var(--fi-primary);
	color: var(--fi-on-primary);
}

.uk-vat-calculator button.uk-vat-calculator__button:hover {
	background-color: var(--fi-primary-hover);
	color: var(--fi-on-primary);
}

.uk-vat-calculator button.uk-vat-calculator__reset,
.uk-vat-calculator button.uk-vat-calculator__reset:focus {
	border-color: var(--fi-primary);
	background-color: transparent;
	color: var(--fi-primary);
}

.uk-vat-calculator button.uk-vat-calculator__reset:hover {
	border-color: var(--fi-primary);
	background-color: var(--fi-primary);
	color: var(--fi-on-primary);
}

.uk-vat-calculator button.uk-vat-calculator__button:focus-visible,
.uk-vat-calculator button.uk-vat-calculator__reset:focus-visible {
	outline: 3px solid var(--fi-focus);
	outline-offset: 2px;
}

/* Results: a white receipt; the gross total is set apart like an invoice. */
.uk-vat-calculator div.uk-vat-calculator__results {
	gap: 0;
	margin-top: 1.5rem;
	padding: 0.25rem 1rem;
	border: 1px solid var(--fi-border);
	border-radius: var(--fi-radius); /* A nested panel. */
	background: var(--fi-card-bg);
}

.uk-vat-calculator p.uk-vat-calculator__result-row {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.125rem 1rem;
	margin: 0;
	padding: 0.65rem 0;
	border-top: 1px solid var(--fi-border);
	line-height: 1.45;
}

.uk-vat-calculator p.uk-vat-calculator__result-row:first-child {
	border-top: 0;
}

.uk-vat-calculator span.uk-vat-calculator__result-label {
	color: var(--fi-muted);
	font-size: 0.9375rem;
}

.uk-vat-calculator strong.uk-vat-calculator__result-value {
	margin-inline-start: auto;
	color: var(--fi-heading);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: end;
}

.uk-vat-calculator p.uk-vat-calculator__result-row[data-result-key="gross"] {
	border-top: 2px solid var(--fi-control-border);
	font-size: 1.125rem;
}

.uk-vat-calculator p.uk-vat-calculator__result-row[data-result-key="gross"] span.uk-vat-calculator__result-label {
	color: var(--fi-heading);
	font-size: 1rem;
	font-weight: 700;
}

/* Wide screens: the form and the results side by side, filling the
 * reading width (the plugin's JS doesn't measure layout). */
@media (min-width: 60rem) {
	.entry-content div.uk-vat-calculator {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: start;
		gap: 1.5rem 2rem;
		max-width: none;
	}

	.uk-vat-calculator div.uk-vat-calculator__results {
		margin-top: 0;
	}
}

/* Small phones (320–384px, and inside Version A's article card): keep
 * "Remove VAT" and the two buttons on one line each. */
@media (max-width: 24rem) {
	.uk-vat-calculator label.uk-vat-calculator__segment-label {
		padding-inline: 0.375rem;
		font-size: 0.875rem;
	}

	.uk-vat-calculator button.uk-vat-calculator__button,
	.uk-vat-calculator button.uk-vat-calculator__reset {
		padding-inline: 1rem;
	}

	.uk-vat-calculator div.uk-vat-calculator__results {
		padding-inline: 0.75rem;
	}
}

/* ------------------------------------------------------------------
 * Motion, forced colours.
 * ------------------------------------------------------------------ */
@keyframes fi-small-tools-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pupil-password-ninja-shortcode button.pupil-password-ninja-generate,
	.uk-vat-calculator button.uk-vat-calculator__button,
	.uk-vat-calculator button.uk-vat-calculator__reset,
	.uk-vat-calculator label.uk-vat-calculator__segment-label {
		transition: none;
	}

	/* Still visibly busy, just slower. */
	.pupil-password-ninja-shortcode button.pupil-password-ninja-generate:disabled::after {
		animation-duration: 2.4s;
	}
}

@media (forced-colors: active) {
	.entry-content .fi-school-week span.fi-school-week__week,
	.entry-content div.pupil-password-ninja-shortcode,
	.entry-content div.uk-vat-calculator,
	.uk-vat-calculator div.uk-vat-calculator__results {
		border: 1px solid CanvasText;
	}

	.pupil-password-ninja-shortcode button.pupil-password-ninja-generate,
	.uk-vat-calculator button.uk-vat-calculator__button,
	.uk-vat-calculator button.uk-vat-calculator__reset {
		border: 1px solid ButtonText;
	}

	.uk-vat-calculator input.uk-vat-calculator__radio:checked + label.uk-vat-calculator__segment-label {
		background-color: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}

	/* The system colours the label, so show it (disabled) instead of the spinner. */
	.pupil-password-ninja-shortcode button.pupil-password-ninja-generate:disabled::after {
		content: none;
	}
}