/* "Sua paleta da virada" (layouts/shortcodes/paleta-virada.html).
   DESIGN.md: single serif, cream/ink/oxblood/gold, sharp corners, only ✦.
   The motion reads like type on a page: fades and an ink underline. */
.pv[hidden], .pv [hidden] { display: none !important; }
.pv { container-type: inline-size; }
.pv-field label { display: block; }
.pv-field input { display: block; width: 100%; padding: .75rem 1rem; color: rgb(var(--c-ink)); font: inherit; font-size: 1.05rem; background: rgb(var(--c-bg)); border: 1px solid rgb(var(--c-rule)); border-radius: 0; }
.pv-field input:focus { outline: none; border-color: rgb(var(--c-gold)); box-shadow: 0 0 0 2px rgb(var(--c-gold) / .2); }
.pv-field input[aria-invalid="true"] { border-color: rgb(var(--c-oxblood)); }
@container (min-width: 560px) { .pv-form { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .pv-form .pv-actions, .pv-form .pv-error { grid-column: 1 / -1; } }

.pv-stage { margin-top: 1.5rem; padding: 1.1rem 1rem .9rem; background: rgb(var(--c-bg)); border-top: 2px solid rgb(var(--c-gold)); }
.pv-stage.is-playing { cursor: pointer; }
.pv-step { margin: 0 0 1rem; opacity: 0; transform: translateY(4px); transition: opacity 240ms cubic-bezier(.2,.8,.2,1), transform 240ms cubic-bezier(.2,.8,.2,1); }
.pv-step.is-in { opacity: 1; transform: none; }
.pv-step-label { margin: 0 0 .5rem; color: rgb(var(--c-ink-muted)); font-size: .95rem; line-height: 1.45; }
.pv-name { display: flex; flex-wrap: wrap; gap: .55rem 1rem; }
.pv-word { display: flex; flex-wrap: wrap; gap: .1rem; }
.pv-letter { display: grid; justify-items: center; min-width: 1.15rem; padding-bottom: .2rem; border-bottom: 2px solid transparent; transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease; }
.pv-letter b { font-size: 1.1rem; font-weight: 500; line-height: 1; letter-spacing: 0; }
.pv-letter i { margin-top: .2rem; color: rgb(var(--c-ink-faint)); font-size: .72rem; font-style: normal; font-variant-numeric: lining-nums tabular-nums; opacity: 0; transition: opacity 200ms ease; }
.pv-name.show-values .pv-letter i { opacity: 1; }
.pv-name.show-active .pv-letter.is-active { color: rgb(var(--c-oxblood)); border-bottom-color: rgb(var(--c-oxblood)); }
.pv-name.show-active .pv-letter.is-active i { color: rgb(var(--c-oxblood)); font-weight: 700; }
/* The letters of the assinatura when the rule took the vowels or the consonants. */
.pv-name.show-sig .pv-letter.is-sig { background: rgb(var(--c-gold) / .18); }
.pv-sum { margin: .45rem 0 0; font-size: 1.05rem; font-variant-numeric: lining-nums tabular-nums; }
.pv-sum strong { color: rgb(var(--c-oxblood)); }
.pv-sub { opacity: 0; transition: opacity 240ms cubic-bezier(.2,.8,.2,1); }
.pv-sub.is-in { opacity: 1; }
.pv-skip { margin: -.35rem 0 .6rem; color: rgb(var(--c-ink-faint)); font-size: .8rem; text-align: right; }

.pv-result { margin-top: 1.5rem; }
.pv-result-kicker { margin: 0 0 .75rem; color: rgb(var(--c-gold)); font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.pv-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@container (min-width: 600px) { .pv-groups { grid-template-columns: repeat(var(--layers, 3), minmax(0, 1fr)); } }
.pv-group { padding: .9rem 1rem 1rem; background: rgb(var(--c-bg)); border-top: 2px solid rgb(var(--c-rule)); opacity: 0; transform: translateY(6px); transition: opacity 280ms cubic-bezier(.2,.8,.2,1), transform 280ms cubic-bezier(.2,.8,.2,1); }
.pv-group[data-layer="roupa"] { border-top-color: rgb(var(--c-gold)); }
.pv-result.is-in .pv-group { opacity: 1; transform: none; }
.pv-result.is-in .pv-group:nth-child(2) { transition-delay: 140ms; }
.pv-result.is-in .pv-group:nth-child(3) { transition-delay: 280ms; }
.pv-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .6rem; }
.pv-group-label { color: rgb(var(--c-ink-muted)); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
/* Lining figures: an old-style 1 reads as the letter I next to the sum "→ 1". */
.pv-group-number { font-family: "Cormorant Garamond", Garamond, serif; font-size: 2rem; line-height: 1; color: rgb(var(--c-ink)); font-variant-numeric: lining-nums tabular-nums; }
.pv-colors { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; margin: 0; padding: 0; list-style: none; }
.pv-colors li { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1rem; line-height: 1.3; }
.pv-colors li i { flex: none; width: 1.35rem; height: 1.35rem; background: var(--swatch); border: 1px solid rgb(var(--c-rule)); }
.pv-colors li.is-link { font-weight: 600; }
.pv-colors li b, .pv-link b { color: rgb(var(--c-gold)); font-weight: 400; }
.pv-group-line { margin: .55rem 0 0; color: rgb(var(--c-ink-muted)); font-size: .92rem; line-height: 1.45; }
.pv-group-line strong { color: rgb(var(--c-ink)); font-weight: 600; }
.pv-group-math { padding-top: .5rem; border-top: 1px solid rgb(var(--c-rule)); font-variant-numeric: lining-nums tabular-nums; }
.pv-group-repeat { margin: .45rem 0 0; color: rgb(var(--c-ink)); font-size: .9rem; font-weight: 600; line-height: 1.4; }
.pv-link { margin: .9rem 0 0; font-size: 1rem; }
.pv-notes { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(var(--c-rule)); }
.pv-notes p { margin: 0 0 .6rem; color: rgb(var(--c-ink-muted)); font-size: 1rem; line-height: 1.55; }
.pv-notes strong { color: rgb(var(--c-ink)); }
.pv-guide { margin-top: 1.25rem; padding: 1.1rem 1rem; background: rgb(var(--c-bg)); border-left: 3px solid rgb(var(--c-gold)); }
.pv-guide-text { margin: 0 0 .9rem; color: rgb(var(--c-ink)); font-size: 1.05rem; line-height: 1.55; }
.pv-guide-note { margin: .7rem 0 0; color: rgb(var(--c-ink-faint)); font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  .pv-step, .pv-sub, .pv-group, .pv-letter, .pv-letter i { transition: none !important; }
}