/**
 * Software Is Good - shared admin interface kit.
 *
 * This file is the house standard: every one of our plugins ships an identical
 * copy of it and draws its own full width canvas inside wp-admin instead of the
 * default .wrap layout, so all of our screens read as one product family.
 *
 * Rules of the kit:
 *   - class prefix is always `sig-ui-`, never a plugin specific prefix, so the
 *     markup can be copied between plugins untouched;
 *   - the only accent is the brand colour #EA3959, one accent per surface;
 *   - the on/off control is the house switch, never a bare checkbox;
 *   - nothing is loaded from a CDN, this file is self contained.
 *
 * Keep the canonical copy in PLUGINS/_ui-kit/ in sync when editing.
 */

/* --- design tokens --- */
.sig-ui-app {
	--sig-ui-accent: #ea3959;
	--sig-ui-accent-soft: rgba( 234, 57, 89, 0.08 );
	--sig-ui-accent-ink: #b82744;
	--sig-ui-on: #34c759;
	--sig-ui-warn: #b26a00;
	--sig-ui-warn-soft: #fdf6e7;
	--sig-ui-ok-soft: #f1f9f3;
	--sig-ui-ok-ink: #22683c;
	--sig-ui-ink: #1d2327;
	--sig-ui-muted: #646970;
	--sig-ui-line: #e2e4e7;
	--sig-ui-bg: #f5f6f7;
	--sig-ui-surface: #fff;
	--sig-ui-page: 1240px;
	--sig-ui-rail-width: 210px;
	--sig-ui-split-gap: 24px;
	--sig-ui-radius: 10px;
	--sig-ui-radius-sm: 8px;
	--sig-ui-shadow: 0 1px 2px rgba( 16, 24, 40, 0.04 ), 0 1px 3px rgba( 16, 24, 40, 0.06 );
	--sig-ui-shadow-lift: 0 4px 12px rgba( 16, 24, 40, 0.08 );
}

/* --- full width canvas --- */
body.sig-ui-admin #wpcontent {
	padding-left: 0;
}

body.sig-ui-admin #wpbody-content {
	padding-bottom: 0;
}

body.sig-ui-admin #wpfooter {
	display: none;
}

.sig-ui-app {
	background: var(--sig-ui-bg);
	color: var(--sig-ui-ink);
	min-height: calc( 100vh - 32px );
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.sig-ui-app *,
.sig-ui-app *::before,
.sig-ui-app *::after {
	box-sizing: border-box;
}

/* --- top bar --- */
.sig-ui-topbar {
	position: sticky;
	top: 32px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 0 24px;
	height: 60px;
	background: var(--sig-ui-surface);
	border-bottom: 1px solid var(--sig-ui-line);
}

.sig-ui-topbar__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	color: var(--sig-ui-ink);
	text-decoration: none;
	box-shadow: none;
	border-radius: var(--sig-ui-radius-sm);
}

.sig-ui-topbar__brand:hover .sig-ui-topbar__mark,
.sig-ui-topbar__brand:focus .sig-ui-topbar__mark {
	background: var(--sig-ui-accent-ink);
}

.sig-ui-topbar__brand:focus-visible {
	outline: 2px solid var(--sig-ui-accent);
	outline-offset: 3px;
}

.sig-ui-topbar__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--sig-ui-radius-sm);
	background: var(--sig-ui-accent);
	color: #fff;
}

.sig-ui-topbar__name {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.sig-ui-topbar__nav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1 1 auto;
	overflow-x: auto;
	scrollbar-width: none;
}

.sig-ui-topbar__nav::-webkit-scrollbar {
	display: none;
}

.sig-ui-topbar__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 59px;
	padding: 0 14px;
	color: var(--sig-ui-muted);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
	box-shadow: none;
}

.sig-ui-topbar__link:hover,
.sig-ui-topbar__link:focus {
	color: var(--sig-ui-ink);
}

.sig-ui-topbar__link.is-current {
	color: var(--sig-ui-ink);
}

.sig-ui-topbar__link.is-current::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--sig-ui-accent);
}

