/* ==========================================================================
   The front page: a specimen, the figures, and a way in

   The owner's brief for this site is the same one every stylesheet here
   answers — light, crisp, not distracting, not merely academic — and it comes
   with a standing refusal: no hero image, no marketing language, nothing that
   reads as a sales page for a reference that sells nothing. So the front page
   is not made appealing by being louder. It is made appealing by showing the
   work, and this sheet's whole job is to set that work so a stranger can read
   it in fifteen seconds.

   NO COLOUR IS DEFINED IN THIS FILE, deliberately. Every value below is a
   token already declared on bare :root by the theme (--bab-*, the eight
   --wp--preset--color--* slots) or by bb-library.css (--bb-*), each of which
   already carries the three theme states the site requires. A ninth palette
   living here would be a fourth place for the same colours to drift out of
   sync, and this page is the one page where a drifted colour would be seen
   first. The --bb-* names appear only as fallbacks, so the components still
   render sanely if these shortcodes are ever used under another theme.

   Loaded only on a page whose post_content actually contains one of the four
   shortcodes — see BB_Front::assets(), which explains why that test is safe
   here and is not safe for the citation stylesheets.
   ========================================================================== */

/* ==========================================================================
   The specimen — one claim, its document, and the grade of the reading

   This is the argument. A dealer who has used Wenberg, Henley and Poidras has
   never once been told how well the compiler read the page he is quoting, and
   the fastest way to say that this reference is different is to show a claim
   with that grade attached rather than to write a paragraph promising it.

   Set as a specimen sheet: a heavy rule over it, hairlines between its three
   parts, and a small sans eyebrow naming each part. The parts are labelled at
   all — rather than left to speak for themselves — because a reader meeting
   this apparatus for the first time needs to be told that "how that document
   was read" is a field somebody filled in, not a remark.
   ========================================================================== */

.bb-specimen {
	margin: 2rem 0 2.75rem;
	border-block-start: 2px solid var(--wp--preset--color--contrast, currentColor);
	border-block-end: 1px solid var(--bab-rule, var(--bb-rule, currentColor));
}

.bb-specimen__part {
	padding-block: 1.15rem;
	border-block-end: 1px solid var(--bab-rule, var(--bb-rule, currentColor));
}

.bb-specimen__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4, var(--bb-muted, currentColor));
}

/* The claim keeps dl.bb-record's label/value grid — that alignment is the
   visual signature of a maker record, and a reader should recognise it again
   one click later — but drops the rules and the outer margin, because the
   specimen's own frame is already drawing them. */
.bb-specimen__claim {
	margin: 0;
	grid-template-columns: minmax(7rem, 21%) 1fr;
}

.bb-specimen__claim dt,
.bb-specimen__claim dd {
	padding-block: 0;
	border-block-end: 0;
}

/* The caveat is inline in a record, where it trails a sentence. Here it is
   the second half of the exhibit — the part that says what the received
   account got wrong — so it takes its own line. The em dash the plugin
   prints before it is kept: the theme's note on .bb-caveat is that the mark,
   not the prose, should carry the signal. */
.bb-specimen .bb-caveat {
	display: block;
	margin-block-start: 0.45rem;
	font-size: 0.92rem;
	line-height: 1.55;
}

/* The full Chicago citation, not a short form: the point being made is that
   the reference is complete enough to walk into a library with. Underline
   only on hover — a four-line underlined citation is a wall. */
.bb-specimen__cite {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	/* Archive identifiers and URLs are long unbroken tokens, and one of them
	   at 390px is the difference between a page that fits and a page that
	   scrolls sideways. */
	overflow-wrap: anywhere;
}

.bb-specimen__cite a {
	text-decoration: none;
}

.bb-specimen__cite a:hover,
.bb-specimen__cite a:focus-visible {
	text-decoration: underline;
}

.bb-specimen__tags {
	margin: 0.6rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* The reading grade is the sentence this whole page exists to make land, so
   it is set at reading size in full ink rather than as another quiet note. */
.bb-specimen__read {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast, currentColor);
}

/* A source nobody has read, or one carrying no grade at all, is the case a
   reader must not skim past — every claim resting on it is unverified by
   definition. Matches the theme's treatment of .bb-readas--unread. */
.bb-specimen__read--unread,
.bb-specimen__read--none {
	color: var(--bab-disputed, var(--bb-accent, currentColor));
}

/* An unresolved citation is a defect and is shown as one, never swapped out
   for a tidier claim. Same rule, same colour, as the maker records. */
.bb-specimen__missing {
	margin: 0;
	font-size: 0.95rem;
	color: var(--bab-disputed, var(--bb-accent, currentColor));
}

.bb-specimen__caption {
	padding-block: 0.9rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-4, var(--bb-muted, currentColor));
}

@media (max-width: 36em) {
	/* Same breakpoint, and same reason, as dl.bb-record in the theme: below
	   this the label column starves the value column and every claim wraps to
	   three words.

	   The grid-column reset is the load-bearing half, and it is not
	   belt-and-braces. The theme places the pair explicitly — dt in column 1,
	   dd in column 2 — so collapsing grid-template-columns to a single track
	   does NOT produce one column: dd's `grid-column: 2` asks for a track
	   that no longer exists, the grid generates an IMPLICIT second column at
	   `auto`, and the two-column layout survives at a width that cannot hold
	   it. Measured on this specimen at 390px before the reset: a 87px label
	   track beside a 219px value track. Both items have to be put back in
	   column 1 for the stack to actually stack.

	   The same fault is in the theme's own @media block for dl.bb-record and
	   therefore on every maker record at phone width; it is reported rather
	   than fixed here, because style.css is owned elsewhere tonight. The fix
	   there is these same two declarations. */
	.bb-specimen__claim {
		grid-template-columns: 1fr;
	}

	.bb-specimen__claim dt,
	.bb-specimen__claim dd {
		grid-column: 1;
	}

	.bb-specimen__claim dt {
		margin-block-end: 0.15rem;
	}
}

