/* WorkMore Cookie Crumb admin styles. RTL-safe (logical properties) and
   admin-color-scheme aware via --wp-admin-theme-color.

   One small vocabulary for the whole screen — and for an add-on's tabs,
   which bring no style sheet of their own: a card, a pill and three tones
   (good, warn, bad), each a color with a tint that text stays readable on. */

.wmcc-wrap {
	--wmcc-accent: var(--wp-admin-theme-color, #2271b1);
	--wmcc-ink: #1d2327;
	--wmcc-muted: #50575e;
	--wmcc-line: #dcdcde;
	--wmcc-surface: #fff;
	--wmcc-radius: 8px;
	--wmcc-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	--wmcc-good: #0a6b24;
	--wmcc-good-soft: #e7f5ea;
	--wmcc-warn: #7a4f00;
	--wmcc-warn-soft: #fcf3d6;
	--wmcc-bad: #a02222;
	--wmcc-bad-soft: #fbeaea;
	--wmcc-tint: #f0f6fc;
	max-width: 1180px;
}

/* A tint of the admin's own color, where the browser can mix one. */
@supports (background: color-mix(in srgb, red 10%, white)) {
	.wmcc-wrap {
		--wmcc-tint: color-mix(in srgb, var(--wmcc-accent) 8%, #fff);
	}
}

.wmcc-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 12px 4px;
	font-weight: 600;
}

/* The plugin's mark: a cookie with a bite taken out. */
.wmcc-heading::before {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #d97706 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fffbeb' d='M16 6a10 10 0 1 0 9.8 8 4 4 0 0 1-4.3-4.6A4 4 0 0 1 17.4 6.100 10 10 0 0 0 16 6Z'/%3E%3Cg fill='%2392400e'%3E%3Ccircle cx='12.500' cy='13.500' r='1.600'/%3E%3Ccircle cx='17.500' cy='18' r='1.800'/%3E%3Ccircle cx='11.500' cy='19.500' r='1.300'/%3E%3C/g%3E%3C/svg%3E") center / 32px no-repeat;
}

.wmcc-version {
	padding: 2px 8px;
	border-radius: 10px;
	background: #e2e4e7;
	font-size: 11px;
	font-weight: 500;
	line-height: 16px;
	color: #3c434a;
}

/* The sections: a row of names with a line under the open one. */
.wmcc-tabs.nav-tab-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4px;
	margin-block: 4px 20px;
	padding: 0;
	border-bottom: 1px solid var(--wmcc-line);
}

.wmcc-tabs .nav-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	float: none;
	margin: 0 0 -1px;
	padding: 10px 12px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
	color: var(--wmcc-muted);
}

.wmcc-tabs .nav-tab:hover {
	color: var(--wmcc-ink);
	border-bottom-color: #c3c4c7;
}

.wmcc-tabs .nav-tab-active,
.wmcc-tabs .nav-tab-active:hover {
	border-bottom-color: var(--wmcc-accent);
	background: none;
	font-weight: 600;
	color: var(--wmcc-ink);
}

.wmcc-tabs .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
	color: #787c82;
}

.wmcc-tabs .nav-tab-active .dashicons {
	color: var(--wmcc-accent);
}

.wmcc-loading {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #646970;
}

.wmcc-loading .spinner {
	float: none;
	margin: 0;
}

/* ---- Cards -------------------------------------------------------------- */

.wmcc-card {
	background: var(--wmcc-surface);
	border: 1px solid var(--wmcc-line);
	border-radius: var(--wmcc-radius);
	box-shadow: var(--wmcc-shadow);
	padding: 20px 24px;
	margin-block-end: 16px;
}

.wmcc-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	font-size: 15px;
	line-height: 1.4;
	margin: 0 0 6px;
	color: var(--wmcc-ink);
}

.wmcc-card__desc {
	color: var(--wmcc-muted);
	margin: 0 0 14px;
	max-width: 76em;
}

.wmcc-card > :last-child {
	margin-block-end: 0;
}

/* A card that says how something stands: a line of its tone down its side. */
.wmcc-card[data-tone] {
	border-inline-start-width: 4px;
}

