/* The lyric loom (Two Hit Wonder), built by js/loom-demo.js.
   Stage colours on a flat indigo field; the song itself is on white paper.
   Everything is prefixed .loom and leans on site.css only for the colour
   tokens on :root and the inherited typeface, so it stands on its own. */

.loom {
  --loom-panel: #2a1d4d; /* indigo, one step up: buttons and the summary */
  --loom-edge: #4a3a7a; /* outlines on the field */
  --loom-soft: #cfc8e6; /* quiet text on the field, 11:1 on indigo */
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  min-width: 0;
  color: var(--white);
  background: var(--indigo);
}

.loom p,
.loom h4,
.loom ol,
.loom ul {
  margin: 0;
  padding: 0;
}

.loom ol,
.loom ul {
  list-style: none;
}

.loom [hidden] {
  display: none !important;
}

.loom button {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.loom :focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

/* the no-script sentence the page puts in the root */
.loom > p:only-child {
  max-width: var(--measure);
}

/* ---------- one round and the part of the song it feeds ---------- */

.loom__stage {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.loom__ask {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-width: 0;
}

.loom__kicker {
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--stage-gold);
}

.loom__question {
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem);
  line-height: 1.04;
  font-weight: 700;
  font-stretch: 86%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.loom__hint {
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--loom-soft);
}

.loom__pay,
.loom__note {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--loom-soft);
}

.loom__entries {
  display: grid;
  gap: 0.45rem;
}

.loom__vote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.55rem 0.8rem;
  font-size: 1rem;
  line-height: 1.3;
  text-align: left;
  color: var(--white);
  background: var(--loom-panel);
  border: 2px solid var(--loom-edge);
  border-radius: 0.6rem;
}

.loom__vote:hover {
  border-color: var(--white);
}

.loom__vote[aria-pressed="true"] {
  color: var(--indigo);
  background: var(--stage-gold);
  border-color: var(--stage-gold);
}

.loom__vote-words {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.loom__vote[aria-pressed="true"] .loom__vote-text {
  font-weight: 700;
}

.loom__vote-spot {
  font-size: 0.875rem;
  color: var(--loom-soft);
}

.loom__vote[aria-pressed="true"] .loom__vote-spot {
  color: var(--indigo);
}

.loom__vote-side {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
}

.loom__mark {
  font-size: 0.8125rem;
  font-weight: 700;
}

/* a player's name tag: the name is always written, the colour only helps */
.loom__by {
  flex: none;
  padding: 0.05em 0.5em;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--indigo);
  background: var(--white);
  border-radius: 999px;
}

.loom__by[data-player="0"] {
  background: #ffd3e6;
}

.loom__by[data-player="1"] {
  background: #c5f3fb;
}

.loom__by[data-player="2"] {
  background: #e2dcf5;
}

.loom__vote[aria-pressed="true"] .loom__by {
  /* keeps the tag's edge on the gold fill */
  box-shadow: 0 0 0 2px var(--indigo);
}

/* ---------- the song, on paper ---------- */

.loom__paper {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  min-width: 0;
  padding: clamp(1.1rem, 3vw, 2rem);
  color: var(--ink);
  background: var(--white);
}

.loom__kind,
.loom__part-name {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.loom__sheet .loom__kind:not(:first-child) {
  margin-top: 1rem;
}

.loom__parts {
  display: grid;
  gap: 0.9rem;
}

.loom__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.18rem;
  line-height: 1.35;
}

.loom__line-text {
  min-width: 0;
}

.loom__excerpt .loom__line {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}

.loom__line.is-won {
  font-weight: 700;
}

/* the winner is run over with a marker */
.loom__line.is-won .loom__line-text > span {
  padding: 0.05em 0.2em;
  margin-inline: -0.2em;
  background: var(--stage-gold);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.loom__line-side {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 0.4rem;
}

.loom__from {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.loom__excerpt .loom__line.is-guest {
  font-size: 1rem;
}

.loom__title {
  font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem);
  line-height: 1.02;
  font-weight: 700;
  font-stretch: 86%;
  letter-spacing: -0.02em;
}

.loom__style {
  font-size: 1rem;
  line-height: 1.4;
}

.loom__credits {
  display: grid;
  gap: 0.35rem;
}

.loom__credit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  line-height: 1.35;
}

/* ---------- what the last vote changed ---------- */

.loom__changes {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.loom__changes-title {
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 700;
}

.loom__moves {
  display: grid;
  gap: 0.5rem;
}

.loom__move {
  display: grid;
  gap: 0.2rem;
  align-content: start;
  min-width: 0;
  padding: 0.8rem 0.9rem;
  font-size: 1rem;
  line-height: 1.35;
  background: var(--loom-panel);
}

.loom__move-who,
.loom__move-fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
}

.loom__move-role {
  font-weight: 700;
}

.loom__move-text {
  color: var(--loom-soft);
}

.loom__delta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--stage-gold);
}

/* read out by screen readers, never drawn */
.loom__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- all seven rounds ---------- */

.loom__more {
  display: flex;
}

.loom__toggle,
.loom__button {
  min-height: 2.75rem;
  padding: 0.5rem 1.15rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  background: transparent;
  border: 2px solid var(--white);
  border-radius: 999px;
}

.loom__toggle:hover,
.loom__button:hover {
  color: var(--indigo);
  background: var(--white);
}

.loom__toggle[aria-expanded="false"],
.loom__button--gold {
  color: var(--indigo);
  background: var(--stage-gold);
  border-color: var(--stage-gold);
}

.loom__toggle[aria-expanded="false"]:hover,
.loom__button--gold:hover {
  background: var(--white);
  border-color: var(--white);
}

.loom__all {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  min-width: 0;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 2px solid var(--loom-edge);
}

.loom__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.loom__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.loom__rounds {
  display: grid;
  gap: 1.25rem;
  align-content: start;
  min-width: 0;
}

.loom__round {
  display: grid;
  gap: 0.45rem;
}

.loom__round-head {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--loom-soft);
}

.loom__round-head strong {
  font-size: 1.0625rem;
  color: var(--white);
}

.loom__small {
  max-width: 44rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--loom-soft);
}

/* ---------- wider than a phone ---------- */

@media (min-width: 48rem) {
  .loom__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }

  .loom__moves {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .loom__all {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
  }

  .loom__bar {
    grid-column: 1 / -1;
  }

  /* the sheet stays in view while the votes scroll past */
  .loom__sheet {
    position: sticky;
    top: 1rem;
  }
}

/* ---------- movement, only for those who have not asked for less ---------- */

@media (prefers-reduced-motion: no-preference) {
  .loom__vote,
  .loom__toggle,
  .loom__button {
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease;
  }

  .loom__line.is-moved {
    animation: loom-land 0.7s ease-out;
  }
}

@keyframes loom-land {
  from {
    background-color: #ffe9a8;
    transform: translateY(-0.3rem);
  }
  to {
    background-color: transparent;
    transform: none;
  }
}

.loom__outcome {
  flex-basis: 100%;
  margin: 0;
  min-height: 1.5em;
  font-weight: 600;
  color: var(--stage-gold);
}