/*
Theme Name: PeptideBlog
Theme URI: https://peptideblog.net
Description: Block theme for PeptideBlog.net. Presentation only. All content architecture lives in the PeptideBlog Core plugin, so this theme can be replaced without touching the data model.
Author: PeptideBlog Editorial
Version: 0.7.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peptideblog
Tags: blog, one-column, block-patterns, full-site-editing
*/

/* ---------------------------------------------------------------
   Base
   --------------------------------------------------------------- */

:root {
	--pb-tier-e1: #0F766E;
	--pb-tier-e2: #1570CD;
	--pb-tier-e3: #5B6FA8;
	--pb-tier-e4: #B45309;
	--pb-tier-e5: #64748B;
	--pb-tier-q:  #B42318;
	--pb-radius: 6px;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Skip link visible on focus */
.pb-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wp--preset--color--ink-900);
	color: #fff;
	padding: 0.65rem 1rem;
	z-index: 999;
}
.pb-skip:focus {
	left: 0;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Header / footer
   --------------------------------------------------------------- */

.pb-header {
	border-block-end: 1px solid var(--wp--preset--color--ink-300);
	background: var(--wp--preset--color--surface);
}

.pb-header__inner {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	max-width: 70rem;
	margin-inline: auto;
	padding: 1.1rem 1.25rem;
}

.pb-wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--wp--preset--color--ink-900);
}

.pb-wordmark:hover { color: var(--wp--preset--color--accent); }

.pb-nav {
	display: flex;
	gap: 1.25rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9rem;
}

.pb-nav a {
	color: var(--wp--preset--color--ink-600);
	text-decoration: none;
}

.pb-nav a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.pb-footer {
	border-block-start: 1px solid var(--wp--preset--color--ink-300);
	margin-block-start: 4rem;
	padding: 2.5rem 1.25rem 3.5rem;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-600);
}

.pb-footer__inner {
	max-width: 70rem;
	margin-inline: auto;
	display: grid;
	gap: 1rem;
}

.pb-footer a { color: var(--wp--preset--color--ink-600); }

/* ---------------------------------------------------------------
   Evidence chips. Colour is never the only signal: every chip
   carries its letter code, a shape marker and an accessible name.
   --------------------------------------------------------------- */

.pb-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	color: #fff;
	padding: 0.3em 0.6em;
	border-radius: 999px;
	white-space: nowrap;
	vertical-align: baseline;
}

.pb-chip__mark {
	width: 0.55em;
	height: 0.55em;
	background: currentColor;
	display: inline-block;
	flex: none;
}

.pb-chip[data-shape="circle"]   .pb-chip__mark { border-radius: 50%; }
.pb-chip[data-shape="square"]   .pb-chip__mark { border-radius: 1px; }
.pb-chip[data-shape="triangle"] .pb-chip__mark { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pb-chip[data-shape="diamond"]  .pb-chip__mark { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pb-chip[data-shape="hexagon"]  .pb-chip__mark { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.pb-chip[data-shape="cross"]    .pb-chip__mark { clip-path: polygon(20% 0,50% 30%,80% 0,100% 20%,70% 50%,100% 80%,80% 100%,50% 70%,20% 100%,0 80%,30% 50%,0 20%); }

.pb-chip--e1 { background: var(--pb-tier-e1); }
.pb-chip--e2 { background: var(--pb-tier-e2); }
.pb-chip--e3 { background: var(--pb-tier-e3); }
.pb-chip--e4 { background: var(--pb-tier-e4); }
.pb-chip--e5 { background: var(--pb-tier-e5); }
.pb-chip--q  { background: var(--pb-tier-q); }

.pb-chip__text {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-600);
}

/* ---------------------------------------------------------------
   Entity blocks
   --------------------------------------------------------------- */

.pb-status {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.85rem;
	padding: 0.85rem 1rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--ink-300);
	border-radius: var(--pb-radius);
	margin-block: 1.5rem;
}

.pb-status__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.pb-status__k { color: var(--wp--preset--color--ink-600); }
.pb-status__v { font-weight: 600; }
.pb-status__item--flag {
	color: var(--pb-tier-q);
	font-weight: 600;
}

.pb-aliases {
	margin-block: 1.75rem;
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--wp--preset--color--accent-lt);
}

