/**
 * The jobs board.
 *
 * Everything is scoped to `.rp-jobs`, and every colour goes through a `--rpj-*`
 * variable defined in the generated `rp-jobs-tokens.css`, which defers to the
 * theme's `--rp-*` where a theme provides one. There is no `:root` block here
 * and no raw hex: the theme rules forbid both, and under The7 the generated
 * fallbacks do the work instead.
 *
 * Fonts go through `--rp-*` too, never a bare `--font-*`. The prototype called
 * `--font-sans-condensed`, which this theme does not publish (it publishes
 * `--font-condensed`, wrapped as `--rp-cond`), so every condensed label in it
 * silently fell back.
 *
 * Kept from the prototype because they are real work: the column widths, the
 * fixed table layout, `overflow-wrap` on cells that carry unbroken agency
 * prose, the word-spacing trick that stacks series numbers, and the print rule
 * that opens every detail panel.
 *
 * Dropped from it: the sticky header offset (a magic 69px that was the height
 * of its own control bar and collides with the site header), the sticky
 * controls (they fight the same header), and the tangelo "view on USAJOBS"
 * button (see the button tiers below).
 */

.rp-jobs,
.rp-jobs-hero {
	--rpj-sans: var(--rp-sans, 'Messina Sans', ui-sans-serif, system-ui, sans-serif);
	--rpj-serif: var(--rp-serif, 'Messina Serif', Georgia, serif);
	--rpj-cond: var(--rp-cond, 'Messina Sans Condensed', 'Messina Sans', sans-serif);
	--rpj-mono: var(--rp-mono, 'Messina Sans Mono', ui-monospace, monospace);

	font-family: var(--rpj-sans);
	color: var(--rpj-ink);

	/*
	 * A data table needs the page, not the prose measure, and the page is the
	 * template's business rather than this stylesheet's.
	 *
	 * An earlier draft broke out with `left:50%; transform:translateX(-50%)`.
	 * It looked right at 1920 and is a trap: that centres on the PARENT, and
	 * this template's content column sits left of centre (320..1088 in a 1920
	 * viewport, centre 704). On a narrower viewport the same rule pushes the
	 * board's left edge negative and the whole page scrolls sideways.
	 *
	 * So the board fills whatever it is given, and the two rules that keep it
	 * readable regardless are the table's `min-width` and the horizontal scroll
	 * on `.rp-jobs__scroll`. Put the shortcode in a wide or full-width
	 * container and it uses the room; put it in a reading column and the table
	 * scrolls inside its own box, and the page never does.
	 */
	width: 100%;
}

/*
 * The board owns its own measure.
 *
 * max-width plus auto margins, never a breakout: this can only ever be
 * narrower than its parent, so it cannot overflow whatever container a theme
 * drops it into. The gutter matches the theme's own `.rp-crumbs__wrap`, so the
 * breadcrumb trail above lines up with the heading below instead of sitting
 * 24px proud of it.
 */
.rp-jobs,
.rp-jobs-hero {
	width: 100%;
	max-width: var(--rp-c-max, 1140px);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.rp-jobs {
	scroll-margin-top: 2rem;
}

.rp-jobs *,
.rp-jobs *::before,
.rp-jobs *::after {
	box-sizing: border-box;
}

/* ── Title area ─────────────────────────────────────────────────────── */

/*
 * Rendered by the shortcode because no page template on this site renders a
 * post title. Serif display, matching the RP register; the kicker takes the
 * section name the way the theme's own page hero takes its eyebrow from the
 * parent page.
 */
.rp-jobs-hero {
	margin-bottom: 1.75rem;
}

.rp-jobs-hero__kicker {
	font-family: var(--rpj-cond);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rpj-tangelo);
	margin: 0 0 0.5rem;
}

