/**
 * SAU Gravity Flow Front End — "ledger"
 *
 * Styles the Gravity Flow status / inbox / entry-detail shortcode pages that run
 * on 14 subsites (see the loader mu-plugin for the list). Gravity Flow emits
 * wp-admin markup (.wp-list-table.widefat, #poststuff, .postbox, .hndle,
 * .tablenav) but wp-admin's stylesheet is not loaded on the front end, so those
 * elements arrive essentially unstyled inside the Genesis theme.
 *
 * NOT WRAPPED IN @layer, deliberately, unlike sau-a11y-baseline.php.
 * Unlayered styles beat layered ones, and this file has to win against
 * gravityflow/css/frontend.css (also unlayered). Everything is instead scoped
 * under .gravityflow_workflow_wrap so it cannot leak into the rest of a subsite.
 *
 * The theme sets a 10px root font-size, so sizes here are absolute px.
 * See reference_sau_theme_10px_root.
 */

.gravityflow_workflow_wrap {
	/* SAU brand only: #003da5 and #fad200 are the ONLY hues in this file.
	 * Everything else is a neutral grey. #002d79 is the theme's own darker blue,
	 * used solely for hover/active states. Do not reintroduce amber, olive or
	 * green accents — they are not SAU colours. */
	--gfx-brand: #003da5;
	--gfx-brand-deep: #002d79;
	--gfx-gold: #fad200;

	--gfx-ink: #222222;
	--gfx-ink-soft: #666666;
	--gfx-rule: #e2e2e2;
	--gfx-rule-strong: #c9c9c9;
	--gfx-ground: #ffffff;
	--gfx-ground-alt: #f4f4f4;

	/* Attention = gold, on brand. Red is reserved for validation errors only. */
	--gfx-flag-bg: #fdf3bf;
	--gfx-flag-edge: var(--gfx-gold);
	--gfx-alert: #b3261e;

	/* Both faces are already self-hosted by sau-cce2 (functions.php @font-face,
	 * Nunito 200-1000 and Montserrat 100-900), so using them costs no extra
	 * request. Nunito carries everything; Montserrat is reserved for headings
	 * and column heads only. */
	--gfx-body: 'Nunito', Helvetica, Arial, sans-serif;
	--gfx-display: 'Montserrat', Helvetica, Arial, sans-serif;
	--gfx-radius: 4px;

	font-family: var(--gfx-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--gfx-ink);
}

/* Numeric columns: line up digits without switching to a monospace face. */
.gravityflow_workflow_wrap .gfx-num,
.gravityflow_workflow_wrap table.wp-list-table.entries td[data-label="ID"] a,
.gravityflow_workflow_wrap table.wp-list-table.entries td[data-label="Date"] a,
.gravityflow_workflow_wrap table#gravityflow-inbox td[data-label="ID"] a,
.gravityflow_workflow_wrap .step_status_expires,
.gravityflow_workflow_wrap .displaying-num,
.gravityflow_workflow_wrap .paging-input,
.gravityflow_workflow_wrap .current-page,
.gravityflow_workflow_wrap .gravityflow-note-meta,
.gravityflow_workflow_wrap .gravityflow-status-box-field-entry-id .gravityflow-status-box-field-value,
.gravityflow_workflow_wrap .gravityflow-status-box-field-submitted-time .gravityflow-status-box-field-value,
.gravityflow_workflow_wrap .gravityflow-status-box-field-expires .gravityflow-status-box-field-value {
	font-family: var(--gfx-body);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
 * 1. Screen-reader text
 *
 * Gravity Flow's frontend.css clips label.screen-reader-text but NOT
 * span.screen-reader-text, and the status list emits 15 of those per page
 * ("Sort ascending." x12, "Select All" x2, "Current Page"). Without wp-admin's
 * stylesheet they render as visible junk text next to every column heading.
 * ------------------------------------------------------------------------ */

.gravityflow_workflow_wrap .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

/* ---------------------------------------------------------------------------
 * 2. Filter toolbar
 * ------------------------------------------------------------------------ */

.gravityflow_workflow_wrap #gravityflow-status-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 2px solid var(--gfx-brand-deep);
}

/* Status counts: All (695) | Pending (22) ... */
.gravityflow_workflow_wrap #gravityflow-status-filter .subsubsub {
	float: none;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 2px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var(--gfx-ink-soft);
}

.gravityflow_workflow_wrap #gravityflow-status-filter .subsubsub li::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 11px;
	margin: 0 10px;
	background: var(--gfx-rule-strong);
	vertical-align: baseline;
}

.gravityflow_workflow_wrap #gravityflow-status-filter .subsubsub li:last-child::after {
	display: none;
}

.gravityflow_workflow_wrap #gravityflow-status-filter .subsubsub a {
	padding: 2px 0;
	color: var(--gfx-brand);
	line-height: 1.4;
	border-bottom: 2px solid transparent;
	text-decoration: none;
}

