/* admin-utilities.css — AD-UTIL (/admin/utilities) and its tools (Jeff, 2026-09-17).
   Token-bound only (F-R01). Phone first: one column at 375, nothing pans; the Email
   test page puts the settings and the checks side by side from 1100 up. */

/* --- The index: one tile per tool ------------------------------------------ */
.util-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--space-lg);
    max-width: 1200px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.util-tile__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    height: 100%;
    padding: var(--container-pad-dense);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    background-color: var(--surface-raised);
    color: var(--text-primary-on-raised);
    text-decoration: none;
}

.util-tile__link:hover {
    border-color: var(--accent);
    background-color: var(--surface-hover);
}

.util-tile__link:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.util-tile__name {
    font-size: var(--font-size-1);
    font-weight: 600;
}

.util-tile__desc {
    color: var(--text-secondary);
}

/* --- Email test --------------------------------------------------------------- */
.util-email {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-xl);
    max-width: 1200px;
}

@media (min-width: 1100px) {
    .util-email {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }
}

.util-source {
    margin: 0;
    color: var(--text-secondary);
}

.util-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--field-gap);
}

/* The grid spaces the rows; the stacked-form margin would misalign them. */
.util-form .field-group + .field-group {
    margin-top: 0;
}

@media (min-width: 600px) {
    .util-form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .util-form__wide {
        grid-column: 1 / -1;
    }
}

.util-form__server {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11ch;
    gap: var(--space-md);
}

.util-form .adm-check {
    margin-top: var(--hint-gap);
    margin-bottom: 0;
}

.util-test-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.util-send {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-md);
}

.util-send .field-group {
    flex: 1 1 24ch;
    min-width: 0;
}

/* --- The result: a verdict in words, then each step with a mark beyond color --- */
.util-report {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-hairline);
}

.util-verdict {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--status-info-border);
    border-radius: var(--radius-control);
    font-weight: 600;
}

.util-verdict--ok {
    border-color: var(--status-success-border);
    background-color: var(--status-success-surface);
    color: var(--status-success-text);
}

.util-verdict--fail {
    border-color: var(--status-danger-border);
    background-color: var(--status-danger-surface);
    color: var(--status-danger-text);
}

.util-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.util-step {
    display: grid;
    grid-template-columns: 1.5em minmax(0, 1fr);
    column-gap: var(--space-sm);
    row-gap: 2px;
}

.util-step__mark {
    grid-row: span 2;
    font-family: var(--font-numeric);
    font-weight: 700;
    text-align: center;
}

.util-step__name {
    color: var(--text-primary-on-raised);
    font-weight: 600;
}

.util-step__detail {
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.util-step--passed .util-step__mark {
    color: var(--status-success-text);
}

.util-step--warning .util-step__mark {
    color: var(--status-warning-text);
}

.util-step--failed .util-step__mark {
    color: var(--status-danger-text);
}

.util-step--failed .util-step__detail {
    color: var(--text-primary-on-raised);
}

.util-step--note .util-step__mark {
    color: var(--text-secondary);
}

.util-transcript summary {
    min-height: 24px;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    cursor: pointer;
}

.util-transcript__text {
    max-height: 24rem;
    margin: var(--space-sm) 0 0;
    padding: var(--space-sm) var(--space-md);
    overflow: auto;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    background-color: var(--surface-deep);
    color: var(--text-primary-on-raised);
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.util-report__when {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}