/* The audit walkthrough (Components/Results/AuditWalkthrough.razor, walkthrough.js), in the book cover's colors. */
.wt { --wt-blue: #2F80FF; --wt-green: #3BC14A; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
      background: #0F2236; color: #fff; box-shadow: 0 24px 60px rgba(13, 26, 44, .28); }
.wt-stage { position: relative; min-height: 400px; aspect-ratio: 16 / 7.2; overflow: hidden; isolation: isolate;
            background: radial-gradient(120% 90% at 18% 0%, #23466F 0%, #17324F 42%, #0F2236 100%); }
.wt-stage::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.08); z-index: 1; }

.wt-bars { position: absolute; z-index: 0; right: 4%; bottom: 0; width: min(46%, 480px); height: 62%; display: flex; align-items: flex-end; gap: 10px; opacity: .55; }
.wt-bars::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,34,54,0) 30%, rgba(15,34,54,.85) 100%); }
.wt-bars i { flex: 1; height: var(--h); border-radius: 10px 10px 0 0; transform-origin: 50% 100%;
             background: linear-gradient(180deg, #3D8BFF 0%, #1F5BB3 60%, #17406F 100%); animation: wt-rise 1.1s cubic-bezier(.2,.8,.2,1) both; }
.wt-bars i:nth-child(2n) { animation-delay: .08s; }
.wt-bars i:nth-child(3n) { animation-delay: .16s; opacity: .75; }
.wt-bars i.hero { flex: 1.3; background: linear-gradient(180deg, #7BEA86 0%, #3BC14A 45%, #2A9638 100%); box-shadow: 0 0 28px rgba(59,193,74,.45); }
.wt.is-playing .wt-bars i.hero { animation: wt-rise 1.1s cubic-bezier(.2,.8,.2,1) both, wt-pulse 2.4s ease-in-out 1.1s infinite; }
@keyframes wt-rise { from { transform: scaleY(.15); opacity: 0; } to { transform: none; } }
@keyframes wt-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

.wt-brand { position: absolute; z-index: 2; top: 22px; left: 44px; right: 24px; display: flex; justify-content: space-between; gap: 12px;
            font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #A9BCD3; }
.wt-brand span:last-child { letter-spacing: .12em; color: #7F96B2; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wt-slide { position: absolute; z-index: 2; inset: 0; padding: 70px 44px 44px; display: flex; flex-direction: column; justify-content: center; gap: 14px; max-width: 760px;
            opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), visibility .5s; }
.wt-slide.is-past { transform: translateX(-28px); }
.wt-slide.is-on, .wt-stage:not(:has(.is-on)) .wt-slide:first-of-type { opacity: 1; visibility: visible; transform: none; }
.wt-kicker { font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--wt-green); }
.wt-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.wt-fig strong { font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 84px; font-weight: 700; line-height: .95; letter-spacing: .01em; color: #fff; }
.wt-bad .wt-fig strong { color: #FF8A7A; }
.wt-ok .wt-fig strong { color: #7BEA86; }
.wt-fig span { font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #C9D6E8; }
.wt-title { margin: 0; font-family: 'Oswald', 'Arial Narrow', sans-serif; font-size: 40px; font-weight: 500; line-height: 1.08; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.wt-point { margin: 0; max-width: 600px; font-size: 19px; line-height: 1.55; color: #DCE5F1; text-wrap: pretty; }
.wt-slide.is-on .wt-fig, .wt-slide.is-on .wt-title, .wt-slide.is-on .wt-point { animation: wt-in .7s cubic-bezier(.2,.8,.2,1) both; }
.wt-slide.is-on .wt-title { animation-delay: .08s; }
.wt-slide.is-on .wt-point { animation-delay: .16s; }@keyframes wt-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.wt-progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.1); }
.wt-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--wt-blue), var(--wt-green)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .12s linear; }

.wt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 18px; background: #0B1A2B; }
.wt-bar button { font: inherit; color: #fff; cursor: pointer; }
.wt-bar button:focus-visible { outline: 3px solid #8CB8E8; outline-offset: 2px; }
.wt-play { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px 0 14px; border: 0; border-radius: 999px; font-weight: 700 !important; font-size: 15px !important;
           background: linear-gradient(90deg, var(--wt-blue), #2A6FE0); box-shadow: 0 6px 18px rgba(47,128,255,.35); }
.wt-play .i-pause, .wt.is-playing .wt-play .i-play { display: none; }
.wt.is-playing .wt-play .i-pause { display: block; }
.wt-nav { display: flex; align-items: center; gap: 10px; }
.wt-nav > button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: transparent; }
.wt-dots { display: flex; gap: 6px; }
.wt-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.28); transition: width .3s ease, background .3s ease; }
.wt-dots button.is-on, .wt:not(:has(.wt-dots .is-on)) .wt-dots button:first-child { width: 26px; background: var(--wt-green); }
.wt-cc { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: transparent; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em; }
.wt-cc[aria-pressed="true"] { background: rgba(255,255,255,.12); }
.wt-caption { margin: 0; padding: 0 22px 18px; background: #0B1A2B; font-size: 16px; line-height: 1.6; color: #C9D6E8; min-height: 3.2em; }
.wt.no-captions .wt-caption { display: none; }

@media (max-width: 720px) {
    .wt { border-radius: 14px; }
    .wt-stage { aspect-ratio: auto; min-height: 440px; }
    .wt-stage::before { left: 14px; }
    .wt-brand { top: 16px; left: 28px; right: 16px; font-size: 10px; }
    .wt-brand span:last-child { display: none; }
    .wt-slide { padding: 56px 24px 34px 28px; justify-content: flex-end; gap: 10px; }
    .wt-bars { right: -4%; width: 78%; height: 46%; top: 54px; bottom: auto; opacity: .22; }
    .wt-fig strong { font-size: 62px; }
    .wt-title { font-size: 28px; }
    .wt-point { font-size: 17px; }
    .wt-bar { padding: 12px 14px; }
    .wt-play { flex: 1 1 100%; justify-content: center; }
    .wt-nav { flex: 1; justify-content: space-between; }
    .wt-caption { padding: 0 16px 16px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .wt-bars i, .wt-slide, .wt-slide.is-on .wt-fig, .wt-slide.is-on .wt-title, .wt-slide.is-on .wt-point { animation: none !important; transition: opacity .2s ease !important; transform: none !important; }
}

/* "What this means" in each task of the plan */
.np-rep-learn { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--np-accent-soft); border-left: 3px solid var(--np-accent); }
.np-rep-learn strong { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--np-accent-dark); }
.np-rep-learn span { font-size: 15px; line-height: 1.55; color: var(--np-body); }