/* Base typography and shared utilities */
:root {
  --pinke-base-font-size: 17px;
  --pinke-base-font-size-desktop: 19px;
  --pinke-base-line-height: 1.7;
}

html {
  font-size: var(--pinke-base-font-size);
  line-height: var(--pinke-base-line-height);
}

body {
  line-height: inherit;
}

@media (min-width: 1024px) {
  html {
    font-size: var(--pinke-base-font-size-desktop);
  }
}

p {
  margin: 0 0 0.9rem;
  line-height: inherit;
}

.scale-icon {
  cursor: pointer;
}

.scale-icon svg {
  transition:
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke 300ms ease,
    color 300ms ease;
}

.scale-icon:hover svg {
  transform: scale(1.2);
}

.scale-icon.cloning {
  pointer-events: none;
}

.scale-icon.cloning svg {
  stroke: royalblue !important;
  color: royalblue !important;
  transform: scale(0) !important;
  opacity: 0.8 !important;
  /* Slightly faded for better visual flow into scale(0) */
  transition:
    transform 350ms ease-in 300ms,
    stroke 150ms ease 0s,
    color 150ms ease 0s;
}

.close {
  font-size: large;
}

.close:hover {
  --btn-bg: unset;
}

#report-columns-list .report-columns-drop-gap {
  margin-top: 30px;
}

.group\/input .menu {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  min-width: 180px;
  background-color: var(--color-base-200, #f5f5f5) !important;
  opacity: 1 !important;
}

.input-nl {
  background-color: color-mix(in srgb, currentColor 7%, transparent);
  border: none;
  padding: 2px 8px;
  height: auto;
  min-height: 0;
  color: var(--bc);
  border-radius: 4px;
  transition: all 0.2s ease;
  line-height: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  width: 120px;
  min-width: 42px;
  field-sizing: content;
  width: fit-content;
}

.input-nl:focus {
  outline: none;
  background-color: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: 0 0 0 1px var(--p, #6366f1);
}

.input-nl::placeholder {
  color: var(--bc);
  opacity: 0.3;
  font-weight: 400;
}

.select-nl {
  background-color: transparent;
  border: none;
  border-bottom: 1px dashed color-mix(in srgb, currentColor 20%, transparent);
  padding: 0 6px;
  height: auto;
  min-height: 0;
  color: var(--bc);
  border-radius: 0;
  transition: all 0.2s ease;
  line-height: inherit;
  font-weight: 500;
  font-size: inherit;
  field-sizing: content;
  width: fit-content;
  appearance: none;
  cursor: pointer;
  background-image: none;
}

.select-nl:hover {
  border-bottom-color: var(--p, #6366f1);
}

.select-nl:focus {
  outline: none;
  border-bottom-color: var(--p, #6366f1);
  border-bottom-style: solid;
}