.sig-ui-topbar__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.sig-ui-topbar__version {
	color: var(--sig-ui-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* --- page --- */
.sig-ui-page {
	max-width: var( --sig-ui-page );
	margin: 0 auto;
	padding: 28px 24px 64px;
}

/*
 * A page carrying a rail (.sig-ui-split) grows by exactly the rail and its
 * gap. The rail is navigation, not content: without this it eats a third of
 * the measure out of the panel column, and the same section card reads
 * noticeably narrower here than on every other screen of the plugin.
 */
.sig-ui-page--split {
	max-width: calc( var( --sig-ui-page ) + var( --sig-ui-rail-width ) + var( --sig-ui-split-gap ) );
}

.sig-ui-page__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

.sig-ui-page__title {
	margin: 0;
	padding: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--sig-ui-ink);
}

.sig-ui-page__desc {
	margin: 6px 0 0;
	max-width: 68ch;
	color: var(--sig-ui-muted);
}

/* --- stat tiles --- */
.sig-ui-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 16px;
	margin-bottom: 24px;
}

.sig-ui-stat {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: var(--sig-ui-surface);
	border: 1px solid var(--sig-ui-line);
	border-radius: var(--sig-ui-radius);
	box-shadow: var(--sig-ui-shadow);
}

.sig-ui-stat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #f1f2f4;
	color: var(--sig-ui-muted);
}

.sig-ui-stat.is-accent .sig-ui-stat__icon {
	background: var(--sig-ui-accent-soft);
	color: var(--sig-ui-accent);
}

.sig-ui-stat__label {
	display: block;
	color: var(--sig-ui-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sig-ui-stat__value {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sig-ui-ink);
	word-break: break-word;
}

/* --- sections --- */
.sig-ui-section {
	background: var(--sig-ui-surface);
	border: 1px solid var(--sig-ui-line);
	border-radius: var(--sig-ui-radius);
	box-shadow: var(--sig-ui-shadow);
	padding: 20px 22px 24px;
	margin-bottom: 16px;
}

.sig-ui-section__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sig-ui-line);
}

.sig-ui-section__title {
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--sig-ui-ink);
}

.sig-ui-section__intro {
	margin: 4px 0 0;
	color: var(--sig-ui-muted);
	font-size: 13px;
	max-width: 76ch;
}

/* A card whose title is a plain heading rather than a header block. Ported
   screens often carry that shape already, and it reads the same. */
.sig-ui-section > h2 {
	margin: 0 0 4px;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--sig-ui-ink);
}

.sig-ui-section > h2 + p,
.sig-ui-section > p.description {
	margin: 0 0 16px;
	color: var(--sig-ui-muted);
	font-size: 13px;
}

/* Card actions belong in the header, top right, never in the body. */
.sig-ui-section__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.sig-ui-section__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 18px 20px;
}

.sig-ui-field--wide {
	grid-column: 1 / -1;
}

/* --- second level navigation, for a screen with many panels --- */
.sig-ui-split {
	display: grid;
	grid-template-columns: var( --sig-ui-rail-width ) minmax( 0, 1fr );
	gap: var( --sig-ui-split-gap );
	align-items: start;
}

.sig-ui-rail {
	position: sticky;
	top: 108px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px;
	background: var(--sig-ui-surface);
	border: 1px solid var(--sig-ui-line);
	border-radius: var(--sig-ui-radius);
	box-shadow: var(--sig-ui-shadow);
}

.sig-ui-rail__link {
	display: block;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--sig-ui-radius-sm);
	background: none;
	color: var(--sig-ui-muted);
	text-align: left;
	text-decoration: none;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	box-shadow: none;
}

.sig-ui-rail__link:hover {
	background: #f2f3f5;
	color: var(--sig-ui-ink);
}

.sig-ui-rail__link.is-current {
	background: var(--sig-ui-accent-soft);
	color: var(--sig-ui-accent-ink);
}

.sig-ui-pane {
	min-width: 0;
}

/* --- toolbar above a table: filters, search, actions --- */
.sig-ui-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.sig-ui-toolbar__spacer {
	flex: 1 1 auto;
}

/* A button that posts is wrapped in its own form, and a form is block level.
   Without this each action would drop onto its own line. */
