/*
 * About page sections. Interviews: each answer sits in a text-mode viewer
 * window, the way the 1990s diskmags and text mags showed it. Timeline and
 * the other mags: pattern tables whose rows link locally first (pm-go).
 * Loaded on pages with a pm-go table and in the editor.
 */

.pm-section > .pm-textfiles {
	margin-block: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--50);
}

.wp-block-group.is-style-textfile {
	position: relative;
	height: 100%;
	border: 3px double var(--pm-line);
	background:
		repeating-linear-gradient(0deg, rgb(238 234 255 / 0.03) 0 1px, transparent 1px 3px),
		var(--pm-deep);
	font-family: var(--pm-mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

.wp-block-group.is-style-textfile > * {
	margin: 0;
	padding-inline: 1.25rem;
}

/* The title bar, inverted like a DOS viewer's menu line. */
.wp-block-group.is-style-textfile > h3 {
	padding-block: 0.3rem;
	background: var(--pm-violet);
	color: var(--pm-night);
	font-family: var(--pm-mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.12em;
}

.wp-block-group.is-style-textfile > h3::before {
	content: "\25A0\00a0" / "";
}

.wp-block-group.is-style-textfile > .pm-meta {
	padding-block: 0.5rem;
	border-bottom: 1px solid var(--pm-line);
}

.pm-textfile__q {
	padding-top: 1.25rem;
	color: var(--pm-haze);
}

.pm-textfile__a {
	padding-block: 0.75rem 1.25rem;
	color: var(--pm-text);
	font-size: var(--wp--preset--font-size--medium);
}

.pm-textfile__who {
	color: var(--pm-aurora);
}

/* Five blinks and the cursor holds still, inside WCAG's five-second limit. */
.pm-textfile__a::after {
	content: "" / "";
	display: inline-block;
	width: 0.6em;
	height: 1.1em;
	margin-left: 0.3em;
	vertical-align: text-bottom;
	background: var(--pm-aurora);
	animation: pm-cursor 1s steps(1) 5;
}

@keyframes pm-cursor {
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pm-textfile__a::after {
		animation: none;
	}
}

/* The legend line under the text, as the mags credited their interviews. */
.pm-textfile__credits {
	padding-block: 0.75rem;
	border-top: 1px solid var(--pm-line);
	color: var(--pm-haze);
	font-size: 0.8rem;
}

/*
 * A window's or a pm-rowlinks row's main link stretches over the whole box
 * or row, so it is one click target while the link keeps a single
 * accessible name.
 * The focus ring moves to the stretched area for the same reason.
 * A secondary pm-go__alt link stays its own target, above the stretch.
 */
.pm-textfile__credits a:not(.pm-go__alt)::after,
.wp-block-table.pm-rowlinks td a:not(.pm-go__alt)::after {
	content: "" / "";
	position: absolute;
	inset: 0;
}

.pm-textfile__credits a:not(.pm-go__alt):focus-visible,
.wp-block-table.pm-rowlinks td a:not(.pm-go__alt):focus-visible {
	outline: none;
}

.pm-textfile__credits a:not(.pm-go__alt):focus-visible::after,
.wp-block-table.pm-rowlinks td a:not(.pm-go__alt):focus-visible::after {
	outline: 2px solid var(--pm-magenta);
	outline-offset: 3px;
}

/* The table scrolls sideways on a phone, which would clip an outer ring. */
.wp-block-table.pm-rowlinks td a:not(.pm-go__alt):focus-visible::after {
	outline-offset: -2px;
}

.pm-go__alt {
	position: relative;
	z-index: 1;
	color: var(--pm-haze);
}

.pm-go__alt:hover,
.pm-go__alt:focus-visible {
	color: var(--pm-magenta);
}

.pm-go__alt:focus-visible {
	outline: 2px solid var(--pm-magenta);
	outline-offset: 2px;
}

/* The last column says where the row goes: a tag for a page on this site,
   then the secondary link, or the name of the other site it opens. */
.wp-block-table.pm-go td:last-child {
	color: var(--pm-haze);
	font-family: var(--pm-mono);
	font-size: 0.8rem;
	text-align: right;
	white-space: nowrap;
}

/* The hidden header is absolute; positioned here it stays inside the
   table's scroll box instead of widening the page on a phone. */
.wp-block-table.pm-go th:last-child {
	position: relative;
}

.pm-go__tag {
	margin-right: 0.75rem;
	color: var(--pm-aurora);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wp-block-group.is-style-textfile:has(a:hover) {
	border-color: var(--pm-magenta);
}

.wp-block-group.is-style-textfile:has(a:hover) > h3 {
	background: var(--pm-magenta);
}

.wp-block-table.pm-rowlinks tbody tr {
	position: relative;
}

/* Names wrap badly beside the hex row numbers on a phone. */
.wp-block-table.pm-rowlinks td:first-child {
	white-space: nowrap;
}

.wp-block-table.pm-rowlinks figcaption {
	margin: 0;
	padding: 0.75rem 1rem 0;
	color: var(--pm-haze);
	font-family: var(--pm-mono);
	font-size: 0.8rem;
}

@media (max-width: 480px) {
	.wp-block-table.pm-rowlinks :where(th, td) {
		padding-inline: 0.5rem;
	}

	.wp-block-table.pm-rowlinks figcaption {
		padding-inline: 0.5rem;
	}

	.wp-block-table.pm-rowlinks :where(th, td):last-child {
		white-space: normal;
	}

	/* Tag above link keeps the last column narrow, so the text keeps its
	   width. */
	.wp-block-table.pm-go td:last-child {
		white-space: normal;
	}

	.pm-go__tag {
		display: block;
		margin: 0 0 0.25rem;
	}

	.pm-go__alt {
		white-space: nowrap;
	}

	/* The year already orders the timeline; its text needs the width. */
	.wp-block-table.pm-timeline tbody td:first-child::before {
		display: none;
	}
}

/* The pattern style zeroes table margins; the section sets the gap here. */
.pm-section > .pm-timeline {
	margin-top: var(--wp--preset--spacing--50);
}