.pb-aliases__title,
.pb-identity__title {
	font-size: 0.8rem !important;
	font-family: var(--wp--preset--font-family--ui) !important;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--ink-600);
	margin-block-end: 0.6rem;
}

.pb-aliases__group { margin-block: 0.3rem; font-size: 0.95rem; }
.pb-aliases__label {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.78rem;
	color: var(--wp--preset--color--ink-600);
}

.pb-identity { margin-block: 1.75rem; }

.pb-identity__list {
	display: grid;
	gap: 0;
	margin: 0;
	border-block-start: 1px solid var(--wp--preset--color--ink-300);
}

.pb-identity__row {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: 1rem;
	padding: 0.55rem 0;
	border-block-end: 1px solid var(--wp--preset--color--ink-300);
}

.pb-identity__row dt {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-600);
	margin: 0;
}

.pb-identity__row dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}

@media (max-width: 34rem) {
	.pb-identity__row { grid-template-columns: 1fr; gap: 0.15rem; }
}

.pb-dosing {
	margin-block: 2rem;
	padding: 1.1rem 1.25rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--ink-300);
	border-radius: var(--pb-radius);
}

.pb-dosing__title { font-size: 1.0625rem !important; margin-block-end: 0.5rem; }
.pb-dosing__value { font-weight: 600; margin-block: 0.25rem; }
.pb-dosing__source,
.pb-dosing__note {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.82rem;
	color: var(--wp--preset--color--ink-600);
	margin-block: 0.35rem 0;
}

.pb-composition { margin-block: 2rem; }
.pb-composition__list { margin-block: 0.5rem 1rem; }
.pb-composition__variance {
	padding: 0.9rem 1.1rem;
	background: #FEF6E7;
	border-inline-start: 3px solid var(--pb-tier-e4);
	border-radius: 0 var(--pb-radius) var(--pb-radius) 0;
	font-size: 0.95rem;
}
.pb-composition__note {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-600);
}

.pb-notknown {
	margin-block: 2rem;
	padding: 1.1rem 1.25rem;
	background: var(--wp--preset--color--accent-lt);
	border-radius: var(--pb-radius);
}
.pb-notknown__title { font-size: 1.0625rem !important; margin-block-end: 0.4rem; }

/* The E5 wall. Community-reported material is structurally separated
   from research and labelled as what it is. */
.pb-community {
	margin-block: 2.5rem;
	padding: 1.25rem 1.35rem;
	border: 1px dashed var(--pb-tier-e5);
	border-radius: var(--pb-radius);
	background: #F1F5F9;
}
.pb-community__head {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.82rem;
	color: var(--pb-tier-e5);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-block-end: 0.5rem;
}
.pb-community--circulating { background: #FFFBF2; border-color: var(--pb-tier-e5); }
.pb-community--circulating .pb-community__head { display: flex; align-items: center; gap: 0.5rem; }
.pb-community__foot {
	margin-block-start: 0.9rem;
	padding-block-start: 0.75rem;
	border-block-start: 1px solid var(--wp--preset--color--ink-300);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.83rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-600);
}

/* The circulating-figures table. Scannable, because that is what people
   came for, and honest, because the caption and the footer never leave it. */
