/* Layout helpers of the browser app on top of the visual system in css/design.css, taken from the mockup of card I-25. */
h1:focus {
    outline: none;
}

.ev-stack { display: flex; flex-direction: column; gap: 16px; }
.ev-stack--tight { gap: 2px; }
.ev-stack--compact { gap: 8px; }
.ev-stack--dialog { gap: 10px; }
.ev-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ev-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ev-actions-end { display: flex; gap: 8px; justify-content: flex-end; }
.ev-divider { height: 1px; background: var(--border-subtle); }
.ev-text-secondary { color: var(--text-secondary); }
.ev-text-primary { color: var(--text-primary); }
.ev-text-pretty { text-wrap: pretty; }

a.ev-nav { text-decoration: none; }
.ev-topbar__logout { display: contents; }

.ev-login { min-height: 100vh; display: flex; flex-direction: column; }
.ev-login__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ev-login__card { width: 400px; box-sizing: border-box; padding: 32px 32px 24px; display: flex; flex-direction: column; gap: 16px; }
.ev-login__brand { display: flex; justify-content: center; margin-bottom: 8px; }
.ev-login__title { font-size: 24px; line-height: 28px; }
.ev-login__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid var(--border-subtle); }

.ev-cell-flag { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.ev-cell-flag--blocked { color: var(--text-secondary); }
.ev-cell-flag--active { color: var(--text-success); }
.ev-cell-mono { font: var(--type-mono-sm); }
.ev-cell-actions { display: flex; gap: 2px; justify-content: flex-end; }
.ev-dialog--wide { width: 520px; }
.ev-dialog__icon { display: flex; color: var(--steel-600); margin-top: 3px; }

.ev-import-testset { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: -8px; }
.ev-upload { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.ev-upload__head { display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.ev-upload__headline { font: 700 18px/24px var(--font-display); letter-spacing: .01em; }
.ev-upload__track { height: 8px; border-radius: 2px; background: var(--grey-200); overflow: hidden; }
.ev-upload__fill { height: 100%; border-radius: 2px; background: var(--steel-600); transition: width 120ms; }
.ev-skipped { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-skipped__path { font: var(--type-mono-sm); margin-right: 8px; }
.ev-row-note { display: flex; flex-direction: column; gap: 6px; }
.ev-row-note__todo { padding-left: 20px; font: var(--type-caption); color: var(--text-primary); }
.ev-cell-over { color: var(--text-danger); font-weight: 600; }