.wmcc-card[data-tone="good"] {
	border-inline-start-color: var(--wmcc-good);
}

.wmcc-card[data-tone="warn"] {
	border-inline-start-color: #dba617;
}

.wmcc-card[data-tone="bad"] {
	border-inline-start-color: #d63638;
}

/* ---- Pills: one or two words on how something stands -------------------- */

.wmcc-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: #e2e4e7;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	color: #3c434a;
	white-space: nowrap;
}

.wmcc-pill::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.wmcc-pill[data-tone="good"] {
	background: var(--wmcc-good-soft);
	color: var(--wmcc-good);
}

.wmcc-pill[data-tone="warn"] {
	background: var(--wmcc-warn-soft);
	color: var(--wmcc-warn);
}

.wmcc-pill[data-tone="bad"] {
	background: var(--wmcc-bad-soft);
	color: var(--wmcc-bad);
}

/* ---- Fields ------------------------------------------------------------- */

.wmcc-field {
	margin-block: 12px;
}

.wmcc-field--toggle .description {
	margin-inline-start: 24px;
	max-width: 60em;
}

.wmcc-report {
	resize: vertical;
	font-size: 12px;
}

/* ---- Notices ------------------------------------------------------------ */

.wmcc-notice {
	position: relative;
	margin: 0 0 12px;
	padding-block: 8px;
}

.wmcc-notice .button {
	vertical-align: baseline;
}

.wmcc-notice + .wmcc-notice {
	margin-top: 0;
}

.wmcc-legal {
	margin-block-start: 24px;
	max-width: 60em;
	color: #646970;
}

/* What every field sits in: room to read. */
.wmcc-card .regular-text,
.wmcc-card select,
.wmcc-card textarea {
	border-radius: 4px;
}

.wmcc-card code {
	border-radius: 3px;
}

.wmcc-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.wmcc-between {
	justify-content: space-between;
}

.wmcc-remove {
	color: #b32d2e;
}

.wmcc-count {
	display: inline-block;
	min-width: 18px;
	padding: 0 6px;
	border-radius: 9px;
	background: #dcdcde;
	color: #2c3338;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
}

.wmcc-empty {
	color: #646970;
}

/* ---- The bar that saves and publishes ----------------------------------- */

.wmcc-bar {
	position: sticky;
	top: 32px;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 12px 16px 12px 20px;
	margin-block: 12px 16px;
	background: var(--wmcc-surface);
	border: 1px solid var(--wmcc-line);
	border-radius: var(--wmcc-radius);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.wmcc-bar__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	color: var(--wmcc-muted);
}

.wmcc-bar__status strong {
	color: var(--wmcc-warn);
}

.wmcc-bar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.wmcc-bar__down {
	color: #b32d2e;
}


/* ---- Fields ------------------------------------------------------------- */

.wmcc-field > label,
.wmcc-field > legend {
	display: block;
	margin-block-end: 4px;
	font-weight: 600;
}

/* A field's name, and beside it the "i" of its hint. */
.wmcc-field__head {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-block-end: 4px;
}

.wmcc-field__head > label {
	font-weight: 600;
}

.wmcc-field--toggle > .wmcc-field__head {
	display: inline-flex;
	margin: 0;
	vertical-align: middle;
}

.wmcc-field--toggle > label,
.wmcc-field--toggle > .wmcc-field__head > label,
.wmcc-radio > label {
	display: inline;
	font-weight: 400;
}

.wmcc-radios {
	border: 0;
	padding: 0;
}

.wmcc-radio {
	margin-block: 6px;
}

/* A choice that comes with an explanation (behind its "i") is a box of its own, lit when it is the one chosen. */
.wmcc-radio--box {
	max-width: 62em;
	margin-block: 8px;
	padding: 8px 14px;
	border: 1px solid var(--wmcc-line);
	border-radius: 6px;
	background: var(--wmcc-surface);
}

.wmcc-radio--box > label {
	font-weight: 600;
}

.wmcc-radio--box:has(> input:checked) {
	border-color: var(--wmcc-accent);
	background: var(--wmcc-tint);
	box-shadow: inset 0 0 0 1px var(--wmcc-accent);
}