/* ==========================================================================
   The figures

   Not a dashboard. A tile with a big number in it asks to be admired and
   says nothing; what carries the information is the gloss underneath, which
   is where this block admits that 29 records are held back and 546 names have
   nothing behind them yet. So the numeral is sized to be findable, not to be
   impressive, and it is given about a quarter of the width — the rest goes to
   the sentence that says what the number is a number OF.
   ========================================================================== */

.bb-figures {
	margin: 1.75rem 0 2.5rem;
	border-block-start: 2px solid var(--wp--preset--color--contrast, currentColor);
}

.bb-figures__row {
	display: grid;
	grid-template-columns: minmax(9rem, 24%) 1fr;
	column-gap: 1.5rem;
	padding-block: 1.1rem;
	border-block-end: 1px solid var(--bab-rule, var(--bb-rule, currentColor));
}

.bb-figures__n {
	margin: 0;
}

.bb-figures__num {
	display: block;
	font-size: 1.9rem;
	line-height: 1.05;
	font-weight: 600;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.bb-figures__label {
	display: block;
	margin-block-start: 0.3rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.74rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4, var(--bb-muted, currentColor));
}

.bb-figures__gloss {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--bab-ink-soft, var(--bb-soft, currentColor));
}

@media (max-width: 36em) {
	.bb-figures__row {
		grid-template-columns: 1fr;
		row-gap: 0.5rem;
	}

	.bb-figures__label {
		margin-block-start: 0.15rem;
	}
}

/* A live number inside a sentence. Tabular figures only: a count that changes
   between one page load and the next should not also change the metrics of
   the line it sits in. No other styling — a number in prose that announced
   itself would be the decoration this site refuses. */
.bb-figure__inline {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   A way in

   Echoes .bb-makercard from the maker index, at one weight lighter: the index
   is the place for the full grid with its 2px rules, and the front page is
   pointing at it rather than reproducing it. Each row carries its source
   count for the reason class-bb-index.php gives — it is the honest measure of
   what is behind a record, and it stops a thin record from looking like a
   full one in a list where every entry is one line long.
   ========================================================================== */

.bb-recent {
	list-style: none;
	margin: 1.5rem 0 1.25rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1.25rem 2rem;
}

.bb-recent__item {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding-block-start: 0.6rem;
	border-block-start: 1px solid var(--bab-rule, var(--bb-rule, currentColor));
}

.bb-recent__name {
	font-size: 1.05rem;
	line-height: 1.3;
	text-decoration: none;
}

.bb-recent__name:hover,
.bb-recent__name:focus-visible {
	text-decoration: underline;
}

.bb-recent__place {
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-4, var(--bb-muted, currentColor));
}

.bb-recent__meta {
	margin-block-start: 0.25rem;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent-4, var(--bb-muted, currentColor));
}

/* ==========================================================================
   The state of the work

   Same figure list as above, reused rather than restyled: this is a page of
   the site, not a dashboard, and a second visual language for "here are some
   numbers" is exactly how a reference starts looking like a product. The only
   additions are the section rhythm, the numbered chain, and the em-dash a
   figure wears when it could not be read.
   ========================================================================== */

.bb-work {
	margin-block: 3rem;
}

.bb-work + .bb-work {
	border-block-start: 2px solid var(--wp--preset--color--contrast, currentColor);
	padding-block-start: 2rem;
}

.bb-work__lede {
	max-width: 46em;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--bab-ink-soft, var(--bb-soft, currentColor));
}

/* A figure that could not be read. Dimmed and dotted-underlined so it reads
   as a deliberate blank rather than a rendering fault — the reason rides in
   the title attribute and in data-bb-unavailable. Never a zero: "0
   corrections" and "the corrections table is missing" are opposite
   statements and a reader cannot tell them apart from a numeral. */
.bb-figure__na {
	color: var(--wp--preset--color--accent-4, var(--bb-muted, currentColor));
	border-block-end: 1px dotted currentColor;
	cursor: help;
}

.bb-chain {
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: bb-chain;
	border-block-start: 2px solid var(--wp--preset--color--contrast, currentColor);
}

.bb-chain__step {
	position: relative;
	padding: 1.2rem 0 1.2rem 3rem;
	border-block-end: 1px solid var(--bab-rule, var(--bb-rule, currentColor));
	counter-increment: bb-chain;
}

.bb-chain__step::before {
	content: counter(bb-chain);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 1.25rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent-4, var(--bb-muted, currentColor));
}

.bb-chain__head {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
	line-height: 1.35;
}

.bb-chain__body {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--bab-ink-soft, var(--bb-soft, currentColor));
}

.bb-asof,
.bb-work__na {
	margin-block: 1.25rem;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--bab-ink-soft, var(--bb-soft, currentColor));
}

@media (max-width: 36em) {
	.bb-chain__step {
		padding-inline-start: 2.2rem;
	}
}

/* The names-only draft sample on /state-of-the-work/ — a name and the word
   "draft" per entry, nothing else; the columns exist so eighteen names read
   as a glimpse of a queue, not a roll of honour. */
.bb-draftsample {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 3 13rem;
	column-gap: 2rem;
}

.bb-draftsample__name {
	break-inside: avoid;
	margin: 0 0 0.45rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.bb-draftsample__tag {
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4, var(--bb-muted, currentColor));
}