/* The competition planner (js/screens/compete.js). Its look, the stage, is now the whole app's look: a dark house with a burgundy glow, paper cards for the
   things you can hold (a program, a day, a rink diagram), a marquee for the event, and a button with a red offset shadow.
   Everything is scoped to .cp or to the compete route, so no other screen changes. */

.cp {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  color: var(--cream);
}

.cp > * {
  min-width: 0;
}

/* Headings */

.cp-date {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(14, 35, 71, 0.7);
  color: var(--gold);
  font: 600 0.72rem/1.2 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cp-ttl {
  font: 500 clamp(2.6rem, 11vw, 3.4rem) / 1 var(--font-display);
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45);
}

.cp-sub {
  margin-top: 6px;
  color: rgba(14, 35, 71, 0.88);
  font-size: 1.05rem;
}

.cp-back {
  justify-self: start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font: 600 0.85rem/1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.cp-back:hover {
  color: var(--gold-hi);
}

.cp-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  font: 700 0.75rem/1 var(--font-ui);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.cp-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(14, 35, 71, 0.5);
}

.cp-section {
  display: grid;
  gap: var(--sp-3);
}

/* The marquee: glowing bulbs, a countdown, and the event. */

.cp-bulbs {
  border: 8px dotted #ffdf9a;
  border-radius: 24px;
  background: linear-gradient(#5a1230, #36091d);
  box-shadow: 0 0 30px rgba(255, 200, 100, 0.5), inset 0 0 36px rgba(255, 200, 100, 0.12);
}

.cp-sign {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 100%;
  padding: 18px 14px 16px;
  color: var(--cream);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.cp-sign small {
  color: var(--gold-hi);
  font: 700 0.75rem/1.2 var(--font-ui);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.cp-sign h2 {
  font: 600 clamp(2.2rem, 10vw, 3rem) / 1 var(--font-display);
  text-shadow: 0 0 22px rgba(255, 200, 100, 0.65);
}

.cp-sign .cp-when {
  color: var(--gold-hi);
  font: 500 0.82rem/1.3 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cp-sign .cp-cd {
  margin-top: 6px;
  color: var(--gold-hi);
  font: 700 2rem/1 var(--font-display);
  text-shadow: 0 0 18px rgba(255, 200, 100, 0.6);
}

.cp-sign .cp-cd span {
  margin-left: 6px;
  font: 600 0.8rem/1 var(--font-ui);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.cp-sign:hover {
  filter: brightness(1.08);
}

/* Paper */

.cp-paper {
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
}

.cp-pcard {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px 18px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.4s var(--spring);
}

.cp-pcard:hover {
  transform: translateY(-2px);
}

.cp-pcard:active {
  transform: scale(0.98);
}

.cp-pcard h3 {
  padding-right: 90px;
  font: 700 1.9rem/1.05 var(--font-display);
}

.cp-pcard p {
  color: #3b4a6b;
  font-size: 0.95rem;
}

.cp-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.cp-step {
  padding: 3px 10px;
  border: 1.5px solid #2a8f4a;
  border-radius: 999px;
  color: #1f7a3c;
  font-size: 0.82rem;
  font-weight: 600;
}

.cp-step.is-no {
  border-color: #c4382a;
  border-style: dashed;
  color: #b0302a;
}

.cp-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 10px;
  border: 3px solid #d9382c;
  color: #d9382c;
  font: 700 0.72rem/1.3 var(--font-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-8deg);
  opacity: 0.92;
}

.cp-new {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 18px;
  border: 2px dashed rgba(14, 35, 71, 0.45);
  border-radius: 14px;
  background: none;
  color: var(--gold);
  font: 600 1.05rem/1.2 var(--font-ui);
  cursor: pointer;
}

.cp-new:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

.cp-new .ic {
  width: 22px;
  height: 22px;
}

.cp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-top: 1px solid rgba(14, 35, 71, 0.2);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
}

.cp-row b {
  color: var(--gold-hi);
  font: 700 1.15rem/1 var(--font-display);
  white-space: nowrap;
}

.cp-row small {
  display: block;
  color: rgba(14, 35, 71, 0.75);
  font-size: 0.85rem;
}

.cp-empty {
  padding: 18px;
}

.cp-empty h2 {
  font: 700 1.7rem/1.1 var(--font-display);
}

.cp-empty p {
  margin-top: 8px;
  color: #3b4a6b;
}

/* Buttons: the offset shadow. */

.cp-obtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(100%, 320px);
  padding: 15px 22px;
  border: 0;
  background: var(--cream);
  color: #3d0c1b;
  box-shadow: 5px 5px 0 var(--red);
  font: 600 1.5rem/1.1 var(--font-display);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.35s var(--spring), box-shadow 0.2s;
}

.cp-obtn .ic {
  width: 26px;
  height: 26px;
  stroke-width: 2.2;
}

.cp-obtn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 7px 7px 0 var(--red);
}

.cp-obtn:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--red);
  transition-duration: 0.1s;
}