.gravityflow_workflow_wrap #gravityflow-status-filter .subsubsub a:hover,
.gravityflow_workflow_wrap #gravityflow-status-filter .subsubsub a:focus-visible {
	border-bottom-color: var(--gfx-brand);
}

/* The one place gold appears: the queue you are currently looking at. */
.gravityflow_workflow_wrap #gravityflow-status-filter .subsubsub a.current {
	color: var(--gfx-ink);
	font-weight: 600;
	border-bottom: 2px solid var(--gfx-gold);
}

.gravityflow_workflow_wrap #gravityflow-status-filter .subsubsub .count {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--gfx-ink-soft);
}

/* Entry ID / date range / form pickers */
.gravityflow_workflow_wrap #gravityflow-status-date-filters,
.gravityflow_workflow_wrap #entry_filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0;
	font-size: 13px;
	color: var(--gfx-ink-soft);
}

/* Scoped to the page chrome ONLY. An editable User Input step renders a real
 * Gravity Forms form in the Orbital theme inside #post-body-content, and that
 * theme must style its own controls — a blanket input rule here would trample
 * it and make the edit form look unlike every other form on the network. */
.gravityflow_workflow_wrap :is(
	#gravityflow-status-filter,
	#gravityflow-status-filters,
	#gravityflow-status-date-filters,
	#entry_filters,
	#print_options,
	#print_container,
	.tablenav,
	.postbox-container
) :is(
	input[type="text"],
	input[type="search"],
	input[type="number"],
	input[type="email"],
	select,
	textarea
) {
	min-height: 32px;
	padding: 5px 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--gfx-ink);
	background: var(--gfx-ground);
	border: 1px solid var(--gfx-rule-strong);
	border-radius: var(--gfx-radius);
	box-shadow: none;
}

.gravityflow_workflow_wrap :is(input, select, textarea, a, button):focus-visible {
	outline: 2px solid var(--gfx-brand);
	outline-offset: 2px;
	border-color: var(--gfx-brand);
}

/* Inside a horizontally scrolling container an outward outline is clipped by
 * overflow, so the focus ring on the first/last column would disappear
 * (WCAG 2.2 Focus Not Obscured). Draw it inward there instead. */
.gravityflow_workflow_wrap #gravityflow-status-list :is(input, a, button, select):focus-visible,
.gravityflow_workflow_wrap .gravityflow-table-scroll :is(input, a, button, select):focus-visible {
	outline-offset: -2px;
}

.gravityflow_workflow_wrap input.datepicker,
.gravityflow_workflow_wrap input#entry-id {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * 3. Buttons
 *
 * Compact and low-radius on purpose: these are toolbar controls in a dense
 * records table, not the 30px marketing pills of feedback_sau_elementor_style.
 * ------------------------------------------------------------------------ */

.gravityflow_workflow_wrap .button,
.gravityflow_workflow_wrap .button-secondary,
.gravityflow_workflow_wrap .postbox-container .button,
.gravityflow_workflow_wrap input[type="submit"] {
	display: inline-flex;
	align-items: center;
	height: auto;
	min-height: 32px;
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gfx-brand);
	background: var(--gfx-ground);
	border: 1px solid var(--gfx-rule-strong);
	border-radius: var(--gfx-radius);
	box-shadow: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 180ms ease, border-color 180ms ease;
}

.gravityflow_workflow_wrap .button:hover,
.gravityflow_workflow_wrap .button-secondary:hover,
.gravityflow_workflow_wrap .postbox-container .button:hover,
.gravityflow_workflow_wrap input[type="submit"]:hover {
	color: var(--gfx-brand-deep);
	background: var(--gfx-ground-alt);
	border-color: var(--gfx-brand);
}

.gravityflow_workflow_wrap .button-primary,
.gravityflow_workflow_wrap input.button-primary {
	color: #fff;
	background: var(--gfx-brand);
	border-color: var(--gfx-brand);
}

.gravityflow_workflow_wrap .button-primary:hover,
.gravityflow_workflow_wrap input.button-primary:hover {
	color: #fff;
	background: var(--gfx-brand-deep);
	border-color: var(--gfx-brand-deep);
}

.gravityflow_workflow_wrap .button[disabled],
.gravityflow_workflow_wrap .button.disabled {
	color: var(--gfx-ink-soft);
	background: var(--gfx-ground-alt);
	border-color: var(--gfx-rule);
	cursor: default;
}

/* ---------------------------------------------------------------------------
 * 4. The ledger — status / inbox table
 * ------------------------------------------------------------------------ */

.gravityflow_workflow_wrap table.wp-list-table.entries,
.gravityflow_workflow_wrap table#gravityflow-inbox {
	width: 100%;
	margin: 0 0 4px;
	border: 0;
	border-collapse: collapse;
	font-size: 14px;
	background: var(--gfx-ground);
}

/* Column heads: the ledger's ruling. */
.gravityflow_workflow_wrap table.wp-list-table.entries thead th,
.gravityflow_workflow_wrap table#gravityflow-inbox thead th {
	padding: 8px 10px;
	font-family: var(--gfx-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
	color: var(--gfx-brand);
	background: var(--gfx-ground);
	border: 0;
	border-bottom: 2px solid var(--gfx-brand) !important;
}

