/* Objectives, the setting: one setup panel; switch the objective and Elly's question is rewritten in the same place */
.objectives h2 em { font-style: normal; color: var(--magenta); }
/* Colour serves the message: each objective keeps its brand colour, but only on its small icon and a brush stroke under the words that differ */
.obj-customers { --obj: #26547C; --obj-on: #fff; --obj-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%23D0E1F1' d='M7 9C46 5 104 8 161 5s65 1 74 3c3 3 0 6 2 9s-1 7-4 9c-52 2-112-1-173 1-24 1-42 1-54-1-3-3 0-6-2-10s1-6 3-7Z'/%3E%3C/svg%3E"); --obj-ring: rgba(38, 84, 124, .16); }
.obj-growth { --obj: #FFD166; --obj-on: #271B36; --obj-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%23FFD166' d='M7 9C46 5 104 8 161 5s65 1 74 3c3 3 0 6 2 9s-1 7-4 9c-52 2-112-1-173 1-24 1-42 1-54-1-3-3 0-6-2-10s1-6 3-7Z'/%3E%3C/svg%3E"); --obj-ring: rgba(255, 188, 31, .22); }
/* Not pink: pink is Elly's own colour and the root cause's, so the third objective takes the brand aubergine family */
.obj-people { --obj: #271B36; --obj-on: #fff; --obj-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%23DFD6EA' d='M7 9C46 5 104 8 161 5s65 1 74 3c3 3 0 6 2 9s-1 7-4 9c-52 2-112-1-173 1-24 1-42 1-54-1-3-3 0-6-2-10s1-6 3-7Z'/%3E%3C/svg%3E"); --obj-ring: rgba(39, 27, 54, .18); }

.setup-frame { position: relative; display: grid; grid-template-columns: 390px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -40px rgba(39, 27, 54, .32); }

/* Your objective: three objectives, and only the chosen one takes its colour */
.setup-side { padding: 32px; border-right: 1px solid var(--line); border-radius: 15px 0 0 15px; background: var(--soft); }
.setup-label { font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.setup-objectives { display: grid; gap: 8px; margin-top: 16px; }
.objective { display: grid; grid-template-columns: 40px minmax(0, 1fr) 22px; align-items: center; gap: 16px; width: 100%; padding: 16px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; color: var(--ink-soft); text-align: left; cursor: pointer; transition: border-color .17s, box-shadow .17s, color .17s, transform .1s; }
.objective:hover { border-color: #DFD6EA; }
/* A hidden bold copy shares the label's cell, so turning bold never rewraps it and the panel never moves */
.objective-name { display: grid; }
.objective-name > span, .objective-name::after { grid-area: 1 / 1; }
.objective-name::after { content: attr(data-bold); font-weight: 800; visibility: hidden; }
.obj-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--line); color: var(--muted); transition: background-color .17s, color .17s; }
.obj-icon .icon { width: 23px; height: 23px; }
.objective-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #DFD6EA; background: #fff; transition: border-color .17s, box-shadow .17s; }
.objective.is-current { border-color: var(--ink); box-shadow: 0 0 0 4px var(--obj-ring); color: var(--ink); font-weight: 800; }
.objective.is-current .obj-icon { background: var(--obj); color: var(--obj-on); }
.objective.is-current .objective-radio { border-color: var(--ink); box-shadow: inset 0 0 0 4px #fff; background: var(--ink); }
.objective.is-pressed { transform: scale(.98); }

/* Elly's side: the question is the biggest thing, and it is the one thing that changes */
.setup-main { display: flex; flex-direction: column; padding: 32px 40px; }
.setup-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Who Elly asks, right above her question: the audience sits in an ink pill with a person, so it is never missed */
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--ink-soft); }
.who .elly-mark { flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 1.5px #F7C9D9; }
.who-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px 4px 4px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 800; color: var(--ink); }
.who-pill .icon { flex: none; width: 24px; height: 24px; padding: 5px 5px 0; border-radius: 50%; background: var(--line); color: var(--ink-soft); }

/* Elly's question: large and in ink; a thick brush stroke in the objective's colour sits under the words that make it different, reaching a little past them */
.setup-question { flex: 1; align-content: center; margin: 24px 0; }
.question { max-width: 640px; font-family: var(--font-heading); font-size: 36px; font-weight: 700; line-height: 1.22; letter-spacing: -0.015em; color: var(--ink); }
.question b { margin-inline: -.12em; padding-inline: .12em; font-weight: 800; background: var(--obj-brush) 0 84% / 100% .7em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .33s cubic-bezier(.3, .7, .2, 1); }
.question-typing { display: flex; gap: 6px; align-self: center; justify-self: start; visibility: hidden; opacity: 0; }
.question-typing i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink); opacity: .25; animation: typing-dot .67s ease-in-out infinite; }
.question-typing i:nth-child(2) { animation-delay: .1s; }
.question-typing i:nth-child(3) { animation-delay: .2s; }
.setup:not(.is-typing) .question-typing i { animation: none; }