.sig-ui-toolbar form,
.sig-ui-section__actions form,
.sig-ui-page__head form {
	margin: 0;
}

/* --- data table --- */
.sig-ui-tablewrap {
	overflow-x: auto;
	background: var(--sig-ui-surface);
	border: 1px solid var(--sig-ui-line);
	border-radius: var(--sig-ui-radius);
	box-shadow: var(--sig-ui-shadow);
}

.sig-ui-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.sig-ui-table th,
.sig-ui-table td {
	padding: 11px 14px;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

.sig-ui-table thead th {
	position: sticky;
	top: 0;
	background: #fafbfb;
	border-bottom: 1px solid var(--sig-ui-line);
	color: var(--sig-ui-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sig-ui-table tbody tr + tr td {
	border-top: 1px solid #f0f0f1;
}

.sig-ui-table tbody tr:hover td {
	background: #fafbfb;
}

.sig-ui-table td.is-wrap {
	white-space: normal;
	min-width: 180px;
}

.sig-ui-table td.is-numeric {
	font-variant-numeric: tabular-nums;
}

.sig-ui-table__empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--sig-ui-muted);
}

/* Core's WP_List_Table, dressed as one of ours.
 *
 * A screen built on WP_List_Table gets sortable columns, bulk actions with
 * their nonces and pagination for free. Rewriting that to reach our markup
 * would be throwing away audited code for looks, so the table keeps its own
 * class names and takes the kit's treatment instead. */
.sig-ui-app .wp-list-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--sig-ui-line);
	border-radius: var(--sig-ui-radius);
	background: var(--sig-ui-surface);
	box-shadow: var(--sig-ui-shadow);
	overflow: hidden;
	font-size: 13px;
}

.sig-ui-app .wp-list-table th,
.sig-ui-app .wp-list-table td {
	padding: 11px 14px;
	border: 0;
}

.sig-ui-app .wp-list-table thead th,
.sig-ui-app .wp-list-table tfoot th {
	background: #fafbfb;
	border-bottom: 1px solid var(--sig-ui-line);
	color: var(--sig-ui-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sig-ui-app .wp-list-table tfoot th {
	border-top: 1px solid var(--sig-ui-line);
	border-bottom: 0;
}

.sig-ui-app .wp-list-table tbody tr + tr td {
	border-top: 1px solid #f0f0f1;
}

.sig-ui-app .wp-list-table tbody tr:hover td,
.sig-ui-app .wp-list-table.striped tbody tr:nth-child( odd ) {
	background: #fafbfb;
}

/* The status links above a list table, and its search box. */
.sig-ui-app .subsubsub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin: 0 0 14px;
	float: none;
	color: var(--sig-ui-muted);
	font-size: 13px;
}

.sig-ui-app .subsubsub a {
	color: var(--sig-ui-muted);
	text-decoration: none;
	box-shadow: none;
}

.sig-ui-app .subsubsub a.current {
	color: var(--sig-ui-accent-ink);
	font-weight: 600;
}

.sig-ui-app .search-box {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	float: none;
	margin: 0 0 14px;
}

.sig-ui-app .tablenav {
	display: flex;
	align-items: center;
	gap: 10px;
	height: auto;
	margin: 12px 0 0;
	padding: 0;
	background: none;
}

.sig-ui-app .tablenav .tablenav-pages {
	margin: 0 0 0 auto;
	float: none;
	color: var(--sig-ui-muted);
	font-size: 13px;
}

.sig-ui-app .tablenav .actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
}

/* Core buttons that live inside a list table's own controls. */
.sig-ui-app .button,
.sig-ui-app .button-secondary,
.sig-ui-app .button-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 14px;
	border: 1px solid var(--sig-ui-line);
	border-radius: var(--sig-ui-radius-sm);
	background: var(--sig-ui-surface);
	color: var(--sig-ui-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
	text-shadow: none;
}

.sig-ui-app .button-primary {
	border-color: transparent;
	background: var(--sig-ui-accent);
	color: #fff;
}

.sig-ui-app .button-primary:hover,
.sig-ui-app .button-primary:focus {
	background: var(--sig-ui-accent-ink);
	color: #fff;
}

