body {
  font-family: var(--font-family-default);
  background: linear-gradient(var(--scout-yellow-dark) 100px, var(--scout-yellow) 100%, var(--scout-yellow) 200%);
  display: block;
  height: auto;
  background-color: var(--scout-yellow);
  background-repeat: repeat-x;
  overscroll-behavior: none;
}

body.is-dragging-active {
  cursor: grabbing;
}

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 200,
    'opsz' 24;
  font-size: var(--font-size-base);
}


.editor-header {
  --key-colour: var(--scout-wine);
  --key-colour-light: #F7CE8D;
  --key-colour-dark: var(--scout-wine-dark);
  background: var(--key-colour-light);
  padding: var(--spacing-md) var(--spacing-2xl);
  border-bottom: var(--key-colour) solid 4px;
  box-shadow: var(--shadow);
  border-width: var(--border-width-thick);
  width: 100%;
  display: flex;
  gap: var(--spacing-md);
  justify-content: space-between;
  position: sticky;
  top: 0;
  min-height: calc(5.7em + var(--spacing-xl));
  z-index: 500;
  align-items: center;
  align-content: center;
}


#district-logo {
    display: none;
    flex-grow: 1;
  }

#editor-logo {
    width: 45vw;
    max-width: calc(4 * 6em);
    max-height: 6em;
  }

.editor-header__title {
  display: flex;
  width: 100%;
  gap: 1em;
  flex-grow: 1;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
}

.editor-header__title h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: #222;
}

.editor-header .tab-nav {
  --key-colour: #b3b8b5;
}

.selector-nav {
  --key-colour: var(--scout-navy);
  --key-colour-light: var(--scout-navy-light);
  --key-colour-dark: var(--scout-navy-dark);
  display: flex;
  margin: 0;
  border-radius: var(--border-radius);
  border: 1px solid var(--key-colour-light);
  background-color: var(--key-colour);
  box-shadow: var(--shadow);
  padding: 0 var(--spacing-sm);
  color: var(--white);
  font-weight: var(--font-weight-semibold);
  text-shadow: 0 0 grey;
  min-height: 5.7em;
  /* width: 385px; */
  position: absolute;
  right: var(--spacing-lg);
  float: right;
}

.selector-nav .material-symbols-outlined {
  font-size: 24px;
}

.selector-nav button {
  text-shadow: 0 0 0.5em #000;
  color: var(--scout-yellow);
}

.selector-nav button:hover {
  color: var(--scout-yellow-dark);
}

button[data-action=add-location] {
  color: var(--scout-green);
}

button[data-action=add-location]:hover {
  color: var(--scout-green-light);
}

button[data-action=delete-location] {
  color: var(--scout-red);
}

button[data-action=delete-location]:hover {
  color: var(--scout-red-light);
}

button[data-action=delete-location]:disabled {
  color: var(--grey-light);
  opacity: 0.5;
}

button[data-action=add-section] {
  color: var(--scout-teal);
  font-weight: var(--font-weight-extrabold);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  font-size: var(--font-size-md);
  min-width: fit-content;
  margin-top: var(--spacing-xs);
}

button[data-action=add-section]:hover {
  color: var(--scout-teal-dark);
}

button[data-action=add-section] span.material-symbols-outlined {
  font-size: var(--font-size-2xl);
}


button[data-action=remove-section] {
  color: var(--scout-red-dark);
  font-size: var(--font-size-2xl);
  cursor: delete;
}

button[data-action=remove-section]:hover {
  color: var(--scout-red);
}

button[data-action=validation-warning] {
  animation: pulse 2s infinite;
  color: var(--scout-orange);
  font-size: var(--font-size-sm);
  transition: 1s ease-in-out;
  padding: 0.5vw;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    color: var(--scout-orange);
  }

  50% {
    transform: scale(1.2);
    color: var(--scout-orange-dark);
  }
}


button[data-action=move-location-up],
button[data-action=move-location-down],
button[data-action="resolve-gmaps-url"] {
  color: var(--scout-teal);
  font-size: var(--font-size-xl);
}

button[data-action=move-location-up]:hover,
button[data-action=move-location-down]:hover,
button[data-action="resolve-gmaps-url"]:hover {
  color: var(--scout-teal-dark);
}

button[data-action=move-location-up]:active,
button[data-action=move-location-down]:active,
button[data-action="resolve-gmaps-url"]:active {
  color: var(--scout-blue);
}



.selector-nav .btn-icon {
  height: 1em;
  width: 1em;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: var(--key-colour-dark);
  color: var(--key-colour-dark);
  background: #fff;
}