/* Every version sits in the same cell, so the panel keeps the height of the longest and never moves */
.swap { display: grid; }
.setup-asks .swap { display: inline-grid; justify-items: start; }
.swap > * { grid-area: 1 / 1; }
.swap > [data-at] { visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .09s, transform .09s, visibility 0s .09s; }
.swap > [data-at].is-current { visibility: visible; opacity: 1; transform: none; transition: opacity .15s, transform .2s cubic-bezier(.2, .8, .2, 1); }
/* Before the story starts and while Elly types, the question waits */
.setup:is(.is-blank, .is-typing) .setup-question > [data-at] { visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .1s, visibility 0s .1s; }
.setup.is-typing .question-typing { visibility: visible; opacity: 1; transition: opacity .1s .08s; }
.setup.is-armed:not(.is-lit) .question b { background-size: 0 .7em; transition: none; }

/* The pointer that makes the choice on its own */
.pointer { position: absolute; left: 0; top: 0; z-index: 2; width: 22px; height: 26px; pointer-events: none; visibility: hidden; opacity: 0; transform-origin: 3px 2px; filter: drop-shadow(0 3px 5px rgba(39, 27, 54, .3)); transition: opacity .17s, visibility 0s .17s; }
.setup.is-pointing .pointer { visibility: visible; opacity: 1; transition: opacity .13s; }
.pointer.is-press { scale: .82; }

@media (prefers-reduced-motion: reduce) {
  .swap > [data-at], .swap > [data-at].is-current, .objective, .obj-icon, .objective-radio { transition: none; }
}
@media (max-width: 1180px) {
  .setup-frame { grid-template-columns: 350px minmax(0, 1fr); }
  .question { font-size: 32px; }
}
@media (max-width: 860px) {
  .setup-frame { grid-template-columns: minmax(0, 1fr); }
  .setup-side { border-right: 0; border-bottom: 1px solid var(--line); border-radius: 15px 15px 0 0; }
}
@media (max-width: 720px) {
  .setup-side { padding: 16px; }
  .setup-label { font-size: 11px; }
  .setup-objectives { gap: 8px; margin-top: 12px; }
  .objective { grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 12px; padding: 8px 16px 8px 8px; font-size: 15px; }
  .obj-icon { width: 36px; height: 36px; }
  .obj-icon .icon { width: 21px; height: 21px; }
  .objective-radio { width: 20px; height: 20px; }
  .setup-main { padding: 16px 16px 24px; }
  .setup-top { gap: 8px; }
  .setup-top .example-tag { padding-inline: 6px; font-size: 10px; }
  .who { gap: 8px; font-size: 14px; }
  .who .elly-mark { width: 24px; height: 24px; }
  .who-pill .icon { width: 24px; height: 24px; }
  .setup-question { margin: 16px 0 24px; }
  .question { font-size: 25px; }
}