/**
 * Attendance Rate and Attendance Methodology.
 *
 * Self-contained on purpose. This plugin has to render on two themes at once:
 * the district's current one, which is Tailwind 3 with no design tokens at
 * all, and the rebuilt one arriving around December 2026, which is Tailwind 4
 * plus daisyUI and defines the whole palette as custom properties.
 *
 * So every colour is written as `var(--token, literal)`. On the current theme
 * the literals apply; on the new theme the tokens win and the card adopts the
 * district palette without a line changing. The literals are the new theme's
 * light values, read back from painted pixels rather than converted by hand.
 *
 * Nothing here depends on a utility class from either theme - no `sr-only`,
 * no `alert` - because neither is guaranteed to be generated.
 */

.aesd-attendance-rate,
.aesd-attendance-methodology {
	/* One place to change the palette, and the only place tokens are read. */
	--aesd-card: var(--color-base-100, #f7f9fa);
	--aesd-line: var(--color-base-300, #dfe5ed);
	--aesd-ink: var(--color-base-content, #16233a);
	--aesd-accent: var(--attendance-accent, var(--color-brand, #1e40af));
	--aesd-radius: var(--radius-box, 0.5rem);
	--aesd-muted: color-mix(in oklab, var(--aesd-ink) 75%, transparent);

	/* The page this lands on may be inside a prose container that sets a
	   measure, italics or link colours. Reset the few that would show. */
	color: var(--aesd-ink);
	font-style: normal;
	box-sizing: border-box;
}

.aesd-attendance-rate *,
.aesd-attendance-methodology * {
	box-sizing: inherit;
}

/* A visually hidden class of our own; neither theme reliably emits one. */
.aesd-attendance-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Editor-only warnings. Plain, because it is not public-facing. */
.aesd-attendance-notice {
	border: 1px solid #d9a441;
	background: #fdf6e7;
	color: #3f2d0b;
	border-radius: 0.25rem;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------------- card */

.aesd-attendance-rate .attendance-rate-heading {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--aesd-ink);
}

.aesd-attendance-rate .attendance-rate-card {
	background-color: var(--aesd-card);
	border: 2px solid var(--aesd-line);
	border-radius: var(--aesd-radius);
	padding: 1.5rem;
	container-type: inline-size;
}

/* ---------------------------------------------------------------- headline */

.aesd-attendance-rate .attendance-rate-headline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
}

.aesd-attendance-rate .attendance-rate-dial {
	flex: none;
	width: 7.5rem;
	max-width: 30cqi;
}

.aesd-attendance-rate .attendance-rate-dial svg {
	display: block;
	width: 100%;
	height: auto;
	/* Start the arc at twelve o'clock rather than three. */
	transform: rotate(-90deg);
}

.aesd-attendance-rate .attendance-rate-dial circle {
	fill: none;
	stroke-width: 12;
}

.aesd-attendance-rate .attendance-rate-dial__track {
	stroke: var(--aesd-line);
}

.aesd-attendance-rate .attendance-rate-dial__value {
	/* `--color-brand`, never `--color-primary`. The dial is non-text UI and
	   WCAG 1.4.11 wants 3:1 against the card behind it. Measured from painted
	   pixels on the new theme: primary is 8.26:1 on the light card but only
	   1.73:1 on the dark one, because the dark theme cannot lighten that
	   token - it is also a fill behind near-white text. `--color-brand` is
	   redefined per theme and clears both: 8.26:1 and 11.87:1. */
	stroke: var(--aesd-accent);
	stroke-linecap: round;
}

.aesd-attendance-rate .attendance-rate-figure {
	flex: 1 1 12rem;
}

.aesd-attendance-rate .attendance-rate-eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* 75% of the ink colour keeps this over 4.5:1 on the card in both
	   themes, which small uppercase text needs more than anything else. */
	color: var(--aesd-muted);
}

.aesd-attendance-rate .attendance-rate-value {
	margin: 0.25rem 0 0;
	line-height: 1;
	color: var(--aesd-ink);
}

.aesd-attendance-rate .attendance-rate-value__number {
	font-size: clamp(2.75rem, 12cqi, 4rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	/* Keeps the digits from reflowing as the number changes. */
	font-variant-numeric: tabular-nums;
}

.aesd-attendance-rate .attendance-rate-value__unit {
	font-size: clamp(1.25rem, 5cqi, 1.75rem);
	font-weight: 700;
	margin-inline-start: 0.125rem;
}

.aesd-attendance-rate .attendance-rate-scope {
	margin: 0.25rem 0 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--aesd-ink);
}

.aesd-attendance-rate .attendance-rate-period {
	margin: 0.125rem 0 0;
	font-size: 0.9375rem;
	color: var(--aesd-muted);
}

/* --------------------------------------------------------------- day strip */

.aesd-attendance-rate .attendance-rate-days {
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem;
	margin-top: 0.625rem;
	/* Pull the row back so the hit areas look optically aligned with the
	   text above rather than indented by their own padding. */
	margin-inline-start: -0.3125rem;
}

.aesd-attendance-rate .attendance-rate-day {
	/* 24x24 is the WCAG 2.2 minimum target size (2.5.8). The visible dot is
	   much smaller; the button carries the rest as transparent padding, so
	   the strip stays delicate without becoming hard to hit. Ten of these
	   plus gaps is 250px, which fits a 358px phone card. */
	inline-size: 1.5rem;
	block-size: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
	border-radius: 999px;
}

.aesd-attendance-rate .attendance-rate-day__dot {
	inline-size: 0.625rem;
	block-size: 0.625rem;
	border-radius: 999px;
	background-color: var(--aesd-accent);
	/* Set per dot by render.php and floored at 0.62, which is where the
	   accent over the light card crosses 3:1 - these are buttons, so the
	   faintest one still has to be identifiable as a control. */
	opacity: var(--attendance-day-opacity, 1);
	transition: transform 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.aesd-attendance-rate .attendance-rate-day__dot {
		transition: none;
	}
}

.aesd-attendance-rate .attendance-rate-day:hover .attendance-rate-day__dot {
	transform: scale(1.25);
}

.aesd-attendance-rate .attendance-rate-day:focus-visible {
	outline: 2px solid var(--aesd-ink);
	outline-offset: 1px;
}

.aesd-attendance-rate .attendance-rate-day[aria-current="true"] {
	/* A ring around the selected day, not just a stronger dot: opacity is
	   already carrying the rate, so selection needs its own channel. */
	box-shadow: inset 0 0 0 2px var(--aesd-accent);
}

.aesd-attendance-rate .attendance-rate-day[aria-current="true"] .attendance-rate-day__dot {
	opacity: 1;
}

.aesd-attendance-rate .attendance-rate-days__caption {
	margin: 0.375rem 0 0;
	font-size: 0.8125rem;
	color: var(--aesd-muted);
}

/* ------------------------------------------------------------------ meters */

.aesd-attendance-rate .attendance-rate-meters {
	/* Beside the headline on a wide card, beneath it on a narrow one. */
	flex: 1 1 10rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.aesd-attendance-rate .attendance-rate-meter dt {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--aesd-ink);
	margin-bottom: 0.125rem;
}

.aesd-attendance-rate .attendance-rate-meter dd {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.aesd-attendance-rate .attendance-rate-meter__value {
	font-size: 1.375rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--aesd-ink);
	/* Keeps the rails aligned however wide the numbers are. */
	flex: none;
	min-width: 4.25rem;
}

.aesd-attendance-rate .attendance-rate-meter__unit {
	font-size: 0.875rem;
	font-weight: 700;
	margin-inline-start: 0.0625rem;
}

.aesd-attendance-rate .attendance-rate-meter__rail {
	flex: 1 1 auto;
	height: 0.5rem;
	border-radius: 999px;
	background-color: var(--aesd-line);
	overflow: hidden;
}

.aesd-attendance-rate .attendance-rate-meter__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background-color: var(--aesd-accent);
}

/* ------------------------------------------------------------------- stats */

.aesd-attendance-rate .attendance-rate-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--aesd-line);
}

