/* The admin area's own layout: toolbars, the release editor, the markup findings, the side-by-side
 * document comparison and the change history. Tokens only; every flex/grid rule has its [hidden] twin. */

.admin-intro { margin-bottom: var(--sp-4); }

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.admin-toolbar[hidden] { display: none; }
.admin-toolbar .field { flex: 1 1 12rem; margin: 0; }

.admin-panel { margin-bottom: var(--sp-6); }
.admin-panel[hidden] { display: none; }

.admin-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.admin-card[hidden] { display: none; }
.admin-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.admin-card__head[hidden] { display: none; }
.admin-card__title { margin: 0; font-size: var(--fs-300); }

.admin-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.admin-badges[hidden] { display: none; }

.admin-meta { font-size: var(--fs-100); color: var(--color-text-muted); }

.admin-form {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.admin-form[hidden] { display: none; }
.admin-form__wide { grid-column: 1 / -1; }
.admin-form .field { margin: 0; }

.admin-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    margin: 0 0 var(--sp-3);
    min-width: 0;
}
.admin-fieldset legend { font-weight: 600; padding: 0 var(--sp-1); }

.admin-code { font-family: var(--font-mono); font-size: var(--fs-200); }

.admin-input-num { max-width: 7rem; }

.admin-warning {
    background: var(--color-warning-bg);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
}
.admin-warning[hidden] { display: none; }

/* What the markup check found, under the field it is about. */
.findings { list-style: none; margin: var(--sp-2) 0 0; padding: 0; font-size: var(--fs-200); }
.findings[hidden] { display: none; }
.finding { padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); margin-bottom: var(--sp-1); }
.finding--error { background: var(--color-danger-bg); color: var(--color-danger); }
.finding--warning { background: var(--color-warning-bg); }

/* Official language | English. One column on a phone and a tablet, two from 1032px up. */
.compare-grid {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: minmax(0, 1fr);
}
.compare-grid[hidden] { display: none; }
@media (min-width: 1032px) {
    .compare-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.compare-grid__title { margin: 0 0 var(--sp-2); font-size: var(--fs-300); }

/* The change history's before/after: long texts wrap instead of widening the page. */
.diff-value {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: var(--fs-100);
    margin: 0;
}
.diff-value--before { color: var(--color-danger); }
.diff-value--after { color: var(--success-ink); }

.admin-break { overflow-wrap: anywhere; }