/* The list table also ships a <tfoot> repeating the column heads. It was left
 * unstyled, so it rendered as raw blue links mid-page. Quiet mirror of thead. */
.gravityflow_workflow_wrap table.wp-list-table.entries tfoot th,
.gravityflow_workflow_wrap table#gravityflow-inbox tfoot th {
	padding: 8px 10px;
	font-family: var(--gfx-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
	color: var(--gfx-ink-soft);
	background: var(--gfx-ground);
	border: 0;
	border-top: 1px solid var(--gfx-rule-strong);
}

.gravityflow_workflow_wrap table.wp-list-table.entries tfoot th a,
.gravityflow_workflow_wrap table#gravityflow-inbox tfoot th a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	color: var(--gfx-ink-soft);
	text-decoration: none;
}

.gravityflow_workflow_wrap table.wp-list-table.entries thead th a,
.gravityflow_workflow_wrap table#gravityflow-inbox thead th a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	color: var(--gfx-brand);
	text-decoration: none;
}

.gravityflow_workflow_wrap table.wp-list-table.entries thead th a:hover {
	color: var(--gfx-brand-deep);
	text-decoration: underline;
}

/* Sort arrows: wp-admin ships these as a sprite that never loads here, so
 * draw them. Only the active direction is solid. */
.gravityflow_workflow_wrap .sorting-indicators {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	line-height: 0;
}

.gravityflow_workflow_wrap .sorting-indicator {
	display: block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}

.gravityflow_workflow_wrap .sorting-indicator.asc {
	border-bottom: 5px solid currentColor;
	opacity: 0.45;
}

.gravityflow_workflow_wrap .sorting-indicator.desc {
	border-top: 5px solid currentColor;
	opacity: 0.45;
}

.gravityflow_workflow_wrap th.sorted .sorting-indicator.asc,
.gravityflow_workflow_wrap th.sorted .sorting-indicator.desc,
.gravityflow_workflow_wrap .sorting-indicator:hover {
	opacity: 1;
}

/* Rows */
.gravityflow_workflow_wrap table.wp-list-table.entries tbody tr,
.gravityflow_workflow_wrap table#gravityflow-inbox tbody tr {
	background: var(--gfx-ground);
	border-bottom: 1px solid var(--gfx-rule);
}

/* No zebra: with a gold flag chip already in the row, striping was a fourth
 * competing device. Hairline separators carry the row rhythm instead. */
.gravityflow_workflow_wrap table.wp-list-table.entries tbody tr:nth-child(2n),
.gravityflow_workflow_wrap table#gravityflow-inbox tbody tr:nth-child(2n) {
	background: var(--gfx-ground);
}

.gravityflow_workflow_wrap table.wp-list-table.entries tbody tr:hover,
.gravityflow_workflow_wrap table#gravityflow-inbox tbody tr:hover {
	background: var(--gfx-ground-alt);
}

.gravityflow_workflow_wrap table.wp-list-table.entries td,
.gravityflow_workflow_wrap table#gravityflow-inbox td {
	padding: 0;
	border: 0;
	vertical-align: middle;
}

/* Gravity Flow pads the anchor, not the cell, so it fills the row. */
.gravityflow_workflow_wrap table.wp-list-table.entries td a,
.gravityflow_workflow_wrap table.wp-list-table.entries td .gravityflow-empty,
.gravityflow_workflow_wrap table#gravityflow-inbox td a {
	display: block;
	padding: 9px 10px;
	color: var(--gfx-ink);
	border-bottom: none;
	box-shadow: none;
}

.gravityflow_workflow_wrap table.wp-list-table.entries td a:hover {
	color: var(--gfx-brand);
}

/* Record numbers and dates line up column-wise — the functional win. */
.gravityflow_workflow_wrap table.wp-list-table.entries td[data-label="ID"] a,
.gravityflow_workflow_wrap table.wp-list-table.entries td[data-label="Date"] a,
.gravityflow_workflow_wrap table.wp-list-table.entries td[data-label="Submitted"] a,
.gravityflow_workflow_wrap table.wp-list-table.entries td[data-label="Last Updated"] a,
.gravityflow_workflow_wrap table#gravityflow-inbox td[data-label="ID"] a,
.gravityflow_workflow_wrap table#gravityflow-inbox td[data-label="Date"] a {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--gfx-ink-soft);
}

.gravityflow_workflow_wrap .gravityflow-empty {
	color: var(--gfx-rule-strong);
}

/* --- Signature: the status rail ----------------------------------------- */

/* The per-row rail is deliberately GONE. On the Pending queue every row has an
 * expiry, so a rail keyed to that fired on 100% of rows and signalled nothing.
 * The gold chip below is the single status device. */

