/* untold config panel (assets/js/untold-config.js). A review tool, not
   part of the site design: it has its own fixed colors so it stays
   readable whatever theme is being tried. It sits tucked away bottom
   left, so it stays out of the way in reviews. Remove the link and the script
   before launch, or keep them for staging only. */

.untold-config {
  --theme-untold-ink: #160f0d;
  --theme-untold-paper: #fdf8f0;
  --theme-untold-line: #e4ddd2;
  --theme-untold-muted: #6b625c;
  --theme-untold-green: #5ff07a;
  --theme-untold-fail: #b3261e;

  position: fixed;
  bottom: 0;
  left: clamp(12px, 2vw, 24px);
  z-index: 100;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  font:
    400 13px/1.4 ui-sans-serif,
    system-ui,
    sans-serif;
  color: var(--theme-untold-ink);
}

.untold-config button,
.untold-config input {
  font: inherit;
  color: inherit;
}

.untold-config :focus-visible {
  outline: 2px solid var(--theme-untold-green);
  outline-offset: 2px;
}

/* At rest only the word, small and faint, in the bottom left corner. On
   hover or keyboard focus (or while open) it becomes the black tab with
   the green word. The ::before widens the hover area. */
.untold-config__toggle {
  position: relative;
  display: block;
  padding: 4px 10px 5px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  opacity: 0.45;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease,
    padding 0.2s ease;
}

.untold-config__toggle::before {
  content: '';
  position: absolute;
  inset: -16px -12px 0;
}

.untold-config__toggle:hover,
.untold-config__toggle:focus-visible,
.untold-config__toggle[aria-expanded='true'] {
  padding-bottom: 8px;
  background: var(--theme-untold-ink);
  opacity: 1;
}

.untold-config__logo {
  font-family: ui-serif, Georgia, serif;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--theme-untold-muted);
  transition: color 0.2s ease;
}

.untold-config__toggle:hover .untold-config__logo,
.untold-config__toggle:focus-visible .untold-config__logo,
.untold-config__toggle[aria-expanded='true'] .untold-config__logo {
  color: var(--theme-untold-green);
}

.untold-config__panel {
  width: min(22rem, calc(100vw - 24px));
  max-height: calc(100svh - 48px);
  margin-bottom: 8px;
  padding: 14px;
  overflow-y: auto;
  border-radius: 14px;
  background: var(--theme-untold-paper);
  box-shadow:
    0 0 0 1px var(--theme-untold-line),
    0 -8px 48px -16px rgb(0 0 0 / 35%);
}

.untold-config__panel[hidden] {
  display: none;
}

.untold-config__head {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  gap: 6px;
  align-items: center;
}

.untold-config__nav {
  height: 2rem;
  border: 1px solid var(--theme-untold-line);
  border-radius: 8px;
  background: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.untold-config__nav:hover {
  border-color: var(--theme-untold-ink);
}

.untold-config__name {
  min-width: 0;
  height: 2rem;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-weight: 700;
  text-align: center;
}

.untold-config__name:hover,
.untold-config__name:focus {
  border-color: var(--theme-untold-line);
  background: #fff;
}

.untold-config__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 12px;
}

/* Each dot previews its theme: primary, accent and background. */
.untold-config__dot {
  position: relative;
  width: 36px;
  height: 18px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(
    to right,
    var(--theme-untold-a) 0 33%,
    var(--theme-untold-b) 33% 66%,
    var(--theme-untold-c) 66%
  );
  box-shadow: 0 0 0 1px var(--theme-untold-line);
  cursor: pointer;
}

.untold-config__dot[aria-selected='true'] {
  box-shadow: 0 0 0 2px var(--theme-untold-ink);
}

/* The theme saved as active on the server. */
.untold-config__dot[data-live]::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--theme-untold-paper);
  border-radius: 50%;
  background: var(--theme-untold-green);
}

.untold-config__roles {
  list-style: none;
  border-top: 1px solid var(--theme-untold-line);
}

.untold-config__role {
  display: grid;
  grid-template-columns: 28px 1fr 5.25rem 4.25rem;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--theme-untold-line);
  border-radius: 6px;
}

.untold-config__role[data-active] {
  background: #fff;
}

.untold-config__swatch {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--theme-untold-swatch);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
  cursor: pointer;
}

.untold-config__role[data-active] .untold-config__swatch {
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 15%),
    0 0 0 2px #fff,
    0 0 0 4px var(--theme-untold-ink);
}

.untold-config__label {
  display: grid;
  min-width: 0;
}

.untold-config__label span {
  overflow: hidden;
  font-size: 11px;
  color: var(--theme-untold-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.untold-config__hex {
  width: 100%;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--theme-untold-line);
  border-radius: 6px;
  background: #fff;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

.untold-config__badge {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.untold-config__badge[data-level='aaa'],
.untold-config__badge[data-level='aa'] {
  background: #e3f8e7;
  color: #145c25;
}

.untold-config__badge[data-level='fail'] {
  background: #fbe4e2;
  color: var(--theme-untold-fail);
}

.untold-config__picker {
  margin-top: 12px;
}

.untold-config__picker-title {
  margin-bottom: 6px;
  font-weight: 700;
}

.untold-config__field {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 288 / 160;
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
}

.untold-config__hue {
  width: 100%;
  height: 14px;
  margin: 10px 0 4px;
  border-radius: 7px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  appearance: none;
  cursor: pointer;
}

.untold-config__hue::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--theme-untold-hue);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 30%);
  appearance: none;
}

.untold-config__hue::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--theme-untold-hue);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 30%);
}

.untold-config__picker-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.untold-config__info {
  font-size: 11px;
  color: var(--theme-untold-muted);
}

.untold-config__fix,
.untold-config__revert,
.untold-config__save {
  flex: none;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--theme-untold-ink);
  border-radius: 999px;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

/* Doubled class: beats the general `.untold-config button` reset, which
   would otherwise give the dark text on the dark button. */
.untold-config .untold-config__save {
  background: var(--theme-untold-ink);
  color: var(--theme-untold-green);
}

/* Nothing to save: an outline instead of a faded black pill. */
.untold-config .untold-config__save:disabled {
  border-color: var(--theme-untold-line);
  background: transparent;
  color: var(--theme-untold-muted);
  opacity: 1;
}

.untold-config button:disabled {
  opacity: 0.35;
  cursor: default;
}

.untold-config__foot {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--theme-untold-line);
}

.untold-config__status {
  flex: 1;
  font-size: 11px;
  color: var(--theme-untold-muted);
}

@media (prefers-reduced-motion: reduce) {
  .untold-config__toggle {
    transition: none;
  }
}