/* ============================================================================ MogDock Operator Console — design system (P12). See ADR-007 (DECISIONS.md). Authoritative design: docs/operator/DESIGN_HANDOFF/.../README.md (+ .dc.html). Why a dedicated, TRACKED stylesheet (ratified adaptation, ADR-007): the operator console was unstyled because its layout linked the near-empty stylesheets/ application.css — NOT because Tailwind was missing (assets:precompile builds it fine). Switching the link to the gitignored Tailwind build instead would 500 operator request specs in CI, which render the layout but do not precompile (verified: with the build absent, tailwind.css/app.css resolve to nil while operator.css resolves). A tracked operator.css is CI-safe, is the pixel-precise home for the design, and fits the realm's CSP: style-src 'self' (no inline styles), script-src 'none' (no JS — theme is a server-set cookie → data-theme), font-src 'self' (self-hosted OFL fonts in app/assets/fonts; see fonts/PROVENANCE.md). ============================================================================ */ /* ── Self-hosted fonts (Instrument Sans is variable 400–700; IBM Plex Mono static) ── */ @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/InstrumentSans-400-265d6ea6.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/IBMPlexMono-400-d13bb5b4.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/IBMPlexMono-500-deab9c2b.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/IBMPlexMono-600-0fdd541f.woff2") format("woff2"); } /* ── Base reset. operator.css is the ONLY linked stylesheet for the realm, so it must own the page contract (margins/box-sizing/edge background), not the user-agent stylesheet (PR-192 re-review finding 2). The reference sets html,body{margin:0;padding:0;bg:#0e0f16}. ── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Default-dark edge bg behind .op-root, which paints the themed bg. SCOPED to .op-body (set by layouts/operator.html.erb) — deliberately NOT a bare `body`. This stylesheet is also emitted into the TENANT bundle, so an unscoped `body` rule painted #0e0f16 over every tenant page: sidebars and cards kept their own explicit backgrounds, but the page background and `text-content` headings went dark-on-dark. Dark themes hid it (--color-page is #18181b, nearly identical); every LIGHT theme was visibly broken. Found by owner UAT 2026-07-27. The rules above are safe unscoped: they duplicate Tailwind's preflight, which the tenant bundle already applies. Keep any NEW element-level rule scoped. */ body.op-body { background: #0e0f16; } /* ── Tokens + base. DARK is the default; light overrides under [data-theme="light"]. Tokens live on .op-root (a wrapper INSIDE ), not :root/, so the server-set data-theme is correct on every render even if Turbo ever swaps only — no JS sync. ── */ .op-root { --op-pg: #0e0f16; --op-sf: #12141f; --op-cd: #151726; --op-ln: #262940; --op-sub: #1d2032; /* --op-mut lightened + --op-oncrit darkened to meet WCAG AA 4.5:1 at the small text sizes they render (PR-192 review finding 1). */ --op-ink: #eceef8; --op-ink2: #9fa3c8; --op-mut: #7d8199; --op-input: #0e0f16; --op-acc: #8b8df7; --op-onacc: #14142b; --op-accwash: rgba(139,141,247,.14); /* --op-acc-2: the avatar gradient's 2nd stop, theme-safe so --op-onacc text clears AA over the WHOLE gradient (PR-192 re-review finding 1). --op-control-border: form-control boundary with >=3:1 non-text contrast vs the input fill + adjacent surface (WCAG 1.4.11, finding 2). */ --op-acc-2: #7477e1; --op-acc-hover: #a3a5f9; --op-control-border: #636575; --op-good: #34c77b; --op-ongood: #062616; --op-goodwash: rgba(52,199,123,.13); --op-warn: #f5a524; --op-onwarn: #241802; --op-warnwash: rgba(245,165,36,.12); --op-ser: #f07b3f; --op-onser: #2b1204; --op-serwash: rgba(240,123,63,.13); --op-crit: #f25a5a; --op-oncrit: #411818; --op-critwash: rgba(242,90,90,.12); min-height: 100vh; background: var(--op-pg); color: var(--op-ink); font-family: "Instrument Sans", system-ui, sans-serif; font-size: 13.5px; line-height: 1.45; } .op-root[data-theme="light"] { --op-pg: #f3f4f9; --op-sf: #ffffff; --op-cd: #ffffff; --op-ln: #e3e5f0; --op-sub: #edeff6; /* Semantic fills darkened so ALL real pairs clear WCAG AA 4.5:1: white-on-fill (badges), AND semantic text on its own translucent wash composited over the actual surface (chips on the top bar, warn/crit buttons + flashes on card/page). Muted darkened to clear it on the darkest near-white surface it renders on (input/page). (PR-192 findings 1 + re-review.) */ --op-ink: #1a1c2e; --op-ink2: #575c80; --op-mut: #696d83; --op-input: #f8f9fc; --op-acc: #5254d0; --op-onacc: #ffffff; --op-accwash: rgba(90,93,219,.10); --op-acc-2: #5254d0; --op-acc-hover: #4547bf; --op-control-border: #8a8c92; --op-good: #177345; --op-ongood: #ffffff; --op-goodwash: rgba(23,115,69,.10); --op-warn: #8c5a05; --op-onwarn: #ffffff; --op-warnwash: rgba(140,90,5,.10); --op-ser: #a44b1e; --op-onser: #ffffff; --op-serwash: rgba(164,75,30,.10); --op-crit: #b43737; --op-oncrit: #ffffff; --op-critwash: rgba(180,55,55,.10); } /* Base link color at ZERO specificity (:where) so any single-class component — buttons, nav items — keeps its own text color and hover (PR-192 review finding 2). */ :where(.op-root a) { color: var(--op-acc); } /* Link hover is a theme-aware color shift (--op-acc-hover: brighter in dark, darker in light) — it INCREASES contrast in both themes. The former filter: brightness(1.15) brightened the accent, which REDUCED contrast on light surfaces below AA (PR-195 review). Kept at :where zero specificity so component links (buttons/nav) keep their own color. */ :where(.op-root a:hover) { color: var(--op-acc-hover); } .op-root a { text-decoration: none; } .op-root ::placeholder { color: var(--op-mut); } .op-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .op-tablewrap { overflow-x: auto; } .op-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; } .op-muted { color: var(--op-mut); } .op-num { font-variant-numeric: tabular-nums; } /* ── Top bar ── */ .op-topbar { display: flex; align-items: center; gap: 16px; padding: 12px 28px; background: var(--op-sf); border-bottom: 1px solid var(--op-ln); position: sticky; top: 0; z-index: 10; } .op-wordmark { font-weight: 700; font-size: 15px; white-space: nowrap; } .op-wordmark span { color: var(--op-acc); } .op-navgroup { display: flex; gap: 2px; background: var(--op-pg); border: 1px solid var(--op-ln); border-radius: 10px; padding: 3px; } .op-navitem { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 8px; border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 12.5px; background: transparent; color: var(--op-ink2); white-space: nowrap; } .op-navitem:hover { color: var(--op-ink); } .op-navitem.is-active { background: var(--op-acc); color: var(--op-onacc); } .op-navcount { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; border-radius: 9px; background: var(--op-warn); color: var(--op-onwarn); font-size: 10.5px; font-weight: 700; } .op-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .op-statuschip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .op-statuschip .dot { width: 6px; height: 6px; border-radius: 50%; } .op-statuschip--good { background: var(--op-goodwash); color: var(--op-good); } .op-statuschip--good .dot { background: var(--op-good); } .op-statuschip--warn { background: var(--op-warnwash); color: var(--op-warn); } .op-statuschip--warn .dot { background: var(--op-warn); } .op-statuschip--neutral { background: var(--op-sub); color: var(--op-ink2); } .op-statuschip--neutral .dot { background: var(--op-mut); } .op-reauth { font-size: 11px; color: var(--op-mut); font-family: "IBM Plex Mono", ui-monospace, monospace; white-space: nowrap; } .op-themetoggle { padding: 5px 11px; border-radius: 8px; border: 1px solid var(--op-ln); background: var(--op-cd); cursor: pointer; font: inherit; font-weight: 600; font-size: 11.5px; color: var(--op-ink2); white-space: nowrap; } .op-avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--op-acc), var(--op-acc-2)); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: var(--op-onacc); } /* ── Page container ── */ .op-container { max-width: 1320px; margin: 0 auto; padding: 24px 32px 48px; } /* ── Headings ── */ .op-h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; } .op-sub { margin: 2px 0 0; color: var(--op-ink2); font-size: 13px; } .op-cardtitle { font-size: 13px; font-weight: 700; margin: 0 0 8px; } /* ── Cards ── */ .op-card { background: var(--op-cd); border: 1px solid var(--op-ln); border-radius: 14px; padding: 16px 18px; } /* Flush card: a full-width list table sits edge-to-edge (cell padding provides the inset). The inner .op-tablewrap owns overflow-x:auto, so a wide table scrolls IN PLACE and never forces the page to scroll horizontally (narrow-viewport contract, §2). */ .op-card--flush { padding: 0; } /* ── Status badges ── */ .op-badge { display: inline-block; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 3px 9px; white-space: nowrap; } .op-badge--good { background: var(--op-good); color: var(--op-ongood); } .op-badge--acc { background: var(--op-acc); color: var(--op-onacc); } .op-badge--warn { background: var(--op-warn); color: var(--op-onwarn); } .op-badge--ser { background: var(--op-ser); color: var(--op-onser); } .op-badge--crit { background: var(--op-crit); color: var(--op-oncrit); } .op-badge--neutral { background: var(--op-sub); color: var(--op-ink2); } /* ── Buttons ── */ .op-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; font: inherit; font-weight: 600; font-size: 12.5px; white-space: nowrap; } .op-btn--primary { background: var(--op-acc); color: var(--op-onacc); font-weight: 700; } .op-btn--secondary { background: var(--op-cd); border-color: var(--op-ln); color: var(--op-ink2); } .op-btn--secondary:hover { color: var(--op-ink); } .op-btn--warn { background: var(--op-warnwash); border-color: var(--op-warn); color: var(--op-warn); } .op-btn--crit { background: var(--op-critwash); border-color: var(--op-crit); color: var(--op-crit); } .op-btn:disabled, .op-btn.is-disabled { opacity: .5; cursor: not-allowed; } .op-btn--sm { padding: 4px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 600; } /* ── Inputs ── */ /* Control border is --op-control-border (not the fainter --op-ln divider) for a >=3:1 non-text boundary — the associated labels are visually hidden (PR-192 re-review finding 2). */ .op-input, .op-select { background: var(--op-input); border: 1px solid var(--op-control-border); border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--op-ink); } /* Filter row (§2 Customers list): a wrapping flex row so a narrow viewport stacks the controls instead of overflowing; the search field grows, everything is min-width:0 so it can shrink below its content width. */ .op-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .op-filters > * { min-width: 0; } .op-filter-grow { flex: 1 1 220px; } /* ── Tables ── */ .op-table { width: 100%; border-collapse: collapse; } .op-table thead th { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--op-mut); text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--op-ln); white-space: nowrap; } .op-table tbody td { font-size: 12.5px; padding: 10px 10px; border-bottom: 1px solid var(--op-sub); vertical-align: top; } .op-table thead th:first-child, .op-table tbody td:first-child { padding-left: 18px; } .op-table thead th:last-child, .op-table tbody td:last-child { padding-right: 18px; } .op-table tbody tr:hover { background: var(--op-sub); } .op-table .num { text-align: right; font-variant-numeric: tabular-nums; } .op-table .clickable { cursor: pointer; } .op-cellsub { display: block; font-size: 11.5px; color: var(--op-mut); } /* Muted table-cell text (the Access column, the mono slug subline) renders --op-ink2, NOT --op-mut: on a semantic row WASH or the --op-sub row-hover surface, --op-mut drops below WCAG AA 4.5:1 in both themes (PR-195 review) — --op-ink2 clears every wash + the hover surface. Scoped to table cells so muted text elsewhere is unaffected. */ .op-table td.op-muted, .op-table .op-cellsub { color: var(--op-ink2); } .op-actionname { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--op-acc); } .op-meta { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--op-ink2); } /* Row washes for non-nominal states + a 3px semantic LEFT EDGE (inset shadow avoids reflow). --good is used by the 360 features table (granted-addon override rows). */ .op-row--good { background: var(--op-goodwash); box-shadow: inset 3px 0 0 var(--op-good); } .op-row--warn { background: var(--op-warnwash); box-shadow: inset 3px 0 0 var(--op-warn); } .op-row--ser { background: var(--op-serwash); box-shadow: inset 3px 0 0 var(--op-ser); } .op-row--crit { background: var(--op-critwash); box-shadow: inset 3px 0 0 var(--op-crit); } .op-row--good:hover, .op-row--warn:hover, .op-row--ser:hover, .op-row--crit:hover { background: var(--op-sub); } /* ── KPI cards ── */ .op-kpi { background: var(--op-cd); border: 1px solid var(--op-ln); border-radius: 14px; padding: 16px 18px; } .op-kpi .label { font-size: 12px; font-weight: 600; color: var(--op-ink2); } .op-kpi .value { font-size: 30px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; } .op-kpi .sub { margin-top: 8px; font-size: 11.5px; font-weight: 600; display: inline-block; padding: 2px 8px; border-radius: 6px; } .op-kpi--alert { border-color: var(--op-crit); background: linear-gradient(160deg, var(--op-critwash), transparent 55%), var(--op-cd); } .op-kpi--alert .label, .op-kpi--alert .value { color: var(--op-crit); } .op-kpi--unavailable { border-style: dashed; } .op-kpi--unavailable .value { color: var(--op-mut); } .op-kpi--acc .value { color: var(--op-acc); } /* Text-valued KPI (e.g. Health tab "Last sync" timestamp) — the 30px numeric size overflows a date string, so text KPIs render at a readable 15px. */ .op-kpi .value.op-val-sm { font-size: 15px; } /* ── Customer 360 (§3) ── */ .op-back { display: inline-block; margin-bottom: 12px; font-weight: 600; font-size: 12.5px; } .op-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Definition grid (120px label / value) for the Subscription + Contact cards. */ .op-dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 7px 14px; font-size: 12.5px; margin: 0; } .op-dl dt { color: var(--op-mut); } .op-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* CSP-safe proportional distribution bar: one equal flex unit per org, ordered + colored by state, so adjacent same-state units form a proportional segment — no inline widths (PR-194 #5). */ /* Proportional state SEGMENTS (§1): one flex:1 unit per org (no gap WITHIN a state), and a 3px spacer ONLY at a state transition — so each state's total width is proportional to its count. overflow:hidden keeps the rounded bar from overflowing narrow viewports (PR-194 re-review). */ .op-bar { display: flex; gap: 0; height: 10px; margin-bottom: 12px; border-radius: 5px; overflow: hidden; } .op-bar-unit { flex: 1 1 0; min-width: 0; } .op-bar-gap { flex: 0 0 3px; } .op-bar-unit--good { background: var(--op-good); } .op-bar-unit--acc { background: var(--op-acc); } .op-bar-unit--warn { background: var(--op-warn); } .op-bar-unit--ser { background: var(--op-ser); } .op-bar-unit--crit { background: var(--op-crit); } .op-bar-unit--neutral { background: var(--op-sub); } /* Recent-activity rows: timestamp first (auto), activity prose second (§1 two-column). */ /* Activity track is shrink-safe (minmax(0,1fr)) and long mono action names wrap, so a wide audit action can't force horizontal overflow at narrow widths (PR-194 re-review finding 1). */ .op-activity { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; } .op-activity .op-actionname { overflow-wrap: anywhere; } /* ── Callout strips ── */ .op-callout { padding: 10px 14px; border-radius: 10px; font-size: 12.5px; border-left: 3px solid var(--op-acc); background: var(--op-accwash); } .op-callout--good { border-left-color: var(--op-good); background: var(--op-goodwash); } .op-callout--warn { border-left-color: var(--op-warn); background: var(--op-warnwash); } .op-callout--ser { border-left-color: var(--op-ser); background: var(--op-serwash); } .op-callout--crit { border-left-color: var(--op-crit); background: var(--op-critwash); } /* ── Tabs (underline) & sub-tabs (segmented) ── */ .op-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--op-ln); } .op-tab { padding: 8px 2px; font-size: 13px; font-weight: 600; color: var(--op-ink2); border-bottom: 2px solid transparent; margin-bottom: -1px; } .op-tab.is-active { color: var(--op-ink); border-bottom-color: var(--op-acc); } .op-subtabs { display: inline-flex; gap: 2px; background: var(--op-cd); border: 1px solid var(--op-ln); border-radius: 10px; padding: 3px; } .op-subtab { padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--op-ink2); } .op-subtab.is-active { background: var(--op-accwash); color: var(--op-ink); } /* ── Flash messages ── */ .op-flash { padding: 10px 14px; border-radius: 10px; font-size: 12.5px; margin-bottom: 16px; border-left: 3px solid; } .op-flash--notice { background: var(--op-goodwash); border-left-color: var(--op-good); color: var(--op-good); } .op-flash--alert { background: var(--op-critwash); border-left-color: var(--op-crit); color: var(--op-crit); } /* ── Onboard wizard (§6) ── Text uses --ink/--ink2 (both AA over --accwash — see stylesheet spec). */ .op-stepchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .op-stepchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--op-accwash); border: 1px solid var(--op-acc); color: var(--op-ink); } .op-stepchip .n { font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--op-ink2); } .op-field { display: flex; flex-direction: column; gap: 5px; } .op-field.op-field, fieldset.op-field { border: 0; padding: 0; margin: 0; min-width: 0; } /* fieldset reset */ .op-field .op-input, .op-field .op-select { width: 100%; } .op-label { font-size: 11.5px; font-weight: 600; color: var(--op-ink2); } /* Delivery choice cards: selected = accent border + accwash; disabled = 0.55 opacity (§6). */ .op-choice { display: block; border: 1px solid var(--op-ln); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; } .op-choice.is-selected { border-color: var(--op-acc); background: var(--op-accwash); } .op-choice.is-disabled { opacity: .55; } .op-choice input[type="radio"] { margin-right: 8px; vertical-align: middle; } .op-choice .op-choicesub { display: block; font-size: 11px; color: var(--op-ink2); margin-top: 2px; } /* One-time copy-link box (readonly-style; the operator selects + copies — no JS clipboard). */ .op-copylink { display: block; width: 100%; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; background: var(--op-input); border: 1px solid var(--op-control-border); border-radius: 9px; padding: 10px 12px; color: var(--op-ink); word-break: break-all; } /* ── Layout helpers (no arbitrary inline styles allowed under CSP) ── */ .op-grid { display: grid; gap: 14px; } /* Grid/stack children must be shrinkable (min-width:0 defeats the default min-width:auto) so wide content wraps/scrolls in place instead of overflowing the viewport (PR-194 finding 1). */ .op-grid > *, .op-stack > * { min-width: 0; } .op-grid-5 { grid-template-columns: repeat(5, 1fr); } .op-grid-3 { grid-template-columns: repeat(3, 1fr); } .op-grid-2 { grid-template-columns: 1fr 1fr; } .op-grid-wide { grid-template-columns: 1.6fr 1fr; } .op-stack { display: flex; flex-direction: column; gap: 14px; } .op-flex { display: flex; } .op-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .op-actions { display: flex; gap: 8px; justify-content: flex-end; } .op-w32 { width: 5.5rem; } .op-form { display: flex; flex-direction: column; gap: 10px; max-width: 32rem; } .op-form .op-input, .op-form .op-select { width: 100%; } .op-formrow { display: flex; align-items: center; gap: 12px; } .op-gap8 { gap: 8px; } .op-gap12 { gap: 12px; } .op-mt4 { margin-top: 16px; } .op-mb5 { margin-bottom: 20px; } .op-wrap { flex-wrap: wrap; } /* OC13A (#162, design §11): the legal-document plain-text preview. Legal bodies are ESCAPED PLAIN TEXT — never HTML, never markdown — so the preview is a

 that
   preserves the authored line breaks and wraps instead of overflowing the card. */