/* ---- Hints: an "i", and its words in a bubble -------------------------- */

.wmcc-help {
	display: inline-flex;
	flex: none;
	vertical-align: middle;
}

/* Big enough to hit; the circle drawn inside is smaller. */
.wmcc-help__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: help;
}

.wmcc-help__btn > span {
	display: block;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--wmcc-muted);
	border-radius: 50%;
	font: italic 700 11px/13px Georgia, "Times New Roman", serif;
	color: var(--wmcc-muted);
	text-align: center;
}

.wmcc-help__btn:hover > span,
.wmcc-help__btn[aria-expanded="true"] > span {
	border-color: var(--wmcc-accent);
	background: var(--wmcc-accent);
	color: #fff;
}

.wmcc-help__btn:focus {
	outline: 2px solid var(--wmcc-accent);
	outline-offset: -2px;
}

.wmcc-help__tip {
	position: fixed;
	z-index: 9990;
	top: 0;
	left: 0;
	box-sizing: border-box;
	width: max-content;
	max-width: min(340px, calc(100vw - 16px));
	padding: 10px 12px;
	border-radius: 8px;
	background: #1d2327;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: #fff;
	text-align: start;
	white-space: normal;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.wmcc-help__tip[hidden] {
	display: none;
}

/* The pointer crosses from the "i" to its bubble without leaving either. */
.wmcc-help__tip::before {
	content: "";
	position: absolute;
	inset: -8px 0;
	z-index: -1;
}

.wmcc-help__tip code {
	padding: 1px 4px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.16);
	color: inherit;
}

/* A card's title, and beside it the "i" of what the card is about. */
.wmcc-card__head {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0 0 6px;
}

.wmcc-card__head > .wmcc-card__title {
	margin: 0;
}

.wmcc-field textarea {
	width: 100%;
}

.wmcc-color {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.wmcc-color input {
	width: 48px;
	height: 32px;
	padding: 2px;
}

.wmcc-list {
	margin: 8px 0;
}

.wmcc-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 0;
	border-bottom: 1px solid #f0f0f1;
}

/* ---- Banner design: sections and preview -------------------------------- */

