/* v5-create: choice, Then & Now, split clues, combination lock, jigsaw + voice notes in the quest editor */
.fstep .v5-box { margin-top: 16px; padding: 18px; border-radius: 18px; display: flex; flex-direction: column; gap: 12px;
  background: rgba(143, 176, 221, 0.06); box-shadow: inset 0 0 0 1px rgba(143, 176, 221, 0.22); }
.fstep .v5-box > .lbl { font-weight: 600; font-size: 14px; }

.v5-opt { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; border-radius: 14px;
  background: rgba(16, 19, 24, 0.35); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.25s; }
.v5-opt.ok { box-shadow: inset 0 0 0 1.5px rgba(159, 194, 94, 0.55); }
.v5-opt .input.sm { padding: 10px 14px; font-size: 14px; }
.v5-tick { width: 44px; height: 44px; border: 0; border-radius: 12px; display: grid; place-items: center; font: 700 19px var(--f-body); cursor: pointer;
  color: var(--dim); background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform 0.3s var(--spring), background 0.2s, color 0.2s; }
.v5-tick:hover { transform: scale(1.06); color: var(--text); }
.v5-opt.ok .v5-tick { color: #16190f; background: var(--good); box-shadow: none; }

.v5-three { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.fstep .v5-box .dropzone { aspect-ratio: 4 / 3; max-width: 420px; }
.v5-box .help, .v5-split .help { font-size: 13.5px; color: var(--dim); }
.v5-box .help.v5-warn { color: var(--amber); }

.v5-split { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 12px; }
.v5-part { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.v5-part .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--f-mono); color: var(--violet-2); box-shadow: inset 0 0 0 1px rgba(240, 211, 138, 0.35); }

.v5-lock { margin-top: 12px; }

.obj-row .v5-voice { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.v5-rec { color: #fff; background: var(--coral) !important; box-shadow: 0 0 0 0 rgba(224, 103, 79, 0.6); animation: v5pulse 1.4s ease-out infinite; }
@keyframes v5pulse { to { box-shadow: 0 0 0 12px rgba(224, 103, 79, 0); } }
.emoji-pin.v5-has-audio::after { content: '🎙️'; position: absolute; right: -8px; top: -8px; font-size: 12px; line-height: 1; }

.v5-jig .dropzone.sm { aspect-ratio: 1; max-width: 180px; }

@media (max-width: 640px) {
  .v5-three { grid-template-columns: 1fr; }
  .v5-opt { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 8px; }
  .v5-tick { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .v5-rec { animation: none; } }

/* ---------------------------------------------------------------- the maker pledge + the optional Spanish version */
.v6-pledge .v6-makerpledge { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.v6-pledge .v6-makerpledge a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.v6-es > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; cursor: pointer; list-style: none; position: relative; padding-right: 30px; }
.v6-es > summary::-webkit-details-marker { display: none; }
.v6-es > summary::after { content: '\25BE'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--violet-2); transition: transform 0.3s var(--spring); }
.v6-es[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.v6-es-h { font: 700 18px var(--f-display); }
.v6-es-count { font-size: 12px; color: var(--good); }
.v6-es-step { border-radius: 14px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 0 0 1px var(--line); }
.v6-es-step > summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 40px 8px 12px; position: relative; cursor: pointer; list-style: none; font-weight: 600; font-size: 14.5px; }
.v6-es-step > summary::-webkit-details-marker { display: none; }
.v6-es-step > summary::after { content: '\25BE'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--violet-2); transition: transform 0.3s var(--spring); }
.v6-es-step[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.v6-es-step > div { padding: 0 12px 14px; }
.v6-es-st { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v6-es-ok { color: var(--good); font-weight: 700; }
.v6-es-step .fnum.sm { flex: none; width: 28px; height: 28px; font-size: 13px; }
.v6-es-opt { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.v6-es-opt .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--f-mono); color: var(--dim); box-shadow: inset 0 0 0 1px var(--line-2); margin-top: 8px; }
.v6-es .v5-part { grid-template-columns: 28px minmax(0, 1fr); }
.v6-es textarea.input { min-height: 90px; }