.gravityflow_workflow_wrap .step_status_expires {
	display: inline-block;
	margin: 0 0 0 6px;
	padding: 1px 7px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--gfx-ink);
	background: var(--gfx-flag-bg);
	box-shadow: inset 2px 0 0 var(--gfx-gold);
	border-radius: 3px;
	white-space: nowrap;
}

/* The Status cell ships as: <a>Pending</a>:&nbsp;&nbsp;<span onclick=...></span><ul>
 * The bare ":" and the empty toggle span (which relied on a wp-admin glyph that
 * never loads here) were rendering as a stray colon on its own line. Zero the
 * cell's own font-size and restore it on the real children. */
.gravityflow_workflow_wrap table.wp-list-table.entries td.column-workflow_final_status,
.gravityflow_workflow_wrap table.wp-list-table.entries td[data-label="Status"] {
	font-size: 0;
}

.gravityflow_workflow_wrap table.wp-list-table.entries td[data-label="Status"] a,
.gravityflow_workflow_wrap table.wp-list-table.entries td[data-label="Status"] ul,
.gravityflow_workflow_wrap table.wp-list-table.entries td[data-label="Status"] li {
	font-size: 14px;
}

.gravityflow_workflow_wrap table.wp-list-table.entries td[data-label="Status"] span:empty {
	display: none;
}

/* Assignee lists inside a cell */
.gravityflow_workflow_wrap [id^="gravityflow-status-assignees-"] {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
}

.gravityflow_workflow_wrap [id^="gravityflow-status-assignees-"] li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gravityflow_workflow_wrap #gravityflow-form-select,
.gravityflow_workflow_wrap #entry_filters select,
.gravityflow_workflow_wrap .gform-field-filter select {
	max-width: 220px;
}

/* Responsive: wide tables scroll inside their own container instead of forcing
 * the page to scroll (ui-ux-pro-max Responsive/Table Handling). */
.gravityflow_workflow_wrap #gravityflow-status-list,
.gravityflow_workflow_wrap .gravityflow-table-scroll {
	max-width: 100%;
	overflow-x: auto;
}

.gravityflow_workflow_wrap th.check-column,
.gravityflow_workflow_wrap td.check-column {
	width: 32px;
	padding-left: 10px;
	vertical-align: middle;
}

/* ---------------------------------------------------------------------------
 * 5. Table nav / pagination / bulk actions
 * ------------------------------------------------------------------------ */

.gravityflow_workflow_wrap .tablenav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	clear: both;
	height: auto;
	min-height: 0;
	margin: 12px 0;
}

.gravityflow_workflow_wrap .tablenav .actions,
.gravityflow_workflow_wrap .tablenav .bulkactions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	float: none;
	overflow: visible;
	padding: 0;
}

.gravityflow_workflow_wrap .tablenav .tablenav-pages {
	float: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px; /* WCAG 2.2 target spacing: >=8px between adjacent targets */
	height: auto;
	margin-left: auto;
	font-size: 13px;
	line-height: 1.4;
	color: var(--gfx-ink-soft);
}

.gravityflow_workflow_wrap .tablenav .displaying-num {
	margin: 0 6px 0 0;
	font-size: 13px;
	font-style: normal;
	font-variant-numeric: tabular-nums;
	color: var(--gfx-ink-soft);
}

/* Un-boxed: five bordered chiclets for 4 pages was more chrome than content.
 * Plain brand chevrons with a 26px hit area (WCAG 2.2 target size is 24px). */
.gravityflow_workflow_wrap .tablenav-pages a,
.gravityflow_workflow_wrap .tablenav-pages .tablenav-pages-navspan {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	min-height: 26px;
	padding: 0 2px;
	font-size: 16px;
	font-weight: 600;
	color: var(--gfx-brand);
	background: none;
	border: 0;
	border-radius: var(--gfx-radius);
	text-decoration: none;
}

.gravityflow_workflow_wrap .tablenav .tablenav-pages a:hover,
.gravityflow_workflow_wrap .tablenav .tablenav-pages a:focus-visible {
	color: var(--gfx-brand-deep);
	background: var(--gfx-ground-alt);
}

.gravityflow_workflow_wrap .tablenav-pages .tablenav-pages-navspan.disabled {
	color: var(--gfx-rule-strong);
	background: none;
	border: 0;
}

.gravityflow_workflow_wrap .tablenav-pages .paging-input {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-variant-numeric: tabular-nums;
}

.gravityflow_workflow_wrap .tablenav-pages .current-page {
	width: auto !important;
	min-width: 40px;
	padding: 3px 6px;
	text-align: center;
	border: 1px solid var(--gfx-rule-strong);
	border-radius: var(--gfx-radius);
}

/* ---------------------------------------------------------------------------
 * 6. Print modal
 * ------------------------------------------------------------------------ */

.gravityflow_workflow_wrap #print_modal_container .tagsdiv,
.gravityflow_workflow_wrap #print_container {
	padding: 14px;
	background: var(--gfx-ground);
	border: 1px solid var(--gfx-rule);
	border-radius: var(--gfx-radius);
}