.wmcc-design {
	display: grid;
	grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

@media (max-width: 960px) {
	.wmcc-design {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wmcc-section {
	background: var(--wmcc-surface);
	border: 1px solid var(--wmcc-line);
	border-radius: 6px;
	margin-block-end: 8px;
	overflow: hidden;
}

.wmcc-section > summary {
	padding: 11px 14px;
	font-weight: 600;
	color: var(--wmcc-ink);
	cursor: pointer;
}

.wmcc-section > summary:hover {
	background: #f6f7f7;
}

.wmcc-section[open] {
	border-color: var(--wmcc-accent);
}

.wmcc-section[open] > summary {
	border-bottom: 1px solid var(--wmcc-line);
	background: var(--wmcc-tint);
	box-shadow: inset 3px 0 0 var(--wmcc-accent);
}

.wmcc-section__body {
	padding: 6px 14px 14px;
}

.wmcc-section__body .regular-text,
.wmcc-section__body select {
	width: 100%;
	max-width: none;
}

.wmcc-preview {
	position: sticky;
	top: 112px;
	padding: 14px 16px 16px;
	background: var(--wmcc-surface);
	border: 1px solid var(--wmcc-line);
	border-radius: var(--wmcc-radius);
	box-shadow: var(--wmcc-shadow);
}

.wmcc-preview__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.wmcc-preview__tools {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wmcc-preview__box {
	position: relative;
	overflow: hidden;
	margin-block-start: 8px;
	background: #f0f0f1;
	border: 1px solid var(--wmcc-line);
	border-radius: 6px;
}

.wmcc-preview__box iframe {
	display: block;
	border: 0;
	background: #fff;
	transform-origin: 0 0;
}

/* ---- Cookies: categories and their items -------------------------------- */

.wmcc-split {
	display: grid;
	grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

@media (max-width: 960px) {
	.wmcc-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wmcc-cats {
	margin: 8px 0 12px;
}

.wmcc-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--wmcc-line);
	border-radius: 6px;
	background: var(--wmcc-surface);
	font-weight: 600;
	color: var(--wmcc-ink);
	text-align: start;
	cursor: pointer;
}

.wmcc-cat:hover {
	border-color: #a7aaad;
}

.wmcc-cat.is-current {
	border-color: var(--wmcc-accent);
	background: var(--wmcc-tint);
	box-shadow: inset 3px 0 0 var(--wmcc-accent), inset 0 0 0 1px var(--wmcc-accent);
}

.wmcc-cat.is-current .wmcc-count {
	background: var(--wmcc-accent);
	color: #fff;
}

/* The name of a new category has the width of the list above it: its placeholder is a sentence. */
.wmcc-cats + .wmcc-inline input {
	flex: 1 1 100%;
}

.wmcc-subtabs {
	margin-block: 16px 8px;
}

.wmcc-subtabs .nav-tab {
	cursor: pointer;
}

/* Fixed columns, so the one that holds a sentence gets the room that is left. */
.wmcc-table {
	table-layout: fixed;
}

.wmcc-table--cookie th:nth-child(1) {
	width: 16%;
}

.wmcc-table--cookie th:nth-child(2),
.wmcc-table--cookie th:nth-child(3) {
	width: 13%;
}

.wmcc-table--cookie th:nth-child(4) {
	width: 180px;
}

.wmcc-table--script th:nth-child(1) {
	width: 24%;
}

.wmcc-table--script th:nth-child(2) {
	width: 14%;
}

.wmcc-table--script th:nth-child(4) {
	width: 170px;
}

.wmcc-table th:last-child {
	width: 40px;
}

.wmcc-table input[type="text"],
.wmcc-table select {
	width: 100%;
}

.wmcc-table input[aria-invalid="true"] {
	border-color: #d63638;
}

.wmcc-duration {
	white-space: nowrap;
}

.wmcc-table .wmcc-duration input {
	width: 70px;
	min-width: 0;
}

.wmcc-table .wmcc-duration select {
	width: auto;
}

.wmcc-table__act {
	width: 32px;
	text-align: center;
	vertical-align: middle;
}

/* ---- Consent log: dashboard --------------------------------------------- */

.wmcc-muted {
	color: #646970;
}

.wmcc-charts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}

.wmcc-charts .wmcc-card {
	margin: 0;
}

.wmcc-chart--wide {
	grid-column: 1 / -1;
}

@media (max-width: 960px) {
	.wmcc-charts {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wmcc-dash {
	margin-block-end: 16px;
}

.wmcc-ring {
	display: block;
	width: 150px;
	max-width: 100%;
	margin: 8px auto 12px;
}

.wmcc-ring__center {
	font-size: 8px;
	font-weight: 600;
	fill: #1d2327;
}

.wmcc-chart__lead {
	margin: 0;
	text-align: center;
}

.wmcc-chart__lead strong {
	font-size: 20px;
}

.wmcc-chart__lead + .wmcc-muted {
	margin-block-start: 2px;
	text-align: center;
}

.wmcc-legend {
	width: 100%;
	border-collapse: collapse;
}

.wmcc-legend th {
	padding: 3px 0;
	font-weight: 400;
	text-align: start;
}

.wmcc-legend td {
	padding: 3px 0;
	font-variant-numeric: tabular-nums;
	text-align: end;
}

.wmcc-legend tfoot th,
.wmcc-legend tfoot td {
	padding-block-start: 6px;
	border-top: 1px solid #dcdcde;
	font-weight: 600;
}

.wmcc-legend--row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0 0 4px;
}

.wmcc-legend__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-inline-end: 6px;
	border-radius: 50%;
}

.wmcc-bars {
	display: block;
	width: 100%;
	height: auto;
}

.wmcc-bars__rule {
	stroke: #dcdcde;
	stroke-width: 1;
}

.wmcc-bars__tick {
	font-size: 12px;
	fill: #646970;
}

.wmcc-shares {
	margin: 8px 0 0;
}

.wmcc-shares li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 8px;
	margin-block-end: 10px;
}

.wmcc-shares__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wmcc-shares__value {
	font-variant-numeric: tabular-nums;
	text-align: end;
}

.wmcc-shares__bar {
	grid-column: 1 / -1;
	height: 8px;
	border-radius: 4px;
	background: #f0f0f1;
}

.wmcc-shares__bar span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: var(--wmcc-accent);
}

.wmcc-figures {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 32px;
}

.wmcc-figures p {
	margin: 0 0 8px;
}

.wmcc-figures strong {
	font-size: 20px;
}

/* ---- Consent log: records ------------------------------------------------ */

.wmcc-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0 16px;
	margin-block-end: 8px;
}