/* --- pagination --- */
.sig-ui-pager {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 14px;
	color: var(--sig-ui-muted);
	font-size: 13px;
}

.sig-ui-pager__count {
	margin-right: auto;
}

/* paginate_links() prints core's .page-numbers markup; this dresses it without
   reimplementing the pagination logic. */
.sig-ui-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	border: 1px solid var(--sig-ui-line);
	border-radius: var(--sig-ui-radius-sm);
	background: var(--sig-ui-surface);
	color: var(--sig-ui-muted);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	box-shadow: none;
}

.sig-ui-pager .page-numbers:hover {
	border-color: #c9ccd0;
	color: var(--sig-ui-ink);
}

.sig-ui-pager .page-numbers.current {
	border-color: transparent;
	background: var(--sig-ui-accent-soft);
	color: var(--sig-ui-accent-ink);
}

.sig-ui-pager .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* --- settings list: one row per setting, control on the right --- */
.sig-ui-list {
	display: flex;
	flex-direction: column;
}

.sig-ui-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 0;
	border-top: 1px solid #f0f0f1;
}

.sig-ui-item:first-child {
	padding-top: 0;
	border-top: 0;
}

.sig-ui-item:last-child {
	padding-bottom: 0;
}

.sig-ui-item__text {
	flex: 1 1 auto;
	min-width: 0;
}

.sig-ui-item__name {
	font-weight: 600;
	color: var(--sig-ui-ink);
}

.sig-ui-item__desc {
	margin: 2px 0 0;
	color: var(--sig-ui-muted);
	font-size: 13px;
}

.sig-ui-item__control {
	flex: none;
	padding-top: 2px;
}

/* Extra explanation, only where a setting genuinely needs it. */
.sig-ui-note {
	margin: 8px 0 0;
	padding: 9px 12px;
	max-width: 76ch;
	border-left: 3px solid #c9ccd1;
	border-radius: 0 6px 6px 0;
	background: #f6f7f7;
	color: #50575e;
	font-size: 12.5px;
	line-height: 1.55;
}

.sig-ui-note strong {
	color: var(--sig-ui-ink);
}

/* A setting that owns further settings: they sit in a panel under its row. */
.sig-ui-subpanel {
	margin: 12px 0 0;
	padding: 14px 16px;
	max-width: 76ch;
	border: 1px solid #e9eaec;
	border-radius: var(--sig-ui-radius-sm);
	background: #fafbfb;
}

.sig-ui-subpanel__title {
	font-weight: 600;
	font-size: 13px;
	color: var(--sig-ui-ink);
}

.sig-ui-subpanel__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e9eaec;
}

/* A row whose control belongs under its label rather than beside it. */
.sig-ui-subpanel__row--stacked {
	display: block;
}

/* Radio / checkbox lists. */
.sig-ui-choices {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-top: 8px;
	font-size: 13px;
}

.sig-ui-choices--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.sig-ui-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sig-ui-scroller {
	max-height: 220px;
	overflow: auto;
	margin-top: 8px;
	padding: 10px;
	border: 1px solid var(--sig-ui-line);
	border-radius: var(--sig-ui-radius-sm);
	background: #fff;
}

.sig-ui-code {
	margin: 8px 0 0;
	padding: 12px 14px;
	overflow: auto;
	border-radius: var(--sig-ui-radius-sm);
	background: #f6f7f7;
	color: #2c3338;
	font-size: 12.5px;
	line-height: 1.6;
	white-space: pre-wrap;
}

/* --- form controls --- */
.sig-ui-label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 13px;
	color: var(--sig-ui-ink);
}

/* Controls are scoped through .sig-ui-app on purpose. Core's forms.css styles
   inputs as `input[type="text"]`, which outranks a single class, so an unscoped
   rule loses its height and padding and the field no longer lines up with the
   button next to it. */
.sig-ui-app .sig-ui-input {
	width: 100%;
	height: 36px;
	min-height: 36px;
	padding: 0 11px;
	border: 1px solid #d3d6da;
	border-radius: var(--sig-ui-radius-sm);
	background: #fff;
	color: var(--sig-ui-ink);
	font-size: 14px;
	line-height: 34px;
	box-shadow: none;
}