.pb-figtable__scroll {
	margin-block: 0.25rem 1.1rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.pb-figtable {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--ink-300);
	border-radius: var(--pb-radius);
	overflow: hidden;
}
.pb-figtable__caption {
	caption-side: top;
	text-align: start;
	font-size: 0.75rem;
	color: var(--wp--preset--color--ink-600);
	padding-block-end: 0.4rem;
}
.pb-figtable th {
	text-align: start;
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-600);
	background: var(--wp--preset--color--surface);
	padding: 0.5rem 0.7rem;
	border-block-end: 1px solid var(--wp--preset--color--ink-300);
	white-space: nowrap;
}
.pb-figtable td {
	padding: 0.5rem 0.7rem;
	line-height: 1.45;
	border-block-end: 1px solid var(--wp--preset--color--ink-300);
	vertical-align: top;
	color: var(--wp--preset--color--ink);
}
.pb-figtable tbody tr:last-child td { border-block-end: 0; }
.pb-figtable tbody tr:nth-child(even) td { background: #FBFCFE; }
/* Column three is the number column in both tables. The circulating figures
   are short enough to hold on one line; trial dose arms are not, and forcing
   nowrap on those drags the table past the column and starts a sideways
   scroll on a desktop that has room for it. */
.pb-figtable td:nth-child(3) { font-weight: 600; }
.pb-figtable--circulating td:nth-child(3) { white-space: nowrap; }
.pb-figtable--trials td:nth-child(3) { white-space: normal; }
.pb-figtable--trials td:first-child { white-space: nowrap; }

/* Two tables on one entry, so they need air between them. */
.pb-dosing .pb-figtable__scroll { margin-block: 0.25rem 1.3rem; }

@media (max-width: 768px) {
	/* The caption has to come out of table layout too. Left as a
	   table-caption inside a block table it forms its own anonymous table
	   box, which sizes itself to nothing and drags the whole table wide. */
	.pb-figtable, .pb-figtable caption, .pb-figtable thead,
	.pb-figtable tbody, .pb-figtable tr, .pb-figtable td {
		display: block;
		width: auto;
	}

	/* No sideways scroll once the rows are stacked. */
	.pb-figtable__scroll { overflow-x: visible; }

	.pb-figtable thead { display: none; }
	.pb-figtable__caption { padding: 0 0 0.4rem; }

	.pb-figtable tr {
		border-block-end: 1px solid var(--wp--preset--color--ink-300);
		padding-block: 0.5rem;
	}
	.pb-figtable tbody tr:last-child { border-block-end: 0; }

	/* Grid, not flex. The value is an anonymous text node, and minmax(0,1fr)
	   is what actually lets it wrap instead of running off the screen. */
	.pb-figtable td {
		display: grid;
		grid-template-columns: 8rem minmax(0, 1fr);
		gap: 0.75rem;
		align-items: baseline;
		border-block-end: 0;
		padding: 0.22rem 0.75rem;
		background: none !important;
		white-space: normal;
	}
	.pb-figtable td::before {
		content: attr(data-label);
		font-size: 0.68rem;
		line-height: 1.5;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--wp--preset--color--ink-600);
	}
	.pb-figtable td:nth-child(3),
	.pb-figtable--trials td:first-child { white-space: normal; }
}

/* The standing protocol notice. Appears on every entry, carries no numbers.
   Visually louder than the community wall because it frames the whole page. */
.pb-notice--protocol {
	margin-block: 2.5rem;
	padding: 1.35rem 1.5rem 1.4rem;
	background: linear-gradient(180deg, #FFFFFF 0%, var(--wp--preset--color--accent-lt) 100%);
	border: 1px solid var(--wp--preset--color--ink-300);
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	border-radius: var(--pb-radius);
}
.pb-notice__eyebrow {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.35rem;
}
.pb-notice__title {
	font-size: 1.125rem !important;
	line-height: 1.3;
	margin: 0 0 0.7rem !important;
	color: var(--wp--preset--color--ink);
}
.pb-notice__body {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--wp--preset--color--ink-600);
	margin-block: 0 0.7rem;
}
.pb-notice__body:last-child { margin-block-end: 0; }

@media (max-width: 600px) {
	.pb-notice--protocol { padding: 1.1rem 1.15rem; }
	.pb-notice__title { font-size: 1.05rem !important; }
}

.pb-sources { margin-block: 2.5rem; }
.pb-sources__list { font-size: 0.92rem; }
.pb-sources__item { margin-block: 0.4rem; }
.pb-sources__id {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	color: var(--wp--preset--color--ink-600);
}