.aesd-attendance-rate .attendance-rate-stat dt {
	font-size: 0.8125rem;
	color: var(--aesd-muted);
}

.aesd-attendance-rate .attendance-rate-stat dd {
	margin: 0.125rem 0 0;
	font-size: 1.25rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--aesd-ink);
}

/* --------------------------------------------------------------- breakdown */

.aesd-attendance-rate .attendance-rate-breakdown {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--aesd-line);
	/* Only the horizontal overflow, which is unavoidable on a narrow phone,
	   is a scroll container. The table is allowed its full height so the
	   page scrolls instead - no focus management, no scroll trap. */
	overflow-x: auto;
}

.aesd-attendance-rate .attendance-rate-breakdown table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.aesd-attendance-rate .attendance-rate-breakdown caption {
	text-align: start;
	font-weight: 600;
	padding-bottom: 0.75rem;
	color: var(--aesd-ink);
}

.aesd-attendance-rate .attendance-rate-breakdown th,
.aesd-attendance-rate .attendance-rate-breakdown td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--aesd-line);
	text-align: start;
	white-space: nowrap;
}

.aesd-attendance-rate .attendance-rate-breakdown thead th {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--aesd-muted);
}

.aesd-attendance-rate .attendance-rate-breakdown tbody th {
	font-weight: 500;
	white-space: normal;
}

.aesd-attendance-rate .attendance-rate-numeric {
	text-align: end;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- disclaimer/footer */

.aesd-attendance-rate .attendance-rate-disclaimer {
	margin: 1.25rem 0 0;
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--aesd-muted);
}

.aesd-attendance-rate .attendance-rate-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--aesd-line);
	font-size: 0.8125rem;
	color: var(--aesd-muted);
}

.aesd-attendance-rate .attendance-rate-footer__stale {
	/* The refresh has been failing for over a day. Weight, not colour alone -
	   and the word "Last" in the string carries the meaning for anyone who
	   cannot see either. */
	font-weight: 700;
	color: var(--aesd-ink);
}

/* ---------------------------------------------------------- forced colours */

