/* ==========================================================
   about.css
   Styles for the "See It In Action" verification demo widget
   on the About page (about.html).
   ========================================================== */

.esid-demo {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 32px;
    align-items: center;
    margin-top: 32px;
}

.esid-demo-rail {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.esid-demo-step {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: background-color .2s ease, border-color .2s ease;
}

.esid-demo-step:hover {
    background: rgba(0, 0, 0, .03);
}

.esid-demo-step[aria-current="step"] {
    background: #f6f8fc;
    border-color: #e2e8f5;
}

.esid-demo-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #c7cede;
    transition: background-color .25s ease;
}

.esid-demo-step[aria-current="step"] .esid-demo-step-dot.esid-blue { background: #1a56db; }
.esid-demo-step[aria-current="step"] .esid-demo-step-dot.esid-green { background: #16a34a; }
.esid-demo-step[aria-current="step"] .esid-demo-step-dot.esid-purple { background: #7c3aed; }

.esid-demo-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.esid-demo-step-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: #1c2333;
}

.esid-demo-step-desc {
    font-size: var(--text-xs);
    color: #6b7280;
}

.esid-demo-frame {
    background: #fff;
    border: 1px solid #e5e9f2;
    border-radius: 20px;
    box-shadow: 0 6px 24px rgba(20, 30, 60, .06);
    padding: 36px 28px;
    max-width: 380px;
    margin: 0 auto;
}

.esid-demo-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.esid-demo-icon-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border-radius: 22px;
}

.esid-demo-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .35s ease, transform .35s ease;
}

.esid-demo-icon.esid-blue { background: #1a56db; }
.esid-demo-icon.esid-green { background: #16a34a; }
.esid-demo-icon.esid-purple { background: #7c3aed; }
.esid-demo-icon.esid-done { background: #16a34a; }

.esid-demo-icon.esid-active {
    opacity: 1;
    transform: scale(1);
}

.esid-demo-scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 22px;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    top: 0;
    z-index: 2;
    pointer-events: none;
    animation: esidScan 1.6s linear infinite;
}

.esid-demo-badge {
    position: absolute;
    /* Was -3px/-3px. The positioning parent (.esid-demo-icon-wrap) sets
       overflow:hidden, so that overhang was being clipped and never
       rendered — the badge was losing 3px of itself for no visible gain. */
    bottom: 0;
    right: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .25s ease, transform .25s ease;
    z-index: 3;
}

.esid-demo-badge.esid-show {
    opacity: 1;
    transform: scale(1);
}

.esid-demo-status {
    font-size: var(--text-sm);
    color: #374151;
    text-align: center;
    min-height: 20px;
    margin: 0;
}

.esid-demo-progress {
    width: 100%;
    max-width: 220px;
    height: 4px;
    border-radius: 2px;
    background: #eef0f5;
    overflow: hidden;
}

.esid-demo-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: #1a56db;
}

@keyframes esidScan {
    /* Was -22px -> 110px. The scanline now begins flush with the top of the
       frame rather than sweeping in from above it; the distance travelled
       across the visible area is identical. */
    0% { transform: translateY(0); }
    100% { transform: translateY(110px); }
}

@media (max-width: 760px) {
    .esid-demo {
        grid-template-columns: 1fr;
    }
    .esid-demo-rail {
        flex-direction: row;
        overflow-x: auto;
    }
    .esid-demo-step {
        flex-direction: column;
        text-align: center;
        min-width: 140px;
    }
}

/* Below ~560px the three-across rail no longer fits: 3 x 140px of step plus
   gaps needs ~440px, so on a 375px phone the third step ("Enrollment Check")
   sat off-screen behind an overflow scroller with no visible affordance —
   it read as a two-step process that had been cut off. Back to the vertical
   list the desktop layout uses, compacted. */
@media (max-width: 560px) {
    .esid-demo-rail {
        flex-direction: column;
        overflow-x: visible;
    }
    .esid-demo-step {
        flex-direction: row;
        text-align: left;
        min-width: 0;
        gap: 12px;
        padding: 10px 12px;
    }
    .esid-demo-step-dot {
        flex-shrink: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .esid-demo-scanline {
        animation: none;
        display: none;
    }
    .esid-demo-icon,
    .esid-demo-badge,
    .esid-demo-progress-bar {
        transition: none;
    }
}