/*
 * Departmental history.
 *
 * 3,563 characters in seven paragraphs, the longest 939, run at the theme's
 * 42rem prose measure — about 84 characters a line where the readable band is
 * 45 to 75 — under an all-caps heading repeating the page title.
 *
 * Every custom property carries a fallback. The plugin owns this page's markup
 * (ADR-001) and has to keep looking like itself under a theme that has never
 * heard of these tokens.
 */

.jmns-history {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

/*
 * One band, no side column.
 *
 * The years used to be indexed in a rail beside the account, which earned its
 * keep when the account was all there was. The chronology above now answers
 * "when did this happen" properly — with what happened, not just the number —
 * so a second list of the same years was two answers to one question, and the
 * weaker one.
 *
 * The account gets the whole band back. It is set in two columns on a wide
 * screen rather than one: a 67-character measure across a 75rem page leaves
 * half of it empty, and a single line of text 140 characters long is not the
 * alternative.
 */

.jmns-history__index-title {
	margin-block: 0 var(--wp--preset--spacing--20, 0.5rem);
	color: var(--wp--preset--color--interactive, #245746);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jmns-history__index-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10, 0.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jmns-history__index-item {
	margin: 0;
}

/*
 * 44px tall, not the 24 SC 2.5.8 asks for: seventeen small numeric links in a
 * column is exactly the shape that is hard to hit, and this is the page's only
 * interactive element.
 */
.jmns-history__index-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 3.25rem;
	min-block-size: 44px;
	padding-inline: var(--wp--preset--spacing--20, 0.5rem);
	border: 1px solid var(--wp--preset--color--border, #DCE4DF);
	border-radius: var(--r-pill, 999px);
	color: var(--wp--preset--color--text-primary, #1F2925);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-decoration: none;
}

.jmns-history__index-link:hover,
.jmns-history__index-link:focus-visible {
	border-color: var(--wp--preset--color--border-strong, #6F8D7A);
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	color: var(--wp--preset--color--interactive-hover, #173D32);
}

/*
 * The year the reader has just jumped to, marked while it is targeted. Without
 * it a jump into the middle of a paragraph gives no sign of having arrived
 * anywhere — the page simply scrolls (SC 2.4.7's problem, one level up).
 */
.jmns-history__year:target {
	border-radius: var(--r-input, 4px);
	outline: 2px solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 2px;
}

/* Below the two-column breakpoint the index is a row above the account. */
@media (max-width: 55.999rem) {
	.jmns-history__index {
		margin-block-end: var(--wp--preset--spacing--50, 2rem);
		padding-block-end: var(--wp--preset--spacing--40, 1.25rem);
		border-block-end: 1px solid var(--wp--preset--color--border, #DCE4DF);
	}
}

/*
 * A measure, not a container width.
 *
 * `ch` and not a pixel cap, so the line holds the same number of characters
 * whatever the reader has done to their text size.
 *
 * 54ch, not the 66 this started at, because `ch` is the width of the digit
 * zero and this font's zero is 0.62em — far wider than its average lowercase
 * letter. 66ch measured 660px, which is 12px narrower than the 672px the theme
 * already gave the page and about 84 characters a line. Calibrated against
 * rendered Malay prose, 54ch is close to 70, which is inside the readable band.
 */
.jmns-history__text {
	max-inline-size: 54ch;
	margin-block: 0 var(--wp--preset--spacing--40, 1.25rem);
	line-height: 1.75;
}

.jmns-history__text:last-child {
	margin-block-end: 0;
}

/*
 * The opening paragraph is set larger, as a standfirst.
 *
 * It carries the founding — the department as a division of JAIS under a
 * Sheikhul Islam — and it is the paragraph that decides whether anybody reads
 * the other six.
 *
 * 38ch and not 46: `ch` scales with the font size, so the same figure that
 * gives the body 540px gave the standfirst 644px — a larger paragraph set
 * *wider* than the ones beneath it, stepping the block's edge outward at the
 * second paragraph and reading as a mistake. This holds the standfirst inside
 * the body measure, which is where a standfirst belongs.
 */
.jmns-history__text--lede {
	max-inline-size: 38ch;
	margin-block-end: var(--wp--preset--spacing--50, 1.75rem);
	color: var(--wp--preset--color--text-primary, #1F2925);
	/*
	 * A step above the body, not a heading. The `title-sm` token resolves to
	 * 22px here, which against 16px body copy made the standfirst look like a
	 * headline and the account beneath it look like small print.
	 */
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
	line-height: 1.7;
}

/*
 * The years, marked where they already stand.
 *
 * A history is read two ways — straight through, and by hunting for a date —
 * and the second was impossible in twenty-five plain numbers spread through
 * 3,500 characters. Weight rather than colour: green would read as a link on a
 * page whose links are green, and colour alone is not an available way to
 * distinguish anything (SC 1.4.1).
 *
 * `<b>` and not `<strong>`: this is typographic marking, not emphasis, and
 * `strong` would have a screen reader stress every date in the account.
 */
.jmns-history__year {
	font-weight: 600;
	/* Same width per digit, so a column of years does not visibly ripple. */
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- mobile -- */

@media (max-width: 30rem) {
	/*
	 * The standfirst returns to body size. At 342px a 1.125rem lede runs about
	 * 30 characters a line, which breaks the opening paragraph over fourteen
	 * lines and makes the thing meant to invite reading the hardest part to
	 * read.
	 */
	.jmns-history__text--lede {
		font-size: var(--wp--preset--font-size--medium, 1rem);
		line-height: 1.75;
	}
}

/* ========================================================= chronology === */

/*
 * Ninety years as three tracks against a spine.
 *
 * The account braids three stories together — what the office was called, who
 * held it, and what happened to the department itself. Read as prose they
 * interleave; drawn as tracks they can be read at once, and the one thing a
 * table cannot show becomes obvious: Mufti and Timbalan Mufti run in parallel
 * from 1991, and the same man appears in both.
 *
 * Vertical, so the phone layout is the same drawing rather than a second
 * design. Nothing scrolls sideways and nothing is hidden at any width.
 */
/*
 * The chronology leads, across the whole band.
 *
 * `.jmns-history` is a two-column grid — prose left, year index right — with
 * both placed explicitly in row 1. Dropped in without a placement of its own,
 * the chronology was auto-placed into row 2 and ended up 2,320px down the page,
 * under the account it is meant to introduce.
 */
.jmns-chrono {
	grid-column: 1 / -1;
	grid-row: 1;
	margin-block: 0 var(--wp--preset--spacing--70, 2.5rem);
	padding-block-end: var(--wp--preset--spacing--60, 2rem);
	border-block-end: 1px solid var(--wp--preset--color--border, #DCE4DF);
}

.jmns-chrono__title {
	margin-block: 0 var(--wp--preset--spacing--20, 0.5rem);
	font-size: var(--wp--preset--font-size--title-sm, 1.375rem);
}

.jmns-chrono__lead {
	margin-block: 0 var(--wp--preset--spacing--50, 2rem);
	max-inline-size: 42rem;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
}

.jmns-chrono__tracks {
	display: grid;
	gap: var(--wp--preset--spacing--60, 2rem);
}

@media (min-width: 64rem) {
	/*
	 * Three abreast, and the department's own track first: it is the spine the
	 * other two hang from, and it is the story the prose buries.
	 */
	.jmns-chrono__tracks {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--50, 1.5rem);
	}

	/*
	 * The three spines run to the same depth.
	 *
	 * The tracks hold 10, 8 and 4 entries, so left to their own heights they
	 * ended at three different places and the short one trailed off into loose
	 * white space — the eye reads that as a column that failed rather than as a
	 * track with fewer events in it. Stretched, the spines are three equal
	 * verticals and the entries hang from them at their own dates, which is what
	 * a timeline looks like.
	 */
	.jmns-chrono__track {
		display: flex;
		flex-direction: column;
	}

	.jmns-chrono__list {
		flex: 1 1 auto;
	}
}

.jmns-chrono__track-title {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
	color: var(--wp--preset--color--interactive, #245746);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jmns-chrono__count {
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-weight: 600;
	letter-spacing: 0;
}

/*
 * The spine itself: one rule down the left of each track, with every entry
 * hanging off it. Drawn with a border rather than a pseudo-element so it grows
 * with the list and cannot fall out of step with it.
 */
.jmns-chrono__list {
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--50, 1.5rem);
	border-inline-start: 2px solid var(--wp--preset--color--border-strong, #6F8D7A);
	list-style: none;
	counter-reset: none;
}

.jmns-chrono__item {
	position: relative;
	padding-block-end: var(--wp--preset--spacing--50, 1.5rem);
}

.jmns-chrono__item:last-child {
	padding-block-end: 0;
}

/* The marker on the spine. */
.jmns-chrono__item::before {
	content: "";
	position: absolute;
	inset-block-start: 0.45em;
	inset-inline-start: calc( var(--wp--preset--spacing--50, 1.5rem) * -1 - 1px );
	inline-size: 9px;
	block-size: 9px;
	translate: -50% 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--border-strong, #6F8D7A);
}

/*
 * A tenure is a span, a milestone is a point — and the difference is carried by
 * the shape of the marker as well as by the words, so it survives being read
 * without colour.
 */
.jmns-chrono__item--holder::before {
	border-radius: 2px;
	block-size: 18px;
	background-color: var(--wp--preset--color--interactive, #245746);
}

.jmns-chrono__when {
	margin-block: 0;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-variant-numeric: tabular-nums;
}

.jmns-chrono__who {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	margin-block: 0.15em 0;
	font-weight: 600;
	line-height: 1.35;
	text-wrap: pretty;
}

/*
 * The ordinal, as a mark rather than as part of the name. It is the
 * department's own numbering and it is how these men are cited — "Mufti
 * Selangor yang keenam" — so it earns a place, but reading the name aloud with
 * a number in front of it would be wrong, which is why it is aria-hidden in the
 * markup.
 */
.jmns-chrono__ordinal {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.6em;
	block-size: 1.6em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--surface-tint, #EAF1EC);
	color: var(--wp--preset--color--interactive, #245746);
	font-size: 0.75em;
	font-variant-numeric: tabular-nums;
}

.jmns-chrono__role,
.jmns-chrono__note {
	margin-block: 0.2em 0;
	color: var(--wp--preset--color--text-secondary, #5E6D63);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.5;
	text-wrap: pretty;
}

/* ------------------------------------------------- the account, in two -- */

/*
 * The account set in two columns above 64rem.
 *
 * The measure that makes prose readable — about 70 characters — leaves half of
 * a 75rem page empty when it is the only thing on it. Two columns spend that
 * width without touching the measure: each column is still a comfortable line,
 * there are simply two of them, which is how a printed account of this length
 * has always been set.
 *
 * `column-fill: balance` so the two end level. Left to `auto` the first column
 * runs the full height and the second holds a stub, which reads as text that
 * ran out rather than as a column.
 *
 * The measure moves from the paragraph to the column here. Held on both, the
 * paragraphs would sit at 54ch inside a wider column and leave a ragged gutter
 * down the middle of the account.
 */
@media (min-width: 64rem) {
	.jmns-history__prose {
		columns: 2;
		column-gap: var(--wp--preset--spacing--70, 3.5rem);
		column-rule: 1px solid var(--wp--preset--color--border, #DCE4DF);
		column-fill: balance;
	}

	.jmns-history__text,
	.jmns-history__text--lede {
		max-inline-size: none;
	}

	/*
	 * A paragraph broken across the gutter loses the reader at the break, and
	 * the standfirst broken across it stops being a standfirst.
	 */
	.jmns-history__text {
		break-inside: avoid;
	}

	/*
	 * The standfirst flows in the first column rather than spanning the top.
	 *
	 * Spanning suits a standfirst of two or three lines. This one is the whole
	 * founding paragraph — twelve lines — so across the top it was a long
	 * half-width block with 648px of nothing beside it, and the two columns
	 * beneath started the page over. In the column it keeps its step in size and
	 * simply opens the account.
	 *
	 * Kept whole: a twelve-line paragraph broken across the gutter is the worst
	 * case for a reader, who has to travel the full height of the column and
	 * come back mid-sentence.
	 */
	.jmns-history__text--lede {
		break-inside: avoid;
	}
}

/*
 * More air between the lines and between the paragraphs than the theme's
 * default. This is 3,500 characters of dense fact — eleven names and
 * twenty-five dates — and it is read slowly. The rhythm is what makes that
 * bearable.
 */
.jmns-history__text {
	line-height: 1.8;
}

/*
 * The account's own heading. Quiet — it labels the department's record rather
 * than competing with the chronology above it, which is the part of the page
 * that has to be seen first.
 */
.jmns-history__prose-title {
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
	color: var(--wp--preset--color--interactive, #245746);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}