.gravityflow_workflow_wrap p.description {
	margin: 6px 0 10px;
	font-size: 13px;
	color: var(--gfx-ink-soft);
}

/* ---------------------------------------------------------------------------
 * 7. Entry detail — layout
 *
 * Gravity Flow floats #postbox-container-1 with negative margins. Replaced with
 * grid so the sidebar can reorder ahead of the record on small screens.
 * ------------------------------------------------------------------------ */

.gravityflow_workflow_detail .gravityflow-back-link-container {
	margin: 0 0 14px;
}

.gravityflow_workflow_detail a.back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gfx-brand);
	text-decoration: none;
}

.gravityflow_workflow_detail a.back-link::before {
	content: "\2190";
}

.gravityflow_workflow_detail a.back-link:hover {
	text-decoration: underline;
}

.gravityflow_workflow_wrap #poststuff #post-body.columns-2 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 0 28px;
	align-items: start;
	margin: 0;
}

.gravityflow_workflow_wrap #post-body.columns-2 #post-body-content {
	float: none;
	width: auto;
	min-width: 0;
	grid-column: 1;
	margin: 0 0 24px;
}

.gravityflow_workflow_wrap #post-body.columns-2 #postbox-container-1 {
	float: none;
	width: auto;
	margin: 0;
	grid-column: 2;
	font-size: 13px;
}

.gravityflow_workflow_wrap #post-body.columns-2 #postbox-container-2 {
	float: none;
	width: auto;
	margin: 0;
	grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
 * 8. Entry detail — the record
 * ------------------------------------------------------------------------ */

.gravityflow_workflow_wrap table.entry-detail-view {
	width: 100%;
	border: 1px solid var(--gfx-rule);
	border-radius: var(--gfx-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--gfx-ground);
}

/* The header row has TWO cells: th#details and an inline-styled th holding the
 * "show empty fields" checkbox. Colour the whole row or the bar stops halfway.
 * DIRECT-descendant chain on purpose: a List field renders its own
 * table.gfield_list INSIDE this table, and a plain descendant selector painted
 * that nested header brand-blue too. */
.gravityflow_workflow_wrap table.entry-detail-view > thead > tr > th {
	color: #fff;
	background: var(--gfx-brand);
	border: 0;
	vertical-align: middle;
}

.gravityflow_workflow_wrap table.entry-detail-view > thead > tr > th label,
.gravityflow_workflow_wrap table.entry-detail-view > thead > tr > th input {
	color: #fff;
	vertical-align: middle;
}

.gravityflow_workflow_wrap table.entry-detail-view > thead > tr > th label {
	font-size: 12px !important; /* beats the inline font-size:10px on this th */
	letter-spacing: 0.04em;
	text-transform: none;
	color: #fff !important;
	opacity: 1;
}

.gravityflow_workflow_wrap table.entry-detail-view th#details {
	padding: 10px 14px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	color: #fff;
	background: var(--gfx-brand-deep);
}

.gravityflow_workflow_wrap td.entry-view-field-name {
	padding: 12px 14px 2px;
	background: var(--gfx-ground);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gfx-ink-soft);
	border: 0;
}

.gravityflow_workflow_wrap td.entry-view-field-value {
	padding: 0 14px 12px;
	background: var(--gfx-ground);
	font-size: 15px;
	color: var(--gfx-ink);
	border: 0;
	border-bottom: 1px solid var(--gfx-rule);
}

.gravityflow_workflow_wrap td.entry-view-field-value.lastrow {
	border-bottom: 0;
}

.gravityflow_workflow_wrap td.entry-view-section-break {
	padding: 16px 14px 8px;
	font-family: var(--gfx-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gfx-brand);
	background: var(--gfx-ground);
	border: 0;
	border-bottom: 2px solid var(--gfx-rule);
}

.gravityflow_workflow_wrap td.entry-view-section-break h2,
.gravityflow_workflow_wrap td.entry-view-section-break h3,
.gravityflow_workflow_wrap td.entry-view-section-break h4 {
	margin: 0;
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * 8b. Entry detail — the EDITABLE state (User Input step)
 *
 * When the viewer is an assignee of an active User Input step, Gravity Flow
 * does NOT render the .entry-view-* table. It renders the real Gravity Forms
 * form (Orbital theme) via Gravity_Flow_Entry_Editor and tags each field:
 *
 *   .gfield.gravityflow-editable-field   the fields this assignee may change
 *   .gfield.gravityflow-display-field    shown read-only for context
 *   .gfield.gravityflow-hidden-field     pushed off-screen by the vendor CSS
 *                                        (visibility:hidden;left:-9999px) —
 *                                        do not restyle, it is load-bearing
 *
 * Orbital styles the inputs themselves; the only job here is to make "you may
 * change this one" unmistakable, reusing the queue's rail.
 * ------------------------------------------------------------------------ */

.gravityflow_workflow_wrap .gfield.gravityflow-editable-field {
	padding: 10px 12px;
	background: var(--gfx-ground);
	border: 1px solid var(--gfx-rule);
	border-left: 3px solid var(--gfx-brand);
	border-radius: var(--gfx-radius);
}

/* Vendor paints the editable field's label bar #eaf2fa with its own borders,
 * and .green-triangle draws a small corner triangle on it. Replace both with
 * the rail above so there is one status device on the page, not three. */
.gravityflow_workflow_wrap .gfield.gravityflow-editable-field:not(.green-background):not(.gfield_error) .gfield_label,
.gravityflow_workflow_wrap .gfield.gravityflow-display-field .gfield_label {
	width: auto;
	margin: 0 0 4px;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--gfx-ink-soft);
	background: none;
	border: 0;
}

