/* External request and visitor guidance stay separate from the product frame. */
.demo-page {
    --request-outset: clamp(40px, 6vw, 84px);
    padding-left: calc(var(--request-outset) + 16px);
}

.demo-workspace-shell {
    container-type: inline-size;
    margin-top: 24px;
}

.incoming-request-graphic,
.request-completion-overlay {
    position: absolute;
    top: 0;
    left: calc(-1 * var(--request-outset));
    z-index: 5;
    width: min(50cqw, 650px);
    height: auto;
    /* Offset the PNG's transparent upper margin without changing the asset. */
    transform: translateY(-41%) rotate(-1.75deg);
    pointer-events: none;
}

/* Keep identity and status clear of the graphic within the existing header. */
.workspace-header {
    padding-left: calc(min(50cqw, 650px) - var(--request-outset) - 12px);
    min-height: calc(min(50cqw, 650px) * 0.28 + 24px);
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 800px) {
    .demo-page {
        --request-outset: 20px;
        padding-left: 28px;
    }

    .demo-workspace-shell {
        margin-top: 64px;
    }

    .incoming-request-graphic,
    .request-completion-overlay {
        width: min(90cqw, 520px);
        left: calc(-1 * var(--request-outset));
    }

    .workspace-header {
        padding-left: var(--module-padding);
        padding-top: calc(min(90cqw, 520px) * 0.25 + 24px);
        min-height: 0;
    }
}

/* Match the graphic's bounds so the stamp stays attached at every size. */
.request-completion-overlay {
    aspect-ratio: 1448 / 1086;
    z-index: 6;
}

.request-resolved-stamp {
    position: absolute;
    top: 39%;
    right: 9%;
    padding: 0.3em 0.55em;
    border: 2px solid #078773;
    border-radius: 4px;
    background: rgba(229, 250, 245, 0.94);
    color: #087461;
    font-family: var(--display-font);
    font-size: clamp(10px, 1.5cqw, 18px);
    font-weight: 700;
    letter-spacing: 0.12em;
    transform: rotate(-8deg);
    animation: request-resolved-enter 220ms ease-out both;
}

@keyframes request-resolved-enter {
    from { opacity: 0; transform: rotate(-8deg) scale(1.08); }
    to { opacity: 1; transform: rotate(-8deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .request-resolved-stamp { animation: none; }
}

.trial-success-toast:not(:empty) {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 30;
    max-width: calc(100vw - 48px);
    padding: 16px 22px;
    border: 1px solid var(--teal);
    border-radius: 12px;
    background: #123b35;
    color: #e5faf5;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
    font-weight: 600;
    pointer-events: none;
}

.action-row #trial-result {
    color: var(--demo-muted);
    font-size: 0.78rem;
}

/* Aligned state, description, and control columns in an extensible list. */
.action-stack {
    gap: 9px;
}

.action-row {
    --capability-accent: #a8b8ca;
    --capability-tint: rgba(148, 163, 184, 0.15);
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 184px;
    gap: 0;
    align-items: center;
    border: 1px solid rgba(158, 202, 190, 0.44);
    border-left: 4px solid var(--capability-accent);
    border-radius: 10px;
    background: linear-gradient(110deg, #132123, var(--demo-panel-2));
    overflow: hidden;
    padding: 0;
}

.action-description {
    align-self: stretch;
    min-width: 0;
    padding: 17px 20px;
    border-right: 1px solid var(--demo-line);
}

.action-row .inline-action {
    justify-self: center;
    min-width: 0;
    max-width: calc(100% - 16px);
    margin: 8px;
    white-space: normal;
}

.action-row:has(.action-state.ready) {
    --capability-accent: var(--teal);
    --capability-tint: rgba(66, 214, 201, 0.09);
}

.action-row:has(.action-state.approval),
.action-row:has(.action-state.awaiting) {
    --capability-accent: #fdba74;
    --capability-tint: rgba(253, 186, 116, 0.09);
}

.action-row[data-selected="true"] {
    border-left-color: var(--capability-accent);
}

.action-row .action-state {
    display: flex;
    width: auto;
    margin: 0;
    padding: 16px 12px;
    align-self: stretch;
    align-items: center;
    border-right: 1px solid rgba(158, 202, 190, 0.3);
    border-radius: 9px 0 0 9px;
    background: var(--capability-tint);
    color: var(--capability-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

@media (max-width: 680px) {
    .action-row {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .action-row .action-state {
        grid-row: 1 / 3;
    }

    .action-row .inline-action {
        grid-column: 2;
        justify-self: start;
        margin: 0 16px 16px;
    }

    .action-description {
        border-right: 0;
    }
}