/* BOVF Forms — inherits theme colours via the theme.json presets. */

.bovf-form {
	max-width: 40rem;
}

.bovf-field {
	margin-bottom: 1.5rem;
}

.bovf-field label,
.bovf-field legend {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
}

.bovf-field fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.bovf-required {
	color: var(--wp--preset--color--sage, #E0A42C);
}

.bovf-help {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	opacity: 0.8;
}

.bovf-form input[type="text"],
.bovf-form input[type="email"],
/* password was missing, and the sign-in form is the first thing on this
   site to use one — the box came out at its unstyled default beside a
   full-width username field above it. */
.bovf-form input[type="password"],
.bovf-form input[type="tel"],
.bovf-form input[type="url"],
.bovf-form select,
.bovf-form textarea {
	/* width: 100% with padding on a content-box control is 100% *plus* the
	   padding, so every field on every form here — manage content, the
	   branch editor, the front-end submissions, this one — was 32px wider
	   than the column it sits in and ran off the right of a phone. It only
	   became visible on the sign-in page because that is the first form
	   narrow enough for the overhang to matter. */
	box-sizing: border-box;
	width: 100%;
	padding: 0.85rem 1rem;
	font: inherit;
	color: inherit;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--wp--preset--color--line, rgba(255, 255, 255, 0.12));
	border-radius: 4px;
}

.bovf-form textarea {
	resize: vertical;
	min-height: 8rem;
}

.bovf-form :focus-visible {
	outline: 2px solid var(--wp--preset--color--sage, #E0A42C);
	outline-offset: 2px;
}

/* Choice rows: label beside the control, whole row tappable. */
/* Two selectors, and both are needed.
   
   The bare class is the rule: choice rows appear in the permissions
   screens, the login form and the folder pickers, none of which are
   inside a .bovf-field. Scoping the rule to .bovf-field to win a
   specificity fight took the layout away from all of them — tick boxes
   jammed against their labels, flowing as inline text.
   
   The scoped selector is only there to win that fight: .bovf-field label
   is a class and a type, 0,1,1, and a lone class is 0,1,0, so inside a
   field "display: block" would otherwise beat this. */
.bovf-choice,
.bovf-field .bovf-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-bottom: 0.6rem;
	min-height: 44px;
	font-weight: 400;
}

.bovf-choice input,
.bovf-field .bovf-choice input {
	margin-top: 0.35rem;
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
}

.bovf-choice label {
	margin: 0;
	font-weight: 400;
}

.bovf-field.has-error input,
.bovf-field.has-error select,
.bovf-field.has-error textarea {
	border-color: #E4736B;
}

.bovf-error {
	margin: 0.4rem 0 0;
	color: #E4736B;
	font-size: 0.9375rem;
}

.bovf-form-errors {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid #E4736B;
	border-radius: 4px;
}