.gravityflow_workflow_wrap .gravityflow-editable-field.green-triangle:not(.gfield_error) .gfield_label::before,
.gravityflow_workflow_wrap .gravityflow-editable-field.green-triangle:not(.gfield_error) .gfield_label::after {
	content: none;
}

.gravityflow_workflow_wrap .gfield.gravityflow-editable-field .gfield_label + div {
	clear: none;
}

.gravityflow_workflow_wrap .gfield.gravityflow-display-field {
	padding: 10px 12px;
	border-left: 3px solid var(--gfx-rule-strong);
}

/* Instructions box — the step's instructionsValue, i.e. what the assignee is
 * being asked to do. Worth reading before the form, so give it weight. */
.gravityflow_workflow_wrap .postbox.gravityflow-instructions {
	padding: 0;
	border-left: 3px solid var(--gfx-brand);
	font-size: 14px;
}

.gravityflow_workflow_wrap .postbox.gravityflow-instructions .inside {
	padding: 12px 14px;
}

.gravityflow_workflow_wrap .gfield_description {
	font-size: 13px;
	color: var(--gfx-ink-soft);
}

/* A List field inside the record renders its own nested table. Match the
 * ledger rather than leaving the browser default heavy border. */
.gravityflow_workflow_wrap table.gfield_list {
	width: 100%;
	margin: 4px 0 0;
	border: 1px solid var(--gfx-rule);
	border-collapse: collapse;
	font-size: 14px;
	background: var(--gfx-ground);
}

.gravityflow_workflow_wrap table.gfield_list th {
	padding: 7px 10px;
	font-family: var(--gfx-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	color: var(--gfx-brand);
	background: var(--gfx-ground-alt);
	border-bottom: 1px solid var(--gfx-rule);
}

.gravityflow_workflow_wrap table.gfield_list td {
	padding: 7px 10px;
	border-bottom: 1px solid var(--gfx-rule);
}

.gravityflow_workflow_wrap table.gfield_list tr:last-child td {
	border-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 9. Postboxes — status, admin actions, PDF
 * ------------------------------------------------------------------------ */

.gravityflow_workflow_wrap .postbox {
	margin: 0 0 16px;
	padding: 0;
	line-height: 1.5;
	background: var(--gfx-ground);
	border: 1px solid var(--gfx-rule);
	border-radius: var(--gfx-radius);
	box-shadow: none;
	overflow: hidden;
}

.gravityflow_workflow_wrap .gravityflow-has-sidebar .postbox,
.gravityflow_workflow_wrap .gravityflow-has-workflow-info .postbox,
.gravityflow_workflow_wrap .gravityflow-has-step-info .postbox {
	border: 1px solid var(--gfx-rule);
	box-shadow: none;
}

.gravityflow_workflow_wrap .postbox h3,
.gravityflow_workflow_wrap .postbox h3.hndle {
	margin: 0;
	padding: 9px 14px;
	font-family: var(--gfx-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gfx-ink-soft);
	background: var(--gfx-ground-alt);
	border-bottom: 1px solid var(--gfx-rule);
}

/* An empty <h3 class="hndle"> ships on some boxes; don't leave a blank bar. */
.gravityflow_workflow_wrap .postbox h3.hndle:empty,
.gravityflow_workflow_wrap .postbox h3.hndle:has(> span:empty) {
	display: none;
}

.gravityflow_workflow_wrap .postbox .inside,
.gravityflow_workflow_wrap .postbox .submitbox,
.gravityflow_workflow_wrap .postbox #minor-publishing {
	padding: 12px 14px;
}

/* --- Signature, second use: the rail on the status box ------------------- */

.gravityflow_workflow_wrap #gravityflow-status-box-container {
	border-left: 3px solid var(--gfx-brand);
}

.gravityflow_workflow_wrap #gravityflow-status-box-container:has(.gravityflow-status-box-field-expires) {
	border-left-color: var(--gfx-gold);
}

.gravityflow_workflow_wrap .gravityflow-status-box-field {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	padding: 8px 0;
	border-bottom: 1px solid var(--gfx-rule);
}

.gravityflow_workflow_wrap .gravityflow-status-box-field:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* sau-cce2 gives h4 its own navy block styling, which turned the step-status
 * row into unreadable grey-on-navy. Reset it back to a plain label/value pair. */