.pb-related { margin-block: 2rem; }
.pb-related__group { margin-block: 1rem; }
.pb-related__group h3 {
	font-size: 0.8rem !important;
	font-family: var(--wp--preset--font-family--ui) !important;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--ink-600);
	margin-block-end: 0.35rem;
}

.pb-disclaimer {
	margin-block: 2.5rem 0;
	padding: 1rem 1.15rem;
	border-block-start: 2px solid var(--wp--preset--color--ink-300);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-600);
}
.pb-disclaimer p { margin: 0; }

/* ---------------------------------------------------------------
   Index / archive
   --------------------------------------------------------------- */

.pb-index-intro {
	max-width: 45rem;
	margin-inline: auto;
	padding-block: 2rem 1rem;
}

.pb-entry-list .wp-block-post {
	padding-block: 1.1rem;
	border-block-end: 1px solid var(--wp--preset--color--ink-300);
}

.pb-entry-list .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
	margin-block-end: 0.25rem;
}

.pb-entry-list .wp-block-post-title a { text-decoration: none; }
.pb-entry-list .wp-block-post-title a:hover { text-decoration: underline; }

.pb-entry-list .wp-block-post-excerpt {
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-600);
}

/* Reading measure for prose */
/* Measure, in ch rather than rem, so it tracks the font size instead of
   drifting every time the type scale changes. */
.pb-prose > * { max-width: 78ch; margin-inline: auto; }
.pb-prose > p, .pb-prose li { line-height: 1.7; }

/* Data blocks get more room than prose. A five-column table in a reading
   column wraps every cell to three lines. */
.pb-prose > .pb-community,
.pb-prose > .pb-identity,
.pb-prose > .pb-notice--protocol,
.pb-prose > .pb-dosing,
.pb-prose > .pb-notknown,
.pb-prose > .pb-sources { max-width: 92ch; }

/* ---------------------------------------------------------------
   On this page. A sticky contents list on wide screens, which is what
   the empty side gutters are for on a long reference entry, and a
   collapsed card on anything narrower.
   --------------------------------------------------------------- */

.pb-toc {
	margin-block: 0 2rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--ink-300);
	border-radius: var(--pb-radius);
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8125rem;
}
.pb-toc__title {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink-600);
	cursor: pointer;
}
.pb-toc__list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.pb-toc__list li { margin-block: 0.3rem; }
.pb-toc__list li.is-sub { padding-inline-start: 0.85rem; font-size: 0.78rem; }
.pb-toc__list a {
	color: var(--wp--preset--color--ink-600);
	text-decoration: none;
	display: block;
	line-height: 1.4;
}
.pb-toc__list a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }

/* Anchor offset so a jump does not put the heading under the admin bar. */
.pb-prose :is(h2, h3)[id] { scroll-margin-top: 2rem; }

@media (min-width: 1120px) {
	/* Two columns totalling about 1,016px, so the page reads as a page
	   rather than a ribbon. Prose still stops at 80 characters inside the
	   wider column, because a 94-character line is not a reading line.
	   Data blocks take the full column width, which is where the extra
	   room actually earns something. */
	main.pb-prose {
		display: grid;
		grid-template-columns: minmax(0, 44rem) 16rem;
		column-gap: 3.5rem;
		justify-content: center;
		align-items: start;
	}
	main.pb-prose > * {
		grid-column: 1;
		margin-inline: 0;
		max-width: 80ch;
	}
	main.pb-prose > .pb-community,
	main.pb-prose > .pb-identity,
	main.pb-prose > .pb-notice--protocol,
	main.pb-prose > .pb-dosing,
	main.pb-prose > .pb-notknown,
	main.pb-prose > .pb-sources,
	main.pb-prose > .pb-status,
	main.pb-prose > .pb-related { max-width: none; }

	/* Row span with no row-gap set, so the 460 implicit rows this creates
	   are zero height and the sticky box has the whole article to travel. */
	main.pb-prose > .pb-toc {
		grid-column: 2;
		grid-row: 1 / span 500;
		position: sticky;
		top: 1.5rem;
		margin-block: 0.35rem 0;
		max-width: none;
		background: none;
		border: 0;
		border-inline-start: 2px solid var(--wp--preset--color--ink-300);
		border-radius: 0;
		padding: 0.1rem 0 0.1rem 1rem;
	}
	.pb-toc__title { cursor: default; }
	.pb-toc summary::marker { content: ''; }
	.pb-toc summary::-webkit-details-marker { display: none; }
}

