/* Shared structure for rich Try It experiences. Demo CSS only owns visuals
   that are specific to the API concept being demonstrated. */
.demo-info-panel {
    --demo-panel-space-1: 4px;
    --demo-panel-space-2: 8px;
    --demo-panel-space-3: 12px;
    --demo-panel-space-4: 16px;
    --demo-panel-space-5: 20px;
    --demo-control-height: 42px;
    --demo-card-border: #dbe2ec;
    --demo-card-background: #fff;
    --demo-card-muted-background: #f7f9fc;
    container-type: inline-size;
}

[data-panel-content="try"] > .panel-kicker + h2 {
    margin-top: var(--demo-panel-space-2);
}

[data-panel-content="try"] > h2 + p {
    margin-bottom: 0;
}

/* Custom demos may use domain-specific section classes instead of tryit-card.
   Preserve the same vertical rhythm between their boxes in compact mode. */
.demo-info-panel:not(.is-code-expanded) [data-panel-content="try"] > section + section {
    margin-top: var(--demo-panel-space-3);
}

.tryit-grid {
    display: grid;
    gap: var(--demo-panel-space-3);
}

.tryit-stack {
    display: grid;
    gap: var(--demo-panel-space-3);
    margin-top: var(--demo-panel-space-4);
}

.tryit-card {
    min-width: 0;
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px solid #dbe2ec;
    border-radius: 8px;
    background: #fff;
}

.tryit-stack > .tryit-card,
.tryit-grid > .tryit-card {
    margin-top: 0;
}

.tryit-card--primary {
    border-color: #ef9dc7;
    background: #fff8fc;
}

.tryit-card--muted {
    background: #f7f9fc;
}

.tryit-card--flush {
    padding: 0;
    overflow: hidden;
}

.tryit-card--flush > .tryit-card__header {
    min-height: 58px;
    margin: 0;
    padding: 10px 13px;
    align-items: center;
    background: var(--demo-card-muted-background);
    border-bottom: 1px solid var(--demo-card-border);
}

.tryit-card--active {
    border-color: #f06aaa;
    box-shadow: 0 10px 30px rgba(26, 40, 61, .08);
}

.tryit-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.tryit-card__header,
.tryit-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.tryit-card__header h3,
.tryit-section-heading h3 {
    margin: 2px 0 0;
    color: #202635;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.tryit-card__header p,
.tryit-section-heading p {
    margin: 3px 0 0;
    color: #77859a;
    font-size: 10px;
    line-height: 1.45;
}

.tryit-card__header output {
    color: #7b889c;
    font-size: 9px;
    white-space: nowrap;
}

.tryit-card__heading h3,
.tryit-card__heading p {
    margin: 0;
}

.tryit-card__heading h3 {
    color: #202635;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.tryit-card__heading p {
    margin-top: 3px;
    color: #77859a;
    font-size: 9px;
    line-height: 1.45;
}

.tryit-card__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #e81683;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tryit-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #e81683;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tryit-card__badge {
    flex: 0 0 auto;
    padding: 5px 8px;
    color: #52749c;
    background: #e8f1ff;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 750;
    white-space: nowrap;
}

.tryit-badge {
    flex: 0 0 auto;
    padding: 5px 8px;
    color: #52749c;
    background: #e8f1ff;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 750;
    white-space: nowrap;
}

.tryit-card--primary .tryit-card__badge {
    color: #a70f62;
    background: #fde4f1;
}

.tryit-card .demo-field-label,
.tryit-card .form-label {
    display: block;
    margin-top: 9px;
    margin-bottom: 0;
    color: #66758b;
    font-size: 11px;
    font-weight: 650;
}

.tryit-card .demo-text-input,
.tryit-card .form-control,
.tryit-card .form-select {
    margin-top: 4px;
    padding: 7px 9px;
    border-color: #dbe2ec;
    border-radius: 6px;
    min-height: var(--demo-control-height);
    font-size: 12px;
}

.tryit-field-grid,
.demo-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: var(--demo-panel-space-3);
}

.tryit-field,
.tryit-field-grid .demo-field-label {
    min-width: 0;
    margin: 0;
}

.tryit-field > .form-control,
.tryit-field > .form-select,
.tryit-field > .demo-text-input,
.tryit-field-grid .form-control,
.tryit-field-grid .form-select,
.tryit-field-grid .demo-text-input {
    width: 100%;
    min-width: 0;
    min-height: var(--demo-control-height);
    margin-top: 5px;
    padding: 8px 10px;
    border-color: #dbe2ec;
    border-radius: 6px;
    font-size: 12px;
}