.bovf-form-errors ul {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.bovf-form-success {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wp--preset--color--sage, #E0A42C);
	border-radius: 4px;
}

.bovf-submit {
	width: 100%;
	padding: 1rem 1.75rem;
	font: inherit;
	font-weight: 700;
	color: var(--wp--preset--color--navy, #141C2C);
	background: var(--wp--preset--color--sage, #E0A42C);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

@media (min-width: 601px) {
	.bovf-submit {
		width: auto;
	}
}

/* Honeypot: hidden from sight and from assistive technology. */
.bovf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Front-end submission list. */
.bovf-my-submissions {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line, rgba(255,255,255,0.12));
}

.bovf-my-submissions ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bovf-my-submissions li {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line, rgba(255,255,255,0.12));
}

.bovf-status {
	display: inline-block;
	margin-right: 0.6rem;
	padding: 0.15rem 0.5rem;
	border-radius: 3px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.bovf-status--pending { background: var(--wp--preset--color--sage, #E0A42C); color: #141C2C; }
.bovf-status--publish { background: rgba(255,255,255,0.12); }
.bovf-status--draft   { background: rgba(255,255,255,0.08); }

.bovf-form-notice {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wp--preset--color--line, rgba(255,255,255,0.12));
	border-radius: 4px;
}

/* ---------------------------------------------------------------
   Front-end management screen.
   --------------------------------------------------------------- */

.bovf-manage-tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0 0 1.5rem;
	padding: 0 0 0.75rem;
	list-style: none;
	border-bottom: 1px solid currentColor;
}

.bovf-manage-tabs a {
	text-decoration: none;
	font-weight: 600;
}

.bovf-manage-tabs [aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.bovf-manage-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bovf-manage-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid currentColor;
}

.bovf-manage-list__title {
	flex: 1 1 14rem;
	font-weight: 600;
}

/* One link per row, stretched over the whole of it. The title said what
   the row was and "Edit" said it again, fifty times down a column. */
.bovf-manage-list li {
	position: relative;
}

.bovf-manage-list li:has( .bovf-manage-list__title[href] ):hover {
	background: var(--wp--preset--color--grey, #F2F4F7);
}

a.bovf-manage-list__title {
	text-decoration: none;
}

a.bovf-manage-list__title::after {
	content: "";
	position: absolute;
	inset: 0;
}

a.bovf-manage-list__title:hover,
a.bovf-manage-list__title:focus-visible {
	text-decoration: underline;
}

.bovf-manage-list__meta {
	flex: 1 1 100%;
	color: var(--wp--preset--color--navy-soft, #2D4569);
	font-size: 0.875rem;
}

/* Delete reads as the lesser action of the two until it is chosen. */
.bovf-manage-list__delete {
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-manage-list__delete:hover,
.bovf-manage-list__delete:focus-visible {
	color: var(--wp--preset--color--red, #D7263D);
}

/* The confirmation. Bordered in red because it is the one screen here that
   takes something away, but the panel itself stays on the page background —
   a filled red box reads as an error that has already happened rather than
   a question still being asked. */
.bovf-manage-confirm {
	margin-bottom: 1.5rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wp--preset--color--red, #D7263D);
	border-radius: 4px;
}

.bovf-manage-confirm h2 {
	margin: 0 0 0.5rem;
}

.bovf-manage-confirm p {
	margin: 0 0 1rem;
}

.bovf-manage-confirm .bovf-manage-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
}

.bovf-submit--danger {
	/* The colour has to come with the background: .bovf-submit sets navy
	   text for its own pale button, and navy on red is 1.7:1. */
	color: var(--wp--preset--color--paper, #FFFFFF);
	background: var(--wp--preset--color--red, #D7263D);
}

.bovf-submit--danger:hover,
.bovf-submit--danger:focus-visible {
	background: #B81E32;
}

/* The submit row. .bovf-submit is the button itself, so the row around it
   needs its own class — putting the button's class on the wrapper painted
   a full-width bar behind it. */
.bovf-manage-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 1.5rem 0 0;
}

/* The visual editor sits inside the form, so it should not inherit the
   form's own field chrome. */
.bovf-form .wp-editor-wrap {
	margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------
   Documents

   A library, not a form. The list is the page; adding is a button that
   leads somewhere else.
   --------------------------------------------------------------- */

.bovf-docs {
	--bovf-doc-line: var(--wp--preset--color--line, #C6D3E5);
	--bovf-doc-ink: var(--wp--preset--color--navy, #0B1D3A);
	--bovf-doc-soft: var(--wp--preset--color--navy-soft, #2D4569);
}

/* The count and the button. A rule under it separates the library from the
   page heading above without drawing a box round everything. */
.bovf-docs__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--bovf-doc-line);
}

.bovf-docs__count {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--bovf-doc-soft);
}

.bovf-docs__add {
	padding: 0.7em 1.4em;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--paper, #fff);
	background: var(--wp--preset--color--red, #D7263D);
	border-radius: 6px;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.bovf-docs__add:hover,
.bovf-docs__add:focus-visible {
	background: #B81E32;
	color: var(--wp--preset--color--paper, #fff);
}

.bovf-docs__group {
	margin-top: 2.5rem;
}

/* The tally sits with the heading rather than in it, so a level with
   nothing in it still reads as a place rather than a mistake. */
.bovf-docs__heading {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0 0 0.25rem;
}

.bovf-docs__tally {
	padding: 0.1em 0.55em;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--bovf-doc-soft);
	background: var(--wp--preset--color--grey, #F2F4F7);
	border-radius: 999px;
}

.bovf-docs__note {
	margin: 0 0 1rem;
	max-width: 60ch;
	font-size: 0.9375rem;
	color: var(--bovf-doc-soft);
}

.bovf-docs__empty {
	margin: 0;
	padding: 1.25rem;
	font-size: 0.9375rem;
	color: var(--bovf-doc-soft);
	background: var(--wp--preset--color--grey, #F2F4F7);
	border-radius: 6px;
}

.bovf-docs__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.bovf-docs__back {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
}

/* A row per document: type, then what it is, then what you can do with it. */
.bovf-doc {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--bovf-doc-line);
	border-radius: 8px;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.bovf-doc:hover,
.bovf-doc:focus-within {
	border-color: var(--bovf-doc-soft);
	box-shadow: 0 2px 10px rgba(11, 29, 58, 0.07);
}

/* The extension as a tile. Three or four letters say what a file is faster
   than an icon that has to stand for every format at once. */
.bovf-doc__type {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--paper, #fff);
	background: var(--bovf-doc-soft);
	border-radius: 6px;
}

.bovf-doc__body {
	min-width: 0;
}

.bovf-doc__name {
	display: inline-block;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bovf-doc-ink);
	text-decoration: none;
}

.bovf-doc__name:hover,
.bovf-doc__name:focus-visible {
	text-decoration: underline;
}

.bovf-doc__meta {
	margin: 0.2rem 0 0;
	font-size: 0.8125rem;
	color: var(--bovf-doc-soft);
}

.bovf-doc__notes {
	margin: 0.4rem 0 0;
	max-width: 60ch;
	font-size: 0.875rem;
	color: var(--bovf-doc-soft);
}

.bovf-doc__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.bovf-doc__delete {
	margin: 0;
}

/* Both actions are the same control whether they are a link or a button,
   so the button is stripped back to match rather than the link dressed up. */
.bovf-doc__action {
	padding: 0;
	font: inherit;
	font-size: 0.875rem;
	color: var(--bovf-doc-soft);
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
	white-space: nowrap;
}

/* The action links on this screen are deliberately quiet — underlined
   text, no padding — which leaves them 22px tall. That is under the 24px
   floor for a target and well under the 44px this site keeps everywhere
   else. Height only, and only where there is no mouse, so nothing about
   the look changes on a desktop. */
@media ( pointer: coarse ) {

	.bovf-doc__action {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}
}

.bovf-doc__action:hover,
.bovf-doc__action:focus-visible {
	color: var(--bovf-doc-ink);
}

.bovf-doc__action--danger:hover,
.bovf-doc__action--danger:focus-visible {
	color: var(--wp--preset--color--red, #D7263D);
}

/* On a phone the actions go under the document rather than squeezing the
   name into a column of its own. */
@media (max-width: 600px) {

	.bovf-doc {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.bovf-doc__actions {
		grid-column: 1 / -1;
		padding-top: 0.25rem;
		border-top: 1px solid var(--bovf-doc-line);
	}
}

/* ---------------------------------------------------------------------
   Permissions

   A row is a page and the audience it is set to. Everything about the
   layout follows from those being read as a pair: the page name and the
   select sit on one line at every width worth having two columns at, and
   the select is the thing that has to line up down the list — a column of
   dropdowns at ragged left edges reads as a form somebody gave up on
   halfway through.
   --------------------------------------------------------------------- */

/* The tab is separated from the content tabs rather than sitting fifth in
   the row, because it does a different job from all of them. Pushed right
   where there is room and left where there is not, so it never ends up
   alone on a line of its own above the list. */
@media ( min-width: 40rem ) {

	.bovf-manage-tabs__access {
		margin-left: auto;
	}
}

.bovf-access-row {
	/* The list's own rule sets align-items: baseline, which lines the
	   select up with the first line of the page name and leaves the "linked
	   from" line hanging below it. Centring keeps the control against the
	   middle of the pair. */
	align-items: center;
}

.bovf-access-row__page {
	flex: 1 1 16rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.6rem;
}

.bovf-access-row__where {
	/* Supporting detail, and it repeats down the list — sized and coloured
	   so the page names stay the thing being scanned. */
	flex: 1 1 100%;
	font-size: var(--wp--preset--font-size--caption, 0.8125rem);
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-access-row__who {
	flex: 0 1 15rem;
	/* Overriding the list's `margin-left: auto` on the first link, which
	   this row has no link to apply it to. */
	margin-left: auto;
}

@media ( max-width: 30rem ) {

	.bovf-access-row__who {
		flex-basis: 100%;
		margin-left: 0;
	}
}


/* The sign-in column.

   A contentSize on a constrained layout was the obvious way to do this and
   the wrong one: it centres anything narrower than its container, which put
   the form 124px right of the heading above it and read as two pages
   stacked. So the group runs the full column and its children are capped
   instead, all to the same measure the form already had.

   Three classes because WordPress caps a constrained layout's children at
   the content width with two, and two against two is settled by load order
   rather than by intent. */
.wp-block-group.bovf-prose.bovf-signin > * {
	max-inline-size: 40rem;
	margin-inline: 0;
}

/* ---------------------------------------------------------------------
   Sign in

   A short form on a wide page. The column is capped by the page rather
   than here, so this only has to space the two fields and set the links
   that follow them apart from the button.
   --------------------------------------------------------------------- */
.bovf-login .bovf-choice {
	margin-block: 0.6rem 1.2rem;
}

.bovf-login__links {
	margin-block-start: 1.2rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--wp--preset--color--line, #C6D3E5);
	font-size: 0.9375rem;
}

.bovf-login__links a {
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-login__links a:hover,
.bovf-login__links a:focus-visible {
	color: var(--wp--preset--color--red, #D7263D);
}

/* ---------------------------------------------------------------------
   Who can manage what

   Sits under the page list on the Permissions tab, separated by a rule
   rather than a box: they are two halves of one question and boxing
   each would make them look like two screens that happen to share a
   page.
   --------------------------------------------------------------------- */
.bovf-roles {
	margin-block-start: 2.5rem;
	padding-block-start: 1.75rem;
	border-block-start: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-roles__heading {
	margin: 0 0 0.5rem;
}

/* What is granted now, before the form that changes it. A list rather
   than a table: most capabilities are held by nobody, and a table of
   mostly empty cells is a table that has to be read to learn nothing. */
.bovf-roles__summary {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.bovf-roles__summary li {
	padding-block: 0.4rem;
	border-block-end: 1px solid var(--wp--preset--color--line, #C6D3E5);
	line-height: 1.45;
}

.bovf-roles__pick {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.8rem;
	margin-block-end: 1.5rem;
}

.bovf-roles__pick label {
	font-weight: 600;
}

.bovf-roles__pick select {
	box-sizing: border-box;
	flex: 1 1 18rem;
	max-inline-size: 28rem;
	font: inherit;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	border-radius: 4px;
	background: var(--wp--preset--color--paper, #fff);
	color: inherit;
}

/* The secondary action next to a select is "show me", not "do it", and
   should not look like the button that commits the change below. */
.bovf-submit--quiet {
	background: transparent;
	color: var(--wp--preset--color--navy, #0B1D3A);
	border: 1px solid var(--wp--preset--color--navy, #0B1D3A);
}

.bovf-submit--quiet:hover,
.bovf-submit--quiet:focus-visible {
	background: var(--wp--preset--color--navy, #0B1D3A);
	color: var(--wp--preset--color--paper, #fff);
}

.bovf-roles__who {
	margin: 0 0 1rem;
}

.bovf-roles__group {
	margin: 0 0 1.5rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	border-radius: 6px;
}

.bovf-roles__group legend {
	padding-inline: 0.4rem;
	font-weight: 700;
}

.bovf-roles__group .bovf-help {
	margin-block: 0 0.8rem;
}

/* A row per role: the name and how many hold it on one line, what they
   can do underneath. Two lines rather than one, because the list of
   permissions is the long part and a role with six of them would
   otherwise push its own name off the left of everything else. */
.bovf-roles__summary li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 0.6rem;
}

.bovf-roles__name {
	font-weight: 700;
	text-decoration: none;
}

.bovf-roles__name:hover,
.bovf-roles__name:focus-visible {
	text-decoration: underline;
}

.bovf-roles__count {
	font-size: 0.875rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-roles__held {
	grid-column: 1 / -1;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

/* ---------------------------------------------------------------------
   The document shelves

   A list of folders, not a grid of cards. Thirty cards is a wall; thirty
   rows can be read down the left edge, which is how somebody looking for
   "Board minutes" actually finds it.
   --------------------------------------------------------------------- */
.bovf-folders {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bovf-folder {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.15rem 1rem;
	padding-block: 0.7rem;
	border-block-end: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-folder__name {
	font-weight: 700;
	text-decoration: none;
}

.bovf-folder__name:hover,
.bovf-folder__name:focus-visible {
	text-decoration: underline;
}

/* "empty" and "4 files" sit in the same place so the eye can run down
   them, and an empty folder still reads as a folder rather than as an
   error. */
.bovf-folder__count {
	grid-column: 2;
	grid-row: 1;
	font-variant-numeric: tabular-nums;
	font-size: 0.875rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
	white-space: nowrap;
}

.bovf-folder__meta {
	grid-column: 1 / -1;
	font-size: 0.875rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-docs__bar > div {
	flex: 1 1 auto;
}

/* The Folders link sits beside Add a document but is the quieter of the
   two — most visits to this page are to read something, not to re-cut the
   filing structure. */
.bovf-docs__manage {
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--navy-soft, #2D4569);
	margin-inline-end: 1rem;
}

.bovf-docs__manage:hover,
.bovf-docs__manage:focus-visible {
	color: var(--wp--preset--color--red, #D7263D);
	text-decoration: underline;
}

/* The note after a group's name explains it without competing with it. */
.bovf-choice em {
	display: block;
	font-style: normal;
	font-size: 0.875rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

/* ---------------------------------------------------------------------
   Who can open a folder

   Roles down one side with their members named underneath, because a
   role name is not enough to decide by — "BOVF Coordinator" is sixteen
   people and the tick is irreversible in the sense that matters.
   --------------------------------------------------------------------- */
.bovf-access__roles {
	display: grid;
	gap: 0.1rem;
	max-block-size: 22rem;
	overflow-y: auto;
	padding: 0.6rem;
	margin-block: 0.6rem 1.2rem;
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	border-radius: 4px;
}

/* The members read as a caption to the role, not as a second thing to
   decide about. */
.bovf-access .bovf-choice em {
	display: block;
	font-style: normal;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-access__people-label {
	margin: 0 0 0.4rem;
	font-weight: 600;
}

.bovf-access__people {
	box-sizing: border-box;
	inline-size: 100%;
	font: inherit;
	padding: 0.4rem;
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	border-radius: 4px;
	background: var(--wp--preset--color--paper, #fff);
	color: inherit;
}

/* ---------------------------------------------------------------------
   "Open to …and 12 more"

   The rest of the names on hover, on keyboard focus, and on tap. A title
   attribute would have covered the first of those only.
   --------------------------------------------------------------------- */
.bovf-folder__who--more {
	position: relative;
	/* Says there is something here without shouting: the row is a list of
	   folders, and this is a footnote on one. */
	border-block-end: 1px dotted currentColor;
	cursor: help;
}

.bovf-folder__who--more:focus-visible {
	outline: 2px solid var(--wp--preset--color--red, #D7263D);
	outline-offset: 2px;
}

.bovf-folder__all {
	position: absolute;
	inset-block-start: calc(100% + 0.4rem);
	inset-inline-start: 0;
	z-index: 20;
	display: none;
	inline-size: max-content;
	/* Wide enough for a dozen names, never wider than the page. */
	max-inline-size: min(30rem, calc(100vw - 2.5rem));
	padding: 0.7rem 0.85rem;
	background: var(--wp--preset--color--navy, #0B1D3A);
	color: var(--wp--preset--color--paper, #fff);
	border-radius: 4px;
	box-shadow: 0 6px 24px rgba(11, 29, 58, .22);
	font-size: 0.875rem;
	line-height: 1.5;
	white-space: normal;
}

.bovf-folder__all strong {
	display: block;
	margin-block-end: 0.25rem;
	/* Sage rather than white: the heading is the count, and the names
	   under it are the thing being read. */
	color: var(--wp--preset--color--sage, #6BAA7D);
}

.bovf-folder__who--more:hover .bovf-folder__all,
.bovf-folder__who--more:focus .bovf-folder__all,
.bovf-folder__who--more:focus-within .bovf-folder__all {
	display: block;
}

/* Near the bottom of a long list the panel would open off the end of the
   page, so the last two rows open theirs upwards instead. */
.bovf-folders li:nth-last-child(-n+2) .bovf-folder__all {
	inset-block-start: auto;
	inset-block-end: calc(100% + 0.4rem);
}

@media (prefers-reduced-motion: reduce) {

	.bovf-folder__all { transition: none; }
}

/* The roles a page names, under its audience. A closed disclosure rather
   than a list of thirty-six checkboxes on every row — but it opens itself
   on the rows actually using them, so the setting in force is never the
   hidden one. */
.bovf-access-row__roles {
	grid-column: 1 / -1;
	margin-block-start: 0.35rem;
	font-size: 0.875rem;
}

.bovf-access-row__roles summary {
	cursor: pointer;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-access-row__roles[open] summary {
	margin-block-end: 0.35rem;
	font-weight: 600;
}

.bovf-access-row__roles[open] {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
	gap: 0 1.5rem;
}

/* The summary spans the columns; only the roles under it are columned. */
.bovf-access-row__roles[open] summary {
	grid-column: 1 / -1;
}

.bovf-access-row__roles .bovf-choice {
	padding-block: 0.2rem;
	min-height: 0;
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Who sees which menu item

   A row per item, indented where the menu indents, because "BOVF Data"
   under "Admin" behaves differently from "BOVF Data" beside it and the
   list should show which one it is.
   --------------------------------------------------------------------- */
.bovf-menus {
	margin-block-start: 2.5rem;
	padding-block-start: 1.75rem;
	border-block-start: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-menus__name {
	margin: 1.5rem 0 0.5rem;
}

.bovf-menus__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bovf-menus__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
	gap: 0.2rem 1rem;
	align-items: center;
	padding-block: 0.6rem;
	border-block-end: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-menus__item--child {
	padding-inline-start: 1.5rem;
}

.bovf-menus__label {
	font-weight: 600;
}

/* Where the link goes, so two items with the same label in different
   menus can be told apart without opening the Site Editor. */
.bovf-menus__target {
	grid-column: 1;
	grid-row: 2;
	font-size: 0.875rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
	overflow-wrap: anywhere;
}

.bovf-menus__item select {
	box-sizing: border-box;
	grid-column: 2;
	grid-row: 1 / span 2;
	inline-size: 100%;
	font: inherit;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	border-radius: 4px;
	background: var(--wp--preset--color--paper, #fff);
	color: inherit;
}

.bovf-menus__item .bovf-access-row__roles {
	grid-column: 1 / -1;
	grid-row: 3;
}

@media ( max-width: 34rem ) {

	.bovf-menus__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.bovf-menus__item select {
		grid-column: 1;
		grid-row: auto;
	}

	.bovf-menus__target {
		grid-row: auto;
	}
}

/* Sub-tabs inside Permissions. Lighter than the content tabs above them —
   they divide one screen rather than switching between different kinds of
   thing, and two identical tab rows stacked would read as one confused
   navigation. */
.bovf-perm-tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0 0 1.5rem;
	padding: 0 0 0.6rem;
	list-style: none;
	border-bottom: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-perm-tabs a {
	text-decoration: none;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-perm-tabs [aria-current="page"] {
	font-weight: 700;
	color: var(--wp--preset--color--navy, #0B1D3A);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Row-filter rules: role, column, value on one line, because they read as
   a sentence — "the Thailand coordinator sees rows where Residence is
   THAILAND" — and splitting them across lines loses that. */
.bovf-table-filters {
	list-style: none;
	margin: 0 0 0.6rem;
	padding: 0;
}

.bovf-table-filter {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.5rem;
	margin-block-end: 0.5rem;
}

.bovf-table-filter select,
.bovf-table-filter input[type="text"] {
	box-sizing: border-box;
	inline-size: 100%;
	font: inherit;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	border-radius: 4px;
	background: var(--wp--preset--color--paper, #fff);
	color: inherit;
}

@media ( max-width: 34rem ) {

	.bovf-table-filter {
		grid-template-columns: minmax(0, 1fr);
	}
}

.bovf-table-perm + .bovf-table-perm {
	margin-block-start: 2rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

/* A per-person rule carries a row count, so its value column is wider
   than a role rule's and holds the two together. */
.bovf-table-filter--user {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr);
}

.bovf-table-filter__value {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* What the rule matches today. Beside the value rather than under it, so
   a typo reads as "0 rows" at the moment it is typed rather than as an
   empty table for somebody else next week. */
.bovf-table-filter__count {
	font-size: 0.8125rem;
	white-space: nowrap;
	color: var(--wp--preset--color--navy-soft, #2D4569);
	font-variant-numeric: tabular-nums;
}

.bovf-table-filter__count--none {
	color: var(--wp--preset--color--red, #D7263D);
	font-weight: 600;
}

@media ( max-width: 34rem ) {

	.bovf-table-filter--user {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------
   Reading a Word document on screen

   A browser renders a PDF and cannot render a .docx, so this is the same
   document turned into a page. It is a reading view, not a facsimile:
   given a measure that is comfortable to read rather than the width of A4,
   and no attempt to draw page edges that would only be a lie about where
   the breaks fall.
   --------------------------------------------------------------------- */
.bovf-read__back {
	margin: 0 0 1rem;
}

.bovf-read__back a {
	font-weight: 600;
	text-decoration: none;
}

.bovf-read__back a:hover,
.bovf-read__back a:focus-visible {
	text-decoration: underline;
}

.bovf-read__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-read__title {
	margin: 0;
}

.bovf-read__note {
	margin: 1rem 0 2rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-read__body {
	max-width: 68ch;
	line-height: 1.65;
}

.bovf-read__body h2,
.bovf-read__body h3,
.bovf-read__body h4,
.bovf-read__body h5,
.bovf-read__body h6 {
	margin: 2rem 0 0.6rem;
	line-height: 1.3;
}

.bovf-read__body h2:first-child,
.bovf-read__body h3:first-child {
	margin-block-start: 0;
}

.bovf-read__body p {
	margin: 0 0 1rem;
}

.bovf-read__body ul,
.bovf-read__body ol {
	margin: 0 0 1rem;
	padding-inline-start: 1.5rem;
}

.bovf-read__body li {
	margin-bottom: 0.35rem;
}

.bovf-read__body blockquote {
	margin: 1.5rem 0;
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--wp--preset--color--line, #C6D3E5);
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-read__body img {
	max-width: 100%;
	height: auto;
	margin-block: 0.5rem;
}

/* Word tables are frequently wider than a phone. The table scrolls inside
   its own box rather than taking the page sideways with it. */
.bovf-read__scroll {
	overflow-x: auto;
	margin: 0 0 1.5rem;
	max-width: 100%;
}

.bovf-read__table {
	border-collapse: collapse;
	min-width: 100%;
	font-size: 0.9375rem;
}

.bovf-read__table th,
.bovf-read__table td {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	text-align: start;
	vertical-align: top;
}

.bovf-read__table th {
	background: var(--wp--preset--color--grey, #F2F4F7);
	font-weight: 700;
}

/* The document's own title and subtitle styles, kept as headings but not
   competing with the page's. */
.bovf-read__body .bovf-read__title,
.bovf-read__body .bovf-read__subtitle {
	font-size: 1.25rem;
}

/* ---------------------------------------------------------------------
   Parts of the store

   The headings folders are grouped under, renamed and reordered in place.
   One form per row rather than one form for the table: a row carries a
   Delete as well as a Save, and a form cannot be nested inside another.
   --------------------------------------------------------------------- */

/* Core ships this and block themes do not, and the labels on the row
   below are hidden ones — without it they are simply missing. */
.bovf-form .screen-reader-text,
.bovf-sections .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bovf-sections {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.bovf-section {
	border-block-end: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-section__form {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding-block: 0.7rem;
}

.bovf-section__form input[type="text"],
.bovf-section__form input[type="number"] {
	box-sizing: border-box;
	inline-size: 100%;
	font: inherit;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	border-radius: 4px;
	background: var(--wp--preset--color--paper, #fff);
	color: inherit;
}

.bovf-section__form input[type="number"] {
	font-variant-numeric: tabular-nums;
}

.bovf-section__meta {
	font-size: 0.875rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
	white-space: nowrap;
}

.bovf-section__actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

/* Says why there is no Delete here, rather than leaving a gap that reads
   as a button that failed to render. */
.bovf-section__fixed {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
	border-block-end: 1px dotted var(--wp--preset--color--line, #C6D3E5);
	cursor: help;
}

@media ( max-width: 40rem ) {

	.bovf-section__form {
		grid-template-columns: 5rem minmax(0, 1fr);
	}

	.bovf-section__meta,
	.bovf-section__actions {
		grid-column: 1 / -1;
	}
}

.bovf-section__add {
	margin-block-start: 1.5rem;
}

/* ---------------------------------------------------------------------
   The management screen, in two columns

   The form for a key issue is a fourteen-row editor and five other
   fields, and what already existed was underneath all of it: you scrolled
   to the bottom to see whether an issue was already there, then back to
   the top to type. Now the list sits beside the form and is visible
   before you start.

   The list comes first in the markup and sits in the left column, so what
   a keyboard reaches matches what an eye reads. Putting it left with CSS
   alone would have left somebody tabbing into the form on the right and
   then jumping back across to the list, which is the ordering fault this
   avoids rather than introduces.

   That does mean the list is above the form on a phone, so there it is
   capped and scrolls inside itself — otherwise the Add form for news
   would start a hundred and forty-nine rows down the page.
   --------------------------------------------------------------------- */
.bovf-manage-side {
	margin-block-end: 2rem;
	max-block-size: 55vh;
	overflow-y: auto;
}

.bovf-manage-side__heading {
	position: sticky;
	inset-block-start: 0;
	margin-block: 0 0.5rem;
	padding-block: 0.15rem 0.5rem;
	font-size: 1.125rem;
	background: var(--wp--preset--color--paper, #fff);
}

.bovf-manage-side__count {
	display: inline-block;
	margin-inline-start: 0.35rem;
	padding: 0.05rem 0.45rem;
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--navy-soft, #2D4569);
	background: var(--wp--preset--color--grey, #F2F4F7);
	border-radius: 999px;
	vertical-align: 0.1em;
}

@media ( min-width: 62rem ) {

	.bovf-manage-split {
		display: grid;
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		gap: 2.5rem;
		align-items: start;
	}

	/* Follows you down the form, and scrolls inside itself rather than
	   making the column as tall as 149 news items. */
	.bovf-manage-side {
		position: sticky;
		inset-block-start: 1.5rem;
		max-block-size: calc(100vh - 3rem);
		overflow-y: auto;
		margin-block-end: 0;
		padding-inline-end: 1.75rem;
		border-inline-end: 1px solid var(--wp--preset--color--line, #C6D3E5);
	}

	/* A title with a 14rem basis and two actions does not fit one line in
	   a column this narrow, and wrapping mid-row reads as two entries.
	   The title takes its own line and the actions sit under it. */
	.bovf-manage-side .bovf-manage-list__title {
		flex: 1 1 100%;
	}

	/* Two lines per row rather than one, so the row padding is doing twice
	   the work it was. Tightened, which is worth about two more entries on
	   screen at once and matters most on the lists with a hundred in them. */
	.bovf-manage-side .bovf-manage-list li {
		gap: 0.1rem 0.75rem;
		padding-block: 0.45rem;
		line-height: 1.35;
	}

	/* Smaller than the page around it. This is a list to find something
	   in, not a thing to read: at body size a news headline takes two
	   lines and eight entries fill the panel, which is eight of a hundred
	   and forty-nine. */
	.bovf-manage-side .bovf-manage-list__title {
		font-size: 0.9375rem;
		line-height: 1.3;
	}

	.bovf-manage-side .bovf-manage-list__meta {
		font-size: 0.8125rem;
	}

	.bovf-manage-side .bovf-manage-list li a:first-of-type {
		margin-inline-start: 0;
	}

	.bovf-manage-side .bovf-manage-list__delete {
		margin-inline-start: auto;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.bovf-manage-side {
		position: static;
	}
}

/* ---------------------------------------------------------------------
   Earlier versions of a document

   A row per superseded file: when it was replaced and by whom, what it
   was called, the line somebody wrote about what changed, and the two
   things you can do with it.
   --------------------------------------------------------------------- */
.bovf-versions {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.bovf-version {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.15rem 1rem;
	padding-block: 0.8rem;
	border-block-end: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-version__when {
	font-weight: 600;
}

.bovf-version__file,
.bovf-version__note {
	grid-column: 1;
	font-size: 0.875rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-version__note {
	font-style: italic;
}

.bovf-version__actions {
	grid-column: 2;
	grid-row: 1 / span 3;
	display: flex;
	align-items: start;
	gap: 0.9rem;
	white-space: nowrap;
}

/* The restore is a form, so it needs flattening to sit in the row beside
   a plain link rather than starting a block of its own. */
.bovf-version__actions form {
	margin: 0;
}

@media ( max-width: 34rem ) {

	.bovf-version {
		grid-template-columns: minmax(0, 1fr);
	}

	.bovf-version__actions {
		grid-column: 1;
		grid-row: auto;
		margin-block-start: 0.4rem;
	}
}

/* ---------------------------------------------------------------------
   One person's own permissions

   Named .bovf-grants, not .bovf-people: that one is already the grid of
   person cards behind [bovf_people] and [bovf_coordinators], and reusing
   it laid this section out in three columns.

   The same shapes as the roles above it — a summary, then a form — with
   a rule between them so the two halves of "Who can manage what" read as
   two halves rather than one long list.
   --------------------------------------------------------------------- */
.bovf-grants {
	margin-block-start: 2.5rem;
	padding-block-start: 1.75rem;
	border-block-start: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-grants__pick {
	max-width: 34rem;
	margin-block: 1.25rem;
}

/* A capability that comes with the role is ticked and locked, and says
   which role. Quieter than the label it follows, because it is the
   explanation rather than the thing. */
.bovf-grants .bovf-choice em {
	display: inline;
	font-style: normal;
	font-size: 0.875rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-grants .bovf-choice input:disabled + span {
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

/* ---------------------------------------------------------------------
   Finding something, and being told what this side is for
   --------------------------------------------------------------------- */
.bovf-manage-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-block: 0.75rem 1rem;
}

.bovf-manage-search input[type="search"] {
	box-sizing: border-box;
	flex: 1 1 10rem;
	min-inline-size: 0;
	font: inherit;
	font-size: 0.875rem;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	border-radius: 4px;
	background: var(--wp--preset--color--paper, #fff);
	color: inherit;
}

/* The panel that stands where the form used to sit unasked. */
.bovf-manage-empty {
	padding: 2.5rem 2rem;
	text-align: center;
	color: var(--wp--preset--color--navy-soft, #2D4569);
	border: 1px dashed var(--wp--preset--color--line, #C6D3E5);
	border-radius: 6px;
}

.bovf-manage-empty p {
	margin: 0 0 1.25rem;
}

.bovf-manage-empty p:last-child {
	margin-bottom: 0;
}

/* .bovf-submit is usually a button element. Where it is a link — starting
   a new entry, setting up approvals — it needs the parts a button gets for
   free, and must not pick up the theme's link underline or hover colour. */
a.bovf-submit,
a.bovf-submit:hover,
a.bovf-submit:focus-visible {
	display: inline-block;
	width: auto;
	color: var(--wp--preset--color--navy, #141C2C);
	text-decoration: none;
}

/* Delete sits with Save and Cancel now. Still the quietest of the three. */
.bovf-form .bovf-manage-list__delete {
	margin-inline-start: 0.5rem;
}

/* ---------------------------------------------------------------------
   Areas — one row per part of the members' side
   --------------------------------------------------------------------- */
.bovf-area {
	padding-block: 1.5rem;
	border-block-end: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-area:first-of-type { padding-block-start: 0.5rem; }

.bovf-area__name {
	margin: 0 0 0.2rem;
	font-size: 1.125rem;
}

.bovf-area__blurb {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
	font-size: 0.9375rem;
}

/* What is set elsewhere, said once and linked to rather than copied. */
.bovf-area__inside {
	margin: 0.9rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-area .bovf-field {
	max-inline-size: 28rem;
}

/* ---------------------------------------------------------------------
   Asking before we count

   Bottom of the screen, above everything, and out of the way of the page
   it is asking about. Two buttons that both decide something: a banner
   whose only control is a cross has not asked anything.
   --------------------------------------------------------------------- */
.bovf-consent {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--navy, #0B1D3A);
	color: var(--wp--preset--color--paper, #fff);
	box-shadow: 0 -2px 12px rgba(11, 29, 58, 0.25);
}

.bovf-consent[hidden] { display: none; }

.bovf-consent__text {
	margin: 0;
	max-inline-size: 46ch;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.bovf-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.bovf-consent button {
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.6rem 1.1rem;
	border-radius: 4px;
	cursor: pointer;
	min-block-size: 44px;
}

/* The two answers look equally available. Making "no" the quieter button
   is how a banner asks a question it does not want answered. */
.bovf-consent__yes {
	color: var(--wp--preset--color--navy, #0B1D3A);
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--paper, #fff);
}

.bovf-consent__no {
	color: var(--wp--preset--color--paper, #fff);
	background: transparent;
	border: 1px solid var(--wp--preset--color--paper, #fff);
}

.bovf-consent button:hover {
	opacity: 0.88;
}

.bovf-consent :focus-visible {
	outline: 2px solid var(--wp--preset--color--sage, #6BAA7D);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Approvals

   What is waiting, compared side by side, and a decision. The count on a
   tab is the only thing on the tab row that is about somebody else: it is
   there because another person is blocked until it reaches zero.
   --------------------------------------------------------------------- */
.bovf-manage-tabs__waiting {
	display: inline-block;
	min-inline-size: 1.4em;
	margin-inline-start: 0.3rem;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var(--wp--preset--color--red, #D7263D);
	color: var(--wp--preset--color--paper, #fff);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	font-variant-numeric: tabular-nums;
	vertical-align: 0.1em;
}

.bovf-queue {
	margin-block-end: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	border-inline-start: 4px solid var(--wp--preset--color--red, #D7263D);
	border-radius: 4px;
	background: var(--wp--preset--color--paper, #fff);
}

.bovf-queue__heading {
	margin: 0 0 0.6rem;
	font-size: 1.0625rem;
}

.bovf-queue__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bovf-queue__list li {
	padding-block: 0.45rem;
	border-block-start: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-queue__list a {
	font-weight: 600;
}

.bovf-queue__meta {
	display: block;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-review__back {
	margin: 0 0 0.75rem;
}

.bovf-review__who {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.bovf-review__row {
	padding-block: 1rem;
	border-block-end: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-review__label {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
}

.bovf-review__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem;
}

@media ( max-width: 40rem ) {
	.bovf-review__pair {
		grid-template-columns: minmax(0, 1fr);
	}
}

.bovf-review__now,
.bovf-review__then,
.bovf-review__only {
	padding: 0.75rem 0.9rem;
	border-radius: 4px;
	overflow-wrap: anywhere;
}

.bovf-review__now {
	background: var(--wp--preset--color--grey, #F2F4F7);
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

/* The proposal is the thing being judged, so it is the one that stands out. */
.bovf-review__then {
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--sage, #6BAA7D);
}

.bovf-review__only {
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-review__tag {
	margin: 0 0 0.35rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* A long article shown twice would push the decision off the bottom of
   the screen. Each body scrolls in its own box instead. */
.bovf-review__body {
	max-block-size: 22rem;
	overflow-y: auto;
}

.bovf-review__body > :first-child { margin-block-start: 0; }

.bovf-review__decide {
	margin-block-start: 1.5rem;
}

/* Sending back is a real answer, not a lesser one — but it is the one
   that needs a note, so it does not look like the default. */
.bovf-review__reject {
	font: inherit;
	font-weight: 700;
	padding: 1rem 1.5rem;
	border-radius: 4px;
	cursor: pointer;
	color: var(--wp--preset--color--navy, #0B1D3A);
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--navy, #0B1D3A);
}

.bovf-review__reject:hover,
.bovf-review__reject:focus-visible {
	background: var(--wp--preset--color--grey, #F2F4F7);
}

/* The approver's list: everything waiting, across every tab. */
.bovf-manage-tabs__inbox a {
	font-weight: 700;
}

.bovf-inbox {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-inline-size: 48rem;
}

/* The gap does the spacing; margins on top of it would double it. */
.bovf-inbox > * {
	margin-block: 0;
}

/* Phone notifications, under the approvals list. */
.bovf-push {
	margin-block-start: 2rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	border-radius: 4px;
	background: var(--wp--preset--color--paper, #fff);
}

.bovf-push__heading {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
}

.bovf-push__status {
	margin: 0 0 0.75rem;
}

.bovf-push[data-state="on"] .bovf-push__status {
	color: var(--wp--preset--color--green, #1F5C3A);
	font-weight: 600;
}

.bovf-push[data-state="warn"] .bovf-push__status {
	color: var(--wp--preset--color--red, #D7263D);
}

.bovf-push__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	margin: 0 0 0.5rem;
}

.bovf-push__actions:empty {
	display: none;
}

.bovf-push__quiet {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

@media ( pointer: coarse ) {
	.bovf-push__actions button {
		min-block-size: 44px;
	}
}