/* Settings, Call details reached from them, and leaving. */

.pod-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 40ch), 1fr));
    align-items: start;
    gap: var(--space-8);
}

.pod-settings-card {
    display: grid;
    gap: var(--space-16);
    padding: var(--space-12);
}

.pod-group {
    display: grid;
    gap: var(--space-7);
}

.pod-group[hidden] {
    display: none;
}

.pod-group-title {
    margin: 0;
}

.pod-version {
    margin: 0;
}

/* A row that leads to another page. */
.pod-link-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    padding: var(--space-6);
    border: var(--border-width-hairline) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-subtle);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-md);
    text-align: start;
    cursor: pointer;
}

.pod-link-row:hover {
    background-color: var(--color-surface-muted);
}

.pod-link-row:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
}

.pod-link-row svg {
    flex: none;
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
    color: var(--color-text-muted);
}

.pod-link-row-text {
    display: grid;
    flex: 1;
    min-width: 0;
    font-weight: var(--font-weight-medium);
}

/* ---------- Call details ---------- */

.pod-details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 52ch), 1fr));
    align-items: start;
    gap: var(--space-8);
}

.pod-details > .bu-hint {
    grid-column: 1 / -1;
    margin: 0;
}

.pod-details-card {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-12);
}

.pod-details-title {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin: 0;
}

.pod-details-tag {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.pod-state {
    flex: none;
    width: var(--space-5);
    height: var(--space-5);
    border-radius: var(--radius-full);
    background-color: var(--color-success);
}

.pod-state.is-problem {
    background-color: var(--color-danger);
}

.pod-details-list {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    font-size: var(--font-size-sm);
}

.pod-details-list > div {
    display: grid;
    grid-template-columns: 14ch minmax(0, 1fr);
    gap: var(--space-8);
}

.pod-details-list dt {
    color: var(--color-text-muted);
}

.pod-details-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.pod-details-list > .is-problem dd {
    color: var(--color-danger-text);
}

@media (max-width: 520px) {
    .pod-settings-card,
    .pod-details-card {
        padding: var(--space-8);
    }

    .pod-details-list > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}

/* ---------- Leaving ---------- */

.pod-leave-form {
    display: grid;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.pod-leave-form .bu-check-group[hidden] {
    display: none;
}