.selector-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin: var(--spacing-sm);
  max-width: 500px;
  gap: var(--spacing-xs);
}

.group-selector-wrapper,
.location-selector-wrapper {
  display: flex;
  gap: var(--spacing-sm);
}

#location-selector-wrapper:not(:has(label)) {
  display: none;
}

.group-selector-wrapper label,
.location-selector-wrapper label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.editor-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

@media (max-width: 1100px) {
  .editor-main {
    grid-template-columns: 1fr;
  }
}

.editor-column {
  background: var(--white);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  overflow-y: auto;
  border: 2px solid var(--key-colour);
}

.editor-column:first-of-type {
  --key-colour: var(--scout-purple);
  --key-colour-light: var(--scout-purple-light);
  --key-colour-dark: var(--scout-purple-dark);
}

.editor-column:nth-of-type(2) {
  --key-colour: var(--scout-teal);
  --key-colour-light: var(--scout-teal-light);
}

.tab-nav {
  display: grid;
  border-bottom: 1px solid var(--key-colour-light);
  margin: calc(-1 * var(--spacing-lg));
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-sm) 0 var(--spacing-sm);
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 3em;
}

#editor-col-2 .tab-nav {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 1100px) {}

.tab-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  background: none;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--border-light);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  /* Overlap the container's border */
  transition: color var(--transition-base), border-color var(--transition-base);
  flex: 1;
  flex-grow: 1;
  flex-basis: 0;
  /* Allow items to shrink equally */
  color: var(--key-colour-light);
  transition: var(--transition-fast);
}

.tab-btn:not(.is-active):hover {
  color: var(--key-colour);
  border-bottom: 1px dotted var(--key-colour);
  transition: var(--transition-fast);
}

.tab-btn.is-active {
  color: var(--key-colour);
  border-bottom-color: var(--key-colour);
  font-weight: var(--font-weight-extrabold);
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.editor-column__group #tab-panel-three .property-item {
  flex-direction: column;
  align-content: normal;
}

.tab-btn.is-hidden {
  display: none;
}

#properties-editor {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.editor-column>h2 {
  margin-top: 0;
  border-bottom: 1px solid var(--key-colour);
  padding-bottom: var(--spacing-sm);
}

.editor-column .property-item {
  display: flex;
  /* flex-direction: column; */
  align-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
}

#properties-editor .property-item:not(.property-item--detail):has(input[type="text"]):not(:has(.colour-editor)):not(:has(.property-hint)),
#properties-editor .property-item:not(.property-item--detail):has(select):not(:has(.colour-editor)):not(:has(.property-hint)) {
  display: grid;
  grid-template-columns: auto 1vw;
  justify-items: stretch;
  justify-content: stretch;
  align-items: center;
  align-content: center;
}

#properties-editor .property-item:not(.property-item--detail):has(input[type="text"]):not(:has(.colour-editor))>label,
#properties-editor .property-item:not(.property-item--detail):has(select):not(:has(.colour-editor)):not(:has(.property-hint))>label {
  grid-column: 1 / -1;
}

#properties-editor .property-item:has(.property-hint) {
  display: grid;
  grid-template-columns: min-content auto 1vw;
}

#properties-editor .property-item:has(.property-hint)>label {
  grid-column: 1 / -1;
}


.property-item--detail {
  flex-direction: row;
  gap: var(--spacing-sm);
  border: 1px solid var(--key-colour-dark);
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-sm);
  border-left: 4px solid var(--key-colour);
  --key-colour: var(--scout-blue);
  --key-colour-dark: var(--scout-blue-dark);
  --key-colour-light: var(--scout-blue-light);
}

.property-item--detail input {
  border: 0.5px solid var(--key-colour-light) !important;
}

.property-item--detail:not(.is-draggable) {
  --key-colour: var(--scout-navy);
  --key-colour-light: var(--scout-navy-light);
  --key-colour-dark: var(--scout-navy-dark);
}

.editor-column .property-item label,
.editor-column .sub-item label {
  display: block;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--key-colour-dark);
  width: 100%;
  text-align: left;
  padding-right: 1em;
  min-width: 4em;
}

.property-item--row {
  display: flex;
  gap: var(--spacing-md);
}

.item-drag-handle {
  display: flex;
  align-items: center;
  color: var(--grey-dark);
  font-size: 24px;
  cursor: grab;
}

.property-item__content {
  flex-grow: 1;
}

.sub-item {
  /* flex-grow: 1; */
  display: grid;
  grid-template-columns: 1fr 3fr;
  justify-items: stretch;
  align-items: baseline;
}

.detail-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.detail-input-wrapper .sprite-icon {
  flex-shrink: 0;
  /* Prevent icon from shrinking */
}