.sig-ui-app .sig-ui-input:focus {
	border-color: var(--sig-ui-accent);
	box-shadow: 0 0 0 3px var(--sig-ui-accent-soft);
	outline: none;
}

.sig-ui-app .sig-ui-input--mono {
	font-family: Menlo, Consolas, monaco, monospace;
	font-size: 13px;
}

/* For a value that is a handful of characters, so the field does not promise
   more room than the answer needs. */
.sig-ui-app .sig-ui-input--narrow {
	max-width: 140px;
}

/* Inside our canvas a plain control looks like a kit control.
 *
 * Screens ported from the Settings API keep field callbacks that print
 * `class="regular-text"` and friends. Restyling every one of them by hand
 * would be a long diff for no gain, and a half-ported screen mixing core grey
 * boxes with ours reads as broken. The attribute selectors outrank core's own
 * (0,1,2 against 0,1,1), so this holds without !important. */
.sig-ui-app input[type="text"],
.sig-ui-app input[type="search"],
.sig-ui-app input[type="email"],
.sig-ui-app input[type="url"],
.sig-ui-app input[type="tel"],
.sig-ui-app input[type="number"],
.sig-ui-app input[type="password"],
.sig-ui-app input[type="date"] {
	height: 36px;
	min-height: 36px;
	max-width: 100%;
	padding: 0 11px;
	border: 1px solid #d3d6da;
	border-radius: var(--sig-ui-radius-sm);
	background: #fff;
	color: var(--sig-ui-ink);
	font-size: 14px;
	line-height: 34px;
	box-shadow: none;
}

.sig-ui-app textarea {
	min-height: 92px;
	padding: 8px 11px;
	border: 1px solid #d3d6da;
	border-radius: var(--sig-ui-radius-sm);
	background: #fff;
	color: var(--sig-ui-ink);
	font-size: 14px;
	line-height: 1.5;
	box-shadow: none;
}

.sig-ui-app input[type="text"]:focus,
.sig-ui-app input[type="search"]:focus,
.sig-ui-app input[type="email"]:focus,
.sig-ui-app input[type="url"]:focus,
.sig-ui-app input[type="tel"]:focus,
.sig-ui-app input[type="number"]:focus,
.sig-ui-app input[type="password"]:focus,
.sig-ui-app input[type="date"]:focus,
.sig-ui-app textarea:focus,
.sig-ui-app select:focus {
	border-color: var(--sig-ui-accent);
	box-shadow: 0 0 0 3px var(--sig-ui-accent-soft);
	outline: none;
}

/* A core `form-table` becomes a stacked field list.
 *
 * form-table is a two column table with the label in a left cell, which is the
 * opposite of the house rule (labels sit on top). Rewriting every ported screen
 * away from it is a large diff for no behaviour change, so the table is laid
 * out as blocks instead and the fields land where the standard wants them. */
.sig-ui-app .form-table,
.sig-ui-app .form-table > tbody,
.sig-ui-app .form-table > tbody > tr,
.sig-ui-app .form-table > tbody > tr > th,
.sig-ui-app .form-table > tbody > tr > td {
	display: block;
	width: auto;
	max-width: none;
	padding: 0;
	border: 0;
}

.sig-ui-app .form-table > tbody > tr + tr {
	margin-top: 18px;
}