.wmcc-filters .regular-text {
	width: 23em;
	max-width: 100%;
}

.wmcc-filters__export {
	margin-block: 12px;
	margin-inline-start: auto;
}

.wmcc-scroll {
	overflow-x: auto;
}

/* Wide enough for a consent ID on one line; narrower screens scroll it. */
.wmcc-log {
	min-width: 860px;
}

.wmcc-log th,
.wmcc-log td {
	padding-inline: 8px;
}

.wmcc-log td {
	vertical-align: middle;
}

.wmcc-log code,
.wmcc-log__time,
.wmcc-log__kind {
	white-space: nowrap;
}

/* No box behind an ID or an address: on a striped row it leaves the text too little contrast. */
.wmcc-log code {
	padding: 0;
	background: none;
	font-size: 12px;
}

.wmcc-log__id {
	text-decoration: none;
}

/* A browser's name or a page's address of any length stays in its column (the whole of it is the cell's title). */
.wmcc-log__clip {
	max-width: 190px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wmcc-pager {
	margin-block-start: 12px;
}

/* ---- Cookie scan --------------------------------------------------------- */

/* A page being scanned: a desktop screen's worth, off the edge of this one. */
.wmcc-scan-frame {
	position: fixed;
	top: 0;
	left: -20000px;
	border: 0;
	visibility: hidden;
	pointer-events: none;
}

.wmcc-pages {
	margin-block: 8px;
}

.wmcc-pages > summary {
	cursor: pointer;
}

.wmcc-more > summary {
	color: var(--wmcc-muted);
	cursor: pointer;
}

.wmcc-more > summary:hover {
	color: var(--wmcc-ink);
}

.wmcc-more > p {
	max-width: 76em;
	margin-block: 6px 0;
}

.wmcc-pages ul {
	margin: 8px 0 0 18px;
	list-style: disc;
}

.wmcc-found .wmcc-card__title {
	margin-block-end: 8px;
}

.wmcc-found__table {
	min-width: 860px;
}

.wmcc-found__table th,
.wmcc-found__table td {
	padding-inline: 8px;
	vertical-align: middle;
}

.wmcc-found__table code {
	font-size: 12px;
	word-break: break-all;
}

.wmcc-found__table select {
	max-width: 240px;
}

.wmcc-found__clip {
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wmcc-leaks__list {
	margin: 8px 0 0;
}

.wmcc-leaks__list li {
	margin-block-end: 10px;
}

.wmcc-leaks__sample {
	font-size: 11px;
	word-break: break-all;
}

/* ---- The first-time setup ------------------------------------------------ */

.wmcc-wizard {
	margin-block: 12px 16px;
}

.wmcc-wizard__title {
	margin: 0 0 4px;
	font-size: 18px;
}

.wmcc-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 14px 0 16px;
	padding: 14px 20px;
	background: var(--wmcc-surface);
	border: 1px solid var(--wmcc-line);
	border-radius: var(--wmcc-radius);
	box-shadow: var(--wmcc-shadow);
	list-style: none;
}

.wmcc-steps li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--wmcc-muted);
}

/* The way from one step to the next. */
.wmcc-steps li + li::before {
	content: "";
	width: 28px;
	height: 2px;
	margin-inline-end: 4px;
	border-radius: 1px;
	background: var(--wmcc-line);
}

.wmcc-steps li.is-done + li::before,
.wmcc-steps li.is-current::before {
	background: var(--wmcc-accent);
}