.detail-input-wrapper--link {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3vw;
  flex-grow: 1;
}

.detail-input-wrapper--link:has(.validation-warning-btn) {
  grid-template-columns: 2fr 1vw 1fr;
  gap: 1vw;
}

.partner-editor {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex-grow: 1;
}

.location-editor-header {
  margin-bottom: var(--spacing-lg);
}

.location-editor-header label {
  display: block;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
}

.location-editor-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-grow: 1;
}

.btn-icon {
  font-weight: bold;
}

.position-control {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--scout-purple-dark);
}

.position-control input {
  flex-grow: 1;
}

.input-with-button {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.input-with-button input {
  flex-grow: 1;
}

.input-with-button textarea {
  flex-grow: 1;
  resize: vertical;
  overscroll-behavior: none;
}

.colour-editor {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1vw;
  gap: var(--spacing-sm);
  flex-grow: 1;
}

.colour-swatch {
  width: 30px;
  height: 30px;
  border: 1px solid var(--key-colour);
  border-radius: var(--border-radius-sm);
  flex-shrink: 0;
}

.colour-editor__item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
}

/* For span.colour-swatch */
.colour-editor__item>.colour-swatch {
  grid-column: 1;
  /* First column */
}

/* For select.colour-preset-picker */
.colour-editor__item>.colour-preset-picker {
  grid-column: 2;
  /* Second column */
}

/* For input[type="text"] */
.colour-editor__item>input[type="text"] {
  grid-column: 3;
  /* Third column */
}

/* For button.material-symbols-outlined.validation-warning-btn */
.colour-editor__item>.validation-warning-btn {
  grid-column: 4;
  /* Fourth column */
}

.colour-editor__item select {
  flex-grow: 1;
}

.subsection-title {
  font-size: var(--font-size-md);
  color: var(--key-colour-dark);
}

.subsection-title:not(:first-child) {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-xl);
  border-top: 1px dotted var(--key-colour-light);
}

.sections-editor-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  --key-colour: var(--scout-blue);
  --key-colour-dark: var(--scout-blue-dark);
  --key-colour-light: var(--scout-blue-light);
  max-height: 2em;
  justify-content: space-between;
}

.help-block {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  border: 2px solid var(--key-colour-dark);
  max-height: calc(2 * var(--font-size-lg));
  box-shadow: var(--shadow);
  /* width: 10em; */
  transition: 250ms ease;
  background: var(--white);
  z-index: 300;
}

.help-block.is-expanded {
  max-height: 100%;
  /* Adjust as needed for content */
  transition: 250ms ease;
  box-shadow: var(--shadow-lg);
}

.help-block h3 {
  background-color: var(--key-colour);
  color: var(--white);
  padding: 0.5em;
  border-bottom: 4px double var(--key-colour-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.help-block__title-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.help-block h3 .material-symbols-outlined {
  font-size: 1.25em;
}

.sections-editor-header h3 {
  margin: 0;
  font-size: 1em;
}

.sections-editor-header ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin: 0.5em 2em;
  line-height: var(--line-height-relaxed);
  font-size: var(--font-size-sm);
  padding: 0 0.5em 0.5em;
}

.sections-editor-header ul li {
  padding: 0.5em 0.2em 0;
}

li:has(> span.material-symbols-outlined:first-child) {
  list-style-type: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-left: 0;
  margin-left: -1.25em;
}

li>span.material-symbols-outlined:first-child {
  flex-shrink: 0;
  font-size: 1.2em;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.sections-editor-header ul ul {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  margin: 0 2em;
}


.sections-editor-header ul .material-symbols-outlined {
  font-size: var(--font-size-lg);
  text-shadow: 0 0 1px var(--grey-light);
}

.sections-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.section-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) var(--spacing-sm);
  border: 1px solid var(--key-colour);
  border-left-width: 4px;
  border-radius: var(--border-radius-sm);
  background-color: var(--white);
}

.section-item--squirrels {
  border-left-color: var(--scout-red);
}

.section-item--squirrels .section-item__drag-handle {
  color: var(--scout-red);
}

.section-item--beavers {
  border-left-color: var(--scout-blue);
}

.section-item--beavers .section-item__drag-handle {
  color: var(--scout-blue);
}

.section-item--cubs {
  border-left-color: var(--scout-green);
}

.section-item--cubs .section-item__drag-handle {
  color: var(--scout-green);
}

.section-item--scouts {
  border-left-color: var(--scout-forest);
}

.section-item--scouts .section-item__drag-handle {
  color: var(--scout-forest);
}

.section-item--explorers {
  border-left-color: var(--scout-navy);
}

