.tich-grants-field {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.tich-grants-rows {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.tich-grants-row {
	/* The panel now lives in the narrow side column - a wrapping single row
	   of selects had no room to breathe, so each field gets its own line. */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 1.9em 0.6em 0.6em;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.tich-grants-row-warning {
	background: #fcf0f1;
	border-color: #d63638;
	color: #d63638;
	font-weight: 600;
}

/* Couldn't load this site's courses right now (not "deleted") - the same
   yellow as the settings page's revoked-key state, so it reads as "check
   something", not "this mapping is broken". */
.tich-grants-row-notice {
	background: #fcf9e8;
	border-color: #dba617;
	color: #7d5b00;
	font-weight: 600;
}

.tich-grants-select {
	width: 100%;
}

.tich-grants-warning {
	flex: 1;
}

.tich-grants-remove {
	position: absolute;
	top: 0.3em;
	inset-inline-end: 0.3em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	padding: 0;
	border: 0;
	background: transparent;
	color: #787c82;
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}

.tich-grants-remove:hover,
.tich-grants-remove:focus-visible {
	background: #f0f0f1;
	color: #d63638;
}

.tich-grants-refresh-row {
	text-align: center;
}

.tich-grants-no-sites {
	color: #d63638;
	font-weight: 600;
}

/* Site-wide "this key stopped working" notice (Tich_Key_Health) - logo on
   its own line, then the sentence and the fix button side by side. */
.tich-wc-key-notice {
	padding-block: 0.75em;
}

.tich-wc-key-notice h2 {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0 0 0.4em;
	font-size: 1.1em;
}

.tich-wc-key-notice p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em;
	margin: 0;
}

/* The h1 wraps only the logo now (its alt text carries the page title for
   screen readers) - reset WP's own heading margins rather than inherit them. */
.tich-wc-header {
	margin: 0 0 0.5em;
}

.tich-wc-sites-rows {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.tich-wc-site-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	padding: 0.75em;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.tich-wc-status {
	font-size: 0.9em;
}

.tich-wc-status-ok {
	color: #1a7f37;
	font-weight: 600;
}

.tich-wc-status-error {
	color: #d63638;
	font-weight: 600;
}

/* A confirmed-deleted key (invalid_api_key on a previously-connected site) -
   distinct from the generic red .tich-wc-status-error above, since this one
   is actionable (a link to the dashboard) rather than just a rejection. */
.tich-wc-status-warning {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 0.75em;
	background: #fcf9e8;
	border: 1px solid #dba617;
	border-radius: 4px;
	color: #7d5b00;
	font-weight: 600;
}

.tich-wc-status-warning .dashicons-warning {
	flex-shrink: 0;
	color: #dba617;
}

.tich-wc-status-warning a {
	color: inherit;
	text-decoration: underline;
}

/* "Delete" (unconnected row - nothing to disconnect, only remove) reads as
   more destructive than "Delete the secret key to disconnect" (connected row, plain .tich-wc-remove-site
   styling), so it gets WP's own error red. */
.tich-wc-remove-site-delete {
	color: #d63638;
}

.tich-wc-remove-site-delete:hover,
.tich-wc-remove-site-delete:focus-visible {
	color: #a52714;
}

.tich-wc-add-site {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}

.tich-wc-add-site .dashicons {
	/* Centering the row (.tich-wc-add-site) only centers this span's own
	   box - the glyph inside is drawn by dashicons' :before via normal
	   text layout, whose line-box doesn't reliably match this box's
	   height. Making the span itself a flex container centers the glyph
	   regardless of the icon font's line-height quirks. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1em;
	height: 1.1em;
	font-size: 1.1em;
}

.tich-wc-settings span.dashicons.dashicons-plus-alt2 {
	/* The dashicons glyph isn't drawn centered within its own em box
	   (plus-alt2 sits a little high). A relative-position nudge used to
	   compensate, but it needed re-tuning per WP version; vertical-align
	   lines the glyph up with the button's text on its own (verified on
	   WP 7.1). */
	vertical-align: middle;
}