.wmcc-steps__n {
	display: inline-block;
	width: 26px;
	border-radius: 50%;
	background: #e2e4e7;
	color: #2c3338;
	font-weight: 600;
	line-height: 26px;
	text-align: center;
}

.wmcc-steps .is-current {
	color: var(--wmcc-ink);
	font-weight: 600;
}

.wmcc-steps .is-current .wmcc-steps__n,
.wmcc-steps .is-done .wmcc-steps__n {
	background: var(--wmcc-accent);
	color: #fff;
}

/* ---- Upgrade ------------------------------------------------------------ */

.wmcc-compare {
	max-width: 900px;
	margin-bottom: 16px;
	border-color: var(--wmcc-line);
	border-radius: 6px;
	overflow: hidden;
}

.wmcc-compare thead th {
	font-weight: 600;
}

.wmcc-compare tbody th,
.wmcc-compare td {
	padding-block: 10px;
	vertical-align: middle;
}

/* The column of what the add-on has, set apart. */
.wmcc-compare td:last-child,
.wmcc-compare thead th:last-child {
	background: var(--wmcc-tint);
}

.wmcc-compare td,
.wmcc-compare thead th:not(:first-child) {
	width: 11em;
	text-align: center;
}

.wmcc-compare tbody th {
	font-weight: 400;
	text-align: start;
}

.wmcc-compare .dashicons-yes {
	color: #008a20;
}

.wmcc-compare .dashicons-minus {
	color: #787c82;
}

/* ---- Tones on what a card is headed by ---------------------------------- */

.wmcc-card[data-tone="good"] > .wmcc-card__title .dashicons,
.wmcc-card[data-tone="good"] li > .dashicons-yes {
	color: var(--wmcc-good);
}

.wmcc-card[data-tone="warn"] > .wmcc-card__title .dashicons {
	color: #996800;
}

.wmcc-card[data-tone="bad"] > .wmcc-card__title .dashicons {
	color: #d63638;
}

/* Fields that belong together, side by side where there is room. */
.wmcc-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.wmcc-fields > .wmcc-field {
	margin-block: 10px 6px;
}

.wmcc-fields .regular-text {
	width: 22em;
	max-width: 100%;
}

/* A field in a row gives way before the row does: nothing is wider than a phone's screen. */
.wmcc-filters > .wmcc-field,
.wmcc-fields > .wmcc-field {
	min-width: 0;
	max-width: 100%;
}

/* The two lists of a category, in the manner of the sections above. */
.wmcc-subtabs.nav-tab-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4px;
	padding: 0;
	border-bottom: 1px solid var(--wmcc-line);
}

.wmcc-subtabs .nav-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	float: none;
	margin: 0 0 -1px;
	padding: 8px 12px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: none;
	font-size: 13px;
	font-weight: 500;
	color: var(--wmcc-muted);
}

.wmcc-subtabs .nav-tab:hover {
	color: var(--wmcc-ink);
	border-bottom-color: #c3c4c7;
}

.wmcc-subtabs .nav-tab-active,
.wmcc-subtabs .nav-tab-active:hover {
	border-bottom-color: var(--wmcc-accent);
	font-weight: 600;
	color: var(--wmcc-ink);
}

/* ---- Consent log: the one time range, the charts' tips, the pager -------- */

/* The time range the tab looks at — charts and records — and "Refresh" at its end. */
.wmcc-range {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 4px 16px;
	margin-block-end: 4px;
}

.wmcc-range__refresh {
	margin-block-end: 8px;
}

.wmcc-range input[type="date"] {
	max-width: 100%;
}

.wmcc-dash__when {
	min-height: 20px;
	margin-block: 0 8px;
	text-align: end;
}

/* A chart, and the tip that follows the pointer over it. */
.wmcc-chartbox {
	position: relative;
}

.wmcc-chartbox:focus {
	outline: 2px solid var(--wmcc-accent);
	outline-offset: 2px;
}

.wmcc-chartbox--ring {
	width: 150px;
	max-width: 100%;
	margin-inline: auto;
}