/*
 * Deliberately below the house page-title scale.
 *
 * The theme's own hero runs clamp(2rem, 4.5vw, 3rem) at weight 500, which is
 * right for a marketing page where the headline is the message. Here the
 * headline is a label and the table is the message, so it steps down a size
 * and lets the counts and the first rows come forward. Weight follows the
 * house at 500; a serif at 600 reads as a banner.
 */
.rp-jobs-hero__title {
	font-family: var(--rpj-serif);
	font-weight: 500;
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.25rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--rpj-ink);
	text-wrap: balance;
	margin: 0;
}

.rp-jobs-hero__lead {
	/* The measure belongs to the prose, not to the block around it. */
	max-width: 46rem;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--rpj-ink-2);
	margin: 0.9rem 0 0;
}

/* ── Provenance ─────────────────────────────────────────────────────── */

.rp-jobs__source {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--rpj-ink-3);
	margin: 0 0 0.75rem;
	max-width: 60ch;
}

.rp-jobs__stale {
	font-family: var(--rpj-cond);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--rpj-mahogany);
	background: var(--rpj-surface-2);
	border-left: 3px solid var(--rpj-mahogany);
	padding: 0.5rem 0.75rem;
	margin: 0 0 1rem;
}

/* ── Counts ─────────────────────────────────────────────────────────── */

.rp-jobs__counts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	font-family: var(--rpj-cond);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rpj-ink-3);
}

.rp-jobs__counts b {
	font-family: var(--rpj-sans);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0;
	color: var(--rpj-deep-blue);
	margin-right: 0.35rem;
	vertical-align: -0.1em;
}

.rp-jobs__counts-hot b {
	color: var(--rpj-mahogany);
}

/* ── Toolbar ────────────────────────────────────────────────────────── */

.rp-jobs__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 0.9rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--rpj-line);
	margin-bottom: 1rem;
}

.rp-jobs__seg {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	border: 1px solid var(--rpj-line-2);
	border-radius: 999px;
	background: var(--rpj-bg);
}

.rp-jobs__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4em 0.85em;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--rpj-cond);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	color: var(--rpj-ink-3);
	text-decoration: none;
	transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.rp-jobs__chip:hover,
.rp-jobs__chip:focus-visible {
	color: var(--rpj-ink);
}

.rp-jobs__chip--active {
	background: var(--rpj-surface);
	border-color: var(--rpj-line-2);
	color: var(--rpj-ink);
}

/* Rendered by the server and kept live by the script: what choosing this
   plan would leave, under everything else already chosen. */
.rp-jobs__chip-n {
	font-family: var(--rpj-mono);
	font-size: 0.7rem;
	color: var(--rpj-ink-3);
}

/*
 * A plan with nothing behind it is still listed, so the reader learns it
 * exists on this board, but it is not a link (no href) and it looks like the
 * thing it is: a fact, not a door. It keeps its count so the zero informs.
 */
.rp-jobs__chip--empty {
	color: var(--rpj-ink-3);
	opacity: 0.55;
	cursor: default;
}

.rp-jobs__chip--empty:hover {
	color: var(--rpj-ink-3);
}

.rp-jobs__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	flex: 1 1 20rem;
}

.rp-jobs__form input[type='search'] {
	/* 10rem, not 14: with the drawn chevron's padding the two selects grew,
	   and at 14rem the sort select wrapped to its own line on desktop. */
	flex: 1 1 10rem;
	min-width: 10rem;
	padding: 0.5em 0.9em;
	border: 1px solid var(--rpj-line-2);
	border-radius: 999px;
	background: var(--rpj-surface);
	font-family: var(--rpj-sans);
	font-size: 0.95rem;
	color: var(--rpj-ink);
}

/* The native control drew its own arrow inside the pill, jammed against the
   curve (staging, 2026-10-02). Same treatment as the design system's
   .rp-select (theme rp-ds.css): no native arrow, one drawn chevron, room for
   it on the right. */