.gravityflow_workflow_wrap .gravityflow-status-box-field h4 {
	margin: 0;
	padding: 0;
	font-family: var(--gfx-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gfx-ink);
	background: none;
	border: 0;
	text-transform: none;
	letter-spacing: normal;
	/* The first character was being clipped ("?arent Signature"). Rather than
	 * chase which of theme/vendor/grid supplies the offset, zero every one that
	 * could and let the box's own padding position it. */
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0 !important;
	overflow: visible;
	white-space: normal;
}

.gravityflow_workflow_wrap .gravityflow-status-box-field h4 > span {
	margin-left: 0;
	padding-left: 0;
	text-indent: 0;
}

/* Nothing in the status box should be clipped by the container's rounded corner. */
.gravityflow_workflow_wrap #gravityflow-status-box-container {
	overflow: visible;
}

.gravityflow_workflow_wrap .gravityflow-status-box-field h4 .gravityflow-status-box-field-label {
	display: block;
	color: var(--gfx-ink);
	font-family: var(--gfx-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.gravityflow_workflow_wrap .gravityflow-status-box-field h4 .gravityflow-status-box-field-value {
	display: block;
	font-size: 13px;
	color: var(--gfx-ink-soft);
}

.gravityflow_workflow_wrap .gravityflow-status-box-field-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gfx-ink-soft);
}

.gravityflow_workflow_wrap .gravityflow-status-box-field-value {
	font-size: 14px;
	color: var(--gfx-ink);
}

.gravityflow_workflow_wrap .gravityflow-status-box-field-entry-id .gravityflow-status-box-field-value,
.gravityflow_workflow_wrap .gravityflow-status-box-field-submitted-time .gravityflow-status-box-field-value,
.gravityflow_workflow_wrap .gravityflow-status-box-field-expires .gravityflow-status-box-field-value {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.gravityflow_workflow_wrap .gravityflow-status-box-field-expires .gravityflow-status-box-field-value {
	display: inline-block;
	padding: 1px 7px;
	color: var(--gfx-ink);
	background: var(--gfx-flag-bg);
	box-shadow: inset 2px 0 0 var(--gfx-gold);
	border-radius: 3px;
}

.gravityflow_workflow_wrap #minor-publishing ul {
	margin: 0;
}

.gravityflow_workflow_wrap #minor-publishing ul li {
	margin: 0 0 6px;
	list-style-type: none;
}

/* Admin actions — the control staff actually reach for (send to step, restart). */
.gravityflow_workflow_wrap #gravityflow-admin-action {
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0 0 8px;
	padding: 6px 8px;
	line-height: 1.4;
	vertical-align: baseline;
}

.gravityflow_workflow_wrap .detail-view-print {
	margin: 0 0 16px;
}

.gravityflow_workflow_wrap .gfpdf_detailed_pdf_container {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gravityflow_workflow_wrap a.gravitypdf-download-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--gfx-brand);
}

/* ---------------------------------------------------------------------------
 * 10. Timeline
 * ------------------------------------------------------------------------ */

.gravityflow_workflow_wrap .postbox.gravityflow-timeline {
	border: 1px solid var(--gfx-rule);
}

.gravityflow_workflow_wrap #postbox-container-2 .postbox {
	border: 1px solid var(--gfx-rule);
}

/* The vendor lays notes out with float + margin-left:100px. Neutralise that
 * before switching to flex, or the avatar keeps its 84px box and the body keeps
 * a 100px indent inside the flex row. */
.gravityflow_workflow_wrap .gravityflow-note {
	display: flex;
	gap: 12px;
	width: auto;
	margin: 0;
	padding: 12px 14px;
	border-bottom: 1px solid var(--gfx-rule);
}

.gravityflow_workflow_wrap .gravityflow-note:last-child {
	border-bottom: 0;
}

.gravityflow_workflow_wrap .gravityflow-note-avatar {
	flex: 0 0 auto;
	float: none;
	width: auto;
	padding: 0;
}

.gravityflow_workflow_wrap .gravityflow-note-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}

.gravityflow_workflow_wrap .gravityflow-note-title,
.gravityflow_workflow_wrap .gravityflow-note-meta {
	float: none;
	margin: 0;
	text-align: left;
}

.gravityflow_workflow_wrap .gravityflow-note-avatar img,
.gravityflow_workflow_wrap .gravityflow-note-avatar span > i {
	width: 34px;
	height: 34px;
	margin: 0;
	font-size: 20px;
	line-height: 34px;
	text-align: center;
	color: var(--gfx-brand);
	border-radius: 50%;
	background: var(--gfx-ground-alt);
}

.gravityflow_workflow_wrap .gravityflow-note-body-wrap {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.gravityflow_workflow_wrap .gravityflow-note-title {
	font-size: 14px;
	font-weight: 600;
}

.gravityflow_workflow_wrap .gravityflow-note-meta {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--gfx-ink-soft);
}

.gravityflow_workflow_wrap .gravityflow-note-body {
	font-size: 14px;
}