.wmcc-charttip {
	position: absolute;
	z-index: 5;
	top: 4px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	width: max-content;
	max-width: 240px;
	padding: 7px 10px;
	border-radius: 6px;
	background: #1d2327;
	font-size: 12px;
	line-height: 1.45;
	color: #fff;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* Beside its step, on the side that has room. */
.wmcc-charttip[data-side="after"] {
	transform: translateX(14px);
}

.wmcc-charttip[data-side="before"] {
	transform: translateX(calc(-100% - 14px));
}

/* A ring's tip stands above the pointer. */
.wmcc-chartbox--ring .wmcc-charttip {
	transform: translate(-50%, calc(-100% - 10px));
}

.wmcc-bars__at {
	fill: rgba(0, 0, 0, 0.06);
}

.wmcc-log__clipped {
	margin-block: 4px 10px;
}

/* Which rows these are, how many a page holds, and the way to the others. */
.wmcc-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin-block-start: 12px;
}

.wmcc-pager__where {
	margin-inline-end: auto;
}

.wmcc-pager__rows,
.wmcc-pager__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}

/* A hint about a whole section of Banner design: an "i" in the section's corner. */
.wmcc-section__help {
	float: inline-end;
	margin: 0 -8px 0 4px;
}

/* ---- Places: where something stands, as pictures to choose among --------- */

.wmcc-places {
	border: 0;
	padding: 0;
}

.wmcc-places__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 10px;
}

/* A card that is one radio button: the button lies over all of it, unseen. */
.wmcc-place {
	position: relative;
	border: 1px solid var(--wmcc-line);
	border-radius: 8px;
	background: var(--wmcc-surface);
}

.wmcc-place > input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 8px;
	opacity: 0;
	cursor: pointer;
}

.wmcc-place > label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 8px 12px;
	font-weight: 400;
	text-align: center;
}

.wmcc-place__name {
	font-size: 13px;
	line-height: 1.35;
}

.wmcc-place:hover {
	border-color: #a7aaad;
}

.wmcc-place:has(> input:checked) {
	border-color: var(--wmcc-accent);
	background: var(--wmcc-tint);
	box-shadow: inset 0 0 0 1px var(--wmcc-accent);
}

.wmcc-place:has(> input:checked) .wmcc-place__name {
	font-weight: 600;
}

.wmcc-place:has(> input:focus-visible) {
	outline: 2px solid var(--wmcc-accent);
	outline-offset: 2px;
}

/* A hint of a place: its "i" in the card's corner, above the button that covers the card. */
.wmcc-place > .wmcc-help {
	position: absolute;
	z-index: 1;
	top: 2px;
	inset-inline-end: 2px;
}

.wmcc-place__picture {
	display: block;
	width: 76px;
	height: 57px;
}

.wmcc-place__page {
	fill: #fff;
}

.wmcc-place__bar,
.wmcc-place__dot {
	stroke: none;
}

.wmcc-place__bar {
	fill: #50575e;
}

.wmcc-place__dot {
	fill: #fff;
}

.wmcc-place__line {
	fill: #dcdcde;
}

.wmcc-place__veil {
	fill: rgba(29, 35, 39, 0.38);
}

/* The thing itself, in the screen's own color. */
.wmcc-place__spot {
	fill: var(--wmcc-accent);
}

.wmcc-place__key {
	fill: #fff;
}

.wmcc-place__frame {
	fill: none;
	stroke: #50575e;
	stroke-width: 2;
}

/* ---- Storage: how much room the records take ----------------------------- */

.wmcc-storage__table {
	width: 100%;
	max-width: 760px;
	border-collapse: collapse;
}

.wmcc-storage__table th,
.wmcc-storage__table td {
	padding: 8px 12px 8px 0;
	border-bottom: 1px solid var(--wmcc-line);
	text-align: start;
	vertical-align: top;
}

.wmcc-storage__table thead th {
	font-size: 12px;
	font-weight: 600;
	color: var(--wmcc-muted);
}

.wmcc-storage__table tbody th {
	font-weight: 600;
}

.wmcc-storage__table td {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wmcc-storage__table tbody tr:last-child > * {
	border-bottom: 0;
}

.wmcc-storage__note {
	display: block;
	font-weight: 400;
}