.rp-jobs__form select {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.45em 2.2em 0.45em 0.9em;
	border: 1px solid var(--rpj-line-2);
	border-radius: 999px;
	background-color: var(--rpj-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23727A82' stroke-width='1.4'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85em center;
	background-size: 0.85em;
	font-family: var(--rpj-sans);
	font-size: 0.9rem;
	line-height: 1.3;
	color: var(--rpj-ink);
	cursor: pointer;
}

/* Search and the two selects sit on one row: one height for all three. */
.rp-jobs__form input[type='search'],
.rp-jobs__form select {
	box-sizing: border-box;
	height: 2.5rem;
}

/* A select sizes to its longest option ("District of Columbia"), which took
   the room the search placeholder needs. Cap them; the open list still shows
   every option in full. */
.rp-jobs__form select {
	flex: 0 1 auto;
	max-width: 10rem;
}

/* On a phone the search takes its own row and the two selects share the
   next one at equal width, instead of stacking at their content widths. */
@media (max-width: 600px) {
	.rp-jobs__form input[type='search'] { flex-basis: 100%; }
	.rp-jobs__form select { flex: 1 1 0; min-width: 0; max-width: none; }
}

.rp-jobs__form input:focus-visible,
.rp-jobs__form select:focus-visible,
.rp-jobs a:focus-visible,
.rp-jobs button:focus-visible {
	outline: 2px solid var(--rpj-tangelo);
	outline-offset: 2px;
}

.rp-jobs__apply {
	padding: 0.5em 1em;
	border: 1px solid var(--rpj-line-2);
	border-radius: 999px;
	background: var(--rpj-surface);
	font-family: var(--rpj-cond);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	color: var(--rpj-ink);
	cursor: pointer;
}

/* Search-as-you-type makes the button noise, so the script hides it. */
.rp-jobs--js .rp-jobs__apply {
	display: none;
}

.rp-jobs__status {
	margin: 0 0 0 auto;
	font-family: var(--rpj-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rpj-ink-3);
}

.rp-jobs__clear {
	color: var(--rpj-bright-blue);
	margin-left: 0.5rem;
}

/* ── Table ──────────────────────────────────────────────────────────── */

/*
 * The skip link is a screen-reader-text element until it has focus, at which
 * point it becomes a real, visible control at the top of the table so a
 * sighted keyboard reader sees where their Tab went.
 */
.rp-jobs__skip:focus,
.rp-jobs__skip:focus-visible {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 0.75rem !important;
	padding: 0.5em 0.9em !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	display: inline-block !important;
	border: 1px solid var(--rpj-line-2);
	border-radius: 999px;
	background: var(--rpj-surface);
	font-family: var(--rpj-cond);
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	color: var(--rpj-ink);
	text-decoration: none;
}

.rp-jobs__scroll {
	overflow-x: auto;
}

.rp-jobs__table {
	width: 100%;
	/* Below this the columns stop being readable, so the wrapper scrolls. */
	min-width: 60rem;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0 0 1.5rem;
	font-size: 0.92rem;
}

/*
 * Only the cells that carry prose may break mid-word. Agency names arrive as
 * long unbroken strings and need it; a pay plan and a four-digit series are
 * codes, and breaking "ES" across two lines makes it unreadable.
 */
.rp-jobs__cell--title,
.rp-jobs__cell--agency,
.rp-jobs__cell--loc {
	overflow-wrap: anywhere;
}

.rp-jobs__th {
	background: var(--rpj-deep-blue);
	color: var(--rpj-d-fg);
	font-family: var(--rpj-cond);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-align: left;
	padding: 0;
	white-space: nowrap;
}

.rp-jobs__th--on {
	box-shadow: inset 0 -3px 0 var(--rpj-tangelo);
}

/* The sort control is a link, so it is focusable and works with no script. */
.rp-jobs__sort {
	display: block;
	padding: 0.7em 0.75em;
	color: inherit;
	text-decoration: none;
}

.rp-jobs__sort:hover,
.rp-jobs__sort:focus-visible {
	color: var(--rpj-d-fg);
	background: var(--rpj-evening-blue);
}

/*
 * Every sortable column says so at rest. The unsorted glyph is the same ink as
 * the label at reduced opacity, so six of them do not turn the header into a
 * row of ornaments; the active column's arrow is full tangelo.
 */
.rp-jobs__arrow::after {
	content: ' \2195';
	opacity: 0.45;
}

.rp-jobs__sort:hover .rp-jobs__arrow::after,
.rp-jobs__sort:focus-visible .rp-jobs__arrow::after {
	opacity: 0.8;
}

.rp-jobs__th--on .rp-jobs__arrow::after {
	content: ' \25B2';
	color: var(--rpj-tangelo);
	opacity: 1;
}

.rp-jobs__th--on[aria-sort='descending'] .rp-jobs__arrow::after {
	content: ' \25BC';
}

.rp-jobs__job {
	border-bottom: 1px solid var(--rpj-line);
}

.rp-jobs__job:hover {
	background: var(--rpj-surface-2);
}

/*
 * With the script, the whole summary row is the control: it takes focus (one
 * row at a time; arrow keys move it), Enter opens it, and a click on anything
 * that is not a link does the same. The focus ring is drawn inset so a table
 * row, which cannot carry an outline in every engine, still shows one.
 */
.rp-jobs--js tr.rp-jobs__row {
	cursor: pointer;
}

.rp-jobs--js tr.rp-jobs__row:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--rpj-tangelo);
}

