/*
 * GDV Supplier Registry: "My brand pages" and its edit screen. The terms gate
 * in front of the list is styled with the brand page's, in public.css.
 *
 * Buttons and the call-to-action panel are gdv-public-ui's, colours its tokens.
 * Fields keep the theme's look at the default text size. Class rules repeat a
 * class where they must outrank neve-child, which styles ul, li, headings and
 * every checkbox inside the page content.
 */

.gdv-sr-mine [hidden],
.gdv-sr-editor [hidden] {
	display: none !important;
}

/* ===== The list ===== */

.gdv-sr-mine.gdv-sr-mine ul.gdv-sr-mine__list {
	margin: 0;
	padding: 0;
}

/* list-style on the li itself: neve-child's ul rule sets a disc at (0,6,1). */
.gdv-sr-mine .gdv-sr-mine__list li.gdv-sr-mine__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	border-top: 1px solid var(--gdv-ui-border, #d6d6d6);
}

.gdv-sr-mine .gdv-sr-mine__name {
	flex: 1 1 12rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* ===== The edit screen ===== */

.gdv-sr-brands.gdv-sr-editor {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
}

/* The way back at the left end, the brand page at the right, on one line above the brand name. */
.gdv-sr-editor .gdv-sr-editor__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0 24px;
	margin: 0 0 8px;
}

/*
 * No underline at rest, in the shape of the article's contents panel: two
 * links with an icon each already read as links. The underline comes back on
 * hover and focus. 44px tall, so each is a full press area on a phone.
 */
.gdv-sr-editor .gdv-sr-editor__nav a.gdv-sr-editor__nav-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	text-decoration: none;
}

.gdv-sr-editor .gdv-sr-editor__nav a.gdv-sr-editor__nav-link:hover,
.gdv-sr-editor .gdv-sr-editor__nav a.gdv-sr-editor__nav-link:focus {
	text-decoration: underline;
}

.gdv-sr-editor .gdv-sr-editor__nav-icon {
	flex: 0 0 auto;
	width: 1.125em;
	height: 1.125em;
}

/* Element-qualified and two classes deep, to outrank neve-child's heading rules, which centre them. */
.gdv-sr-brands.gdv-sr-editor h2.gdv-sr-editor__title {
	margin: 0 0 20px;
	text-align: left;
	overflow-wrap: anywhere;
}

.gdv-sr-editor .gdv-sr-editor__notices {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 20px;
}

/*
 * A notice is its sentence and a bar on its left, never a colour alone. The
 * success green as a 4px bar is 3.30:1 on the dark page, enough for a shape.
 */