.sig-ui-app .form-table > tbody > tr > th {
	margin-bottom: 6px;
	color: var(--sig-ui-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
}

.sig-ui-app .form-table .description,
.sig-ui-app .form-table p.description {
	margin: 6px 0 0;
	color: var(--sig-ui-muted);
	font-size: 12px;
}

/* `regular-text` and `large-text` are core width classes; keep the intent. */
.sig-ui-app .regular-text {
	width: 100%;
	max-width: 26rem;
}

.sig-ui-app .large-text {
	width: 100%;
}

.sig-ui-app .code {
	font-family: Menlo, Consolas, monaco, monospace;
	font-size: 13px;
}

/* Core styles `select` on its own, so this needs the same scoping as inputs. */
.sig-ui-app .sig-ui-select,
.sig-ui-app select {
	height: 36px;
	min-height: 36px;
	max-width: 100%;
	padding: 0 30px 0 11px;
	border: 1px solid #d3d6da;
	border-radius: var(--sig-ui-radius-sm);
	background-color: #fff;
	color: var(--sig-ui-ink);
	font-size: 14px;
	line-height: 34px;
	box-shadow: none;
}

.sig-ui-app .sig-ui-select:focus {
	border-color: var(--sig-ui-accent);
	box-shadow: 0 0 0 3px var(--sig-ui-accent-soft);
	outline: none;
}

.sig-ui-app textarea.sig-ui-input {
	height: auto;
	min-height: 92px;
	padding: 8px 11px;
	line-height: 1.5;
	resize: vertical;
	font-family: inherit;
}

/* The textarea rule above is more specific than the modifier, so a monospace
   textarea needs saying again or it falls back to the body font. */
.sig-ui-app textarea.sig-ui-input--mono {
	font-family: Menlo, Consolas, monaco, monospace;
	font-size: 13px;
}

.sig-ui-help {
	margin: 6px 0 0;
	color: var(--sig-ui-muted);
	font-size: 12px;
}

.sig-ui-help--alert {
	color: var(--sig-ui-accent-ink);
}

/* A read only value with a copy button, the pattern for endpoints and tokens. */
.sig-ui-copy {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sig-ui-copy .sig-ui-input {
	flex: 1 1 auto;
}

.sig-ui-form__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 32px;
	padding: 12px 16px;
	background: var(--sig-ui-surface);
	border: 1px solid var(--sig-ui-line);
	border-radius: var(--sig-ui-radius);
	box-shadow: var(--sig-ui-shadow);
}

/* --- buttons --- */
/* Scoped like the inputs above: wp-admin and heavy themes both style bare
   <button> elements, and an unscoped single class loses to them. */
.sig-ui-app .sig-ui-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	border-radius: var(--sig-ui-radius-sm);
	border: 1px solid transparent;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.sig-ui-app .sig-ui-btn--primary {
	background: var(--sig-ui-accent);
	color: #fff;
}

.sig-ui-app .sig-ui-btn--primary:hover,
.sig-ui-app .sig-ui-btn--primary:focus {
	background: var(--sig-ui-accent-ink);
	color: #fff;
}

.sig-ui-app .sig-ui-btn--ghost {
	background: var(--sig-ui-surface);
	border-color: var(--sig-ui-line);
	color: var(--sig-ui-ink);
}

.sig-ui-app .sig-ui-btn--ghost:hover,
.sig-ui-app .sig-ui-btn--ghost:focus {
	border-color: #c9ccd0;
	color: var(--sig-ui-ink);
}

/* Destructive action. Still a ghost button: the weight belongs to the wording
   and the confirmation, not to a loud red block. */
.sig-ui-app .sig-ui-btn--danger {
	color: #b32d2e;
}

.sig-ui-app .sig-ui-btn--danger:hover,
.sig-ui-app .sig-ui-btn--danger:focus {
	border-color: #e6b3b3;
	background: #fdf3f3;
	color: #8a2423;
}

.sig-ui-app .sig-ui-btn:focus-visible {
	outline: 2px solid var(--sig-ui-accent);
	outline-offset: 2px;
}

/* --- badges --- */
.sig-ui-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: #f1f2f4;
	color: var(--sig-ui-muted);
}

.sig-ui-badge--ok {
	background: var(--sig-ui-ok-soft);
	color: var(--sig-ui-ok-ink);
}

.sig-ui-badge--warn {
	background: var(--sig-ui-warn-soft);
	color: var(--sig-ui-warn);
}

/* Reserved for a real problem on the screen, not for decoration. */
.sig-ui-badge--bad {
	background: #fbeaea;
	color: #b32d2e;
}

/* --- facts list --- */
.sig-ui-facts {
	margin: 0;
	display: grid;
	gap: 10px;
}

.sig-ui-facts__row {
	display: flex;
	gap: 16px;
	font-size: 13px;
}