.rp-jobs__job--open > tr.rp-jobs__row {
	background: var(--rpj-surface-2);
}

.rp-jobs__cell {
	padding: 0.75em;
	vertical-align: top;
}

.rp-jobs__cell--date {
	font-family: var(--rpj-mono);
	font-size: 0.8rem;
	color: var(--rpj-ink-3);
}

.rp-jobs__cell--close {
	color: var(--rpj-ink);
}

.rp-jobs__note,
.rp-jobs__new,
.rp-jobs__announce,
.rp-jobs__dept {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Colour never carries the meaning alone: the row also says how long is left. */
.rp-jobs__job--soon .rp-jobs__note {
	color: var(--rpj-mahogany);
	font-weight: 600;
}

.rp-jobs__new {
	font-family: var(--rpj-cond);
	font-weight: 700;
	color: var(--rpj-tangelo);
}

.rp-jobs__announce,
.rp-jobs__dept {
	font-family: var(--rpj-mono);
	text-transform: none;
	letter-spacing: 0;
	color: var(--rpj-ink-3);
	font-size: 0.75rem;
}

.rp-jobs__plan {
	display: inline-block;
	white-space: nowrap;
	padding: 0.15em 0.5em;
	border-radius: var(--rpj-r-tag);
	background: var(--rpj-deep-blue);
	color: var(--rpj-d-fg);
	font-family: var(--rpj-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
}

.rp-jobs__plan--SL {
	background: var(--rpj-mahogany);
}

.rp-jobs__plan--ST {
	background: var(--rpj-dark-gray);
}

.rp-jobs__plan--IE {
	background: var(--rpj-midnight);
}

/* Stacks comma-separated series numbers vertically in a narrow column, with
   no markup per number. Kept from the prototype; it is a good trick. */
/*
 * A posting can list several series. `word-spacing` stacks them vertically with
 * no markup per number, which is the prototype's trick and a good one. But the
 * numbers themselves must never break, or "0510" reads as two series.
 */
.rp-jobs__cell--series {
	font-family: var(--rpj-mono);
	font-size: 0.8rem;
	color: var(--rpj-ink-3);
	word-spacing: 100vw;
	overflow-wrap: normal;
	word-break: keep-all;
	line-height: 1.6;
}

.rp-jobs__title {
	font-family: var(--rpj-serif);
	font-weight: 600;
	font-size: 1rem;
	color: var(--rpj-deep-blue);
	text-decoration: none;
}

.rp-jobs__title:hover {
	color: var(--rpj-tangelo);
}

.rp-jobs__cell--agency {
	font-weight: 600;
}

.rp-jobs__toggle {
	font-family: var(--rpj-cond);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rpj-bright-blue);
	text-decoration: none;
	white-space: nowrap;
}

/* ── Save ───────────────────────────────────────────────────────────── */

/*
 * Save sits with Details in the last cell, the same quiet register: the row
 * is the thing, and two small controls at its end do not compete with it.
 * Saved is the one state that gets colour, and it also changes its word.
 */
.rp-jobs__cell--more {
	white-space: nowrap;
}

.rp-jobs__keepform {
	display: inline;
	margin: 0;
}

.rp-jobs__save {
	display: inline-block;
	margin-right: 0.85em;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--rpj-cond);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rpj-bright-blue);
	text-decoration: none;
	cursor: pointer;
}

