.arc-container {
  position: relative;
  width: 300px;
  height: 150px;
}

/* Position and style radio inputs */
.arc-radio {
  position: absolute;
  cursor: pointer;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 10;
}

#phase1 { left: 25px; top: 125px; }
#phase2 { left: 61.61px; top: 36.61px; }
#phase3 { left: 150px; top: 0px; }
#phase4 { left: 238.39px; top: 36.61px; }
#phase5 { left: 275px; top: 125px; }

.arc-label {
  /* Center text labels */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  width: 70%;

  /* Label typography */
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;

  /* Hide labels until enabled */
  opacity: 0;
}

/* Show label for checked radio */
#phase1:checked ~ .arc-label[for="phase1"] { opacity: 1; }
#phase2:checked ~ .arc-label[for="phase2"] { opacity: 1; }
#phase3:checked ~ .arc-label[for="phase3"] { opacity: 1; }
#phase4:checked ~ .arc-label[for="phase4"] { opacity: 1; }
#phase5:checked ~ .arc-label[for="phase5"] { opacity: 1; }

/* Show preview labels on hover */
#phase1:hover ~ .arc-label[for="phase1"],
#phase2:hover ~ .arc-label[for="phase2"],
#phase3:hover ~ .arc-label[for="phase3"],
#phase4:hover ~ .arc-label[for="phase4"],
#phase5:hover ~ .arc-label[for="phase5"] {
  opacity: 1;
  z-index: 2;
  background-color: var(--color-white);
  color: var(--color-slate-400);
  font-weight: normal;
}
/* Show real labels when checked & still hovering */
#phase1:checked:hover ~ .arc-label[for="phase1"],
#phase2:checked:hover ~ .arc-label[for="phase2"],
#phase3:checked:hover ~ .arc-label[for="phase3"],
#phase4:checked:hover ~ .arc-label[for="phase4"],
#phase5:checked:hover ~ .arc-label[for="phase5"] {
  color: inherit;
  font-weight: bold;
}

/* Progress paths - all hidden by default */
.arc-progress {
  opacity: 0;
}

/* Show the appropriate progress path based on selection */
#phase2:checked ~ svg .arc-progress[data-progress="1"] { opacity: 1; }
#phase3:checked ~ svg .arc-progress[data-progress="2"] { opacity: 1; }
#phase4:checked ~ svg .arc-progress[data-progress="3"] { opacity: 1; }
#phase5:checked ~ svg .arc-progress[data-progress="4"] { opacity: 1; }

:root {
  /* global */
  --space1: 1rem;
  --space2: 2rem;

  /* semantic */
  --margin-lg: var(--space2);
  --padding-md: var(--space1);

  /* component */
}

.gl__highlight::marker {
  /* why? ensures list-style-type arrows aren't hidden by .gl__highlight colors */
  color: black;
}

.gl__highlight {
  background-color: var(--bg-color);
  border-radius: 1rem;
  padding-inline: var(--padding-md);
  width: fit-content;
}

/* why? .gl__highlight can be applied outside of highlights, like the checklist li's */
mark.gl__highlight {
  white-space: pre;
}

.gl__highlight--length    { --bg-color: #333; color: white; }
.gl__highlight--length-poem { --bg-color: #333; color: white; }
.gl__highlight--simult    { --bg-color: #333; color: white; }
.gl__highlight--mult      { --bg-color: #333; color: white; }
.gl__highlight--prev      { --bg-color: #333; color: white; }
.gl__highlight--fee       { --bg-color: #CCC; color: black; }
.gl__highlight--pay       { --bg-color: #CCC; color: black; }
.gl__highlight--money     { --bg-color: #CCC; color: black; }
.gl__highlight--cover     { --bg-color: #CCC; color: black; }
.gl__highlight--negative  { --bg-color: transparent; color: #DC2626; }

.gl__highlight--negative {
  font-variant-caps: all-petite-caps;
  font-weight: bold;
  outline: 1px dashed red;
  padding-inline: var(--padding-md);
}

.gl__highlight--not-found {
  display: none;
}

.gl__highlight--notice {
  animation: glow 1s 5 alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 4px -4px var(--bg-color);
  }
  to {
    box-shadow: 0 0 4px 4px var(--bg-color);
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.translation_missing { background-color: red; color: white; }

/* why? style turbo frames that are loading (or have src changed)
 * https://turbo.hotwired.dev/handbook/frames#eager-loading-frames
 */
turbo-frame .loading-element { display: none; }
turbo-frame[busy] .loading-element { display: block; }
turbo-frame[busy] { opacity: 0.5; }

/* why? Rails view helpers wrap error fields in divs with this class,
 * which can change how inline fields are displayed.
 */
.field_with_errors {
  display: contents;
}