.sig-ui-facts dt {
	width: 160px;
	flex: none;
	color: var(--sig-ui-muted);
}

.sig-ui-facts dd {
	margin: 0;
	font-weight: 500;
	word-break: break-word;
}

/* --- feedback --- */
.sig-ui-flash {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 10px 14px;
	border: 1px solid #cbe6d3;
	border-radius: var(--sig-ui-radius-sm);
	background: var(--sig-ui-ok-soft);
	color: var(--sig-ui-ok-ink);
	font-weight: 500;
}

.sig-ui-flash--alert {
	border-color: #f2c8d1;
	background: var(--sig-ui-accent-soft);
	color: var(--sig-ui-accent-ink);
}

.sig-ui-toast {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: var(--sig-ui-radius-sm);
	background: #1d2327;
	color: #fff;
	box-shadow: var(--sig-ui-shadow-lift);
	opacity: 0;
	transform: translateY( 8px );
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.sig-ui-toast.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

.sig-ui-icon {
	display: block;
}

/* --- the house on/off switch --- */
.sig-ui-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}

.sig-ui-switch__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	border: 0;
}

.sig-ui-switch__track {
	display: block;
	box-sizing: border-box;
	flex: none;
	width: 44px;
	height: 26px;
	padding: 2px;
	border-radius: 999px;
	background: #d5d8dc;
	transition: background 0.18s ease;
}

.sig-ui-switch__thumb {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.18s ease;
}

.sig-ui-switch__input:checked + .sig-ui-switch__track {
	background: var(--sig-ui-on);
}

.sig-ui-switch__input:checked + .sig-ui-switch__track .sig-ui-switch__thumb {
	transform: translateX( 18px );
}

.sig-ui-switch__input:focus-visible + .sig-ui-switch__track {
	outline: 2px solid var(--sig-ui-accent);
	outline-offset: 2px;
}

.sig-ui-switch__label {
	font-weight: 500;
}

/* Small variant, for a switch that sits inside a table row. */
.sig-ui-switch--sm .sig-ui-switch__track {
	width: 36px;
	height: 21px;
}

.sig-ui-switch--sm .sig-ui-switch__thumb {
	width: 17px;
	height: 17px;
}

.sig-ui-switch--sm .sig-ui-switch__input:checked + .sig-ui-switch__track .sig-ui-switch__thumb {
	transform: translateX( 15px );
}

@media ( prefers-reduced-motion: reduce ) {
	.sig-ui-switch__track,
	.sig-ui-switch__thumb,
	.sig-ui-toast {
		transition: none;
	}
}

/* --- responsive --- */
@media screen and ( max-width: 960px ) {
	.sig-ui-section__grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* The rail lies down above the pane rather than squeezing it. */
	.sig-ui-split {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sig-ui-rail {
		position: static;
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sig-ui-rail::-webkit-scrollbar {
		display: none;
	}

	.sig-ui-rail__link {
		white-space: nowrap;
	}
}

@media screen and ( max-width: 782px ) {
	.sig-ui-topbar {
		top: 46px;
		height: auto;
		flex-wrap: wrap;
		gap: 8px 16px;
		padding: 10px 16px;
	}

	.sig-ui-topbar__link {
		height: 36px;
		padding: 0 10px;
	}

	.sig-ui-topbar__link.is-current::after {
		left: 8px;
		right: 8px;
		bottom: -2px;
	}

	.sig-ui-page {
		padding: 20px 16px 48px;
	}

	.sig-ui-page__head {
		flex-direction: column;
		align-items: stretch;
	}

	.sig-ui-section__head {
		flex-direction: column;
	}

	/* Stacked on a phone, and the button takes the full width so it stays an
	   easy tap target instead of a small centred pill. */
	.sig-ui-copy {
		flex-direction: column;
		align-items: stretch;
	}

	/* The switch stays on the same line as the setting it belongs to, so a row
	   never reads as two unrelated blocks. */
	.sig-ui-item {
		gap: 14px;
	}

	.sig-ui-subpanel {
		padding: 12px;
	}

	.sig-ui-subpanel__row {
		align-items: flex-start;
	}
}