.rp-jobs__save--on,
.rp-jobs__save--sent {
	color: var(--rpj-mahogany);
	font-weight: 700;
}

.rp-jobs__job--saved > tr.rp-jobs__row {
	box-shadow: inset 3px 0 0 var(--rpj-bright-blue);
}

/*
 * The email row. It opens under the announcement in the same surface as the
 * detail panel, so it reads as part of the row rather than a form dropped
 * on the page. One field, one button, one line about what happens next.
 */
.rp-jobs__keep-cell {
	padding: 1rem 0.75rem 1.1rem;
	background: var(--rpj-surface-2);
	border-bottom: 1px solid var(--rpj-line);
}

.rp-jobs__keep-form {
	margin: 0;
	max-width: 40rem;
}

.rp-jobs__keep-label {
	display: block;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--rpj-ink);
	margin: 0 0 0.6rem;
}

.rp-jobs__keep-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.rp-jobs__keep-fields input[type='email'] {
	flex: 1 1 16rem;
	min-width: 12rem;
	padding: 0.55em 0.9em;
	border: 1px solid var(--rpj-line-2);
	border-radius: var(--rpj-r-btn);
	background: var(--rpj-surface);
	font-family: var(--rpj-sans);
	font-size: 0.95rem;
	color: var(--rpj-ink);
}

.rp-jobs__keep-send {
	cursor: pointer;
}

.rp-jobs__hp {
	position: absolute;
	left: -9999px;
}

.rp-jobs__keep-note,
.rp-jobs__keep-sent {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--rpj-ink-3);
}

.rp-jobs__keep-sent {
	margin: 0;
	font-size: 0.95rem;
	color: var(--rpj-ink);
}

/* Focused by the script so a screen reader hears the outcome; it is not a
   control, so it draws no ring. */
.rp-jobs__keep-sent:focus {
	outline: none;
}

.rp-jobs__keep-error {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: var(--rpj-mahogany);
}

/* ── Column widths ──────────────────────────────────────────────────── */

.rp-jobs__table th:nth-child(1) { width: 10%; }
.rp-jobs__table th:nth-child(2) { width: 11%; }
.rp-jobs__table th:nth-child(3) { width: 6%; }
.rp-jobs__table th:nth-child(4) { width: 6%; }
.rp-jobs__table th:nth-child(5) { width: 25%; }
.rp-jobs__table th:nth-child(6) { width: 19%; }
.rp-jobs__table th:nth-child(7) { width: 12%; }
.rp-jobs__table th:nth-child(8) { width: 11%; }

/* ── Detail panel ───────────────────────────────────────────────────── */

.rp-jobs__detail-cell {
	padding: 0;
	background: var(--rpj-surface-2);
	border-bottom: 1px solid var(--rpj-line);
}

/*
 * The panel is styled here, not by the theme.
 *
 * rp-ds.css ships a `.rp-joa__*` vocabulary written for exactly this, but it is
 * not enqueued on a plain page and never will be under The7, so leaning on it
 * produced an unstyled panel with labels and values running together. Those
 * class names stay on the elements as an additive hook; these rules are what
 * actually paint.
 */
