/* The operations console's styles (ARCHITECTURE.md 6.14) in the Segproof design system: css/tokens.css (loaded first)
   holds the colours, type and spacing. A plain console: a navy top bar, a narrow navigation and dense tables. */

@font-face {
    font-display: swap;
    font-family: "Archivo";
    font-stretch: 62% 125%;
    font-style: normal;
    font-weight: 100 900;
    src: url("fonts/Archivo-Variable.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2");
}

html, body {
    background: var(--sp-canvas);
    color: var(--sp-text);
    font-family: var(--sp-font);
    font-size: var(--sp-fs-ui);
    margin: 0;
}

.skip-link { left: -9999px; position: absolute; }
.skip-link:focus { background: var(--sp-surface); left: 8px; padding: 8px; top: 8px; z-index: 10; }

.ops-top {
    align-items: center;
    background: var(--sp-navy-900);
    color: var(--sp-on-navy);
    display: flex;
    gap: 16px;
    height: 52px;
    padding: 0 20px;
}

.ops-lockup { align-items: center; color: var(--sp-on-navy); display: flex; font-weight: 600; gap: 10px; text-decoration: none; }
.ops-spacer { flex: 1; }
.ops-who { color: var(--sp-on-navy-muted); }
.ops-sign-out button {
    background: none;
    border: 1px solid var(--sp-navy-border);
    border-radius: var(--sp-radius-control);
    color: var(--sp-on-navy);
    cursor: pointer;
    font: inherit;
    padding: 4px 12px;
}

.ops-body { display: flex; min-height: calc(100vh - 52px); }
.ops-nav { background: var(--sp-surface); border-right: 1px solid var(--sp-border); display: flex; flex-direction: column; gap: 2px; padding: 16px 8px; width: 200px; }
.ops-nav-link { border-radius: var(--sp-radius-control); color: var(--sp-text); padding: 8px 12px; text-decoration: none; }
.ops-nav-link:hover { background: var(--sp-steel-50); }
.ops-nav-link.active { background: var(--sp-steel-50); color: var(--sp-steel-700); font-weight: 600; }
.ops-main { flex: 1; max-width: 1280px; min-width: 0; padding: 20px 28px 48px; }
.ops-plain { margin: 48px auto; max-width: 560px; padding: 0 16px; }

h1 { font-size: var(--sp-fs-h1); margin: 4px 0 8px; }
h2 { font-size: var(--sp-fs-h2); margin: 24px 0 8px; }
a { color: var(--sp-steel-600); }
.mono { font-family: var(--sp-font-mono); font-size: var(--sp-fs-mono); }
.ops-sub, .ops-hint { color: var(--sp-text-muted); }
.ops-hint { font-size: var(--sp-fs-caption); }

.ops-search, .ops-filters, .ops-actions { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.ops-pager { display: flex; gap: 8px; margin-top: 12px; }

.ops-table { background: var(--sp-surface); border: 1px solid var(--sp-border); border-collapse: collapse; font-size: var(--sp-fs-table); width: 100%; }
.ops-table th { background: var(--sp-surface-2); font-weight: 600; text-align: left; }
.ops-table th, .ops-table td { border-bottom: 1px solid var(--sp-border); padding: 6px 10px; vertical-align: top; }
.ops-table .num { text-align: right; white-space: nowrap; }
.ops-emails td { vertical-align: middle; }

.ops-facts { display: grid; gap: 4px 16px; grid-template-columns: max-content 1fr; margin: 0; }
.ops-facts dt { color: var(--sp-text-muted); }
.ops-facts dd { margin: 0; }

.ops-panel, .ops-notice {
    background: var(--sp-surface);
    border: 1px solid var(--sp-border-strong);
    border-radius: var(--sp-radius-card);
    margin: 12px 0;
    max-width: 720px;
    padding: 12px 16px;
}
.ops-notice { border-color: var(--sp-steel-border); }

.ops-error { color: var(--sp-fail); }
.ops-done { color: var(--sp-pass); }

.ops-primary {
    background: var(--sp-steel-600);
    border-radius: var(--sp-radius-control);
    color: #fff;
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
}
.ops-primary:focus-visible, .ops-nav-link:focus-visible { outline: 2px solid var(--sp-steel-500); outline-offset: 2px; }