@media (max-width: 1119px) {
	.pb-toc__list { columns: 2; column-gap: 1.5rem; }
}

@media (max-width: 40rem) {
	.pb-toc__list { columns: 1; }
}

/* Heading rhythm. Previously left to WordPress defaults, which gave every
   level roughly the same air and made the page read as one flat list. Space
   above a heading should belong to the heading, not to the paragraph before. */
.pb-prose h2 { margin-block: 2.75rem 0.75rem !important; }
.pb-prose h3 { margin-block: 1.75rem 0.4rem !important; }
.pb-prose h2 + h3 { margin-block-start: 1rem !important; }
.pb-prose > p { margin-block: 0 1.1rem; }
.pb-prose > ul, .pb-prose > ol { margin-block: 0 1.25rem; }
.pb-prose li { margin-block: 0.3rem; }

/* The lead paragraph under the title. One step up from body, not two. */
.pb-prose > .wp-block-post-excerpt { margin-block: 1.25rem 2rem; }
.pb-prose .wp-block-post-excerpt__excerpt {
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

@media print {
	.pb-header, .pb-footer, .pb-nav { display: none; }
}

/* ---------------------------------------------------------------
   A to Z index
   --------------------------------------------------------------- */

.pb-az { margin-block: 2rem; }

.pb-az__summary {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.9rem;
	color: var(--wp--preset--color--ink-600);
	margin-block-end: 1.25rem;
}

.pb-az__jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem;
	padding: 0.65rem 0.75rem;
	margin-block-end: 1.75rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--ink-300);
	border-radius: var(--pb-radius);
	position: sticky;
	top: 0;
	z-index: 10;
}

.pb-az__jumplink {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1;
	min-width: 1.85rem;
	padding: 0.45rem 0;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
	color: var(--wp--preset--color--accent);
}

.pb-az__jumplink:hover {
	background: var(--wp--preset--color--accent-lt);
	text-decoration: none;
}

.pb-az__jumplink--off {
	color: var(--wp--preset--color--ink-300);
	pointer-events: none;
}

.pb-az__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.25rem;
	align-items: start;
}

.pb-az__card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--ink-300);
	border-radius: 10px;
	padding: 1rem 1rem 0.65rem;
	scroll-margin-top: 4.5rem;
}

.pb-az__cardhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block-end: 0.5rem;
	border-block-end: 1px solid var(--wp--preset--color--ink-300);
}

.pb-az__letter {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.pb-az__count {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-600);
}

.pb-az__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pb-az__row + .pb-az__row { border-block-start: 1px solid var(--wp--preset--color--paper); }

.pb-az__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.55rem 0.4rem;
	margin-inline: -0.4rem;
	border-radius: 5px;
	text-decoration: none;
	color: var(--wp--preset--color--ink-900);
	font-size: 0.95rem;
}

a.pb-az__link:hover {
	background: var(--wp--preset--color--accent-lt);
	text-decoration: none;
}

a.pb-az__link:hover .pb-az__name { color: var(--wp--preset--color--accent-dk); }

.pb-az__name { overflow-wrap: anywhere; }

.pb-az__action {
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	flex: none;
}

.pb-az__row--pending .pb-az__name { color: var(--wp--preset--color--ink-600); }
.pb-az__action--pending {
	color: var(--wp--preset--color--ink-600);
	font-weight: 500;
}

.pb-az__empty {
	font-family: var(--wp--preset--font-family--ui);
	color: var(--wp--preset--color--ink-600);
}

@media (max-width: 768px) {
	.pb-az__jump { position: static; }
	.pb-az__grid { grid-template-columns: 1fr; }
}