.rp-jobs__panel {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
	padding: 1.25rem 0.75rem 1.5rem;
}

@media (max-width: 900px) {
	.rp-jobs__panel {
		grid-template-columns: minmax(0, 1fr);
	}
}

.rp-jobs__panel-main {
	display: grid;
	gap: 1rem;
	min-width: 0;
}

.rp-jobs__panel-side {
	min-width: 0;
}

.rp-jobs__card {
	background: var(--rpj-surface);
	border: 1px solid var(--rpj-line);
	border-radius: var(--rpj-r-card);
	padding: 1rem 1.15rem 1.15rem;
}

.rp-jobs__card-h {
	font-family: var(--rpj-cond);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rpj-ink-3);
	margin: 0 0 0.75rem;
}

/* A label above its value, never beside it: a technical qualification is a
   paragraph, and "TQ 1" inline in front of it disappears. */
.rp-jobs__row {
	margin: 0 0 0.8rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--rpj-line);
}

.rp-jobs__row:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.rp-jobs__k {
	display: block;
	font-family: var(--rpj-cond);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--rpj-tangelo);
	margin-bottom: 0.2rem;
}

.rp-jobs__v {
	display: block;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--rpj-ink-2);
}

.rp-jobs__v--data {
	font-family: var(--rpj-mono);
	font-size: 0.85rem;
}

.rp-jobs__text,
.rp-jobs__note-text {
	margin: 0 0 0.6rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--rpj-ink-2);
}

.rp-jobs__note-text {
	color: var(--rpj-ink-3);
	font-style: italic;
}

.rp-jobs__duties {
	margin: 0;
	padding-left: 1.1rem;
}

.rp-jobs__duties li {
	margin-bottom: 0.4rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--rpj-ink-2);
}

.rp-jobs__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0;
}

/*
 * Button tiers, and the one deliberate inversion.
 *
 * The prototype made "view the announcement on USAJOBS" a tangelo button, the
 * loudest thing on the page. The loudest action on a lead generation page
 * should not send the reader off the site, and tangelo is an accent to be spent
 * once per view, so the consultation carries the primary and USAJOBS goes
 * quiet. The session catalog made the same call for the same reason.
 */
/* Scoped under .rp-jobs: WordPress's global link rule `:root :where(p a)`
   has the same specificity and prints later, so on its own .rp-jobs__btn lost
   its colour to the theme link colour, and the tangelo primary went tangelo
   on tangelo (staging, 2026-10-02). */
.rp-jobs .rp-jobs__btn {
	display: inline-block;
	padding: 0.6em 1.1em;
	border: 1px solid var(--rpj-line-2);
	border-radius: var(--rpj-r-btn);
	background: var(--rpj-surface);
	font-family: var(--rpj-sans);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--rpj-ink);
	text-decoration: none;
}

.rp-jobs .rp-jobs__btn:hover {
	border-color: var(--rpj-ink-3);
}