.op-legalbody { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px;
                line-height: 1.6; color: var(--op-ink); margin: 0; }
.op-textarea { width: 100%; min-height: 18rem; resize: vertical; font-family: inherit; }
@media (max-width: 900px) {
  .op-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .op-grid-3, .op-grid-2, .op-grid-wide { grid-template-columns: 1fr; }
  /* PR-192 review finding 3: the top bar + its right cluster + the nav group must wrap on
     narrow viewports instead of overflowing. */
  .op-topbar { flex-wrap: wrap; padding: 12px 16px; }
  .op-right { flex-wrap: wrap; justify-content: flex-start; }
  .op-navgroup { flex-wrap: wrap; }
  .op-container { padding: 20px 16px 40px; }
}

/* ── OC16C (#165): operator ticket thread + right rail ── */
.op-msgauthor { font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.op-msgbody { margin-top: 8px; font-size: 13px; white-space: pre-wrap; color: var(--op-ink2); }
.op-attachments { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.op-chip { display: inline-block; border: 1px solid var(--op-ln); border-radius: 6px; padding: 3px 8px; font-size: 11.5px; }
.op-link { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 12px; }
.op-empty { padding: 24px 16px; text-align: center; color: var(--op-mut); font-size: 12.5px; }

/* ── OC17A (#166): support-queue nav pill ── */
.op-navpill { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: var(--op-warn); color: var(--op-onwarn); font-size: 11px; font-weight: 700; text-align: center; }