/* Shared structure for rich Try It experiences. Demo CSS only owns visuals
   that are specific to the API concept being demonstrated. */
.tryit-grid {
    display: block;
}

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

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

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

.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__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-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-card--primary .tryit-card__badge {
    color: #a70f62;
    background: #fde4f1;
}

.tryit-card .demo-field-label,
.tryit-card .form-label {
    margin-top: 9px;
    margin-bottom: 0;
    color: #66758b;
    font-size: 9px;
    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;
    font-size: 10px;
}

.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);
}

/* 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;
    }
}