/* ---------------------------------------------------------------------------
 * 11. Notices
 * ------------------------------------------------------------------------ */

.gravityflow_workflow_wrap div.updated,
.gravityflow_workflow_wrap div.error,
.gravityflow_workflow_wrap .notice {
	margin: 0 0 16px;
	padding: 10px 14px;
	background: var(--gfx-ground);
	border: 1px solid var(--gfx-rule);
	border-left: 3px solid var(--gfx-brand);
	border-radius: var(--gfx-radius);
	box-shadow: none;
}

.gravityflow_workflow_wrap div.error,
.gravityflow_workflow_wrap .notice-error,
.gravityflow_workflow_wrap .gravityflow_validation_error {
	width: auto;
	border-left-color: var(--gfx-alert);
	color: var(--gfx-ink);
}

.gravityflow_workflow_wrap div.gravityflow_validation_error {
	border-top: 1px solid var(--gfx-rule);
	border-bottom: 1px solid var(--gfx-rule);
	font-size: 14px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 12. Responsive
 *
 * Gravity Flow already flips the table to data-label cards under 700px.
 * Keep that mechanism, restyle it, and collapse the detail grid earlier so the
 * status box comes first — on a phone "where is this?" beats 14 field values.
 * ------------------------------------------------------------------------ */

@media screen and (max-width: 900px) {
	.gravityflow_workflow_wrap #poststuff #post-body.columns-2 {
		grid-template-columns: minmax(0, 1fr);
		margin-right: 0;
	}

	.gravityflow_workflow_wrap #post-body.columns-2 #post-body-content,
	.gravityflow_workflow_wrap #post-body.columns-2 #postbox-container-1,
	.gravityflow_workflow_wrap #post-body.columns-2 #postbox-container-2 {
		grid-column: 1;
	}

	.gravityflow_workflow_wrap #post-body.columns-2 #postbox-container-1 {
		order: -1;
		margin-bottom: 16px;
	}
}

@media screen and (max-width: 700px) {
	.gravityflow_workflow_wrap table.wp-list-table.entries tbody tr,
	.gravityflow_workflow_wrap table#gravityflow-inbox tbody tr {
		display: block;
		margin: 0 0 12px;
		padding: 0;
		background: var(--gfx-ground);
		border: 1px solid var(--gfx-rule);
		border-left: 3px solid var(--gfx-rule-strong);
		border-radius: var(--gfx-radius);
		overflow: hidden;
	}

	.gravityflow_workflow_wrap table.wp-list-table.entries tbody tr:has(.step_status_expires) {
		border-left-color: var(--gfx-flag-edge);
	}

	/* The rail moves to the row border in card mode; drop the inset. */
	.gravityflow_workflow_wrap table.wp-list-table.entries tbody tr > :first-child,
	.gravityflow_workflow_wrap table#gravityflow-inbox tbody tr > :first-child {
		box-shadow: none;
	}

	.gravityflow_workflow_wrap table.wp-list-table.entries td,
	.gravityflow_workflow_wrap table.wp-list-table.entries th {
		display: flex !important;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		width: auto !important;
		padding: 0;
		text-align: right;
		border: 0;
		border-bottom: 1px solid var(--gfx-rule);
	}

	.gravityflow_workflow_wrap table.wp-list-table.entries td:last-child {
		border-bottom: 0;
	}

	.gravityflow_workflow_wrap table.wp-list-table.entries td::before,
	.gravityflow_workflow_wrap table.wp-list-table.entries th::before,
	.gravityflow_workflow_wrap table#gravityflow-inbox td::before {
		content: attr(data-label);
		display: block;
		position: static;
		flex: 0 0 auto;
		float: none;
		padding: 10px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-align: left;
		color: var(--gfx-ink-soft);
	}

	.gravityflow_workflow_wrap table.wp-list-table.entries td a,
	.gravityflow_workflow_wrap table#gravityflow-inbox td a {
		padding: 10px;
		text-align: right;
	}

	.gravityflow_workflow_wrap #gravityflow-status-filter {
		gap: 10px;
	}

	.gravityflow_workflow_wrap .tablenav .tablenav-pages {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------------
 * 13. Quality floor
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.gravityflow_workflow_wrap * {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.gravityflow_workflow_wrap .tablenav,
	.gravityflow_workflow_wrap #gravityflow-status-filter,
	.gravityflow_workflow_wrap .detail-view-print,
	.gravityflow_workflow_wrap .gravityflow-back-link-container,
	.gravityflow_workflow_wrap th.check-column,
	.gravityflow_workflow_wrap td.check-column,
	.gravityflow_workflow_wrap #print_modal_container {
		display: none !important;
	}

	.gravityflow_workflow_wrap #poststuff #post-body.columns-2 {
		display: block;
	}

	.gravityflow_workflow_wrap table.wp-list-table.entries thead th,
	.gravityflow_workflow_wrap table.entry-detail-view th#details {
		color: #000;
		background: #fff;
		border-bottom: 2px solid #000;
	}
}