@media (forced-colors: active) {
	.aesd-attendance-rate .attendance-rate-dial__track {
		stroke: GrayText;
	}

	.aesd-attendance-rate .attendance-rate-dial__value {
		stroke: Highlight;
	}

	/* A background colour is dropped in forced-colors, so a filled rail would
	   vanish and every meter would read as empty. A border is kept. */
	.aesd-attendance-rate .attendance-rate-meter__rail {
		border: 1px solid GrayText;
	}

	.aesd-attendance-rate .attendance-rate-meter__fill {
		forced-color-adjust: none;
		background-color: Highlight;
	}

	/* Opacity survives forced-colors but colour does not, so the dots would
	   all repaint identically. The selected ring is what still has to read. */
	.aesd-attendance-rate .attendance-rate-day__dot {
		background-color: CanvasText;
	}

	.aesd-attendance-rate .attendance-rate-day[aria-current="true"] {
		box-shadow: inset 0 0 0 2px Highlight;
	}
}

/* ==========================================================================
   Attendance Methodology (demo)
   --------------------------------------------------------------------------
   TEMPORARY, paired with blocks/src/attendance-methodology/. Delete this
   section, the block directory and its entry in includes/blocks.php together.

   Deliberately plain: a working document shown to a handful of staff, not a
   designed surface.
   ========================================================================== */

.aesd-attendance-methodology {
	background-color: color-mix(in oklab, var(--aesd-ink) 4%, var(--aesd-card));
	border: 2px solid var(--aesd-line);
	border-radius: var(--aesd-radius);
	padding: 1.5rem;
	/* The page body may be a grid, and a grid item's default `min-width:auto`
	   is its min-content width - so an unbreakable line in the code samples
	   below would set the width of the whole page. */
	min-width: 0;
	max-width: 100%;
}

.aesd-attendance-methodology .methodology-flag {
	margin: 0 0 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #3f2d0b;
	background-color: #e8b04b;
	border-radius: 0.25rem;
	padding: 0.375rem 0.75rem;
}

.aesd-attendance-methodology h2 {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	font-weight: 800;
}

.aesd-attendance-methodology h3 {
	margin: 2rem 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 700;
}

.aesd-attendance-methodology h4 {
	margin: 1.25rem 0 0.375rem;
	font-size: 1rem;
	font-weight: 700;
}

.aesd-attendance-methodology p {
	margin: 0 0 0.75rem;
	max-width: 68ch;
	line-height: 1.6;
}

.aesd-attendance-methodology .methodology-code {
	background-color: var(--aesd-card);
	border: 1px solid var(--aesd-line);
	border-radius: 0.25rem;
	padding: 0.875rem 1rem;
	margin: 0 0 1rem;
	max-width: 100%;
	font-size: 0.8125rem;
	line-height: 1.5;
	/* Wrapped rather than scrolled. A horizontally scrolling code block is a
	   region a keyboard user cannot reach without a tab stop, and on a phone
	   the DBA's query is far wider than the screen. */
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.aesd-attendance-methodology .methodology-list {
	margin: 0 0 0.75rem;
	padding-left: 1.25rem;
	list-style: disc;
	max-width: 68ch;
}

.aesd-attendance-methodology .methodology-list li {
	margin-bottom: 0.375rem;
	line-height: 1.6;
}

.aesd-attendance-methodology .methodology-scroll {
	/* Six columns cannot wrap into a phone, so this one really does scroll.
	   The template gives it role="region", a label and tabindex="0" so the
	   scroll is reachable from the keyboard rather than mouse-only. */
	overflow-x: auto;
	max-width: 100%;
}

.aesd-attendance-methodology .methodology-scroll:focus-visible {
	outline: 2px solid var(--aesd-accent);
	outline-offset: 2px;
}

.aesd-attendance-methodology table {
	border-collapse: collapse;
	background-color: var(--aesd-card);
	font-size: 0.9375rem;
	margin-bottom: 1rem;
}

.aesd-attendance-methodology .methodology-schools {
	width: 100%;
}

.aesd-attendance-methodology caption {
	text-align: start;
	font-weight: 600;
	padding: 0.5rem 0;
}

.aesd-attendance-methodology th,
.aesd-attendance-methodology td {
	padding: 0.4375rem 0.75rem;
	border: 1px solid var(--aesd-line);
	text-align: start;
}

.aesd-attendance-methodology thead th {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.aesd-attendance-methodology .methodology-numeric {
	text-align: end;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.aesd-attendance-methodology .methodology-sum td {
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.aesd-attendance-methodology .methodology-sum__result th,
.aesd-attendance-methodology .methodology-sum__result td,
.aesd-attendance-methodology tfoot th,
.aesd-attendance-methodology tfoot td {
	border-top-width: 2px;
	font-weight: 700;
}

.aesd-attendance-methodology .methodology-focus>* {
	/* Weight and a rule, not colour alone - this marks "the school you are
	   looking at" and has to survive forced-colors and colour blindness. */
	background-color: color-mix(in oklab, var(--aesd-ink) 6%, transparent);
	font-weight: 700;
	border-block-color: var(--aesd-accent);
}