.btn-demo-action {
    width: auto;
    max-width: 100%;
    min-height: 44px;
    justify-self: start;
    align-self: start;
    justify-content: center;
    padding: 9px 20px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

/* Contract selectors deliberately carry panel scope. Demo styles are loaded
   first and may arrange controls, while these shared dimensions and type
   remain consistent across every Try It tab. */
.demo-info-panel [data-panel-content="try"] .btn-demo-action {
    width: auto;
    max-width: 100%;
    min-height: 44px;
    padding: 9px 20px;
    justify-self: start;
    align-self: start;
    justify-content: center;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.demo-info-panel [data-panel-content="try"] .demo-field-label {
    display: block;
    color: #66758b;
    font-size: 11px;
    font-weight: 650;
}

.demo-info-panel [data-panel-content="try"] .demo-text-input,
.demo-info-panel [data-panel-content="try"] .form-control,
.demo-info-panel [data-panel-content="try"] .form-select {
    min-width: 0;
    min-height: var(--demo-control-height);
    color: #24354d;
    background-color: #fff;
    border-color: var(--demo-card-border);
    border-radius: 6px;
    font-size: 12px;
}

.demo-action-grid,
.tryit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--demo-panel-space-2);
    margin-top: var(--demo-panel-space-3);
}

.demo-action-grid .btn-demo-action,
.tryit-actions .btn-demo-action {
    width: auto;
    margin-top: 0;
}

.tryit-actions--stacked {
    align-items: flex-start;
    flex-direction: column;
}

.tryit-actions--stacked .btn-demo-action {
    min-width: 220px;
}

.tryit-help {
    margin: 8px 0 0;
    color: #77859a;
    font-size: 10px;
    line-height: 1.5;
}

.tryit-result {
    min-width: 0;
    margin-top: var(--demo-panel-space-3);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--demo-card-border);
    border-radius: 6px;
}

.tryit-result--success {
    border-color: #abd7c9;
    background: #f4fbf8;
}

.tryit-result--accent {
    border-color: #efb8d4;
    background: #fff8fc;
}

.tryit-card .demo-action-grid {
    margin-top: 11px;
}

.tryit-card > .btn-demo-action,
.tryit-card > label.btn-demo-action {
    margin-top: 11px;
}

.tryit-card .demo-output,
.tryit-card .demo-output-highlight {
    margin-top: 10px;
}

.tryit-property-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #dbe2ec;
    border-radius: 6px;
}

.tryit-property-grid > div {
    min-width: 0;
    padding: 8px 9px;
    background: #fff;
    border-right: 1px solid #dbe2ec;
    border-bottom: 1px solid #dbe2ec;
}

.tryit-property-grid > div:nth-child(even) { border-right: 0; }
.tryit-property-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
.tryit-property-grid span,
.tryit-property-grid strong { display: block; }
.tryit-property-grid span { color: #77859a; font-size: 8px; }
.tryit-property-grid strong { margin-top: 2px; overflow: hidden; color: #253b57; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.tryit-empty-state {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    color: #77859a;
    font-size: 9px;
    line-height: 1.45;
}

.tryit-empty-state::before {
    content: "";
    width: 34px;
    height: 42px;
    flex: 0 0 34px;
    border: 1px solid #b8c5d5;
    background: repeating-linear-gradient(to bottom, #fff 0 7px, #d8e0ea 7px 9px);
}

/* Reusable progress state for Try It surfaces populated through asynchronous
   product API callbacks. The overlay does not alter the surface dimensions. */
.demo-async-surface {
    position: relative;
}

.demo-async-state {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: #5d687a;
    background: rgba(247, 248, 251, .88);
    border-radius: inherit;
    backdrop-filter: blur(1.5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, visibility 0s linear .16s;
    font-size: 10px;
    font-weight: 700;
}

.demo-async-surface.is-updating .demo-async-state {
    opacity: 1;
    visibility: visible;
    transition: opacity .16s ease, visibility 0s linear 0s;
}

.demo-async-state__spinner {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 2px solid #e6b7d2;
    border-top-color: #e81683;
    border-radius: 50%;
    animation: demo-async-spin .7s linear infinite;
}

@keyframes demo-async-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .demo-async-state,
    .demo-async-surface.is-updating .demo-async-state { transition: none; }
    .demo-async-state__spinner { animation: none; }
}

@container (max-width: 440px) {
    .tryit-field-grid,
    .demo-field-grid {
        grid-template-columns: 1fr;
    }
}

@container (max-width: 300px) {
    .demo-action-grid,
    .tryit-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .demo-action-grid .btn-demo-action,
    .tryit-actions .btn-demo-action,
    .tryit-actions--stacked .btn-demo-action,
    .demo-info-panel [data-panel-content="try"] .demo-action-grid .btn-demo-action,
    .demo-info-panel [data-panel-content="try"] .tryit-actions .btn-demo-action {
        width: 100%;
        min-width: 0;
    }
}

/* An expanded information panel has room for the same compact cards in two
   columns. Their internal sizing stays unchanged and therefore remains easy
   to scan instead of stretching across the complete overlay. */
@media (min-width: 992px) {
    .demo-info-panel.is-code-expanded .tryit-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 18px;
        margin-top: 18px;
    }

    .demo-info-panel.is-code-expanded .tryit-grid > .tryit-card {
        margin-top: 0;
    }

    .demo-info-panel.is-code-expanded .tryit-grid > .tryit-card--wide {
        grid-column: 1 / -1;
    }
}