.section-item--explorers .section-item__drag-handle {
  color: var(--scout-navy);
}

.section-item.is-dragging {
  opacity: 0.5;
}

.section-item__drag-handle {
  cursor: grab;
  color: var(--grey-light);
  font-size: 24px;
  padding-right: var(--spacing-xs);
}

.section-item__fields {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-md);
  align-items: end;
  justify-items: stretch;
}

.partner-tags:not(:has(.partner-tag)) {
  display: none;
}

.partner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.partner-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  background-color: var(--grey-lighter);
  border: 1px solid var(--grey-light);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--grey-dark);
  font-weight: var(--font-weight-semibold);
  cursor: default;
}

.remove-partner-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
  color: var(--scout-red-dark);
  padding: 0 0 0 var(--spacing-xs);
  line-height: 1;
}

.remove-partner-btn:hover {
  color: var(--scout-red);
}

.property-hint {
  font-size: calc(var(--font-size-sm));
  color: var(--grey);
  background-color: var(--grey-lighter);
  padding: var(--spacing-xs);
  border: 0.5px solid var(--grey);
  border-right: none;
  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
  /* border-top-right-radius: var(--border-radius-sm); */
  font-family: monospace;
  min-height: 2.5em;
  align-content: space-around;
  font-size: var(--font-size-xs);
  padding-left: var(--spacing-sm);
}

.editor-header select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--key-colour);
  border-radius: var(--border-radius-sm);
  max-width: 20em;
  font-size: var(--font-size-sm);
  flex-grow: 1;
}

.editor-column input[type="text"],
.editor-column textarea,
.editor-column input[type="number"],
.editor-column select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--key-colour);
  border-radius: var(--border-radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  flex-grow: 1;
  min-height: 2.5em;
}

.editor-column input[data-key="slug"] {
  font-size: var(--font-size-xs);
}

/* TECHNICAL FIELDS – RECOMMEND AGAINST EDITING THESE */
.editor-column input[data-key="colours"],
.editor-column input[data-key="slug"] {
  font-family: monospace;
  background-color: var(--scout-purple-light);
  color: var(--scout-purple-dark);
  align-items: center;
  font-size: var(--font-size-sm);
}

/* TECHNICAL & DATA FIELDS –– MONOSPACED */
.editor-column__location[data-key="email"],
.editor-column input[data-key="website"],
.editor-column input[data-key="email"],
.editor-column input[data-key="facebook"],
.editor-column input[data-key="instagram"],
.editor-column input[data-key="longitude"],
.editor-column input[data-key="latitude"],
.editor-column input[data-key="url"],
.editor-column input[data-key="id"] {
  font-family: monospace;
  color: var(--scout-purple-dark);
  padding: 0.7em;
  /* font-size: 0.9em; */
}


/* MANDATORY FIELDS –– YELLOW BACKGROUNDS */
.editor-column__group input[data-key="email"],
.editor-column__group input[data-key="headline"],
.editor-column__group input[data-key="name"],
.editor-column__group select[data-key="type"],
.editor-column__group select[data-key="colours"],
.editor-column__group input[data-key="label"],
.editor-column__location.is-tab-properties input[data-key="label"],
.editor-column__location select[data-key="area"],
.editor-column__location input[data-key="postcode"],
.editor-column input[data-key="longitude"],
.editor-column input[data-key="latitude"],
.editor-column__location select[data-nested-key="sections"],
.editor-column__location select[data-key="borough"] {
  background-color: var(--scout-yellow-light);
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23088486"><path d="m480-240 160-160-57-57-103 103-103-103-57 57 160 160ZM377-503l103-103 103 103 57-57-160-160-160 160 57 57ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.5em center;
  background-size: 1.5em;
  padding-right: 2.5em;
  border: 1px solid var(--key-colour);
  font-family: var(--font-family-default);
}

select:focus {
  outline: none;
}

.editor-column select {
  padding: var(--spacing-sm) var(--spacing-md);
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
  min-height: 2.5em;
}

.property-item input[readonly] {
  background-color: var(--grey-lighter);
  color: var(--grey);
  cursor: not-allowed;
}

.property-hint+input[type="text"] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 0.3em;
}

.preview-header {
  margin-top: 0;
  border-bottom: 1px solid var(--key-colour);
  padding-bottom: var(--spacing-sm);
  font-size: var(--font-size-xl);
}

.preview-carousel-wrapper {
  position: relative;
  margin-top: var(--spacing-md);
  height: 520px;
  /* Give the carousel a fixed height */
}

#card-previews {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: var(--spacing-md);
  height: 100%;
  align-items: stretch;
  scrollbar-width: thin;
  scrollbar-color: var(--grey-light) transparent;
}

