/* identity-aws demo: the look comes from bandlab-accounts.css (BandLab's accounts stylesheet). This file only adds what the demo has
   and the accounts site doesn't (the profile page, the birthday row), using the same design tokens. */

.hidden { display: none !important; }

.demo-date-row { display: grid; gap: var(--ds-space-8, 8px); grid-template-columns: 1fr 1fr 1.6fr; }
.demo-second-step {
    border: 1px dashed var(--ds-color-border-inactive-neutral, rgba(64, 102, 128, 0.3));
    border-radius: 8px;
    margin: 4px 0 16px;
    padding: 8px 12px;
}
.demo-second-step legend { padding: 0 4px; }
/* The accounts stylesheet hides native radios (it styles its own); the demo's choice keeps the browser's. */
.demo-second-step input[type="radio"] {
    -webkit-appearance: radio;
    appearance: auto;
    clip: auto;
    height: 16px;
    margin: 0;
    opacity: 1;
    position: static;
    width: 16px;
}
.demo-loading { padding-block: 40px; text-align: center; }
.demo-check { align-items: center; display: flex; gap: 8px; margin-block: 8px; }
.demo-check input { accent-color: var(--bandlab-brand-color-red, #f12c18); }

/* Profile page (no accounts-site equivalent): two roomy columns, full-width lists. */
.demo-wide { max-width: 1040px !important; }
.demo-profile-head { align-items: center; display: flex; gap: 20px; margin: 40px 0 32px; }
.demo-profile-name { flex: 1; min-width: 0; }
.demo-profile-name h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.demo-avatar {
    align-items: center;
    background: var(--bandlab-brand-color-red, #f12c18);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex: none;
    font-size: 28px;
    font-weight: 500;
    height: 72px;
    justify-content: center;
    width: 72px;
}
.demo-grid { align-items: start; display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 48px; }
.demo-panel {
    background: var(--ds-color-surface-inactive-neutral-2, #fff);
    border: 1px solid var(--ds-color-border-inactive-neutral, rgba(64, 102, 128, 0.16));
    border-radius: 16px;
    min-width: 0;
    padding: 28px;
}
.demo-panel-wide { grid-column: 1 / -1; }
.demo-panel h2 { margin: 0 0 20px; }
.demo-panel h2:has(+ .demo-panel-lead) { margin-bottom: 6px; }
.demo-panel-lead { margin: 0 0 20px; }
.demo-subheading { margin: 28px 0 8px !important; }
.demo-panel form .form-field-default { margin-top: 8px; }
.demo-panel [role="status"]:not(.hidden) { margin-top: 16px; }

/* Account facts: one labelled row each, values wrap without squeezing the labels. */
.demo-facts { margin: 0; }
.demo-facts > div {
    border-top: 1px solid var(--ds-color-border-inactive-neutral, rgba(64, 102, 128, 0.16));
    display: grid;
    gap: 16px;
    grid-template-columns: 140px minmax(0, 1fr);
    padding: 10px 0;
}
.demo-facts > div:first-child { border-top: 0; padding-top: 0; }
.demo-facts dt { color: var(--ds-color-glyphs-secondary, #6b7a87); }
.demo-facts dd { margin: 0; overflow-wrap: anywhere; }
.demo-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

.demo-list { list-style: none; margin: 0; padding: 0; }
.demo-list li {
    align-items: center;
    border-top: 1px solid var(--ds-color-border-inactive-neutral, rgba(64, 102, 128, 0.16));
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 14px 0;
}
.demo-list li:first-child { border-top: 0; padding-top: 0; }
.demo-list-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.demo-list-title { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; font-weight: 500; }
.demo-list-meta { color: var(--ds-color-glyphs-secondary, #6b7a87); font-size: 13px; }
.demo-list .ds-button { flex: none; white-space: nowrap; }
.demo-panel-wide .form-field-default { display: flex; justify-content: flex-end; }
.demo-panel-wide .form-field-default .ds-button-full-width { width: auto; }
.demo-badge {
    background: var(--ds-color-surface-inactive-translucent, rgba(64, 102, 128, 0.08));
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    padding: 2px 10px;
    white-space: nowrap;
}
.demo-panel pre {
    background: var(--ds-color-surface-inactive-translucent, rgba(64, 102, 128, 0.08));
    border-radius: 8px;
    font-size: 12px;
    max-height: 360px;
    overflow: auto;
    padding: 12px;
}
.demo-panel details { border-top: 1px solid var(--ds-color-border-inactive-neutral, rgba(64, 102, 128, 0.16)); padding: 4px 0; }
.demo-panel details:first-of-type { border-top: 0; }
.demo-panel details summary { cursor: pointer; font-weight: 500; margin: 8px 0; }

@media (max-width: 760px) {
    .demo-grid { grid-template-columns: minmax(0, 1fr); }
    .demo-panel { padding: 20px; }
    .demo-facts > div { grid-template-columns: 120px minmax(0, 1fr); }
}

@media (max-width: 480px) {
    .demo-profile-head { flex-wrap: wrap; }
}