.gdv-sr-editor .gdv-sr-editor__notice,
.gdv-sr-mine .gdv-sr-editor__notice {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--gdv-ui-border, #d6d6d6);
	border-left: 4px solid var(--gdv-ui-success, #427a7b);
	border-radius: var(--gdv-ui-radius, 6px);
	color: var(--gdv-ui-text, #444444);
	background: var(--gdv-ui-surface, #ffffff);
}

.gdv-sr-editor .gdv-sr-editor__notice--warning {
	border-left-color: var(--gdv-ui-border-strong, #797979);
}

.gdv-sr-editor .gdv-sr-editor__notice--error,
.gdv-sr-mine .gdv-sr-editor__notice--error {
	border-left-color: var(--gdv-ui-danger, #b32d2e);
}

/* "My brand pages" says what happened to a download above its list. */
.gdv-sr-mine .gdv-sr-editor__notice {
	margin-bottom: 16px;
}

.gdv-sr-editor .gdv-sr-editor__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.gdv-sr-editor .gdv-sr-editor__toggles {
	justify-content: flex-start;
	margin: 0;
}

/*
 * The validation offer while no agreement runs: a light tint of the brand
 * yellow with no outline, so it is not read as one more block of the form,
 * and no coloured edge, so it is not read as a notice. #444444 on #fbf5e8 is
 * 8.96:1.
 */
.gdv-sr-editor .gdv-sr-editor__offer {
	padding: 20px 22px;
	border: 1px solid transparent;
	border-radius: var(--gdv-ui-radius-lg, 12px);
	color: var(--gdv-ui-text, #444444);
	background: #fbf5e8;
}

.gdv-sr-editor .gdv-sr-editor__offer p {
	margin: 0 0 12px;
}

.gdv-sr-editor .gdv-sr-editor__offer .gdv-ui-btn-row {
	justify-content: flex-start;
	margin: 0;
}

/* The form's first submit button, which keeps Enter in a field on "Save": rendered, out of sight, out of the flex flow. */
.gdv-sr-editor .gdv-sr-editor__enter-save {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Under the theme's sticky header when the contents panel scrolls to it. */
.gdv-sr-editor .gdv-sr-editor__block,
.gdv-sr-editor .gdv-sr-editor__answer {
	scroll-margin-top: 4rem;
}

.gdv-sr-editor .gdv-sr-editor__block {
	padding: 20px 22px;
	border: 1px solid var(--gdv-ui-border, #d6d6d6);
	border-radius: var(--gdv-ui-radius-lg, 12px);
	background: var(--gdv-ui-surface, #ffffff);
}

/* A block folds, in the shape of "Edit brand"'s block card: its summary says what it holds while closed. */
.gdv-sr-editor .gdv-sr-editor__summary {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 12px;
	align-items: center;
	min-height: 44px;
	list-style: none;
	cursor: pointer;
}

.gdv-sr-editor .gdv-sr-editor__summary::-webkit-details-marker {
	display: none;
}

.gdv-sr-editor .gdv-sr-editor__summary:focus-visible {
	outline: 2px solid var(--gdv-ui-focus, #8a6100);
	outline-offset: 4px;
	border-radius: 4px;
}

/* The chevron in the faint text colour: 5.74:1 on white, 5.72:1 on the dark page. */
.gdv-sr-editor .gdv-sr-editor__chevron {
	width: 20px;
	height: 20px;
	color: var(--gdv-ui-text-faint, #666666);
	transition: transform 0.15s ease;
}

.gdv-sr-editor .gdv-sr-editor__block[open] .gdv-sr-editor__chevron {
	transform: rotate(90deg);
}

.gdv-sr-editor .gdv-sr-editor__block h3.gdv-sr-editor__block-name {
	margin: 0;
	text-align: left;
	overflow-wrap: anywhere;
}

.gdv-sr-editor .gdv-sr-editor__count {
	grid-column: 2;
	color: var(--gdv-ui-text-faint, #666666);
	font-size: 0.9375rem;
}

.gdv-sr-editor .gdv-sr-editor__block[open] .gdv-sr-editor__summary {
	padding-bottom: 16px;
	border-bottom: 1px solid var(--gdv-ui-border, #d6d6d6);
}

/* One question: its answer, its link and date, its evidence, the tick. */
.gdv-sr-editor .gdv-sr-editor__answer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 0;
	border-top: 1px solid var(--gdv-ui-border, #d6d6d6);
}

.gdv-sr-editor .gdv-sr-editor__summary + .gdv-sr-editor__answer {
	border-top: 0;
}

.gdv-sr-editor .gdv-sr-editor__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.gdv-sr-editor .gdv-sr-editor__label,
.gdv-sr-editor .gdv-sr-editor__field > label {
	font-weight: 600;
}

.gdv-sr-editor .gdv-sr-editor__field legend.gdv-sr-editor__label {
	margin: 0 0 6px;
	padding: 0;
}

/* The property's note, between the question and its field: body size and colour, so it reads as guidance and not as small print. */
.gdv-sr-editor .gdv-sr-editor__note {
	margin: 0 0 6px;
	overflow-wrap: anywhere;
}

.gdv-sr-editor .gdv-sr-editor__field input:not([type="checkbox"]):not([type="radio"]),
.gdv-sr-editor .gdv-sr-editor__field select,
.gdv-sr-editor .gdv-sr-editor__field textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.gdv-sr-editor .gdv-sr-editor__pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 12px 16px;
}

.gdv-sr-editor .gdv-sr-editor__ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.gdv-sr-editor .gdv-sr-editor__ticks label,
.gdv-sr-editor .gdv-sr-editor__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

/*
 * A list whose choices carry explanations, and the product types always: one
 * choice per line, its explanation under its label in the faint grey at body
 * size, indented past the 24px tick and its 8px gap so it sits under the words.
 * The grey is 5.74:1 on white and 5.72:1 on the dark page.
 */
.gdv-sr-editor .gdv-sr-editor__ticks.gdv-sr-editor__ticks--stacked {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 12px;
}

.gdv-sr-editor .gdv-sr-editor__option {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gdv-sr-editor .gdv-sr-editor__ticks--stacked .gdv-sr-editor__option label {
	align-items: flex-start;
}

.gdv-sr-editor .gdv-sr-editor__explanation {
	margin: 0;
	color: var(--gdv-ui-text-faint, #666666);
	overflow-wrap: anywhere;
}

.gdv-sr-editor .gdv-sr-editor__option .gdv-sr-editor__explanation {
	padding-left: 32px;
}

/* A product type's ISO reference after its label, in the explanation's grey and at the label's size. */
.gdv-sr-editor .gdv-sr-editor__iso {
	color: var(--gdv-ui-text-faint, #666666);
	white-space: nowrap;
}

/* The line under a dropdown, empty while the answer chosen has no explanation. */
.gdv-sr-editor .gdv-sr-editor__explanation:empty {
	display: none;
}

/* ----- The certifications ----- */

.gdv-sr-editor .gdv-sr-editor__certs {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 12px 0 16px;
}

.gdv-sr-editor .gdv-sr-editor__cert {
	margin: 0;
	padding: 16px;
	border: 1px solid var(--gdv-ui-border, #d6d6d6);
	border-radius: var(--gdv-ui-radius, 6px);
}

.gdv-sr-editor .gdv-sr-editor__cert-name {
	padding: 0 6px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.gdv-sr-editor .gdv-sr-editor__cert-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 12px 16px;
}

.gdv-sr-editor .gdv-sr-editor__field--wide {
	grid-column: 1 / -1;
}

.gdv-sr-editor .gdv-sr-editor__cert-remove {
	margin: 12px 0 0;
}

/* ----- The bar of buttons ----- */

/*
 * Fixed to the foot of the screen for as long as the edit screen is open, in
 * the shape of gdv-aroma-blog's reader bar. Fixed, not sticky: neve-child makes
 * a wrapper a scroll container, which disables position: sticky. The z-index is
 * the reader bar's, low for a fixed element, so anything the site draws over
 * the foot of the screen to ask a question comes out on top.
 *
 * A literal background, not var(--nv-site-bg), which the site sets to
 * transparent: the form would run straight under the buttons.
 */
.gdv-sr-editor .gdv-sr-editor__bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 15;
	padding: 0.5rem max(0.75rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
	background: #ffffff;
	border-top: 1px solid var(--grey, #d6d6d6);
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.07);
}

/* The buttons line up with the editor column above them. */
.gdv-sr-editor .gdv-sr-editor__bar-row {
	max-width: 60rem;
	margin: 0 auto;
	justify-content: flex-start;
}

/* Shown under 600px only, where the bar carries "Save" alone. */
.gdv-sr-editor .gdv-sr-editor__foot-actions {
	display: none;
}

/*
 * The bar covers the foot of the page. One row of buttons is 45px inside 8px
 * of padding either side, about 3.9rem; between 600px and 1024px the three
 * buttons of the fr_FR and nl_BE labels wrap to a second row, about 7.5rem.
 */
body:has(.gdv-sr-editor__bar) {
	padding-bottom: 5rem;
}

/*
 * The newsletter popup pins itself to the same bottom edge at z-index 9999,
 * over "Save". The bar owns the foot of this screen, so the popup starts above
 * it, as it does above the article's reader bar.
 */
body:has(.gdv-sr-editor__bar) #gdv-mj-popup {
	bottom: 4rem;
	border-radius: 12px;
}

/*
 * Neve's "scroll to top" is a fixed button in the bottom-right corner, drawn
 * over the bar: on a phone it covers the end of "Save". Switched off while the
 * bar is drawn, as neve-child does under the article's reader bar.
 */
body:has(.gdv-sr-editor__bar) #scroll-to-top,
body:has(.gdv-sr-editor__bar) .scroll-to-top {
	display: none !important;
}

@media (min-width: 601px) and (max-width: 1023px) {
	body:has(.gdv-sr-editor__bar) {
		padding-bottom: 8.5rem;
	}

	body:has(.gdv-sr-editor__bar) #gdv-mj-popup {
		bottom: 7.5rem;
	}
}

/* ===== The contents panel ===== */

/*
 * Built by brand-editor-contents.js on a window at least 1440px wide, fixed to
 * the body in the left margin, in the shape of gdv-aroma-blog's article
 * contents panel. Not scoped to .gdv-sr-editor: the panel sits outside it.
 */
.gdv-sr-toc-panel {
	position: fixed;
	top: 4rem;
	left: 1rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	width: min(300px, calc(50vw - 512px));

	/* 4rem is the top offset, and 4.5rem clears the 3.9rem bar with a little air, so the list never ends under it. */
	max-height: calc(100vh - 8.5rem);
	overflow-y: auto;
	scrollbar-width: thin;
	z-index: 20;
}

.gdv-sr-toc-panel.is-visible {
	opacity: 1;
	visibility: visible;
}

/* Element-qualified, to outrank neve-child's heading rules. */
.gdv-sr-toc-panel h2.gdv-sr-toc-title {
	margin: 0 0 0.75em 0;
	color: var(--text-color, #444444);
	font-family: Lato, sans-serif;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
}

.gdv-sr-toc-panel .gdv-sr-toc ul,
.gdv-sr-toc-panel .gdv-sr-toc li {
	margin: 0;
	padding: 0;
	list-style: none;
	list-style-type: none;
}

.gdv-sr-toc-panel .gdv-sr-toc li {
	margin-bottom: 0.35em;
}

/* A block after the first stands apart from the questions of the block above it. */
.gdv-sr-toc-panel .gdv-sr-toc li.gdv-sr-toc-block + li.gdv-sr-toc-block,
.gdv-sr-toc-panel .gdv-sr-toc li.gdv-sr-toc-question + li.gdv-sr-toc-block {
	margin-top: 0.75em;
}

/*
 * No underline at rest: a stacked list of questions wrapping to two or three
 * lines each would turn into a column of gold rules. The indent says these are
 * links; the underline comes back on hover and focus.
 */
.gdv-sr-toc-panel .gdv-sr-toc a {
	display: block;
	padding: 0.2em 0 0.2em 0.6em;
	border-left: 3px solid transparent;
	color: var(--text-color, #444444);
	font-size: 1rem;
	line-height: 1.4;
	text-decoration: none;
}

.gdv-sr-toc-panel .gdv-sr-toc li.gdv-sr-toc-block > a {
	font-weight: 600;
}

/*
 * Questions read as subordinate through the indent, not a smaller size. The
 * faint text colour rather than the article's #797979, which is 4.35:1 on white.
 */
.gdv-sr-toc-panel .gdv-sr-toc li.gdv-sr-toc-question > a {
	padding-left: 1.8em;
	color: #666666;
}

/* The underline alone: the article's coral hover is 3.2:1 on white. */
.gdv-sr-toc-panel .gdv-sr-toc a:hover,
.gdv-sr-toc-panel .gdv-sr-toc a:focus {
	text-decoration: underline;
}

/* li > a, so it outranks the question entry's own colour. */
.gdv-sr-toc-panel .gdv-sr-toc li > a.is-current {
	color: var(--green, #427a7b);
	border-left-color: var(--yellow, #e1ad4e);
	font-weight: bold;
}

/* ===== Tick boxes ===== */

/*
 * A tick box, not the pill switch neve-child draws every checkbox as, in the
 * shape of the profile request's consent: the type selector outranks the
 * theme's input[type="checkbox"]:not(.ai-checkbox-input), hover included. The
 * tick's green is 4.88:1 on white.
 */
.gdv-sr-editor .gdv-sr-editor__form input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: auto;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	min-width: 24px;
	margin: 0;
	background-color: transparent;
	border-radius: 3px;
	accent-color: var(--gdv-ui-success, #427a7b);
	transition: none;
}

.gdv-sr-editor .gdv-sr-editor__form input[type="checkbox"]::before {
	content: none;
}

.gdv-sr-editor .gdv-sr-editor__form input[type="checkbox"]:hover {
	background-color: transparent;
}

.gdv-sr-editor .gdv-sr-editor__form input[type="radio"] {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--gdv-ui-success, #427a7b);
}

/*
 * Under 600px the bar carries "Save" alone and the other two buttons stack at
 * the foot of the form: three full-width buttons in a fixed bar would cover
 * about a third of a phone screen.
 */
@media (max-width: 600px) {
	.gdv-sr-editor .gdv-sr-editor__block {
		padding: 16px;
	}

	.gdv-sr-editor .gdv-sr-editor__bar .gdv-sr-editor__bar-more {
		display: none;
	}

	.gdv-sr-editor .gdv-sr-editor__bar .gdv-ui-btn,
	.gdv-sr-editor .gdv-sr-editor__foot-actions .gdv-ui-btn {
		width: 100%;
	}

	.gdv-sr-editor .gdv-sr-editor__foot-actions {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gdv-sr-editor .gdv-sr-editor__chevron,
	.gdv-sr-toc-panel {
		transition: none;
	}
}

@media (prefers-color-scheme: dark) {
	.gdv-sr-editor .gdv-sr-editor__notice--error,
	.gdv-sr-mine .gdv-sr-editor__notice--error {
		border-left-color: #ff8a80;
	}

	/* The offer's tint on the dark page: #fcfcfc on #2c2820 is 14.30:1. */
	.gdv-sr-editor .gdv-sr-editor__offer {
		background: #2c2820;
	}

	/* An opaque panel over the form, so the dark palette is spelled out. */
	.gdv-sr-editor .gdv-sr-editor__bar {
		background: var(--darkmode-bg, #212121);
		border-top-color: var(--darkmode-border-color, #3a3a3a);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.5);
	}

	.gdv-sr-toc-panel h2.gdv-sr-toc-title,
	.gdv-sr-toc-panel .gdv-sr-toc a {
		color: var(--darkmode-text-color, #fcfcfc);
	}

	.gdv-sr-toc-panel .gdv-sr-toc li.gdv-sr-toc-question > a {
		color: #b0b0b0;
	}

	/* The light scheme's green is 3.3:1 on the dark page: the bar and the weight mark the entry. */
	.gdv-sr-toc-panel .gdv-sr-toc li > a.is-current {
		color: var(--darkmode-text-color, #fcfcfc);
	}
}