.preview-carousel__left,
.preview-carousel__right {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.preview-carousel__left {
  left: 0;
  background: linear-gradient(90deg, var(--white), transparent);
}

.preview-carousel__right {
  right: 0;
  background: linear-gradient(270deg, var(--white), transparent);
}

.preview-carousel__left button,
.preview-carousel__right button {
  opacity: 0.9;
  border: 2px solid var(--scout-purple);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: var(--white);
  font-size: 24px;
  color: var(--scout-purple);
  box-shadow: var(--shadow-md);
  transition: opacity var(--transition-base), transform var(--transition-fast);
}

.preview-carousel__left button:disabled,
.preview-carousel__right button:disabled {
  border-color: var(--grey-light);
  color: var(--grey-light);
  box-shadow: none;
}

.code-output {
  height: 400px;
  font-family: monospace !important;
  font-size: 12px;
  resize: vertical;
}

.code-output[readonly] {
  background-color: var(--grey-lighter);
  color: var(--key-colour-dark);
  cursor: text;
  font-size: var(--font-size-xs);
}

.editor-footer {
  background: var(--white);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.editor-footer>h2 {
  margin-top: 0;
}

#json-output {
  width: 100%;
  height: 400px;
  font-family: monospace;
  font-size: 12px;
  border: 1px solid var(--key-colour);
  border-radius: var(--border-radius-sm);
  resize: vertical;
}

#preview-tab-panels .tab-panel {
  height: 100%;
  overflow-y: auto;
}

#tab-panel-properties {
  padding: 1vw 0 1vw 1vw;
}

#tab-panel-details {
  padding: 1vw;
}

#tab-panel-three {
  padding: 1vw;
}

#tab-panel-carousel {
  overflow: hidden;
}

.group-details-background {
  background: linear-gradient(300deg, var(--gradient-colour-1), var(--gradient-colour-2), var(--gradient-colour-3), var(--gradient-colour-4));
  background-size: 240% 240%;
  animation: gradient-animation 60s ease infinite;
  height: 100%;
  padding: var(--spacing-lg);
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.group-details-widget {
  background: var(--white);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}


#tab-panel-group-details {
  width: 100%;
  height: 100%;
}

#full-data-container {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  background-color: var(--white);
  border: 1px solid var(--key-colour);
  border-radius: var(--border-radius);
}

#full-data-container.is-hidden {
  display: none;
}

#full-data-container .property-item {
  margin-bottom: 0;
}

#prop-full-data-json {
  width: 100%;
}

#full-data-container label {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.label-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.label-wrapper>label {
  margin-bottom: 0;
}

button[data-action="copy-json"] {
  background: none;
  border: none;
  font-size: 1.8em;
  color: var(--scout-teal);
  cursor: pointer;
  padding: 0 var(--spacing-xs);
  line-height: 1;
  transition: color var(--transition-base), transform var(--transition-fast);
  font-weight: normal;
  font-size: 16px;
}

button[data-action="copy-json"]:hover:not(:disabled) {
  color: var(--scout-blue);
}

button[data-action="copy-json"]:disabled {
  color: var(--scout-green);
  cursor: default;
  transform: none;
}

button[data-action="copy-json"].is-copied-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--scout-blue);
}

.editor-header .sprite-icon {
  --icon-size: 90px
}

strike {
  text-decoration-color: var(--scout-red);
  /* Changes only the line color */
  text-decoration-style: double;
}

.editor-main.hidden {
  visibility: hidden;
}

@media (max-width: 1200px) {
  .selector-nav .material-symbols-outlined {
    font-size: 22px
  }

  .editor-header__title {
    transform-origin: left center;
    /* transform: scale(0.9); */
    transition-duration: 0.6s;
    transition: 0.6s ease;
  }
}

@media (max-width: 860px) {

  .editor-header__title {
    transform-origin: left center;
    transform: scale(0.9);
    transition-duration: 0.6s;
    transition: 0.6s ease;
  }

  .selector-nav .material-symbols-outlined {
    font-size: 20px
  }
}

@media (max-width: 480px) {

  /*.editor-header {
    flex-direction: column;
    align-items: stretch;
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: unset;
    gap: var(--spacing-sm);
  }

  .selector-nav {
    position: static;
    float: none;
    width: 100%;
    min-height: unset;
    border-radius: var(--border-radius);
    transform: none;
  }
  .editor-header__title {
    justify-content: center;
    transform: none;
    width: 100%;
  }*/

  #editor-logo {
    display:none;
  }
  #district-logo {
    aspect-ratio: 1;
    display: block
  }

}