.cp-obtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cp-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: none;
  color: var(--gold);
  font: 600 1rem/1 var(--font-ui);
  cursor: pointer;
}

.cp-ghost:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

.cp-ghost--danger {
  border-color: rgba(255, 150, 135, 0.7);
  color: #ffb4a8;
}

.cp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}

.cp .note {
  color: rgba(14, 35, 71, 0.78);
}

.cp-paper .note {
  color: #4a5876;
}

.cp-warn {
  color: #ffb4a8;
  font-size: 0.95rem;
}

@media (min-width: 960px) {
  .cp {
    max-width: 760px;
  }
}

/* ---- A program: tabs, the form, the rink, the running order, the music ---- */

.cp-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font: 600 1rem/1.3 var(--font-ui);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(14, 35, 71, 0.5);
  text-underline-offset: 4px;
}

.cp-seg {
  justify-self: start;
  max-width: 100%;
}

.cp-form {
  display: grid;
  gap: 0;
  padding: 6px 18px 16px;
}

.cp-f {
  display: grid;
  gap: 2px;
  padding: 12px 0 8px;
  border-bottom: 1px solid rgba(20, 33, 63, 0.22);
}

.cp-f:last-of-type {
  border-bottom: 0;
}

.cp-f > span,
.cp-f > label > span,
.cp-f label > span {
  color: #7a6a40;
  font: 700 0.72rem/1.2 var(--font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cp-in {
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 600 1.7rem/1.15 var(--font-display);
  outline-offset: 4px;
}

.cp-in--small {
  font: 500 1.1rem/1.3 var(--font-ui);
}

.cp-in--time {
  width: 7ch;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

textarea.cp-in {
  min-height: 56px;
  resize: vertical;
}

select.cp-in {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #14213f 50%), linear-gradient(135deg, #14213f 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.cp-f--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.cp-stepper {
  display: inline-flex;
  gap: 10px;
}

.cp-stepper button,
.cp-nudge button {
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font: 600 1.3rem/1 var(--font-ui);
  cursor: pointer;
}

.cp-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.cp-kinds button {
  padding: 8px 14px;
  border: 1.5px solid rgba(20, 33, 63, 0.45);
  border-radius: 999px;
  background: none;
  color: #3b4a6b;
  font: 600 0.95rem/1 var(--font-ui);
  cursor: pointer;
}

.cp-kinds button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* The rink: a blueprint */

.cp-bp {
  display: grid;
  gap: var(--sp-2);
  padding: 10px;
  border-radius: 14px;
  background-color: #eaf3fa;
  background-image: linear-gradient(rgba(42, 93, 168, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(42, 93, 168, 0.1) 1px, transparent 1px);
  background-size: 22px 22px;
  color: #0e2347;
}

.cp-rink {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}

.cp-rink .cp-ice {
  fill: rgba(255, 255, 255, 0.72);
  stroke: #2a5da8;
  stroke-width: 2;
}

.cp-rink .cp-mid {
  stroke: #2a5da8;
  stroke-width: 1;
  opacity: 0.45;
}

.cp-rink .cp-route {
  fill: none;
  stroke: #0e2347;
  stroke-width: 2;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
}

.cp-rink .cp-start {
  fill: #0e2347;
  font: 600 10px var(--font-ui);
  letter-spacing: 0.1em;
}

.cp-rink .cp-mark {
  cursor: grab;
  touch-action: none;
  outline: none;
}

.cp-rink .cp-mark .hit {
  fill: transparent;
}

.cp-rink .cp-mark .dot {
  fill: #d9382c;
  stroke: #fff;
  stroke-width: 1.5;
  transition: r 0.2s var(--spring);
}

.cp-rink .cp-mark text {
  fill: #fff;
  font: 700 11px var(--font-ui);
  text-anchor: middle;
  pointer-events: none;
}

.cp-rink .cp-mark.is-sel .dot {
  fill: #ffd98a;
  stroke: #0e2347;
  stroke-width: 2.5;
}

.cp-rink .cp-mark.is-sel text {
  fill: #0e2347;
  font-size: 13px;
}

.cp-rink .cp-mark:focus-visible .dot {
  stroke: #0e2347;
  stroke-width: 3;
}

.cp-rink .cp-callout rect {
  fill: #0e2347;
}

.cp-rink .cp-callout text {
  fill: #fff;
  font: 600 11.5px var(--font-ui);
  text-anchor: middle;
}

.cp-hint {
  padding: 0 4px;
  color: #4a6482;
  font-size: 0.9rem;
}

.cp-sel {
  display: grid;
  gap: var(--sp-3);
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
}

.cp-sel b {
  display: block;
  font: 700 1.25rem/1.15 var(--font-display);
}

.cp-sel span {
  color: #3b4a6b;
  font-size: 0.92rem;
}

.cp-nudge {
  display: flex;
  gap: 8px;
}

.cp-bp .cp-ghost {
  border-color: #0e2347;
  color: #0e2347;
}

.cp-bp .cp-ghost--danger {
  border-color: #b0302a;
  color: #b0302a;
}

.cp-pal,
.cp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cp-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: none;
  color: var(--gold);
  font: 600 0.98rem/1 var(--font-ui);
  cursor: pointer;
}

.cp-chip:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

.cp-chip--gold {
  background: rgba(255, 217, 138, 0.14);
}

/* The running order */

.cp-els {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-el {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 0;
  border-top: 1px solid rgba(14, 35, 71, 0.2);
}

.cp-el.is-sel {
  background: rgba(255, 217, 138, 0.1);
  box-shadow: inset 3px 0 0 var(--gold-hi);
}

.cp-el__main {
  display: flex;
  align-items: baseline;
  flex: 1;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 6px 4px 6px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cp-el__n {
  width: 2.2em;
  color: var(--gold-hi);
  font: 700 1.1rem/1 var(--font-display);
}

.cp-el__name {
  flex: 1;
  min-width: 0;
  font-size: 1.08rem;
  line-height: 1.25;
}

.cp-el__name small {
  display: block;
  color: rgba(14, 35, 71, 0.72);
  font-size: 0.85rem;
}

.cp-el__tools {
  display: flex;
  gap: 2px;
}

/* The music */

.cp-music {
  padding: 28px 4px 8px;
}

.cp-track {
  position: relative;
  height: 64px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(14, 35, 71, 0.28) 0 1px, transparent 1px 8.33%),
    rgba(14, 35, 71, 0.1);
}

.cp-flag {
  position: absolute;
  top: -14px;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--gold-hi);
  opacity: 0.8;
}

.cp-flag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 8px;
  background: var(--gold-hi);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.cp-blk {
  position: absolute;
  top: 6px;
  bottom: 6px;
  min-width: 22px;
  padding: 0 2px;
  border: 2px solid transparent;
  border-radius: 6px;
  color: #08122e;
  font: 700 0.8rem/1 var(--font-display);
  cursor: pointer;
  overflow: hidden;
}

.cp-blk.is-sel {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--red), 0 0 14px rgba(255, 255, 255, 0.5);
  z-index: 2;
}

.cp-t-jump { background: #ffd98a; }
.cp-t-spin { background: #b9a6ff; }
.cp-t-steps,
.cp-t-move { background: #5fd8e6; }
.cp-t-pose { background: #9fb8d8; }

.cp-ruler {
  position: relative;
  height: 22px;
  margin-top: 6px;
  color: rgba(14, 35, 71, 0.8);
  font-size: 0.78rem;
}

.cp-ruler span {
  position: absolute;
  transform: translateX(-50%);
}

.cp-ruler span:first-child {
  transform: none;
}

.cp-ruler span:last-child {
  transform: translateX(-100%);
}

.cp-moments {
  display: grid;
  gap: var(--sp-2);
}

.cp-times {
  display: grid;
}

.cp-trow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: var(--sp-2);
  padding: 8px 0;
  border-top: 1px solid rgba(14, 35, 71, 0.2);
}

.cp-trow.is-sel {
  background: rgba(255, 217, 138, 0.1);
  box-shadow: inset 3px 0 0 var(--gold-hi);
}

.cp-trow__name {
  align-self: center;
  min-height: 44px;
  padding: 0 0 0 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.cp-trow__name span {
  color: var(--gold-hi);
  font: 700 1rem/1 var(--font-display);
}

.cp-trow__f {
  display: grid;
  gap: 2px;
}

.cp-trow__f span {
  color: rgba(14, 35, 71, 0.75);
  font: 600 0.68rem/1 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.cp-time {
  width: 72px;
  min-height: 44px;
  padding: 0 8px;
}

.cp-sumslot {
  display: grid;
  gap: var(--sp-2);
  margin-top: -6px;
}

/* The run-through sheet */

.rt-clock {
  font-size: clamp(4rem, 22vw, 6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rt-now {
  font: 600 1.7rem/1.15 var(--font-display);
}

/* ---- A competition: the day, what to bring, and the result ---- */

.field--check span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.field--check input {
  width: 22px;
  height: 22px;
  accent-color: #ffd98a;
}

.cp-when-chip {
  display: inline-block;
  padding: 3px 12px;
  border: 1.5px solid var(--gold-hi);
  border-radius: 999px;
  color: var(--gold-hi);
  font: 700 0.85rem/1.3 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cp-when-chip.is-past {
  border-color: rgba(14, 35, 71, 0.5);
  color: rgba(14, 35, 71, 0.8);
}

.cp-day {
  padding: 14px 16px 12px;
}

.cp-dayl {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-di {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.cp-di__t {
  color: #5a6786;
  font: 600 0.9rem/1.2 var(--font-ui);
  text-align: right;
}

.cp-di__b {
  display: grid;
  gap: 1px;
  min-height: 48px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: #d9e2ee;
  color: #35506e;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cp-di__b b {
  font-size: 1.05rem;
}

.cp-di__b small {
  color: #4a6482;
}

.cp-di.is-mine .cp-di__b {
  background: var(--ink);
  color: #fff;
  box-shadow: 5px 5px 0 #d9382c;
  min-height: 62px;
}

.cp-di.is-mine .cp-di__b b {
  font: 700 1.4rem/1.1 var(--font-display);
}

.cp-di.is-mine .cp-di__b small {
  color: #cdd6f5;
}

.cp-di.is-zam .cp-di__b {
  min-height: 40px;
  background: repeating-linear-gradient(45deg, #ffcf4a 0 12px, #1b1b1b 12px 24px);
  color: #1b1b1b;
}

.cp-di.is-zam .cp-di__b b {
  justify-self: start;
  padding: 1px 8px;
  background: #ffcf4a;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cp-di.is-zam .cp-di__b small {
  display: none;
}

.cp-day .cp-actions {
  margin-top: 14px;
}

.cp-ghost--ink {
  border-color: var(--ink);
  color: var(--ink);
}

.cp-bring {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-bring li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border-top: 1px solid rgba(14, 35, 71, 0.2);
}

.cp-chk {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
}

.cp-chk i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 2px solid var(--gold);
  border-radius: 6px;
  color: transparent;
}

.cp-chk i .ic {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}

.cp-chk[aria-checked="true"] i {
  background: var(--gold-hi);
  border-color: var(--gold-hi);
  color: #3b2500;
}

.cp-chk[aria-checked="true"] span {
  color: rgba(14, 35, 71, 0.6);
  text-decoration: line-through;
}

.cp-addrow {
  display: flex;
  gap: var(--sp-2);
}

.cp-addrow .input {
  flex: 1;
  min-width: 0;
}

/* The result: how each element went */

.cp-marks {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.cp-mk b {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
}

.cp-mk .cp-kinds {
  margin-top: 0;
}

/* The kiss and cry scoreboard */

.cp-score {
  display: grid;
}

.cp-tv {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 16px 14px;
  overflow: hidden;
  background: linear-gradient(160deg, #0b1a52, #081238 60%, #050a22);
  color: #fff;
}

.cp-tv::before {
  content: "";
  position: absolute;
  left: -60px;
  top: -40px;
  width: 520px;
  height: 150px;
  background: repeating-linear-gradient(115deg, rgba(217, 56, 44, 0.9) 0 26px, transparent 26px 52px);
  opacity: 0.2;
  transform: skewY(-6deg);
}

.cp-tv > * {
  position: relative;
}

.cp-tv__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cp-tv__bar b {
  flex: none;
  white-space: nowrap;
  padding: 5px 12px;
  background: #d9382c;
  font: 700 0.85rem/1 var(--font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cp-tv__bar span {
  color: #cdd6f5;
  font: 600 0.72rem/1.2 var(--font-ui);
  letter-spacing: 0.12em;
  text-align: right;
  text-transform: uppercase;
}

.cp-tv__lower {
  display: flex;
}

.cp-tv__lower i {
  width: 12px;
  background: #ffc95e;
}

.cp-tv__lower div {
  flex: 1;
  padding: 8px 14px;
  background: #fff;
  color: #0b1a52;
}

.cp-tv__lower small {
  display: block;
  color: #5a6786;
  font: 700 0.72rem/1.3 var(--font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cp-tv__lower b {
  font: 700 1.7rem/1.05 var(--font-display);
}

.cp-tv__score {
  padding: 8px 16px 12px;
  border: 2px solid #ffc95e;
  background: linear-gradient(135deg, #14298a, #0c1a60);
}

.cp-tv__score small {
  display: block;
  color: #ffd98a;
  font: 700 0.72rem/1.3 var(--font-ui);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.cp-tv__score .num {
  color: #ffd98a;
  font-size: 3.6rem;
  line-height: 1;
}

.cp-tv__els {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-tv__els li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.cp-tv__els li span {
  width: 2.2em;
  color: #ffd98a;
  font: 700 1rem/1 var(--font-display);
}

.cp-tv__els li em {
  margin-left: auto;
  color: #ffd98a;
  font-style: normal;
  font-size: 0.95rem;
}

.cp-tv__els li em.is-fell,
.cp-tv__els li em.is-shaky {
  color: #ff9f90;
}

.cp-tv__els li em.is-skipped {
  color: #b9c2de;
}

.cp-tv__q {
  white-space: pre-line;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.1);
  color: #e6ecff;
  font-size: 1rem;
  line-height: 1.35;
}

.cp-tv__q b {
  color: #ffd98a;
}

.cp-tv__next {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.1);
  font: 700 0.82rem/1.4 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cp-tv__next b {
  color: #ffd98a;
}

/* On Home, the next competition is a smaller marquee. */

.cp-tile {
  display: grid;
  gap: var(--sp-3);
}

.cp-tile .cp-sign {
  padding: 12px 12px 10px;
}

.cp-tile .cp-sign h2 {
  font-size: 2rem;
}

.cp-tile .cp-bar {
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
}

.cp-tile .cp-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--gold-hi);
  box-shadow: 0 0 8px var(--gold-hi);
}

/* On the narrowest phones the running order's buttons drop under the name instead of squeezing it. */
@media (max-width: 380px) {
  .cp-el {
    flex-wrap: wrap;
  }

  .cp-el__main {
    flex-basis: 100%;
    padding-bottom: 0;
  }

  .cp-el__tools {
    margin: 0 0 4px auto;
  }
}