.rp-jobs .rp-jobs__btn--primary {
	background: var(--rp-white, #FFFFFF);
	border: 2px solid var(--rpj-tangelo);
	color: var(--rp-tangelo-700, #C04000);
}

.rp-jobs .rp-jobs__btn--primary:hover {
	background: var(--rp-tangelo-50, #FFF3ED);
	border-color: var(--rpj-tangelo);
	color: var(--rp-tangelo-700, #C04000);
}

/* ── Empty and unavailable ──────────────────────────────────────────── */

.rp-jobs__empty,
.rp-jobs__unavailable {
	padding: 2rem 0;
	color: var(--rpj-ink-3);
}

.rp-jobs__admin {
	font-family: var(--rpj-mono);
	font-size: 0.8rem;
	color: var(--rpj-mahogany);
	border: 1px dashed var(--rpj-line-2);
	padding: 0.6rem 0.8rem;
}

/* ── Narrow ─────────────────────────────────────────────────────────── */

/*
 * Three widths, not two.
 *
 * Above 900px, the full table. Between 700 and 900 the location column goes
 * and the minimum width drops with it, so a tablet reads seven columns
 * without scrolling. Below 700 the table stops being a table: each job
 * becomes a stacked card in the same markup, with the header row removed from
 * view (sorting is still in the select) and the two date cells labelled by
 * the `data-label` the server put on them. Nothing is hidden that a phone
 * reader needs, and the page never scrolls sideways.
 */
@media (max-width: 900px) {
	.rp-jobs__table th:nth-child(7),
	.rp-jobs__cell--loc {
		display: none;
	}

	.rp-jobs__status {
		margin-left: 0;
	}

	.rp-jobs__table {
		min-width: 46rem;
		font-size: 0.85rem;
	}
}

@media (max-width: 700px) {
	.rp-jobs__table {
		min-width: 0;
		display: block;
	}

	.rp-jobs__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.rp-jobs__job,
	.rp-jobs__detail,
	.rp-jobs__detail-cell,
	.rp-jobs__keep,
	.rp-jobs__keep-cell {
		display: block;
	}

	.rp-jobs__keep-cell {
		margin-top: 0.75rem;
		border-radius: var(--rpj-r-card);
		border-bottom: 0;
	}

	.rp-jobs__job {
		padding: 0.9rem 0;
	}

	.rp-jobs__job:hover {
		background: transparent;
	}

	/* The summary row becomes a small grid: position and agency full width on
	   top, the four small facts in a row beneath. */
	tr.rp-jobs__row {
		display: grid;
		grid-template-columns: repeat(4, auto) 1fr;
		grid-template-areas:
			'title title title title title'
			'agency agency agency agency agency'
			'posted closes plan series more';
		column-gap: 1rem;
		row-gap: 0.35rem;
		align-items: start;
	}

	.rp-jobs__cell {
		display: block;
		padding: 0;
	}

	.rp-jobs__cell--title { grid-area: title; }
	.rp-jobs__cell--agency { grid-area: agency; font-weight: 500; font-size: 0.9rem; }
	.rp-jobs__cell--date:not(.rp-jobs__cell--close) { grid-area: posted; }
	.rp-jobs__cell--close { grid-area: closes; }
	.rp-jobs__cell--plan { grid-area: plan; }
	.rp-jobs__cell--series { grid-area: series; word-spacing: normal; }
	.rp-jobs__cell--more { grid-area: more; justify-self: end; }
	.rp-jobs__cell--loc { display: none; }

	.rp-jobs__cell--date::before {
		content: attr(data-label);
		display: block;
		font-family: var(--rpj-cond);
		font-size: 0.68rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--rpj-ink-3);
	}

	.rp-jobs__title {
		font-size: 1.05rem;
	}

	.rp-jobs__announce,
	.rp-jobs__dept {
		display: inline;
		margin: 0 0 0 0.5rem;
	}

	.rp-jobs__detail-cell {
		margin-top: 0.75rem;
		border-radius: var(--rpj-r-card);
		border-bottom: 0;
	}

	.rp-jobs__panel {
		padding: 1rem 0.9rem 1.15rem;
	}

	.rp-jobs--js tr.rp-jobs__row:focus-visible {
		box-shadow: 0 0 0 2px var(--rpj-tangelo);
	}
}

/* ── Print ──────────────────────────────────────────────────────────── */

@media print {
	.rp-jobs__toolbar,
	.rp-jobs__toggle,
	.rp-jobs__save,
	.rp-jobs__keep {
		display: none;
	}

	/* On paper there is no way to expand a row, so open every one. */
	.rp-jobs__detail[hidden] {
		display: table-row !important;
	}

	.rp-jobs__job {
		break-inside: avoid;
	}
}