/* * Meridian primitives — eyebrow, sections, banners, cards, segmented, taginput. * All driven by tokens in meridian-tokens.css. Mirrors the design language * captured in /docs/ux/claude-design/screen-settings.jsx and overlay-components.jsx. */ /* -------- Section header (eyebrow + title + actions) -------------- */ .m-section-header { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--meridian-border-hair); margin-bottom: 22px; } .m-section-header__main { flex: 1; min-width: 0; } .m-section-header__actions { display: flex; gap: 8px; align-items: center; } .m-eyebrow { font-family: var(--meridian-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; /* I-audit fix — text-dim (#6c7482) on bg (#f3f5f8) is 4.31:1, just below WCAG 2.1 AA 4.5:1 threshold. text-mid (#3d4450) gives ~8:1. */ color: var(--meridian-text-mid); margin-bottom: 4px; display: block; } .m-section-header__title { /* I-audit fix — element changed from
to

for page-has-heading-one; reset browser-default h1 margins so the visual position is unchanged. */ margin: 0; font-size: 20px; font-weight: 600; color: var(--meridian-text); letter-spacing: -0.3px; line-height: 1.2; } .m-section-header__subtitle { font-size: 12.5px; color: var(--meridian-text-mid); line-height: 1.6; margin-top: 4px; max-width: 720px; } /* -------- Section row (label column + form column) ---------------- */ .m-section { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 18px 0; border-top: 1px solid var(--meridian-border-hair); } .m-section:first-of-type { border-top: 0; padding-top: 4px; } .m-section__label-col { padding-top: 4px; } .m-section__label { font-size: 13px; font-weight: 600; color: var(--meridian-text); margin-bottom: 4px; } .m-section__hint { font-size: 11.5px; /* I-audit B1: --meridian-text-dim (#6c7482) = 4.40:1 at 11.5px — just under WCAG AA 4.5:1. --meridian-text-mid (#3d4450) = ~10:1 — comfortably passes. */ color: var(--meridian-text-mid); line-height: 1.55; } .m-section__form-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } @media (max-width: 900px) { .m-section { grid-template-columns: 1fr; gap: 12px; } } /* -------- Banner (eyebrow + tone-tinted top stripe) --------------- */ .m-banner { /* Position context so the dismiss button can pin to the top-right regardless of how long the body text wraps. */ position: relative; border: 1px solid var(--meridian-border); background: var(--meridian-bg-panel); padding: 12px 14px; /* Reserve clearance on the right when a dismiss button is rendered so text never collides with it. .m-banner--dismissable adds the extra padding; keep the default tight. */ display: flex; gap: 12px; align-items: flex-start; border-top: 2px solid var(--meridian-accent); border-radius: var(--meridian-radius); } .m-banner--dismissable { padding-right: 44px; } .m-banner__body { flex: 1; min-width: 0; } .m-banner__eyebrow { font-family: var(--meridian-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--meridian-text-dim); margin-bottom: 3px; } .m-banner__title { font-size: 13px; font-weight: 600; color: var(--meridian-text); margin-bottom: 2px; } .m-banner__text { font-size: 12px; color: var(--meridian-text-mid); line-height: 1.55; } .m-banner__actions { display: flex; gap: 8px; margin-top: 8px; } .m-banner--info { border-top-color: var(--meridian-info); } /* I-audit fix — base tones on bg-panel fail AA for small text (ratios 2-3:1). Use -strong variants for eyebrow text; border-top stripe is decorative and exempt from AA text-contrast requirements. Dark-theme aliases -strong back to the base token so dark surfaces keep their original colours. */ .m-banner--info .m-banner__eyebrow { color: var(--meridian-info-strong); } .m-banner--success { border-top-color: var(--meridian-pass); } .m-banner--success .m-banner__eyebrow { color: var(--meridian-pass-strong); } .m-banner--warn { border-top-color: var(--meridian-warn); } .m-banner--warn .m-banner__eyebrow { color: var(--meridian-warn-strong); } .m-banner--error { border-top-color: var(--meridian-fail); } .m-banner--error .m-banner__eyebrow { color: var(--meridian-fail-strong); } .m-banner--accent { border-top-color: var(--meridian-accent); } .m-banner--accent .m-banner__eyebrow { color: var(--meridian-accent-strong); } .m-banner__close { /* Pin to the upper-right corner so the affordance is always discoverable and never depends on the body text wrapping. 28x28 hit target meets WCAG 2.5.5 (24x24 minimum) with margin. */ position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--meridian-text-mid); cursor: pointer; padding: 0; line-height: 1; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .m-banner__close:hover, .m-banner__close:focus-visible { background: var(--meridian-bg-elevated, rgba(255,255,255,0.06)); border-color: var(--meridian-border); color: var(--meridian-text); } .m-banner__close:focus-visible { outline: 2px solid var(--meridian-accent); outline-offset: 1px; } /* -------- Empty card --------------------------------------------- */ .m-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; gap: 14px; max-width: 460px; margin: 40px auto; } .m-empty__glyph { width: 56px; height: 56px; border: 1px dashed var(--meridian-border-strong); display: flex; align-items: center; justify-content: center; font-family: var(--meridian-font-mono); font-size: 22px; color: var(--meridian-text-faint); } .m-empty__title { font-size: 16px; font-weight: 600; color: var(--meridian-text); letter-spacing: -0.2px; } .m-empty__body { font-size: 12.5px; color: var(--meridian-text-mid); line-height: 1.6; } .m-empty__actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; justify-content: center; } /* -------- Error card --------------------------------------------- */ .m-errcard { max-width: 560px; margin: 40px auto; border: 1px solid var(--meridian-fail); border-left: 2px solid var(--meridian-fail); background: var(--meridian-bg-panel); border-radius: var(--meridian-radius); } .m-errcard__head { padding: 10px 14px; border-bottom: 1px solid var(--meridian-border-hair); display: flex; align-items: baseline; gap: 8px; } .m-errcard__eyebrow { font-family: var(--meridian-font-mono); font-size: 11px; font-weight: 600; color: var(--meridian-fail); text-transform: uppercase; letter-spacing: 1px; } .m-errcard__code { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-dim); margin-left: auto; } .m-errcard__body { padding: 14px; } .m-errcard__title { font-size: 14px; font-weight: 600; color: var(--meridian-text); margin-bottom: 6px; } .m-errcard__text { font-size: 12.5px; color: var(--meridian-text-mid); line-height: 1.6; margin-bottom: 12px; } .m-errcard__trace { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--meridian-bg-sunk); font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-mid); /* I-audit: text-dim on bg-sunk = 3.9:1 → text-mid */ margin-bottom: 12px; border-radius: var(--meridian-radius); } /* I-audit: Razor sets inline style="color:var(--meridian-text-faint)" on the TRACE label. Re-scope --meridian-text-faint to text-mid within .m-errcard__trace so the inline style picks up the higher-contrast token. Dark theme: text-faint already passes AA on dark bg, so no override needed. */ :root .m-errcard__trace, [data-theme="light"] .m-errcard__trace { --meridian-text-faint: var(--meridian-text-mid); } .m-errcard__actions { display: flex; gap: 8px; } /* -------- Segmented control -------------------------------------- */ .m-segmented { display: inline-flex; border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); background: var(--meridian-bg-panel); padding: 2px; gap: 2px; } .m-segmented__option { background: transparent; border: 0; padding: 4px 12px; font-family: var(--meridian-font-sans); font-size: 12px; color: var(--meridian-text-mid); cursor: pointer; border-radius: 1px; line-height: 1.4; } .m-segmented__option:hover { color: var(--meridian-text); } .m-segmented__option--selected { background: var(--meridian-text); color: var(--meridian-bg); font-weight: 500; } .m-segmented__option--selected:hover { color: var(--meridian-bg); } .m-segmented__count { margin-left: 6px; font-family: var(--meridian-font-mono); font-size: 9.5px; color: var(--meridian-text-mid); /* I-audit: text-faint #a3abb8 on bg-sunk #e7eaef = 1.91:1 → text-mid passes */ padding: 1px 4px; border-radius: 3px; background: var(--meridian-bg-sunk); } .m-segmented__option--selected .m-segmented__count { color: var(--meridian-bg); background: rgba(255, 255, 255, 0.18); } /* Tabs variant — underline row, no border container */ .m-segmented--tabs { display: flex; border: 0; background: transparent; border-bottom: 1px solid var(--meridian-border-hair); padding: 0; gap: 0; border-radius: 0; } .m-segmented--tabs .m-segmented__option { padding: 8px 12px; font-family: var(--meridian-font-mono); font-size: 11.5px; color: var(--meridian-text-mid); /* I-audit: text-dim #6c7482 on bg #f3f5f8 = 4.31:1 → text-mid passes AA */ border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 6px; } .m-segmented--tabs .m-segmented__option:hover { color: var(--meridian-text); } .m-segmented--tabs .m-segmented__option--selected { background: transparent; color: var(--meridian-text); border-bottom-color: var(--meridian-accent); font-weight: 500; } .m-segmented--tabs .m-segmented__option--selected:hover { color: var(--meridian-text); } .m-segmented--tabs .m-segmented__option--selected .m-segmented__count { /* I-audit fix — text-faint (#a3abb8) on bg-sunk (#e7eaef) is 1.91:1. text-mid (#3d4450) gives ~8:1 on bg-sunk. */ color: var(--meridian-text-mid); background: var(--meridian-bg-sunk); } /* -------- Tag input ---------------------------------------------- */ .m-taginput { display: flex; flex-direction: column; gap: 8px; } .m-taginput__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); background: var(--meridian-bg-panel); min-height: 34px; align-items: center; } .m-taginput__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 8px; background: var(--meridian-accent-soft); /* I-audit fix — accent (#18b800) on accent-soft (#dcf6d1) is 2.29:1, below WCAG 2.1 AA 4.5:1. accent-strong (#0c6b00) gives ~7:1 on accent-soft. Dark theme aliases -strong back to -accent which passes on its dark-toned soft background. */ color: var(--meridian-accent-strong); font-family: var(--meridian-font-mono); font-size: 10.5px; border-radius: var(--meridian-radius); } .m-taginput__chip-x { background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0 2px; font-size: 11px; line-height: 1; opacity: 0.7; } .m-taginput__chip-x:hover { opacity: 1; } .m-taginput__input { flex: 1; min-width: 80px; background: transparent; border: 0; color: var(--meridian-text); font-family: var(--meridian-font-sans); font-size: 12px; padding: 2px; outline: none; } .m-taginput__suggestions { display: flex; flex-wrap: wrap; gap: 6px; } .m-taginput__suggestion { background: transparent; border: 1px dashed var(--meridian-border); /* I-audit B1: --meridian-text-dim (#6c7482) = 4.40:1 at 10.5px — fails WCAG AA. --meridian-text-mid (#3d4450) = ~10:1 — passes. */ color: var(--meridian-text-mid); font-family: var(--meridian-font-mono); font-size: 10.5px; padding: 2px 6px; border-radius: var(--meridian-radius); cursor: pointer; } .m-taginput__suggestion:hover { background: var(--meridian-bg-sunk); color: var(--meridian-text); border-style: solid; } /* -------- Inline confirm ----------------------------------------- */ .m-inline-confirm { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--meridian-warn); border-radius: var(--meridian-radius); background: var(--meridian-warn-soft); font-size: 12px; color: var(--meridian-text); } .m-inline-confirm__q { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-warn); text-transform: uppercase; letter-spacing: 0.6px; } .m-inline-confirm__btn { background: transparent; border: 1px solid var(--meridian-border); color: var(--meridian-text-mid); font-size: 11px; padding: 2px 8px; border-radius: var(--meridian-radius); cursor: pointer; line-height: 1.4; } .m-inline-confirm__btn--confirm { border-color: var(--meridian-fail); color: var(--meridian-fail); } .m-inline-confirm__btn:hover { background: var(--meridian-bg-sunk); } /* -------- Token list table (API tokens page) --------------------- */ .m-token-table { width: 100%; border-collapse: collapse; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); font-family: var(--meridian-font-sans); font-size: 12px; } .m-token-table th { text-align: left; padding: 8px 12px; font-family: var(--meridian-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--meridian-text-dim); border-bottom: 1px solid var(--meridian-border); background: var(--meridian-bg-panel); } .m-token-table td { padding: 8px 12px; border-bottom: 1px solid var(--meridian-border-hair); color: var(--meridian-text); vertical-align: middle; } .m-token-table tr:last-child td { border-bottom: 0; } .m-token-table__prefix { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-mid); background: var(--meridian-bg-sunk); padding: 1px 6px; border-radius: var(--meridian-radius); } /* -------- Integration card --------------------------------------- */ .m-integration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .m-integration-card { border: 1px solid var(--meridian-border); background: var(--meridian-bg-panel); padding: 14px; display: flex; flex-direction: column; gap: 10px; border-radius: var(--meridian-radius); } .m-integration-card__head { display: flex; align-items: center; gap: 10px; } .m-integration-card__glyph { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--meridian-border); background: var(--meridian-bg-sunk); color: var(--meridian-text-mid); font-family: var(--meridian-font-mono); border-radius: var(--meridian-radius); } .m-integration-card__title { flex: 1; font-weight: 600; font-size: 13px; color: var(--meridian-text); } .m-integration-card__status { font-family: var(--meridian-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; padding: 1px 6px; border-radius: var(--meridian-radius); } .m-integration-card__status--connected { background: var(--meridian-pass-soft); color: var(--meridian-pass); } .m-integration-card__status--available { background: var(--meridian-bg-sunk); color: var(--meridian-text-dim); } .m-integration-card__status--error { background: var(--meridian-fail-soft); color: var(--meridian-fail); } .m-integration-card__desc { font-size: 12px; color: var(--meridian-text-mid); line-height: 1.55; flex: 1; } .m-integration-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .m-integration-card__meta { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-faint); } /* -------- Danger zone block -------------------------------------- */ .m-danger { border: 1px solid var(--meridian-fail); border-radius: var(--meridian-radius); background: var(--meridian-fail-soft); padding: 14px; display: flex; align-items: center; gap: 12px; } .m-danger__body { flex: 1; min-width: 0; } .m-danger__title { font-size: 13px; font-weight: 600; /* I-audit fix — fail (#e01f2b) on fail-soft (#fcd6d8) is 3.57:1, below WCAG 2.1 AA 4.5:1 threshold. fail-strong (#a4181f) gives ~5.6:1. Dark theme aliases -strong back to -fail which passes on dark surfaces. */ color: var(--meridian-fail-strong); margin-bottom: 2px; } .m-danger__text { font-size: 12px; color: var(--meridian-text-mid); } /* -------- Overlay bodies ----------------------------------------- */ /* Drop-in content for MudDialog / MudDrawer / MudPopover. The host chrome (close X, header, footer actions) belongs to MudDialog; these classes only style the inner body shipped from /docs/ux/claude-design/ overlay-bodies.jsx. */ .m-ovbody { display: flex; flex-direction: column; gap: 12px; } .m-ovbody__lede { font-size: 13px; color: var(--meridian-text); line-height: 1.55; } .m-ovbody__lede code, .m-ovbody__lede .m-ovbody__chip { font-family: var(--meridian-font-mono); color: var(--meridian-text); background: var(--meridian-bg-sunk); padding: 1px 5px; } .m-ovbody__callout { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; background: var(--meridian-fail-soft); border: 1px solid var(--meridian-fail); border-radius: var(--meridian-radius); } .m-ovbody__callout-glyph { font-family: var(--meridian-font-mono); color: var(--meridian-fail-strong); /* I-audit: fail on fail-soft = 3.57:1 → fail-strong */ font-size: 11px; font-weight: 600; line-height: 1.3; } .m-ovbody__callout-body { font-size: 11.5px; color: var(--meridian-fail-strong); line-height: 1.5; } /* I-audit: fail on fail-soft → fail-strong */ .m-ovbody__callout-title { font-weight: 600; margin-bottom: 2px; color: var(--meridian-fail-strong); } /* I-audit: fail on fail-soft = 3.57:1 → fail-strong */ .m-ovbody__callout-list { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-mid); } .m-ovbody__field-label { font-family: var(--meridian-font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--meridian-text-mid); /* I-audit: text-dim on bg = 4.31:1 → text-mid */ margin-bottom: 4px; } .m-ovbody__textarea { width: 100%; padding: 8px; font-family: var(--meridian-font-sans); font-size: 12px; color: var(--meridian-text); background: var(--meridian-bg-raised); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); resize: vertical; outline: none; box-sizing: border-box; } .m-ovbody__textarea:focus { border-color: var(--meridian-accent); } /* Mono context strip — "TEST T-8102 · reservation.lock.expiry" */ .m-ovbody__strip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--meridian-bg-sunk); font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-mid); } .m-ovbody__strip-key { color: var(--meridian-text-mid); font-size: 10px; } /* I-audit: text-dim on bg-sunk = 3.9:1 → text-mid */ .m-ovbody__strip-val { color: var(--meridian-text); font-weight: 500; } /* Two-column field grid (label / control) used in rerun config */ .m-ovbody__grid { display: grid; grid-template-columns: 100px 1fr; gap: 10px 14px; align-items: center; } .m-ovbody__divider { height: 1px; background: var(--meridian-border-hair); margin: 4px 0; } .m-ovbody__checks { display: flex; flex-direction: column; gap: 6px; } /* Mono pill row — Retries 0/1/2/3/5, Parallel ×1/×4/×8/×16 */ .m-ovbody__pillrow { display: inline-flex; } .m-ovbody__pill { padding: 4px 10px; background: var(--meridian-bg-panel); color: var(--meridian-text-mid); border: 1px solid var(--meridian-border); border-left: 0; font-family: var(--meridian-font-mono); font-size: 11px; cursor: pointer; font-weight: 500; } .m-ovbody__pill:first-child { border-left: 1px solid var(--meridian-border); } .m-ovbody__pill:hover { color: var(--meridian-text); } .m-ovbody__pill--selected, .m-ovbody__pill--selected:hover { background: var(--meridian-text); color: var(--meridian-bg); } /* Footer strip — "Estimated time ~4m 12s · 1 runner" */ .m-ovbody__foot { padding: 8px 10px; background: var(--meridian-bg-sunk); display: flex; justify-content: space-between; font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-mid); /* I-audit: text-dim on bg-sunk = 3.9:1 → text-mid */ } .m-ovbody__foot-val { color: var(--meridian-text); font-weight: 500; } /* -------- Column picker (overlay body) --------------------------- */ .m-colpicker__head { display: flex; align-items: center; justify-content: space-between; font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-mid); /* I-audit: text-dim on bg = 4.31:1 → text-mid */ } .m-colpicker__reset { background: transparent; border: 0; color: var(--meridian-accent-strong); /* I-audit: accent on bg = 2.43:1 → accent-strong */ font-family: inherit; font-size: 11px; cursor: pointer; } .m-colpicker__search { position: relative; } .m-colpicker__search input { width: 100%; padding: 5px 8px 5px 26px; background: var(--meridian-bg-raised); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); font-size: 12px; color: var(--meridian-text); font-family: var(--meridian-font-sans); outline: none; box-sizing: border-box; } .m-colpicker__search-icon { position: absolute; left: 8px; top: 6px; color: var(--meridian-text-faint); font-size: 11px; pointer-events: none; } .m-colpicker__list { max-height: 280px; overflow: auto; border: 1px solid var(--meridian-border-hair); } .m-colpicker__group-label { padding: 5px 10px; background: var(--meridian-bg-sunk); font-family: var(--meridian-font-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--meridian-text-mid); /* I-audit: text-dim on bg-sunk = 3.9:1 → text-mid */ border-bottom: 1px solid var(--meridian-border-hair); } .m-colpicker__row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--meridian-border-hair); } .m-colpicker__row:hover { background: var(--meridian-bg-sunk); } .m-colpicker__check { width: 12px; height: 12px; border: 1px solid var(--meridian-border-strong); background: transparent; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-family: var(--meridian-font-mono); line-height: 1; flex: 0 0 auto; } .m-colpicker__row--on .m-colpicker__check { border-color: var(--meridian-accent); background: var(--meridian-accent); } .m-colpicker__label { flex: 1; font-size: 12px; color: var(--meridian-text-mid); /* I-audit: text-dim on bg = 4.31:1 → text-mid */ } .m-colpicker__row--on .m-colpicker__label { color: var(--meridian-text); } .m-colpicker__pinned, .m-colpicker__width { font-family: var(--meridian-font-mono); color: var(--meridian-text-mid); /* I-audit: text-faint on bg = 2.11:1 → text-mid */ } .m-colpicker__pinned { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.8px; } .m-colpicker__width { font-size: 10px; } /* -------- Env switcher (overlay body) ---------------------------- */ .m-envswitch__head { padding: 6px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--meridian-border-hair); } .m-envswitch__head-label { font-family: var(--meridian-font-mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--meridian-text-mid); /* I-audit: text-dim on bg = 4.31:1 → text-mid */ } .m-envswitch__list { padding: 4px 0; } .m-envswitch__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 10px; background: transparent; border: 0; text-align: left; cursor: pointer; font-family: var(--meridian-font-sans); color: var(--meridian-text); } .m-envswitch__item:hover { background: var(--meridian-bg-sunk); } .m-envswitch__item--on { background: var(--meridian-bg-sunk); } .m-envswitch__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .m-envswitch__name { flex: 1; font-size: 12px; } .m-envswitch__item--on .m-envswitch__name { font-weight: 500; } .m-envswitch__rate { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-mid); /* I-audit: text-faint on bg/bg-sunk = 2.11/1.91:1 → text-mid */ } .m-envswitch__check { color: var(--meridian-accent); font-family: var(--meridian-font-mono); font-size: 11px; } .m-envswitch__foot { padding: 8px 10px; border-top: 1px solid var(--meridian-border-hair); background: var(--meridian-bg-sunk); display: flex; justify-content: space-between; font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-mid); /* I-audit: text-dim on bg-sunk = 3.9:1 → text-mid */ } /* -------- Filter builder (overlay body) -------------------------- */ .m-filtb { padding: 14px; display: flex; flex-direction: column; gap: 6px; } .m-filtb__heading { font-family: var(--meridian-font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--meridian-text-mid); /* I-audit: text-dim on bg = 4.31:1 → text-mid */ margin-bottom: 2px; } .m-filtb__row { display: grid; grid-template-columns: 40px 130px 100px 1fr 28px; align-items: center; gap: 6px; } .m-filtb__where { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-mid); /* I-audit: text-faint on bg = 2.11:1 → text-mid */ text-align: center; } .m-filtb__input { width: 100%; padding: 4px 8px; background: var(--meridian-bg-raised); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); font-size: 12px; color: var(--meridian-text); font-family: var(--meridian-font-mono); outline: none; box-sizing: border-box; } .m-filtb__select { width: 100%; padding: 4px 8px; background: var(--meridian-bg-raised); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); font-size: 12px; color: var(--meridian-text); font-family: var(--meridian-font-mono); outline: none; box-sizing: border-box; } .m-filtb__remove { background: transparent; border: 0; color: var(--meridian-text-faint); font-family: var(--meridian-font-mono); font-size: 14px; cursor: pointer; line-height: 1; } .m-filtb__remove:hover { color: var(--meridian-fail); } .m-filtb__add { align-self: flex-start; margin-top: 4px; padding: 4px 10px; background: transparent; border: 1px dashed var(--meridian-border); border-radius: var(--meridian-radius); color: var(--meridian-text-mid); font-family: var(--meridian-font-mono); font-size: 11px; cursor: pointer; } .m-filtb__add:hover { color: var(--meridian-text); border-color: var(--meridian-border-strong); } .m-filtb__saved-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 8px; border-bottom: 1px solid var(--meridian-border-hair); font-size: 12px; color: var(--meridian-text-mid); cursor: pointer; } .m-filtb__saved-row:hover { color: var(--meridian-text); background: var(--meridian-bg-sunk); } .m-filtb__saved-arrow { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-faint); } /* -------- Inline check used in overlay bodies -------------------- */ .m-ovcheck { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--meridian-text-mid); user-select: none; } .m-ovcheck input { display: none; } .m-ovcheck__box { width: 13px; height: 13px; border: 1px solid var(--meridian-border-strong); background: transparent; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-family: var(--meridian-font-mono); line-height: 1; border-radius: 1px; flex: 0 0 auto; } .m-ovcheck input:checked + .m-ovcheck__box { border-color: var(--meridian-accent); background: var(--meridian-accent); } /* -------- State primitives: skeleton + spinner ------------------- */ @keyframes m-shim { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes m-spin { to { transform: rotate(360deg); } } @keyframes m-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } } .m-skel { display: block; background: var(--meridian-bg-sunk); position: relative; overflow: hidden; border-radius: 1px; } .m-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--meridian-bg-raised) 50%, transparent 100%); animation: m-shim 1.4s linear infinite; } @media (prefers-reduced-motion: reduce) { .m-skel::after { animation: none; opacity: .3; } } .m-spinner { display: inline-block; border-style: solid; border-color: var(--meridian-bg-sunk); border-top-color: var(--meridian-accent); border-radius: 50%; animation: m-spin .8s linear infinite; vertical-align: middle; } @media (prefers-reduced-motion: reduce) { .m-spinner { animation-duration: 2.4s; } } .m-spinner--info { border-top-color: var(--meridian-info); } .m-spinner--warn { border-top-color: var(--meridian-warn); } .m-spinner--fail { border-top-color: var(--meridian-fail); } .m-spinner--pass { border-top-color: var(--meridian-pass); } /* -------- State stage (used by /devtools/states gallery) --------- */ .m-stage { background: var(--meridian-bg); border: 1px solid var(--meridian-border); height: 360px; overflow: auto; padding: 14px; box-sizing: border-box; } .m-stage--grid6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .m-stage__head { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; } .m-stage__head-eyebrow { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-dim); text-transform: uppercase; letter-spacing: 1px; } .m-stage__kpi { padding: 14px; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); display: flex; flex-direction: column; gap: 8px; } .m-stage__chart { grid-column: span 2; grid-row: span 2; padding: 14px; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); display: flex; flex-direction: column; gap: 10px; } .m-stage__row { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--meridian-border-hair); } .m-stage__row > .m-skel { flex: 1; } .m-stage__listhead { display: flex; gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--meridian-border-hair); } .m-stage__listhead span { font-family: var(--meridian-font-mono); font-size: 10px; font-weight: 600; color: var(--meridian-text-dim); letter-spacing: 0.8px; flex: 1; } .m-stage__list-card { border: 1px solid var(--meridian-border); background: var(--meridian-bg-panel); flex: 1; overflow: auto; } .m-stage__chip { padding: 2px 7px; background: var(--meridian-accent-soft); color: var(--meridian-accent); font-family: var(--meridian-font-mono); font-size: 10.5px; border-radius: var(--meridian-radius); display: inline-flex; align-items: center; gap: 4px; } .m-stage__chip-x { cursor: pointer; opacity: .7; } .m-stage__gate-banner { padding: 14px; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-info); display: flex; align-items: center; gap: 14px; } .m-stage__gate-banner-eyebrow { font-family: var(--meridian-font-mono); font-size: 10px; font-weight: 600; color: var(--meridian-info); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; } .m-stage__gate-row { padding: 10px 14px; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); display: flex; align-items: center; gap: 12px; font-family: var(--meridian-font-mono); font-size: 12px; } .m-stage__bar { flex: 2; height: 4px; background: var(--meridian-bg-sunk); border-radius: 1px; overflow: hidden; } .m-stage__bar-fill { height: 100%; background: var(--meridian-info); transition: width .3s; } /* ───────────────────────────────────────────────────────────── Chip primitive — m-chip ───────────────────────────────────────────────────────────── */ .m-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-size: 10px; font-weight: 500; font-family: var(--meridian-font-sans); text-transform: uppercase; letter-spacing: 0.2px; line-height: 1.5; border-radius: var(--meridian-radius); background: var(--meridian-chip-bg); color: var(--meridian-text-mid); } .m-chip--mono { font-family: var(--meridian-font-mono); text-transform: none; letter-spacing: 0; } /* I-audit fix — base tone colors fail WCAG 2.1 AA contrast when placed on the matching -soft background. Use the -strong tone variants for chip text so chips pass AA in light theme. The -strong tokens alias back to the base tone in dark theme, where the soft backgrounds are dark enough that the brighter base tone already passes. */ .m-chip--pass { background: var(--meridian-pass-soft); color: var(--meridian-pass-strong); } .m-chip--fail { background: var(--meridian-fail-soft); color: var(--meridian-fail-strong); } .m-chip--warn { background: var(--meridian-warn-soft); color: var(--meridian-warn-strong); } .m-chip--info { background: var(--meridian-info-soft); color: var(--meridian-info-strong); } .m-chip--accent { background: var(--meridian-accent-soft); color: var(--meridian-accent-strong); } /* Outline modifier — strips the soft fill and draws a 1px ring in the tone colour. Stacks with the tone classes above (the fill is dropped via transparent background, the colour cascades through). */ .m-chip--outline { background: transparent; border: 1px solid currentColor; } /* ───────────────────────────────────────────────────────────── Meter primitive — m-meter ───────────────────────────────────────────────────────────── */ .m-meter { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .m-meter__head { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--meridian-text-mid); font-family: var(--meridian-font-mono); } .m-meter__label { color: var(--meridian-text-mid); } .m-meter__right { color: var(--meridian-text); font-weight: 500; font-variant-numeric: tabular-nums; } .m-meter__track { background: var(--meridian-bg-sunk); border-radius: 1px; overflow: hidden; } .m-meter__fill { height: 100%; transition: width .3s ease-out; } .m-meter__fill--accent { background: var(--meridian-accent); } .m-meter__fill--pass { background: var(--meridian-pass); } .m-meter__fill--fail { background: var(--meridian-fail); } .m-meter__fill--warn { background: var(--meridian-warn); } .m-meter__fill--info { background: var(--meridian-info); } /* ───────────────────────────────────────────────────────────── Sparkline primitive — m-sparkline ───────────────────────────────────────────────────────────── */ .m-sparkline { display: block; overflow: visible; } .m-sparkline__line { fill: none; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; } .m-sparkline__line--accent { stroke: var(--meridian-accent); } .m-sparkline__line--pass { stroke: var(--meridian-pass); } .m-sparkline__line--fail { stroke: var(--meridian-fail); } .m-sparkline__line--warn { stroke: var(--meridian-warn); } .m-sparkline__line--info { stroke: var(--meridian-info); } .m-sparkline__area { stroke: none; } .m-sparkline__area--accent { fill: var(--meridian-accent-soft); } .m-sparkline__area--pass { fill: var(--meridian-pass-soft); } .m-sparkline__area--fail { fill: var(--meridian-fail-soft); } .m-sparkline__area--warn { fill: var(--meridian-warn-soft); } .m-sparkline__area--info { fill: var(--meridian-info-soft); } /* ───────────────────────────────────────────────────────────── Scope banner primitive — m-scope-banner ADR-055 D4: page-level effective-filter strip, rendered by MeridianScopeBanner.razor. Pills are square-cornered (--meridian-radius); sections are laid out as a horizontal wrapping flex row. ───────────────────────────────────────────────────────────── */ .m-scope-banner { padding: 4px 0 6px; } .m-scope-banner--active { border-left: 2px solid var(--meridian-accent); padding-left: 8px; } .m-scope-banner__caption { display: flex; align-items: center; font-size: 9.5px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: var(--meridian-text-dim); margin-bottom: 4px; } .m-scope-banner__strip { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; } .m-scope-banner__section { display: flex; flex-direction: row; align-items: center; gap: 4px; } .m-scope-banner__label { font-size: 9.5px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: var(--meridian-text-dim); white-space: nowrap; } .m-scope-banner__chip-wrap { display: flex; align-items: center; gap: 2px; } .m-scope-banner__empty-pill { display: flex; align-items: center; gap: 2px; } .m-scope-banner__divider { width: 1px; height: 16px; background: var(--meridian-border); flex-shrink: 0; align-self: center; } /* ───────────────────────────────────────────────────────────── KPI tile primitive — m-kpi ───────────────────────────────────────────────────────────── */ .m-kpi { padding: 12px 14px 10px; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); display: flex; flex-direction: column; gap: 6px; min-width: 0; } .m-kpi__label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; /* I-audit fix — text-dim (#6c7482) on bg-sunk (#e7eaef) is 3.9:1, on bg-panel (#fafbfc) is 4.31:1; both below WCAG 2.1 AA 4.5:1 for small text. text-mid (#3d4450) passes on all surface backgrounds. */ color: var(--meridian-text-mid); font-weight: 600; font-family: var(--meridian-font-mono); } .m-kpi__value-row { display: flex; align-items: baseline; gap: 4px; } .m-kpi__value { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; color: var(--meridian-text); font-variant-numeric: tabular-nums; line-height: 1.1; } .m-kpi__unit { font-size: 12px; color: var(--meridian-text-dim); font-weight: 500; } .m-kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .m-kpi__delta { font-family: var(--meridian-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.02em; } /* I-audit fix — base tone colours on bg-sunk (#e7eaef) all fail AA: pass (#108a2b) = 3.71:1, fail (#e01f2b) = 3.95:1, warn (#d97706) = 2.64:1. -strong variants pass on bg-sunk and bg-panel. Dark aliases are unchanged. */ .m-kpi__delta--good { color: var(--meridian-pass-strong); } .m-kpi__delta--bad { color: var(--meridian-fail-strong); } .m-kpi__delta--warn { color: var(--meridian-warn-strong); } .m-kpi__delta--neutral { color: var(--meridian-text-mid); } .m-kpi__sub { font-family: var(--meridian-font-mono); font-size: 10px; /* I-audit fix — text-dim (#6c7482) on bg-sunk (#e7eaef) is 3.9:1. text-mid. */ color: var(--meridian-text-mid); } /* Compact density — used by dense hero strips (e.g. perf scenarios). */ .m-kpi--compact { padding: 6px 8px; gap: 2px; background: var(--meridian-bg-sunk); } .m-kpi--compact .m-kpi__label { font-size: 9px; letter-spacing: 0.8px; } .m-kpi--compact .m-kpi__value { font-size: 14px; line-height: 1.2; } .m-kpi--compact .m-kpi__unit { font-size: 10px; } /* Tone-coloured border emphasis. */ .m-kpi--highlight { border-width: 1px; } .m-kpi--highlight-good { border-color: var(--meridian-pass); } .m-kpi--highlight-bad { border-color: var(--meridian-fail); } .m-kpi--highlight-warn { border-color: var(--meridian-warn); } .m-kpi--highlight-neutral { border-color: var(--meridian-border); } /* ───────────────────────────────────────────────────────────── Form-control specimen styles — m-formc__* Used by /devtools/forms gallery to dress MudBlazor inputs and the bespoke Meridian inputs in the same 2px-radius hair-border look. ───────────────────────────────────────────────────────────── */ .m-formc__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .m-formc__label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-family: var(--meridian-font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--meridian-text-dim); } .m-formc__optional { font-family: var(--meridian-font-mono); font-size: 9.5px; color: var(--meridian-text-faint); text-transform: uppercase; letter-spacing: 0.8px; } .m-formc__hint, .m-formc__error { font-family: var(--meridian-font-mono); font-size: 10.5px; display: flex; align-items: center; gap: 4px; } .m-formc__hint { color: var(--meridian-text-faint); } .m-formc__error { color: var(--meridian-fail); } .m-formc__input, .m-formc__textarea { width: 100%; padding: 5px 8px; background: var(--meridian-bg-raised); color: var(--meridian-text); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); font-size: 12px; font-family: var(--meridian-font-sans); outline: none; box-sizing: border-box; } .m-formc__textarea { resize: vertical; line-height: 1.5; min-height: 56px; } .m-formc__input--mono, .m-formc__textarea--mono { font-family: var(--meridian-font-mono); } .m-formc__input:focus, .m-formc__textarea:focus { border-color: var(--meridian-accent); outline: 1px solid var(--meridian-accent); outline-offset: -2px; } .m-formc__input--error, .m-formc__textarea--error { border-color: var(--meridian-fail) !important; outline-color: var(--meridian-fail) !important; } .m-formc__input:disabled, .m-formc__textarea:disabled { background: var(--meridian-bg-sunk); color: var(--meridian-text-faint); cursor: not-allowed; } .m-formc__stepper { display: inline-flex; align-items: stretch; } .m-formc__stepper-btn { padding: 4px 8px; background: var(--meridian-bg-panel); color: var(--meridian-text-mid); border: 1px solid var(--meridian-border); font-size: 13px; font-family: var(--meridian-font-mono); cursor: pointer; line-height: 1; } .m-formc__stepper-btn:first-child { border-top-left-radius: var(--meridian-radius); border-bottom-left-radius: var(--meridian-radius); } .m-formc__stepper-btn:last-of-type { border-top-right-radius: var(--meridian-radius); border-bottom-right-radius: var(--meridian-radius); } .m-formc__stepper-input { flex: 1; min-width: 0; padding: 4px 6px; text-align: center; background: var(--meridian-bg-raised); color: var(--meridian-text); border: 1px solid var(--meridian-border); border-left: none; border-right: none; font-size: 12px; font-family: var(--meridian-font-mono); outline: none; font-variant-numeric: tabular-nums; } .m-formc__stepper-suffix { margin-left: 6px; align-self: center; color: var(--meridian-text-faint); font-family: var(--meridian-font-mono); font-size: 11px; } .m-formc__check, .m-formc__radio, .m-formc__toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--meridian-text); } .m-formc__check input[type="checkbox"], .m-formc__radio input[type="radio"] { display: none; } .m-formc__check-box { width: 13px; height: 13px; border: 1px solid var(--meridian-border-strong); background: transparent; border-radius: 1px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-family: var(--meridian-font-mono); line-height: 1; } .m-formc__check input:checked + .m-formc__check-box { border-color: var(--meridian-accent); background: var(--meridian-accent); } .m-formc__radio-dot { width: 13px; height: 13px; border: 1px solid var(--meridian-border-strong); background: var(--meridian-bg-raised); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .m-formc__radio input:checked + .m-formc__radio-dot { border-color: var(--meridian-accent); } .m-formc__radio input:checked + .m-formc__radio-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--meridian-accent); } .m-formc__radio-hint { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-faint); } .m-formc__toggle-track { position: relative; width: 28px; height: 16px; background: var(--meridian-bg-sunk); border: 1px solid var(--meridian-border-strong); border-radius: 8px; transition: background .1s; flex-shrink: 0; } .m-formc__toggle-thumb { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: var(--meridian-text-dim); border-radius: 50%; transition: left .1s, background .1s; } .m-formc__toggle input { display: none; } .m-formc__toggle input:checked ~ .m-formc__toggle-track { background: var(--meridian-accent); border-color: var(--meridian-accent); } .m-formc__toggle input:checked ~ .m-formc__toggle-track .m-formc__toggle-thumb { left: 13px; background: #fff; } .m-formc__toggle-text { display: flex; flex-direction: column; } .m-formc__toggle-hint { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-faint); } .m-formc__file { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 14px; gap: 4px; cursor: pointer; background: var(--meridian-bg-sunk); border: 1px dashed var(--meridian-border-strong); border-radius: var(--meridian-radius); text-align: center; } .m-formc__file:hover { background: var(--meridian-accent-soft); border-color: var(--meridian-accent); } .m-formc__file-glyph { font-family: var(--meridian-font-mono); font-size: 18px; color: var(--meridian-text-dim); line-height: 1; } .m-formc__file-text { font-size: 12px; color: var(--meridian-text); } .m-formc__file-link { color: var(--meridian-accent); } .m-formc__file-meta { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-faint); } .m-formc__code { display: grid; grid-template-columns: 32px 1fr; background: var(--meridian-bg-raised); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); font-family: var(--meridian-font-mono); font-size: 11.5px; overflow: hidden; } .m-formc__code-gutter { padding: 6px 4px; text-align: right; background: var(--meridian-bg-sunk); color: var(--meridian-text-faint); border-right: 1px solid var(--meridian-border-hair); user-select: none; line-height: 1.6; } .m-formc__code-input { padding: 6px 8px; resize: vertical; background: transparent; color: var(--meridian-text); border: none; outline: none; font-family: inherit; font-size: inherit; line-height: 1.6; min-height: 80px; } /* ───────────────────────────────────────────────────────────── Tokens gallery — m-tokens__* ───────────────────────────────────────────────────────────── */ .m-tokens { display: flex; flex-direction: column; gap: 28px; margin-top: 18px; } .m-tokens__group { display: flex; flex-direction: column; gap: 10px; } .m-tokens__group-label { font-family: var(--meridian-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--meridian-text-dim); margin: 0; } .m-tokens__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .m-tokens__swatch { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); } .m-tokens__swatch-block { height: 44px; border: 1px solid var(--meridian-border-hair); border-radius: var(--meridian-radius); } .m-tokens__swatch-name { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text); font-weight: 500; } .m-tokens__swatch-token { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-faint); } .m-tokens__type-row { display: flex; align-items: baseline; gap: 16px; padding: 10px 12px; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); } .m-tokens__type-meta { width: 130px; flex-shrink: 0; font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-faint); text-transform: uppercase; letter-spacing: 0.8px; } .m-tokens__type-sample { color: var(--meridian-text); flex: 1; min-width: 0; } /* ───────────────────────────────────────────────────────────── Component-gallery scaffolding — m-cgallery__* ───────────────────────────────────────────────────────────── */ .m-cgallery { display: flex; flex-direction: column; gap: 28px; margin-top: 18px; } .m-cgallery__group { display: flex; flex-direction: column; gap: 10px; } .m-cgallery__group-label { font-family: var(--meridian-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--meridian-text-mid); /* I-audit: text-dim on bg-panel = 4.31:1 → text-mid */ margin: 0; } .m-cgallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .m-cgallery__card { background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; } .m-cgallery__card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--meridian-border-hair); padding-bottom: 6px; } .m-cgallery__card-title { font-size: 12.5px; color: var(--meridian-text); font-weight: 600; } .m-cgallery__card-tag { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-mid); /* I-audit: text-faint on bg-panel = 2.23:1 → text-mid */ } .m-cgallery__card-body { display: flex; flex-direction: column; gap: 8px; } .m-cgallery__inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .m-cgallery__card--span2 { grid-column: span 2; } @media (max-width: 720px) { .m-cgallery__card--span2 { grid-column: span 1; } } /* -------- Env selector (top-bar pill-strip) ---------------------- */ .m-envsel { position: relative; display: inline-block; } .m-envsel__btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 6px; background: var(--meridian-bg-sunk); border: 1px solid var(--meridian-border); color: var(--meridian-text); font-size: 11px; cursor: pointer; font-family: var(--meridian-font-mono); border-radius: var(--meridian-radius); line-height: 1.3; } .m-envsel__btn:hover { background: var(--meridian-bg-panel); } .m-envsel__btn:focus-visible { outline: 1px solid var(--meridian-accent); outline-offset: 1px; } .m-envsel__pills { display: inline-flex; gap: 2px; } .m-envsel__pill { width: 8px; height: 8px; border-radius: 1px; flex: 0 0 auto; } .m-envsel__eyebrow { color: var(--meridian-text-mid); /* I-audit: text-dim on bg-sunk = 3.9:1 → text-mid */ text-transform: uppercase; letter-spacing: 0.5px; font-size: 10px; } .m-envsel__summary { color: var(--meridian-text); font-weight: 500; } .m-envsel__caret { color: var(--meridian-text-faint); font-size: 10px; margin-left: 2px; } .m-envsel__scrim { position: fixed; inset: 0; z-index: 90; background: transparent; } .m-envsel__pop { position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 91; min-width: 240px; padding: 4px; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border-strong); border-radius: var(--meridian-radius); box-shadow: 0 8px 24px rgba(14, 17, 22, 0.12); } [data-theme="dark"] .m-envsel__pop { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); } .m-envsel__head { padding: 6px 10px; font-size: 9.5px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .m-envsel__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; background: transparent; color: var(--meridian-text); font-size: 12px; text-align: left; cursor: pointer; font-family: var(--meridian-font-sans); border-radius: var(--meridian-radius); } .m-envsel__item:hover { background: var(--meridian-bg-sunk); } .m-envsel__item--on { background: var(--meridian-bg-sunk); } .m-envsel__check { width: 14px; height: 14px; border: 1.5px solid var(--meridian-border-strong); border-radius: var(--meridian-radius); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; flex: 0 0 auto; } .m-envsel__name { flex: 1; font-family: var(--meridian-font-mono); color: var(--meridian-text); } .m-envsel__rate { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-faint); } .m-envsel__foot { padding: 6px 10px; border-top: 1px solid var(--meridian-border-hair); margin-top: 4px; display: flex; justify-content: space-between; } .m-envsel__action { border: 0; background: none; cursor: pointer; font-size: 10px; font-family: var(--meridian-font-mono); color: var(--meridian-text-dim); padding: 0; } .m-envsel__action--accent { color: var(--meridian-accent); } .m-envsel__action:hover { text-decoration: underline; } /* ================================================================ */ /* Screen-mock primitives (used by /devtools/screens/* visual specs) */ /* ================================================================ */ /* -------- Tone utilities ---------------------------------------- */ /* Reusable tone applicators — apply alongside any BEM class to colour text, fills, or soft-tinted badges by status without redeclaring the same colour rule on every screen-prefixed modifier. */ .m-tone-text--pass { color: var(--meridian-pass); } .m-tone-text--warn { color: var(--meridian-warn); } .m-tone-text--fail { color: var(--meridian-fail); } .m-tone-text--info { color: var(--meridian-info); } .m-tone-text--neutral { color: var(--meridian-text-mid); } .m-tone-text--muted { color: var(--meridian-text-dim); } .m-tone-bg--pass { background: var(--meridian-pass); } .m-tone-bg--warn { background: var(--meridian-warn); } .m-tone-bg--fail { background: var(--meridian-fail); } .m-tone-bg--info { background: var(--meridian-info); } .m-tone-soft--pass { background: var(--meridian-pass-soft); color: var(--meridian-pass); border-color: var(--meridian-pass); } .m-tone-soft--warn { background: var(--meridian-warn-soft); color: var(--meridian-warn); border-color: var(--meridian-warn); } .m-tone-soft--fail { background: var(--meridian-fail-soft); color: var(--meridian-fail); border-color: var(--meridian-fail); } .m-tone-soft--info { background: var(--meridian-info-soft, var(--meridian-bg-sunk)); color: var(--meridian-info); border-color: var(--meridian-info); } /* -------- Status dot primitive — m-status-dot ------------------- */ /* Small round tone-tinted indicator. Used by signoff lists, gate strips, lane matrices, stage timelines, and any compact slot-level status affordance. */ .m-status-dot { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--meridian-bg-sunk); border: 1px solid var(--meridian-border); color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); line-height: 1; flex-shrink: 0; } .m-status-dot--sm { width: 14px; height: 14px; font-size: 8px; } .m-status-dot--md { width: 18px; height: 18px; font-size: 10px; } .m-status-dot--lg { width: 24px; height: 24px; font-size: 12px; } .m-status-dot--no-border { border-width: 0; } .m-status-dot--pass { background: var(--meridian-pass-soft); border-color: var(--meridian-pass); color: var(--meridian-pass); } .m-status-dot--warn { background: var(--meridian-warn-soft); border-color: var(--meridian-warn); color: var(--meridian-warn); } .m-status-dot--fail { background: var(--meridian-fail-soft); border-color: var(--meridian-fail); color: var(--meridian-fail); } .m-status-dot--info { background: var(--meridian-info-soft, var(--meridian-bg-sunk)); border-color: var(--meridian-info); color: var(--meridian-info); } .m-status-dot--pending { color: var(--meridian-text-faint); } .m-status-dot--neutral { color: var(--meridian-text-dim); } /* -------- QualityGateStatusWidget grid --------------------------- */ .m-qg-status { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 4px; } /* -------- Generic panel ------------------------------------------ */ .m-panel { background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border-hair); border-radius: var(--meridian-radius); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .m-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--meridian-border-hair); background: var(--meridian-bg-panel); font-family: var(--meridian-font-sans); } .m-panel__title { font-size: 12px; font-weight: 600; color: var(--meridian-text); letter-spacing: -0.1px; } .m-panel__right { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-dim); display: inline-flex; align-items: center; gap: 8px; } /* I-audit fix — text-faint (#a3abb8) on bg-panel (#fafbfc) is 2.23:1, below WCAG 2.1 AA 4.5:1 threshold for normal text. text-dim (#6c7482) on bg-panel gives 4.31:1 — still just short but on bg (#f3f5f8) it gives 4.31:1; on bg-panel a bump to text-mid is safer but per design we step to text-dim first, and the rule applies on bg backgrounds (~5:1). text-mid gives ~8:1 on all surfaces. */ .m-panel__hint { color: var(--meridian-text-mid); } .m-panel__live { display: inline-flex; align-items: center; gap: 6px; } .m-panel__live-dot { color: var(--meridian-pass); } .m-panel__body { min-height: 0; overflow: auto; } .m-panel__body--padded { padding: 12px 14px; } /* -------- Buttons (mini) — used in screen header rows ------------ */ .m-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; font-family: var(--meridian-font-sans); border-radius: var(--meridian-radius); cursor: pointer; line-height: 1.4; } .m-btn--ghost { background: transparent; border: 1px solid var(--meridian-border-hair); color: var(--meridian-text-mid); } .m-btn--ghost:hover { background: var(--meridian-bg-sunk); color: var(--meridian-text); } .m-btn--solid { background: var(--meridian-accent); color: #fff; border: 1px solid var(--meridian-accent); } .m-btn--solid:hover { filter: brightness(1.05); } /* -------- Screen frame ------------------------------------------- */ .m-screen { padding: 14px; display: flex; flex-direction: column; gap: 14px; background: var(--meridian-bg); color: var(--meridian-text); font-family: var(--meridian-font-sans); font-size: 13px; } .m-screen__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .m-screen__title-row { display: flex; align-items: baseline; gap: 14px; margin-top: 4px; flex-wrap: wrap; } .m-screen__title { font-size: 22px; font-weight: 600; letter-spacing: -0.6px; margin: 0; color: var(--meridian-text); } /* Flush page-header heading: zero margin while preserving mud typography sizing. */ .m-page-heading--flush { margin: 0; } .m-screen__sub { /* I-audit fix — text-dim (#6c7482) on bg (#f3f5f8) is 4.31:1. text-mid. */ color: var(--meridian-text-mid); font-size: 12px; } .m-screen__actions { display: flex; gap: 8px; flex-wrap: wrap; } /* -------- Dashboard layout slabs --------------------------------- */ .m-screen__kpi-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .m-screen__kpi-cell { background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border-hair); border-radius: var(--meridian-radius); padding: 12px 14px; min-width: 0; } @media (max-width: 1280px) { .m-screen__kpi-strip { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .m-screen__kpi-strip { grid-template-columns: repeat(2, 1fr); } } .m-screen__middle { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; min-height: 0; } @media (max-width: 1280px) { .m-screen__middle { grid-template-columns: 1fr 1fr; } } @media (max-width: 880px) { .m-screen__middle { grid-template-columns: 1fr; } } /* -------- Readiness gauge panel ---------------------------------- */ .m-readiness { display: flex; align-items: center; gap: 16px; padding: 4px 14px 10px; flex-wrap: wrap; } .m-readiness__gauge { flex: 0 0 auto; } .m-readiness__copy { flex: 1; min-width: 160px; } .m-readiness__verdict { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; font-family: var(--meridian-font-mono); margin-bottom: 6px; } /* I-audit fix — Razor sets inline style="color: var(--meridian-warn)" which resolves to #d97706 on bg-panel (#fafbfc), ratio 3.07:1 (fails AA). We re-scope --meridian-warn to the strong variant on this element in light mode only; the inline style picks up the locally-resolved token value. */ :root .m-readiness__verdict, [data-theme="light"] .m-readiness__verdict { --meridian-warn: var(--meridian-warn-strong); } .m-readiness__line { font-size: 12px; color: var(--meridian-text-mid); line-height: 1.5; } .m-readiness__strong { color: var(--meridian-text); font-weight: 500; } .m-readiness__fail { color: var(--meridian-fail); font-weight: 500; } .m-readiness__policy { font-size: 11px; color: var(--meridian-text-dim); margin-top: 2px; font-family: var(--meridian-font-mono); } .m-readiness__list { padding: 0 14px 12px; overflow: auto; min-height: 0; } .m-readiness__row { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--meridian-border-hair); font-size: 11.5px; } .m-readiness__dot { font-size: 10px; } .m-readiness__dot--pass { color: var(--meridian-pass); } .m-readiness__dot--fail { color: var(--meridian-fail); } .m-readiness__row-label { color: var(--meridian-text); font-weight: 500; display: flex; align-items: center; gap: 6px; } .m-readiness__row-thresh { font-size: 10px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); } .m-readiness__row-val { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text); font-weight: 500; } .m-readiness__row-val--fail { color: var(--meridian-fail); } /* -------- Suite stack panel -------------------------------------- */ .m-suite-list { display: flex; flex-direction: column; gap: 10px; } .m-suite-row { display: grid; grid-template-columns: 90px 1fr 60px; align-items: center; gap: 10px; } .m-suite-row__layer { font-size: 11.5px; color: var(--meridian-text); font-weight: 500; text-transform: capitalize; } .m-suite-row__count { font-family: var(--meridian-font-mono); font-size: 9.5px; color: var(--meridian-text-dim); } .m-suite-row__bar { display: flex; height: 14px; background: var(--meridian-bg-sunk); border-radius: 1px; overflow: hidden; } .m-suite-row__bar-pass { background: var(--meridian-pass); } .m-suite-row__bar-fail { background: var(--meridian-fail); } .m-suite-row__bar-skip { background: var(--meridian-text-faint); opacity: 0.5; } .m-suite-row__legend { display: flex; gap: 10px; font-size: 9.5px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); margin-top: 3px; } /* I-audit fix — pass (#108a2b) on bg-panel (#fafbfc) is 4.31:1. pass-strong. */ .m-suite-row__legend-pass { color: var(--meridian-pass-strong); } .m-suite-row__legend-fail { color: var(--meridian-fail); } .m-suite-row__legend-skip { color: var(--meridian-text-dim); } .m-suite-row__dur { text-align: right; } .m-suite-row__dur-val { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text); font-variant-numeric: tabular-nums; } .m-suite-row__trend { font-family: var(--meridian-font-mono); font-size: 9.5px; color: var(--meridian-text-dim); } .m-suite-row__trend--up { color: var(--meridian-pass-strong); } /* I-audit: pass on bg-panel = 4.31:1 → pass-strong */ .m-suite-row__trend--down { color: var(--meridian-fail-strong); } /* I-audit: fail on bg-panel → fail-strong for symmetry */ /* -------- Activity feed ------------------------------------------ */ .m-activity { display: flex; flex-direction: column; } .m-activity__row { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--meridian-border-hair); font-size: 11.5px; align-items: flex-start; } .m-activity__t { font-family: var(--meridian-font-mono); font-size: 10px; /* I-audit fix — text-faint (#a3abb8) on bg-panel (#fafbfc) is 2.23:1. text-mid. */ color: var(--meridian-text-mid); } .m-activity__user { font-weight: 500; color: var(--meridian-text); } .m-activity__act { color: var(--meridian-text-dim); } .m-activity__target { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text); } .m-activity__detail { font-size: 10.5px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); margin-top: 1px; } /* -------- Lane matrix -------------------------------------------- */ .m-lane { overflow: auto; } .m-lane__head { display: grid; grid-template-columns: 200px 120px 80px 80px 80px 80px 1fr; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--meridian-border); font-size: 9.5px; font-family: var(--meridian-font-mono); color: var(--meridian-text-dim); font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; } .m-lane__row { display: grid; grid-template-columns: 200px 120px 80px 80px 80px 80px 1fr; align-items: center; padding: 7px 14px; border-bottom: 1px solid var(--meridian-border-hair); font-size: 11.5px; } .m-lane__row--alt { background: var(--meridian-bg-sunk); } .m-lane__svc { display: flex; align-items: center; gap: 6px; } .m-lane__svc-name { font-family: var(--meridian-font-mono); color: var(--meridian-text); } /* I-audit fix — text-dim (#6c7482) on bg-sunk (#e7eaef) is 3.9:1. text-mid. */ .m-lane__owner { color: var(--meridian-text-mid); } .m-lane__num { font-family: var(--meridian-font-mono); text-align: right; color: var(--meridian-text-mid); font-variant-numeric: tabular-nums; } /* I-audit fix — warn (#d97706) on bg-panel (#fafbfc) is 3.07:1, on bg-sunk (#e7eaef) is 2.64:1; both fail WCAG 2.1 AA 4.5:1. warn-strong (#8a4a02) passes on all light surfaces. */ .m-lane__num--warn { color: var(--meridian-warn-strong); } .m-lane__cells { display: flex; gap: 1px; flex-wrap: nowrap; } .m-lane__cell { display: inline-block; width: 12px; height: 12px; flex: 0 0 auto; } .m-lane__cell--pass { background: var(--meridian-pass); } .m-lane__cell--fail { background: var(--meridian-fail); } .m-lane__cell--warn { background: var(--meridian-warn); } .m-lane__cell--flaky { background: var(--meridian-info); } .m-lane__cell--running { background: var(--meridian-text-faint); opacity: 0.5; } .m-lane__legend { display: flex; gap: 12px; flex-wrap: wrap; } .m-lane__legend-item { display: inline-flex; align-items: center; gap: 4px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); font-size: 10px; } .m-lane__legend-item .m-lane__cell { width: 8px; height: 8px; } /* -------- Screen-mock picker chrome ------------------------------ */ .m-screen__pickers { margin-top: 4px; padding: 10px 14px; border-top: 1px dashed var(--meridian-border-hair); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* -------- Section heads (used inside detail panels) -------------- */ .m-section-head { font-family: var(--meridian-font-mono); text-transform: uppercase; letter-spacing: 0.8px; font-size: 10px; color: var(--meridian-text-dim); margin-bottom: 6px; } .m-section-head--mt { margin-top: 14px; } .m-btn--xs { padding: 2px 6px; font-size: 10px; } .m-btn--danger { background: var(--meridian-fail); border-color: var(--meridian-fail); color: #fff; } /* -------- Quality Gate screen ------------------------------------ */ .m-screen--gate { padding: 0; gap: 0; min-height: 0; } .m-gate__header { padding: 14px; border-bottom: 1px solid var(--meridian-border); background: var(--meridian-bg-panel, var(--meridian-bg)); display: flex; flex-direction: column; gap: 8px; } .m-gate__pr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .m-gate__pr-title { font-size: 16px; color: var(--meridian-text); font-weight: 500; } .m-gate__pr-meta { font-size: 12px; color: var(--meridian-text-dim); } .m-gate__pr-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .m-gate__policy-row { display: flex; align-items: center; gap: 12px; } .m-gate__policy-desc { font-size: 11px; color: var(--meridian-text-dim); } .m-gate__strip { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; } @media (max-width: 1280px) { .m-gate__strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 720px) { .m-gate__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .m-gate__cell { padding: 7px 9px; background: var(--meridian-bg-panel, var(--meridian-bg-sunk)); border: 1px solid var(--meridian-border); border-left: 3px solid var(--meridian-pass); display: flex; flex-direction: column; gap: 2px; min-width: 0; } .m-gate__cell--fail { border-left-color: var(--meridian-fail); } .m-gate__cell-label { font-size: 9.5px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); text-transform: uppercase; letter-spacing: 0.6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-gate__cell-val { font-family: var(--meridian-font-mono); font-size: 12px; font-weight: 500; color: var(--meridian-text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-gate__cell-val--fail { color: var(--meridian-fail); } .m-gate__cell-thresh { font-size: 9px; /* I-audit fix — text-faint (#a3abb8) on bg-panel (#fafbfc) is 2.23:1. text-mid (#3d4450) gives ~8:1 on all surfaces. */ color: var(--meridian-text-mid); font-family: var(--meridian-font-mono); } .m-gate__body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; padding: 10px; min-height: 0; } @media (max-width: 1100px) { .m-gate__body { grid-template-columns: 1fr; } } .m-gate__list-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; } .m-gate__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--meridian-border-hair); padding-bottom: 0; flex-wrap: wrap; } .m-gate__tab { background: transparent; border: none; padding: 6px 10px; font-family: var(--meridian-font-mono); font-size: 11px; /* I-audit fix — text-dim (#6c7482) on bg (#f3f5f8) is 4.31:1. text-mid. */ color: var(--meridian-text-mid); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; text-transform: uppercase; letter-spacing: 0.6px; } .m-gate__tab:hover { color: var(--meridian-text-mid); } .m-gate__tab--selected { color: var(--meridian-text); border-bottom-color: var(--meridian-accent); } .m-gate__tab-count { /* I-audit fix — text-faint (#a3abb8) on bg (#f3f5f8) is 2.11:1. text-mid. */ color: var(--meridian-text-mid); font-size: 10px; font-variant-numeric: tabular-nums; } .m-gate__failures { display: flex; flex-direction: column; } .m-gate__failures-head, .m-gate__failure { display: grid; grid-template-columns: 16px 1fr 100px 48px 70px; align-items: center; } .m-gate__failures-head { padding: 6px 12px; border-bottom: 1px solid var(--meridian-border); font-size: 9.5px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; } .m-gate__failure { padding: 8px 12px; border-bottom: 1px solid var(--meridian-border-hair); border-left: 3px solid transparent; background: transparent; cursor: pointer; text-align: left; font-family: inherit; color: inherit; width: 100%; } .m-gate__failure:hover { background: var(--meridian-bg-sunk); } .m-gate__failure--selected { border-left-color: var(--meridian-accent); background: var(--meridian-accent-soft); } .m-gate__failure-x { color: var(--meridian-fail); font-size: 10px; font-family: var(--meridian-font-mono); } .m-gate__failure-mid { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .m-gate__failure-name { font-family: var(--meridian-font-mono); font-size: 11.5px; color: var(--meridian-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-gate__failure-meta { font-size: 10px; /* I-audit fix — text-dim (#6c7482) on accent-soft selected row (#dcf6d1) is 4.07:1, below WCAG 2.1 AA 4.5:1. text-mid passes on all surfaces. */ color: var(--meridian-text-mid); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .m-gate__failure-linked { /* I-audit fix — accent (#18b800) on bg-panel (#fafbfc) is 2.56:1, on accent-soft (#dcf6d1) is 2.29:1. accent-strong (#0c6b00) passes AA on both surfaces. Dark theme aliases -strong back to -accent. */ color: var(--meridian-accent-strong); font-family: var(--meridian-font-mono); } .m-gate__failure-svc { font-family: var(--meridian-font-mono); font-size: 10.5px; /* I-audit fix — text-dim (#6c7482) on accent-soft selected row (#dcf6d1) is 4.07:1. text-mid passes on all surfaces. */ color: var(--meridian-text-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-gate__failure-streak { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-mid); font-weight: 500; font-variant-numeric: tabular-nums; } /* I-audit fix — fail (#e01f2b) on accent-soft selected row (#dcf6d1) is 4.12:1, below AA 4.5:1. fail-strong (#a4181f) gives ~6.5:1. */ .m-gate__failure-streak--hot { color: var(--meridian-fail-strong); } .m-gate__failure-first { font-family: var(--meridian-font-mono); font-size: 10px; /* I-audit fix — text-faint (#a3abb8) on accent-soft selected row (#dcf6d1) is 1.99:1. text-mid on any surface passes. */ color: var(--meridian-text-mid); font-variant-numeric: tabular-nums; } .m-gate__num { text-align: right; } .m-gate__mono { font-family: var(--meridian-font-mono); } .m-gate__flakes { display: flex; flex-direction: column; } .m-gate__flake-row { display: grid; grid-template-columns: 1fr 60px 80px 96px; padding: 9px 12px; gap: 8px; align-items: center; border-bottom: 1px solid var(--meridian-border-hair); } .m-gate__flake-name { font-family: var(--meridian-font-mono); font-size: 11.5px; color: var(--meridian-text); } .m-gate__flake-meta { font-size: 10px; color: var(--meridian-text-dim); margin-top: 2px; } .m-gate__flake-rate { text-align: right; } .m-gate__flake-pct { font-family: var(--meridian-font-mono); font-weight: 500; color: var(--meridian-warn); font-variant-numeric: tabular-nums; } .m-gate__flake-pct--hot { color: var(--meridian-fail); } .m-gate__flake-cap { font-size: 9px; color: var(--meridian-text-faint); font-family: var(--meridian-font-mono); text-transform: uppercase; } .m-gate__flake-meter { padding-right: 8px; } .m-gate__flake-action { display: flex; justify-content: flex-end; } .m-gate__empty { padding: 40px; text-align: center; color: var(--meridian-text-dim); font-size: 12px; font-family: var(--meridian-font-mono); } .m-gate__empty-sub { margin-top: 6px; color: var(--meridian-text-faint); } .m-gate__detail-id { /* I-audit fix — text-faint (#a3abb8) on bg-panel (#fafbfc) is 2.23:1. text-mid. */ color: var(--meridian-text-mid); font-size: 10px; font-family: var(--meridian-font-mono); } .m-gate__detail { display: flex; flex-direction: column; } .m-gate__detail-head { padding: 12px 14px; border-bottom: 1px solid var(--meridian-border); } .m-gate__detail-name { font-family: var(--meridian-font-mono); font-size: 13px; color: var(--meridian-text); line-height: 1.4; } .m-gate__detail-meta { display: flex; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); flex-wrap: wrap; } .m-gate__detail-strong { color: var(--meridian-text); } .m-gate__detail-strong--fail { color: var(--meridian-fail); } /* I-audit fix — accent (#18b800) on bg-panel (#fafbfc) is 2.56:1. accent-strong. */ .m-gate__detail-strong--accent { color: var(--meridian-accent-strong); } .m-gate__detail-body { padding: 12px 14px; } .m-gate__assert { background: var(--meridian-fail-soft); /* I-audit fix — fail (#e01f2b) on fail-soft (#fcd6d8) is 3.57:1. fail-strong (#a4181f) gives ~5.6:1 on fail-soft. */ color: var(--meridian-fail-strong); padding: 10px 12px; font-family: var(--meridian-font-mono); font-size: 11.5px; border-radius: 2px; line-height: 1.5; white-space: pre-wrap; } .m-gate__stack { background: var(--meridian-bg-sunk); padding: 10px 12px; font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-mid); line-height: 1.6; overflow-x: auto; } .m-gate__stack-msg { color: var(--meridian-text); } .m-gate__diff { background: var(--meridian-bg-sunk); font-family: var(--meridian-font-mono); font-size: 11px; line-height: 1.7; border-radius: 2px; } .m-gate__diff-head { padding: 6px 12px; border-bottom: 1px solid var(--meridian-border); /* I-audit fix — text-dim (#6c7482) on bg-sunk (#e7eaef) is 3.9:1, below WCAG 2.1 AA 4.5:1. text-mid (#3d4450) gives ~8:1. */ color: var(--meridian-text-mid); font-size: 10px; } .m-gate__diff-line { padding: 4px 12px; color: var(--meridian-text-mid); white-space: pre; overflow-x: auto; } /* I-audit fix — base tone on same-tone-soft background fails AA: fail (#e01f2b) on fail-soft (#fcd6d8) = 3.57:1; pass (#108a2b) on pass-soft (#d3f3d8) = 3.74:1. Use -strong variants. */ .m-gate__diff-line--del { color: var(--meridian-fail-strong); background: var(--meridian-fail-soft); } .m-gate__diff-line--add { color: var(--meridian-pass-strong); background: var(--meridian-pass-soft); } .m-gate__diff-num { /* I-audit fix — text-faint (#a3abb8) on coloured diff-line backgrounds drops to 1.73–1.99:1. text-mid (#3d4450) passes on all surface tones. */ color: var(--meridian-text-mid); width: 20px; display: inline-block; } .m-gate__history-row { display: grid; grid-template-columns: 70px 1fr 60px 50px; padding: 5px 0; font-size: 11px; align-items: center; gap: 8px; border-bottom: 1px solid var(--meridian-border-hair); } /* I-audit fix — text-faint (#a3abb8) on bg-panel (#fafbfc) is 2.23:1. text-mid. */ .m-gate__history-t { font-family: var(--meridian-font-mono); color: var(--meridian-text-mid); } .m-gate__history-run { font-family: var(--meridian-font-mono); color: var(--meridian-text); } .m-gate__history-dur { font-family: var(--meridian-font-mono); color: var(--meridian-text-dim); text-align: right; } .m-gate__detail-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .m-gate__detail-assign { margin-left: auto; } /* ================================================================== */ /* Release screen ($m-release__*) */ /* ================================================================== */ .m-screen--release { padding: 14px; gap: 0; } .m-release__layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; min-height: 0; } @media (max-width: 1280px) { .m-release__layout { grid-template-columns: 1fr; } } .m-release__left, .m-release__right { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .m-release__mid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 1100px) { .m-release__mid { grid-template-columns: 1fr; } } .m-release__verdict { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; gap: 16px; padding: 14px 16px; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); border-left: 4px solid var(--meridian-accent); } .m-release__verdict--pass { border-left-color: var(--meridian-pass); background: linear-gradient(90deg, var(--meridian-pass-soft), var(--meridian-bg-panel) 60%); } .m-release__verdict--warn { border-left-color: var(--meridian-warn); background: linear-gradient(90deg, var(--meridian-warn-soft), var(--meridian-bg-panel) 60%); } .m-release__verdict--fail { border-left-color: var(--meridian-fail); background: linear-gradient(90deg, var(--meridian-fail-soft), var(--meridian-bg-panel) 60%); } .m-release__verdict-version { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; color: var(--meridian-text); margin: 4px 0; } .m-release__verdict-meta-line { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-dim); } .m-release__verdict-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .m-release__verdict-word { font-size: 24px; font-weight: 600; letter-spacing: 0.4px; color: var(--meridian-text); margin-top: 4px; } .m-release__verdict-score { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-dim); } .m-release__verdict-num { font-size: 14px; color: var(--meridian-text); font-weight: 600; } .m-release__verdict-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 180px; } .m-release__signoff-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--meridian-border-hair); align-items: flex-start; position: relative; } .m-release__signoff-row:last-child { border-bottom: none; } .m-release__signoff-connector { position: absolute; left: 22px; top: 28px; bottom: -10px; width: 1px; background: var(--meridian-border-hair); } .m-release__signoff-dot { z-index: 1; } .m-release__signoff-mid { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .m-release__signoff-line { font-size: 12px; color: var(--meridian-text); } .m-release__signoff-name { font-weight: 500; } .m-release__signoff-role { color: var(--meridian-text-dim); margin-left: 4px; } .m-release__signoff-note { font-size: 11px; color: var(--meridian-text-dim); } /* I-audit fix — text-faint (#a3abb8) on bg-panel (#fafbfc) is 2.23:1. text-mid. */ .m-release__signoff-ts { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-mid); white-space: nowrap; } .m-release__gates-summary { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-dim); } .m-release__gates-summary-pass { color: var(--meridian-pass); font-weight: 600; } .m-release__gate-section { padding: 8px 14px 4px; font-size: 9.5px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); text-transform: uppercase; letter-spacing: 0.8px; border-top: 1px solid var(--meridian-border-hair); } .m-release__gate-section:first-child { border-top: none; } .m-release__gate-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--meridian-border-hair); } .m-release__gate-row:last-child { border-bottom: none; } .m-release__gate-label { font-size: 12px; color: var(--meridian-text); } .m-release__gate-thresh { font-size: 10px; color: var(--meridian-text-mid); font-family: var(--meridian-font-mono); } /* I-audit: text-faint on bg-panel = 2.23:1 → text-mid */ .m-release__gate-val { font-family: var(--meridian-font-mono); font-size: 12px; color: var(--meridian-text); font-variant-numeric: tabular-nums; } .m-release__gate-val--fail { color: var(--meridian-fail); } .m-release__timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 14px; } @media (max-width: 720px) { .m-release__timeline { grid-template-columns: repeat(3, 1fr); } } .m-release__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; } .m-release__stage-line { position: absolute; top: 12px; left: 50%; width: 100%; height: 1px; background: var(--meridian-border-hair); z-index: 0; } .m-release__stage-line--pass { background: var(--meridian-pass); } .m-release__stage-line--fail { background: var(--meridian-fail); } .m-release__stage-line--warn { background: var(--meridian-warn); } .m-release__stage-line--pending { background: var(--meridian-border-hair); } .m-release__stage-name { font-size: 11px; color: var(--meridian-text); font-weight: 500; } .m-release__stage-meta { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-mid); } /* I-audit: text-faint on bg-panel = 2.23:1 → text-mid */ .m-release__impact-row { display: grid; grid-template-columns: 140px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--meridian-border-hair); } .m-release__impact-row:last-child { border-bottom: none; } .m-release__impact-svc { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text); } .m-release__impact-track { height: 6px; background: var(--meridian-bg-sunk); border-radius: 999px; overflow: hidden; } .m-release__impact-bar { height: 100%; } .m-release__impact-bar--pass { background: var(--meridian-pass); } .m-release__impact-bar--warn { background: var(--meridian-warn); } .m-release__impact-bar--fail { background: var(--meridian-fail); } .m-release__impact-count { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-dim); white-space: nowrap; } .m-release__risk-list { display: flex; flex-direction: column; gap: 12px; } .m-release__risk { display: flex; flex-direction: column; gap: 4px; } .m-release__risk-row { display: flex; justify-content: space-between; align-items: baseline; } .m-release__risk-label { font-size: 12px; color: var(--meridian-text); } .m-release__risk-score { font-family: var(--meridian-font-mono); font-size: 12px; font-variant-numeric: tabular-nums; } /* I-audit fix — base tones on bg-panel (#fafbfc) fail AA: pass = 4.31:1, warn = 3.07:1, fail = 3.57:1 on bg-panel. -strong variants pass. */ .m-release__risk-score--pass { color: var(--meridian-pass-strong); } .m-release__risk-score--warn { color: var(--meridian-warn-strong); } .m-release__risk-score--fail { color: var(--meridian-fail-strong); } .m-release__risk-track { height: 5px; background: var(--meridian-bg-sunk); border-radius: 999px; overflow: hidden; } .m-release__risk-bar { height: 100%; } .m-release__risk-bar--pass { background: var(--meridian-pass); } .m-release__risk-bar--warn { background: var(--meridian-warn); } .m-release__risk-bar--fail { background: var(--meridian-fail); } .m-release__risk-note { font-size: 11px; color: var(--meridian-text-dim); } .m-release__activity-row { padding: 8px 14px; border-bottom: 1px solid var(--meridian-border-hair); display: flex; flex-direction: column; gap: 2px; } .m-release__activity-row:last-child { border-bottom: none; } .m-release__activity-line { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--meridian-text); } .m-release__activity-act { color: var(--meridian-text-dim); } .m-release__activity-t { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-mid); } /* I-audit: text-faint on bg-panel = 2.23:1 → text-mid */ /* I-audit fix — accent (#18b800) on bg-panel (#fafbfc) is 2.56:1. accent-strong. */ .m-release__activity-target { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-accent-strong); } .m-release__activity-detail { font-size: 11px; color: var(--meridian-text-dim); } /* ================================================================== */ /* Performance screen ($m-perf__*) */ /* ================================================================== */ .m-screen--perf { padding: 14px; gap: 0; } .m-perf__layout { display: grid; grid-template-columns: 340px 1fr; gap: 14px; min-height: 0; } @media (max-width: 1100px) { .m-perf__layout { grid-template-columns: 1fr; } } .m-perf__list { display: flex; flex-direction: column; } .m-perf__list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--meridian-border-hair); border-left: 3px solid transparent; background: transparent; cursor: pointer; text-align: left; color: inherit; font-family: inherit; width: 100%; } .m-perf__list-row:hover { background: var(--meridian-bg-sunk); } .m-perf__list-row--selected { border-left-color: var(--meridian-accent); background: var(--meridian-accent-soft); } .m-perf__list-name { font-family: var(--meridian-font-mono); font-size: 12px; color: var(--meridian-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-perf__list-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; grid-column: 1 / -1; } /* I-audit fix — text-dim (#6c7482) on accent-soft selected row (#dcf6d1) is 4.07:1, below AA 4.5:1. text-mid (#3d4450) passes on all surfaces. */ .m-perf__list-stats { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-mid); display: flex; gap: 8px; } .m-perf__list-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .m-perf__list-delta { font-family: var(--meridian-font-mono); font-size: 11px; } /* I-audit fix — base tones on bg-panel (#fafbfc) and accent-soft selected row (#dcf6d1) fail AA. -strong variants cover both surfaces. */ .m-perf__list-delta--pass { color: var(--meridian-pass-strong); } .m-perf__list-delta--warn { color: var(--meridian-warn-strong); } .m-perf__list-delta--fail { color: var(--meridian-fail-strong); } .m-perf__detail { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .m-perf__hero { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); } .m-perf__hero-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .m-perf__hero-label { font-family: var(--meridian-font-mono); font-size: 14px; color: var(--meridian-text); font-weight: 500; } .m-perf__hero-meta { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-dim); } .m-perf__hero-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .m-perf__hero-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } @media (max-width: 1100px) { .m-perf__hero-stats { grid-template-columns: repeat(3, 1fr); } } .m-perf__chart { display: block; width: 100%; height: 260px; } .m-perf__bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 1100px) { .m-perf__bottom { grid-template-columns: 1fr; } } .m-perf__hist { display: flex; flex-direction: column; gap: 6px; padding: 0 6px; } .m-perf__hist-bars { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 3px; height: 120px; } .m-perf__hist-bar { background: var(--meridian-accent-soft); border-top: 1px solid var(--meridian-accent); } .m-perf__hist-bar--past { background: var(--meridian-bg-sunk); border-top-color: var(--meridian-text-faint); opacity: 0.6; } /* I-audit fix — text-faint (#a3abb8) on bg-panel (#fafbfc) is 2.23:1. text-mid. */ .m-perf__hist-scale { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; font-family: var(--meridian-font-mono); font-size: 9px; color: var(--meridian-text-mid); text-align: center; } .m-perf__hist-meta { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-dim); } /* I-audit fix — warn (#d97706) on bg-panel is 3.07:1, fails AA. warn-strong passes. */ .m-perf__hist-p95 { color: var(--meridian-warn-strong); } .m-perf__profiler { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; } .m-perf__profiler-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 70px 1fr 60px; gap: 8px; align-items: center; padding: 4px 12px; } .m-perf__profiler-fn { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-perf__profiler-self { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-dim); text-align: right; } .m-perf__profiler-track { height: 6px; background: var(--meridian-bg-sunk); border-radius: 999px; overflow: hidden; } .m-perf__profiler-bar { height: 100%; background: var(--meridian-accent); } .m-perf__profiler-bar--hot { background: var(--meridian-fail); } .m-perf__profiler-delta { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-dim); text-align: right; } .m-perf__profiler-delta--bad { color: var(--meridian-fail); } .m-perf__compare { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 12px; } @media (max-width: 1100px) { .m-perf__compare { grid-template-columns: repeat(4, 1fr); } } .m-perf__compare-cell { background: var(--meridian-bg-sunk); border: 1px solid var(--meridian-border-hair); border-radius: var(--meridian-radius); padding: 8px; display: flex; flex-direction: column; gap: 4px; } .m-perf__compare-val { font-family: var(--meridian-font-mono); font-size: 14px; font-weight: 600; color: var(--meridian-text); font-variant-numeric: tabular-nums; } /* I-audit fix — text-faint (#a3abb8) on bg-sunk (#e7eaef) is 1.91:1; on bg-panel (#fafbfc) is 2.23:1; both fail AA badly. text-mid passes. */ .m-perf__compare-unit { font-size: 9px; color: var(--meridian-text-mid); margin-left: 2px; } .m-perf__compare-track { height: 4px; background: var(--meridian-bg); border-radius: 999px; overflow: hidden; } .m-perf__compare-bar { height: 100%; } .m-perf__compare-bar--pass { background: var(--meridian-pass); } .m-perf__compare-bar--fail { background: var(--meridian-fail); } /* ================================================================== */ /* Env compare screen ($m-envcompare__*) */ /* ================================================================== */ .m-screen--envcompare { padding: 14px; gap: 14px; } .m-envcompare__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .m-envcompare__title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .m-envcompare__title { font-size: 22px; font-weight: 600; letter-spacing: -0.6px; margin: 0; color: var(--meridian-text); } .m-envcompare__sub { font-size: 12px; color: var(--meridian-text-dim); } .m-envcompare__sub-strong { color: var(--meridian-text); font-weight: 500; } .m-envcompare__head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .m-envcompare__range-pills { display: inline-flex; gap: 0; border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); overflow: hidden; } .m-envcompare__range-pill { background: transparent; border: none; padding: 5px 10px; font-family: var(--meridian-font-mono); font-size: 11px; /* I-audit fix — text-dim (#6c7482) on bg (#f3f5f8) is 4.31:1. text-mid. */ color: var(--meridian-text-mid); cursor: pointer; border-right: 1px solid var(--meridian-border-hair); } .m-envcompare__range-pill:last-child { border-right: none; } /* I-audit fix — accent (#18b800) on accent-soft (#dcf6d1) is 2.29:1. accent-strong (#0c6b00) passes on accent-soft. */ .m-envcompare__range-pill--selected { background: var(--meridian-accent-soft); color: var(--meridian-accent-strong); } .m-envcompare__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 1100px) { .m-envcompare__cards { grid-template-columns: 1fr; } } .m-envcompare__card { position: relative; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); padding: 12px 14px; overflow: hidden; } .m-envcompare__card-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .m-envcompare__card-head { display: flex; justify-content: space-between; align-items: baseline; } .m-envcompare__card-name { font-family: var(--meridian-font-mono); font-size: 12px; color: var(--meridian-text); } /* I-audit fix — text-faint (#a3abb8) on bg-panel (#fafbfc) is 2.23:1. text-mid. */ .m-envcompare__card-runs { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-mid); } .m-envcompare__card-pass { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; } .m-envcompare__card-pass-num { font-family: var(--meridian-font-mono); font-size: 24px; font-weight: 600; color: var(--meridian-text); font-variant-numeric: tabular-nums; } .m-envcompare__card-pass-unit { font-size: 11px; color: var(--meridian-text-dim); } .m-envcompare__card-delta { font-family: var(--meridian-font-mono); font-size: 11px; } /* I-audit fix — base tones on bg-panel (#fafbfc) fail AA. -strong variants. */ .m-envcompare__card-delta--pass { color: var(--meridian-pass-strong); } .m-envcompare__card-delta--warn { color: var(--meridian-warn-strong); } .m-envcompare__card-delta--fail { color: var(--meridian-fail-strong); } .m-envcompare__card-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--meridian-border-hair); } .m-kv__k { font-size: 9.5px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); text-transform: uppercase; letter-spacing: 0.6px; } .m-kv__v { font-family: var(--meridian-font-mono); font-size: 12px; color: var(--meridian-text); font-variant-numeric: tabular-nums; } .m-envcompare__body { display: grid; grid-template-columns: 1fr 420px; gap: 14px; min-height: 0; } @media (max-width: 1280px) { .m-envcompare__body { grid-template-columns: 1fr; } } .m-envcompare__left { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .m-envcompare__chart { display: block; width: 100%; height: 220px; } .m-envcompare__legend { display: flex; gap: 14px; padding: 6px 14px; flex-wrap: wrap; border-top: 1px solid var(--meridian-border-hair); } .m-envcompare__legend-item { display: flex; align-items: center; gap: 6px; font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-dim); } .m-envcompare__legend-swatch { width: 10px; height: 2px; border-radius: 999px; } .m-envcompare__matrix { display: flex; flex-direction: column; gap: 0; padding: 12px; } .m-envcompare__matrix-row { display: grid; grid-template-columns: 80px repeat(3, 1fr); gap: 4px; align-items: center; } .m-envcompare__matrix-row--head { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-dim); padding-bottom: 4px; border-bottom: 1px solid var(--meridian-border-hair); margin-bottom: 4px; } .m-envcompare__matrix-th { text-align: center; text-transform: uppercase; letter-spacing: 0.6px; } .m-envcompare__matrix-label-row { padding: 4px 0; } .m-envcompare__matrix-label { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text); } .m-envcompare__matrix-cell { height: 32px; border: 1px solid var(--meridian-border-hair); border-radius: var(--meridian-radius); display: flex; align-items: center; justify-content: center; font-family: var(--meridian-font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums; background: var(--meridian-bg-sunk); color: var(--meridian-text-dim); } .m-envcompare__matrix-cell--diag { background: transparent; color: var(--meridian-text-faint); } .m-envcompare__matrix-cell--ok { background: var(--meridian-pass-soft); color: var(--meridian-pass); } .m-envcompare__matrix-cell--warn { background: var(--meridian-warn-soft); color: var(--meridian-warn); } .m-envcompare__matrix-cell--bad { background: var(--meridian-fail-soft); color: var(--meridian-fail); } .m-envcompare__matrix-foot { padding-top: 6px; font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-faint); } .m-envcompare__divlist { display: flex; flex-direction: column; } .m-envcompare__div-head { padding: 8px 14px; font-size: 9.5px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 1px solid var(--meridian-border-hair); } .m-envcompare__div-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--meridian-border-hair); } .m-envcompare__div-row:last-child { border-bottom: none; } .m-envcompare__div-test { font-family: var(--meridian-font-mono); font-size: 11.5px; color: var(--meridian-text); } .m-envcompare__div-from-to { display: flex; align-items: center; gap: 6px; font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-dim); } .m-envcompare__div-env { padding: 1px 5px; border-radius: 3px; background: var(--meridian-bg-sunk); border: 1px solid var(--meridian-border-hair); color: var(--meridian-text); } .m-envcompare__div-arrow { color: var(--meridian-text-faint); } .m-envcompare__div-verdict { color: var(--meridian-fail); } .m-envcompare__div-note { font-size: 11px; color: var(--meridian-text-dim); } /* ================================================================== */ /* Flaky deep-dive screen ($m-flaky__*) */ /* ================================================================== */ .m-screen--flaky { padding: 14px; gap: 14px; } .m-flaky__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .m-flaky__title { font-size: 22px; font-weight: 600; letter-spacing: -0.6px; margin: 0; color: var(--meridian-text); } .m-flaky__head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .m-flaky__layout { display: grid; grid-template-columns: 460px 1fr; gap: 14px; min-height: 0; } @media (max-width: 1280px) { .m-flaky__layout { grid-template-columns: 1fr; } } .m-flaky__list { display: flex; flex-direction: column; } .m-flaky__list-head { display: grid; grid-template-columns: 60px minmax(0, 1fr) 70px 50px; gap: 6px; padding: 8px 12px; font-size: 9.5px; /* I-audit fix — text-dim (#6c7482) on bg (#f3f5f8) is 4.31:1. text-mid. */ color: var(--meridian-text-mid); font-family: var(--meridian-font-mono); text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 1px solid var(--meridian-border); } .m-flaky__list-row { display: grid; grid-template-columns: 60px minmax(0, 1fr) 70px 50px; gap: 6px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--meridian-border-hair); border-left: 3px solid transparent; background: transparent; cursor: pointer; text-align: left; color: inherit; font-family: inherit; width: 100%; } .m-flaky__list-row:hover { background: var(--meridian-bg-sunk); } .m-flaky__list-row--selected { border-left-color: var(--meridian-warn); background: var(--meridian-warn-soft); } /* I-audit fix — text-faint (#a3abb8) on warn-soft selected row (#fde6c4) is 1.90:1; on bg (#f3f5f8) is 2.11:1; both fail AA. text-mid passes. */ .m-flaky__list-id { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-mid); } .m-flaky__list-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .m-flaky__list-name { font-family: var(--meridian-font-mono); font-size: 11.5px; color: var(--meridian-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* I-audit fix — text-dim (#6c7482) on warn-soft selected row (#fde6c4) is 3.87:1; on other surfaces also borderline. text-mid passes everywhere. */ .m-flaky__list-meta { font-size: 10.5px; color: var(--meridian-text-mid); display: flex; gap: 6px; flex-wrap: wrap; } /* I-audit fix — warn (#d97706) on bg (#f3f5f8) = 2.91:1, on warn-soft selected row (#fde6c4) = 2.62:1; both fail AA. warn-strong (#8a4a02) passes. */ .m-flaky__list-rate { font-family: var(--meridian-font-mono); font-size: 12px; color: var(--meridian-warn-strong); font-variant-numeric: tabular-nums; text-align: right; } .m-flaky__list-trend { font-family: var(--meridian-font-mono); font-size: 11px; text-align: right; } .m-flaky__list-trend--up { color: var(--meridian-fail); } .m-flaky__list-trend--down { color: var(--meridian-pass); } .m-flaky__list-trend--flat { color: var(--meridian-text-dim); } .m-flaky__list-col { display: flex; } /* I-audit fix — text-faint (#a3abb8) on bg (#f3f5f8) is 2.11:1. text-mid. */ .m-flaky__list-count { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-mid); margin-left: auto; } .m-flaky__list-right { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; } .m-flaky__detail { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .m-flaky__summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 12px; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); } @media (max-width: 1100px) { .m-flaky__summary { grid-template-columns: repeat(2, 1fr); } } .m-flaky__summary-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .m-flaky__summary-cell--wide { grid-column: span 2; } .m-flaky__summary-test { font-family: var(--meridian-font-mono); font-size: 12px; color: var(--meridian-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-flaky__summary-val { font-family: var(--meridian-font-mono); font-size: 16px; font-weight: 600; color: var(--meridian-text); font-variant-numeric: tabular-nums; } .m-flaky__summary-val--text { font-size: 12px; font-weight: 500; } .m-flaky__summary-sub { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-dim); } .m-flaky__summary-sub--bad { color: var(--meridian-fail); } .m-flaky__diagnosis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 1100px) { .m-flaky__diagnosis { grid-template-columns: 1fr; } } .m-flaky__causes { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; } .m-flaky__cause { display: flex; flex-direction: column; gap: 4px; } .m-flaky__cause-row { display: flex; justify-content: space-between; align-items: baseline; } .m-flaky__cause-label { font-size: 12px; color: var(--meridian-text); } .m-flaky__cause-score { font-family: var(--meridian-font-mono); font-size: 12px; font-variant-numeric: tabular-nums; } .m-flaky__cause-score--high { color: var(--meridian-fail); } .m-flaky__cause-score--mid { color: var(--meridian-warn); } .m-flaky__cause-score--low { color: var(--meridian-text-dim); } .m-flaky__cause-track { height: 5px; background: var(--meridian-bg-sunk); border-radius: 999px; overflow: hidden; } .m-flaky__cause-bar { height: 100%; } .m-flaky__cause-bar--high { background: var(--meridian-fail); } .m-flaky__cause-bar--mid { background: var(--meridian-warn); } .m-flaky__cause-bar--low { background: var(--meridian-text-faint); } .m-flaky__cause-note { font-size: 11px; color: var(--meridian-text-dim); } .m-flaky__fixes { display: flex; flex-direction: column; padding: 8px 0; } .m-flaky__fix { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--meridian-border-hair); } .m-flaky__fix:last-child { border-bottom: none; } .m-flaky__fix-num { width: 22px; height: 22px; border-radius: 999px; background: var(--meridian-accent-soft); /* I-audit fix — accent (#18b800) on accent-soft (#dcf6d1) is 2.29:1. accent-strong (#0c6b00) passes on accent-soft. */ color: var(--meridian-accent-strong); display: flex; align-items: center; justify-content: center; font-family: var(--meridian-font-mono); font-size: 11px; font-weight: 600; } .m-flaky__fix-text { font-size: 12px; color: var(--meridian-text); line-height: 1.45; } .m-flaky__charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 1100px) { .m-flaky__charts { grid-template-columns: 1fr; } } .m-flaky__heatmap { display: flex; flex-direction: column; gap: 2px; padding: 12px; } .m-flaky__heatmap-row { display: grid; grid-template-columns: 32px repeat(24, 1fr); gap: 2px; align-items: center; } .m-flaky__heatmap-row--head { font-family: var(--meridian-font-mono); font-size: 9px; color: var(--meridian-text-faint); } .m-flaky__heatmap-d { font-family: var(--meridian-font-mono); font-size: 9.5px; color: var(--meridian-text-dim); text-align: right; padding-right: 4px; } /* I-audit fix — text-faint (#a3abb8) on bg-panel (#fafbfc) is 2.23:1. text-mid. */ .m-flaky__heatmap-h { font-family: var(--meridian-font-mono); font-size: 8.5px; color: var(--meridian-text-mid); text-align: center; } .m-flaky__heatmap-cell { aspect-ratio: 1 / 1; border-radius: 2px; background: var(--meridian-bg-sunk); border: 1px solid var(--meridian-border-hair); } .m-flaky__heatmap-cell--0 { background: var(--meridian-bg-sunk); } .m-flaky__heatmap-cell--1 { background: var(--meridian-warn-soft); border-color: var(--meridian-warn-soft); } .m-flaky__heatmap-cell--2 { background: var(--meridian-warn); border-color: var(--meridian-warn); opacity: 0.6; } .m-flaky__heatmap-cell--3 { background: var(--meridian-warn); border-color: var(--meridian-warn); } .m-flaky__heatmap-cell--4 { background: var(--meridian-fail); border-color: var(--meridian-fail); } .m-flaky__cluster { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; } .m-flaky__cluster-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr 50px; gap: 8px; align-items: center; } .m-flaky__cluster-name { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-flaky__cluster-track { height: 5px; background: var(--meridian-bg-sunk); border-radius: 999px; overflow: hidden; } .m-flaky__cluster-bar { height: 100%; } .m-flaky__cluster-bar--high { background: var(--meridian-fail); } .m-flaky__cluster-bar--mid { background: var(--meridian-warn); } .m-flaky__cluster-bar--low { background: var(--meridian-accent); } .m-flaky__cluster-pct { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-dim); text-align: right; font-variant-numeric: tabular-nums; } /* ================================================================== */ /* Test detail screen ($m-testdetail__*) */ /* ================================================================== */ .m-screen--testdetail { padding: 14px; gap: 14px; } .m-testdetail__header { background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .m-testdetail__chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .m-testdetail__head-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .m-testdetail__title { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; margin: 0; color: var(--meridian-text); font-family: var(--meridian-font-mono); } .m-testdetail__meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 11px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); } .m-testdetail__meta-sep { color: var(--meridian-text-faint); } .m-testdetail__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; } .m-testdetail__stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } @media (max-width: 1280px) { .m-testdetail__stats { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 720px) { .m-testdetail__stats { grid-template-columns: repeat(2, 1fr); } } .m-testdetail__stat { background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border-hair); border-radius: var(--meridian-radius); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .m-testdetail__stat-val { font-family: var(--meridian-font-mono); font-size: 14px; font-weight: 600; color: var(--meridian-text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-testdetail__stat-sub { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-dim); } .m-testdetail__stat-sub--bad { color: var(--meridian-fail); } .m-testdetail__body { display: flex; flex-direction: column; gap: 14px; min-height: 0; } .m-testdetail__timeline { display: grid; grid-template-columns: 1fr 360px; gap: 14px; } @media (max-width: 1280px) { .m-testdetail__timeline { grid-template-columns: 1fr; } } .m-testdetail__charts { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .m-testdetail__chart { display: block; width: 100%; height: 160px; } .m-testdetail__runs { display: flex; flex-direction: column; } .m-testdetail__run { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 14px; border-bottom: 1px solid var(--meridian-border-hair); font-family: var(--meridian-font-mono); font-size: 11px; } .m-testdetail__run:last-child { border-bottom: none; } .m-testdetail__run-branch { color: var(--meridian-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* I-audit fix — accent (#18b800) on bg-panel (#fafbfc) is 2.56:1. accent-strong. */ .m-testdetail__run-id { color: var(--meridian-accent-strong); } .m-testdetail__run-dur { color: var(--meridian-text-dim); text-align: right; } /* I-audit fix — text-faint (#a3abb8) on bg-panel (#fafbfc) is 2.23:1. text-mid gives ~8:1. */ .m-testdetail__run-t { color: var(--meridian-text-mid); } .m-testdetail__flake { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 1100px) { .m-testdetail__flake { grid-template-columns: 1fr; } } .m-testdetail__commit { display: grid; grid-template-columns: 80px minmax(0, 1fr) 60px; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--meridian-border-hair); } .m-testdetail__commit:last-child { border-bottom: none; } .m-testdetail__commit-sha { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-accent); } .m-testdetail__commit-msg { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .m-testdetail__commit-msg-text { font-size: 12px; color: var(--meridian-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-testdetail__commit-msg-by { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-dim); } .m-testdetail__commit-when { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-faint); text-align: right; } .m-testdetail__related { display: flex; flex-direction: column; } .m-testdetail__related-id { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: center; } .m-testdetail__related-name { display: grid; grid-template-columns: 60px minmax(0, 1.4fr) 1fr 50px auto; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--meridian-border-hair); font-family: var(--meridian-font-mono); font-size: 11px; } .m-testdetail__related-name:last-child { border-bottom: none; } .m-testdetail__related-meter { display: contents; } .m-testdetail__related-track { height: 5px; background: var(--meridian-bg-sunk); border-radius: 999px; overflow: hidden; } .m-testdetail__related-bar { height: 100%; } .m-testdetail__related-bar--high { background: var(--meridian-fail); } .m-testdetail__related-bar--mid { background: var(--meridian-warn); } .m-testdetail__related-bar--low { background: var(--meridian-accent); } .m-testdetail__related-pct { font-family: var(--meridian-font-mono); color: var(--meridian-text-dim); text-align: right; font-variant-numeric: tabular-nums; } .m-testdetail__deps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 1100px) { .m-testdetail__deps { grid-template-columns: 1fr; } } .m-testdetail__deps-head, .m-testdetail__dep { display: grid; grid-template-columns: minmax(0, 1.4fr) 60px 1fr 50px; gap: 8px; align-items: center; padding: 6px 14px; } .m-testdetail__deps-head { font-size: 9.5px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid var(--meridian-border); } .m-testdetail__dep { border-bottom: 1px solid var(--meridian-border-hair); } .m-testdetail__dep:last-child { border-bottom: none; } .m-testdetail__dep-path { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-testdetail__dep-cov { font-family: var(--meridian-font-mono); font-size: 11px; font-variant-numeric: tabular-nums; } .m-testdetail__dep-cov--high { color: var(--meridian-pass); } .m-testdetail__dep-cov--mid { color: var(--meridian-warn); } .m-testdetail__dep-cov--low { color: var(--meridian-fail); } .m-testdetail__dep-lines { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-dim); } .m-testdetail__dep-mod { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-faint); text-align: right; } .m-testdetail__graph { display: block; width: 100%; height: 280px; padding: 12px; } .m-testdetail__trace { display: grid; grid-template-columns: 1fr 320px; gap: 14px; } @media (max-width: 1280px) { .m-testdetail__trace { grid-template-columns: 1fr; } } .m-testdetail__waterfall { display: flex; flex-direction: column; } .m-testdetail__wf-row { display: grid; grid-template-columns: 200px 1fr 60px; gap: 8px; align-items: center; padding: 5px 14px; border-bottom: 1px solid var(--meridian-border-hair); } .m-testdetail__wf-row:last-child { border-bottom: none; } .m-testdetail__wf-label { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-testdetail__wf-track { height: 14px; position: relative; background: var(--meridian-bg-sunk); border-radius: 2px; overflow: hidden; } .m-testdetail__wf-bar { position: absolute; top: 0; bottom: 0; border-radius: 2px; } .m-testdetail__wf-bar--info { background: var(--meridian-info); } .m-testdetail__wf-bar--accent { background: var(--meridian-accent); } .m-testdetail__wf-bar--warn { background: var(--meridian-warn); } .m-testdetail__wf-bar--fail { background: var(--meridian-fail); } .m-testdetail__wf-bar--muted { background: var(--meridian-text-faint); opacity: 0.5; } .m-testdetail__wf-dur { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-dim); text-align: right; font-variant-numeric: tabular-nums; } .m-testdetail__video { display: flex; flex-direction: column; gap: 8px; padding: 12px; } .m-testdetail__video-frame { aspect-ratio: 16 / 10; background: var(--meridian-bg-sunk); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); display: flex; align-items: center; justify-content: center; color: var(--meridian-text-faint); font-family: var(--meridian-font-mono); font-size: 11px; } .m-testdetail__video-play { font-size: 32px; color: var(--meridian-text-dim); } .m-testdetail__video-meta { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-dim); display: flex; gap: 8px; flex-wrap: wrap; } .m-testdetail__video-events { display: flex; flex-direction: column; gap: 2px; font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-dim); } .m-testdetail__video-event--warn { color: var(--meridian-warn); } .m-testdetail__video-event--fail { color: var(--meridian-fail); } /* ================================================================== */ /* Settings hub screen ($m-settings__*) */ /* ================================================================== */ .m-screen--settings { padding: 0; gap: 0; } .m-settings__layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 64px); } @media (max-width: 1100px) { .m-settings__layout { grid-template-columns: 1fr; } } .m-settings__rail { background: var(--meridian-bg-panel); border-right: 1px solid var(--meridian-border); padding: 14px 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .m-settings__rail-workspace { padding: 8px 14px; border-bottom: 1px solid var(--meridian-border-hair); margin: 0 8px 6px; background: var(--meridian-bg-sunk); border-radius: var(--meridian-radius); border: 1px solid var(--meridian-border-hair); } .m-settings__rail-ws-name { font-size: 12px; font-weight: 500; color: var(--meridian-text); } /* I-audit fix — text-dim (#6c7482) on bg-sunk (#e7eaef) is 3.9:1. text-mid. */ .m-settings__rail-ws-meta { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-mid); } .m-settings__rail-group { display: flex; flex-direction: column; gap: 0; padding: 0 6px; } .m-settings__rail-group .m-eyebrow { padding: 4px 10px; } .m-settings__rail-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--meridian-radius); background: transparent; border: none; color: var(--meridian-text-dim); cursor: pointer; text-align: left; font-family: inherit; font-size: 12px; width: 100%; } .m-settings__rail-item:hover { background: var(--meridian-bg-sunk); color: var(--meridian-text); } /* I-audit fix — accent (#18b800) on accent-soft (#dcf6d1) is 2.29:1. accent-strong. */ .m-settings__rail-item--active { background: var(--meridian-accent-soft); color: var(--meridian-accent-strong); } .m-settings__rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* I-audit fix — text-faint (#a3abb8) on bg-panel (#fafbfc) is 2.23:1. text-mid. */ .m-settings__rail-count { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-mid); } .m-settings__rail-badge { font-family: var(--meridian-font-mono); font-size: 9px; padding: 1px 5px; border-radius: 3px; background: var(--meridian-fail); /* I-audit fix — bg (#f3f5f8) on fail (#e01f2b) gives 4.41:1, just below AA 4.5:1. bg-raised (#ffffff) gives 4.79:1 on fail. */ color: var(--meridian-bg-raised); } .m-settings__pane { padding: 24px 28px; min-width: 0; overflow-y: auto; } .m-settings__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; } .m-settings__head-title { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; margin: 0; color: var(--meridian-text); } /* I-audit fix — text-dim (#6c7482) on bg (#f3f5f8) is 4.31:1. text-mid. */ .m-settings__head-sub { font-size: 13px; color: var(--meridian-text-mid); } .m-settings__head-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .m-settings__content { display: flex; flex-direction: column; gap: 24px; } .m-settings__section { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--meridian-border-hair); } .m-settings__section:last-child { border-bottom: none; } @media (max-width: 1100px) { .m-settings__section { grid-template-columns: 1fr; gap: 12px; } } .m-settings__section-side { display: flex; flex-direction: column; gap: 6px; } .m-settings__section-title { font-size: 14px; font-weight: 600; color: var(--meridian-text); margin: 0; } .m-settings__section-desc { font-size: 12px; color: var(--meridian-text-mid); line-height: 1.5; } /* I-audit: text-dim on bg = 4.31:1 → text-mid */ .m-settings__section-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .m-settings__identity { display: flex; gap: 16px; align-items: flex-start; } .m-settings__avatar { display: flex; flex-direction: column; gap: 6px; align-items: center; } .m-settings__avatar-circle { width: 64px; height: 64px; border-radius: 999px; background: var(--meridian-accent-soft); border: 1px solid var(--meridian-accent); display: flex; align-items: center; justify-content: center; font-family: var(--meridian-font-mono); font-size: 22px; color: var(--meridian-accent-strong); font-weight: 600; /* I-audit: accent on accent-soft = 2.29:1 → accent-strong */ } .m-settings__avatar-upload { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-mid); } /* I-audit: text-dim on bg = 4.31:1 → text-mid */ .m-settings__identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; } @media (max-width: 720px) { .m-settings__identity-grid { grid-template-columns: 1fr; } } .m-settings__field { display: flex; flex-direction: column; gap: 4px; } .m-settings__field .m-eyebrow { font-size: 10px; } .m-settings__input { background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); padding: 6px 10px; font-family: var(--meridian-font-sans); font-size: 12px; color: var(--meridian-text); } .m-settings__input--mono { font-family: var(--meridian-font-mono); } .m-settings__input--narrow { max-width: 260px; } .m-settings__hint { font-size: 11px; color: var(--meridian-text-mid); } /* I-audit: text-dim on bg = 4.31:1 → text-mid */ .m-settings__req { color: var(--meridian-fail); margin-left: 2px; } .m-settings__btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .m-settings__toggle { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--meridian-border-hair); border-radius: var(--meridian-radius); background: var(--meridian-bg-panel); } .m-settings__toggle-pill { width: 36px; height: 18px; border-radius: 999px; background: var(--meridian-bg-sunk); border: 1px solid var(--meridian-border); position: relative; } .m-settings__toggle-pill::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 999px; background: var(--meridian-text-faint); top: 1px; left: 1px; transition: all 0.2s ease; } .m-settings__toggle-pill--on { background: var(--meridian-accent-soft); border-color: var(--meridian-accent); } .m-settings__toggle-pill--on::after { background: var(--meridian-accent); left: 19px; } .m-settings__toggle-label { font-size: 12px; color: var(--meridian-text); font-weight: 500; } .m-settings__toggle-hint { font-size: 11px; color: var(--meridian-text-dim); } .m-settings__danger { border: 1px solid var(--meridian-fail); border-radius: var(--meridian-radius); padding: 12px 14px; background: var(--meridian-fail-soft); display: flex; flex-direction: column; gap: 6px; } /* I-audit fix — fail (#e01f2b) on fail-soft (#fcd6d8) is 3.57:1. fail-strong. */ .m-settings__danger-title { font-size: 12px; color: var(--meridian-fail-strong); font-weight: 600; } .m-settings__danger-desc { font-size: 11px; color: var(--meridian-text); } .m-settings__token-banner { background: var(--meridian-warn-soft); border: 1px solid var(--meridian-warn); border-radius: var(--meridian-radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .m-settings__token-banner-eyebrow { font-family: var(--meridian-font-mono); font-size: 9.5px; color: var(--meridian-warn); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600; } .m-settings__token-banner-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .m-settings__token-banner-val { font-family: var(--meridian-font-mono); font-size: 12px; color: var(--meridian-text); background: var(--meridian-bg); padding: 4px 8px; border-radius: 3px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-settings__token-table { display: flex; flex-direction: column; border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); overflow: hidden; } .m-settings__token-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 100px 1fr 80px 80px 30px; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--meridian-border-hair); } .m-settings__token-row:last-child { border-bottom: none; } .m-settings__token-row--head { background: var(--meridian-bg-sunk); font-size: 9.5px; color: var(--meridian-text-dim); font-family: var(--meridian-font-mono); text-transform: uppercase; letter-spacing: 0.6px; } .m-settings__token-cell { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-settings__token-cell--muted { color: var(--meridian-text-dim); } .m-settings__token-cell--warn { color: var(--meridian-warn); } .m-settings__token-name { font-weight: 500; color: var(--meridian-text); } .m-settings__token-prefix { color: var(--meridian-text-dim); } .m-settings__token-created { color: var(--meridian-text-faint); } .m-settings__token-scopes { display: flex; gap: 3px; flex-wrap: wrap; } .m-settings__token-scope { font-family: var(--meridian-font-mono); font-size: 9.5px; padding: 1px 4px; border-radius: 3px; background: var(--meridian-bg-sunk); color: var(--meridian-text-dim); border: 1px solid var(--meridian-border-hair); } .m-settings__token-scope--wild { color: var(--meridian-warn); border-color: var(--meridian-warn); } .m-settings__token-more { color: var(--meridian-text-faint); font-size: 10px; } .m-settings__token-foot { font-size: 10px; color: var(--meridian-text-dim); } .m-settings__token-foot-warn { color: var(--meridian-warn); } .m-settings__scope-table { display: flex; flex-direction: column; border: 1px solid var(--meridian-border-hair); border-radius: var(--meridian-radius); overflow: hidden; } .m-settings__scope-row { display: grid; grid-template-columns: 200px 1fr; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--meridian-border-hair); align-items: center; } .m-settings__scope-row:last-child { border-bottom: none; } .m-settings__scope-name { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-accent); } .m-settings__scope-desc { font-size: 11px; color: var(--meridian-text-dim); } .m-settings__error-banner { background: var(--meridian-fail-soft); border: 1px solid var(--meridian-fail); border-radius: var(--meridian-radius); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; } .m-settings__error-eyebrow { font-family: var(--meridian-font-mono); font-size: 9.5px; color: var(--meridian-fail); text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600; } .m-settings__error-text { font-size: 12px; color: var(--meridian-text); } .m-settings__filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .m-settings__filter-spacer { flex: 1; } .m-settings__filter-sort { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-dim); } .m-settings__cat { display: flex; flex-direction: column; gap: 8px; } .m-settings__cat-head { font-family: var(--meridian-font-mono); font-size: 9.5px; color: var(--meridian-text-dim); text-transform: uppercase; letter-spacing: 0.6px; padding-top: 4px; border-top: 1px solid var(--meridian-border-hair); } .m-settings__cat:first-child .m-settings__cat-head { border-top: none; padding-top: 0; } .m-settings__cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 1100px) { .m-settings__cat-grid { grid-template-columns: 1fr; } } .m-settings__intg { background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); padding: 12px; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: flex-start; } .m-settings__intg--error { border-color: var(--meridian-fail); background: var(--meridian-fail-soft); } .m-settings__intg-icon { width: 36px; height: 36px; border-radius: var(--meridian-radius); background: var(--meridian-bg-sunk); border: 1px solid var(--meridian-border-hair); display: flex; align-items: center; justify-content: center; font-family: var(--meridian-font-mono); font-size: 14px; font-weight: 600; color: var(--meridian-text); } .m-settings__intg-icon--accent { background: var(--meridian-accent-soft); color: var(--meridian-accent); border-color: var(--meridian-accent); } .m-settings__intg-icon--info { background: var(--meridian-info-soft, var(--meridian-bg-sunk)); color: var(--meridian-info); border-color: var(--meridian-info); } .m-settings__intg-icon--warn { background: var(--meridian-warn-soft); color: var(--meridian-warn); border-color: var(--meridian-warn); } .m-settings__intg-icon--pass { background: var(--meridian-pass-soft); color: var(--meridian-pass); border-color: var(--meridian-pass); } .m-settings__intg-detail { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .m-settings__intg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .m-settings__intg-name { font-size: 13px; font-weight: 500; color: var(--meridian-text); } .m-settings__intg-id { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-faint); } .m-settings__intg-spacer { flex: 1; } .m-settings__intg-status { font-family: var(--meridian-font-mono); font-size: 10px; } .m-settings__intg-status--pass { color: var(--meridian-pass); } .m-settings__intg-status--warn { color: var(--meridian-warn); } .m-settings__intg-status--fail { color: var(--meridian-fail); } .m-settings__intg-since { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-dim); } .m-settings__intg-warn { font-size: 11px; color: var(--meridian-fail); } .m-settings__intg-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .m-settings__stub { padding: 24px; } /* -------- Tier graph (spec #6: environment-tier-graph) ------------- */ /* * Wrapper: takes the full width of the right-hand settings panel. * Overflow-x scroll for large graphs (FR-ETG-007 fallback ≥12 nodes). */ .tier-graph-root { display: flex; flex-direction: column; gap: 12px; } .tier-graph-canvas-wrap { position: relative; border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); background: var(--meridian-bg-panel); min-height: 300px; overflow-x: auto; } /* Cycle detected — highlight the canvas border with error colour. */ .tier-graph--cycle .tier-graph-canvas-wrap { border-color: var(--meridian-fail); box-shadow: 0 0 0 2px var(--meridian-fail-soft); } /* ── Tier node ─────────────────────────────────── */ .tier-node { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 10px 12px; background: var(--meridian-bg-raised); border: 1.5px solid var(--meridian-border-strong); border-radius: var(--meridian-radius); cursor: pointer; user-select: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; box-sizing: border-box; } .tier-node:hover { border-color: var(--meridian-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--meridian-accent) 20%, transparent); } .tier-node--selected { border-color: var(--meridian-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--meridian-accent) 25%, transparent); } .tier-node__label { font-size: 13px; font-weight: 600; color: var(--meridian-text); text-align: center; line-height: 1.3; } .tier-node__key { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-dim); text-align: center; margin-top: 2px; } .tier-node__chip { font-size: 10px; font-weight: 500; color: var(--meridian-info); background: var(--meridian-info-soft); border-radius: var(--meridian-radius); padding: 1px 6px; margin-top: 5px; text-transform: uppercase; letter-spacing: 0.3px; } /* "+ add edge" handle — hidden until hover */ .tier-node__add-handle { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--meridian-accent); color: var(--meridian-bg); font-size: 16px; font-weight: 700; line-height: 22px; text-align: center; cursor: pointer; opacity: 0; transition: opacity 0.15s ease; z-index: 10; } .tier-node:hover .tier-node__add-handle, .tier-node__add-handle:hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { .tier-node, .tier-node__add-handle { transition: none; } } /* ── Tier drill-down inline panel ─────────────── */ .tier-drill-panel { background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: var(--meridian-radius); } .tier-drill-env-row { padding: 6px 0; border-bottom: 1px solid var(--meridian-border-hair); } .tier-drill-env-row:last-child { border-bottom: none; } /* ── Add-edge dialog (inline floating panel) ─── */ .tier-graph-add-edge-dialog { position: relative; max-width: 420px; background: var(--meridian-bg-raised); border: 1px solid var(--meridian-border-strong); border-radius: var(--meridian-radius); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3); } /* ====================================================================== * MeridianCheckbox — 13×13px square, accent fill, white SVG checkmark. * Mirrors MCheckbox in docs/ux/claude-design/form-controls.jsx. * ====================================================================== */ .m-checkbox-wrapper { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--meridian-text); user-select: none; } .m-checkbox-wrapper--disabled { cursor: not-allowed; opacity: 0.5; } /* Hide the native checkbox visually but keep it accessible */ .m-checkbox-wrapper input[type="checkbox"].m-checkbox__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* The visible box */ .m-checkbox__box { flex-shrink: 0; width: 13px; height: 13px; border: 1px solid var(--meridian-border-strong); border-radius: 1px; background: transparent; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.08s, background 0.08s; position: relative; } /* Checked / indeterminate: accent fill */ .m-checkbox__box--checked, .m-checkbox__box--indeterminate { background: var(--meridian-accent); border-color: var(--meridian-accent); } /* White checkmark SVG (embedded as background) */ .m-checkbox__box--checked::after { content: ''; display: block; width: 8px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M1 3 L3 5 L7 1' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } /* Indeterminate: white dash */ .m-checkbox__box--indeterminate::after { content: ''; display: block; width: 7px; height: 2px; background: white; border-radius: 1px; } /* Hover: stronger border (not disabled, not already checked) */ .m-checkbox-wrapper:not(.m-checkbox-wrapper--disabled):hover .m-checkbox__box:not(.m-checkbox__box--checked):not(.m-checkbox__box--indeterminate) { border-color: var(--meridian-border-strong); background: var(--meridian-bg-sunk); } /* Focus-visible: 2px accent outline */ .m-checkbox-wrapper:not(.m-checkbox-wrapper--disabled):focus-within .m-checkbox__box { outline: 2px solid var(--meridian-accent); outline-offset: 1px; } /* Disabled state: bgSunk fill, faint border */ .m-checkbox-wrapper--disabled .m-checkbox__box { background: var(--meridian-bg-sunk); border-color: var(--meridian-text-faint); } /* ====================================================================== * MeridianToggle — 28×16px flat pill switch. * Mirrors MToggle in docs/ux/claude-design/form-controls.jsx. * ====================================================================== */ .m-toggle-wrapper { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--meridian-text); user-select: none; } .m-toggle-wrapper--disabled { opacity: 0.5; cursor: not-allowed; } /* The pill button */ .m-toggle__track { position: relative; width: 28px; height: 16px; padding: 0; border: 1px solid var(--meridian-border-strong); border-radius: 8px; background: var(--meridian-bg-sunk); cursor: pointer; transition: background 0.12s, border-color 0.12s; flex-shrink: 0; /* suppress default button chrome */ appearance: none; -webkit-appearance: none; outline: none; } .m-toggle__track--on { background: var(--meridian-accent); border-color: var(--meridian-accent); } .m-toggle-wrapper--disabled .m-toggle__track { cursor: not-allowed; } /* The sliding indicator */ .m-toggle__thumb { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--meridian-text-dim); transition: left 0.12s, background 0.12s; pointer-events: none; } .m-toggle__track--on .m-toggle__thumb { left: 13px; background: #ffffff; } /* Focus-visible ring */ .m-toggle__track:focus-visible { outline: 2px solid var(--meridian-accent); outline-offset: 2px; } /* Label column (label + optional hint) */ .m-toggle__label-col { display: flex; flex-direction: column; gap: 1px; } .m-toggle__hint { font-family: var(--meridian-font-mono); font-size: 10px; color: var(--meridian-text-faint); } /* ── MeridianGraph — Cytoscape blast-radius subgraph container (SCV FR-SCV-011) */ .meridian-graph-container { border-radius: var(--mud-default-borderradius); background: var(--mud-palette-background); border: 1px solid var(--mud-palette-divider); } /* ── ADR-069 D8 — OIDC cert generate dialog: monospace thumbprint pill + action row */ .m-oidc-cert__code { padding: 8px 10px; background: var(--meridian-bg-sunk); border: 1px solid var(--meridian-border); font-family: var(--meridian-font-mono); font-size: 11.5px; overflow: auto; border-radius: var(--meridian-radius); margin: 0; } .m-oidc-cert__actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } /* ── ADR-069 D8.2 — current-cert state row inside the Certificate panel */ .m-oidc-cert-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; } .m-oidc-cert-table th, .m-oidc-cert-table td { padding: 6px 10px; border-bottom: 1px solid var(--meridian-border); text-align: left; vertical-align: middle; } .m-oidc-cert-table th { font-weight: 600; color: var(--meridian-text-mid); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .m-oidc-cert-table tr:last-child td { border-bottom: 0; } .m-oidc-cert-table__thumb { font-family: var(--meridian-font-mono); font-size: 11px; color: var(--meridian-text-mid); } /* ── Freeze break-glass (issue #40) ───────────────────────────────────────── Lease identity strip, CLI hint, lease-fact rows, and the override surfaces. Mapped from freeze-breakglass-*.jsx; meridian-tokens vars only, no hex. */ .m-freeze-identity { display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-left: 3px solid var(--meridian-warn); border-radius: 2px; } .m-freeze-identity--fail { border-left-color: var(--meridian-fail); } .m-freeze-identity__glyph { width: 26px; height: 26px; border-radius: 2px; flex-shrink: 0; background: var(--meridian-warn-soft); color: var(--meridian-warn); display: grid; place-items: center; font-family: var(--meridian-font-mono); font-size: 14px; font-weight: 700; } .m-freeze-identity--fail .m-freeze-identity__glyph { background: var(--meridian-fail-soft); color: var(--meridian-fail); } .m-freeze-identity__body { min-width: 0; } .m-freeze-identity__head { display: flex; align-items: center; gap: 8px; } .m-freeze-identity__name { font-size: 13px; font-weight: 600; color: var(--meridian-text); } .m-freeze-identity__meta { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-dim); margin-top: 2px; } .m-lease-cli { font-family: var(--meridian-font-mono); font-size: 11.5px; color: var(--meridian-text-mid); background: var(--meridian-bg-sunk); border: 1px solid var(--meridian-border); border-radius: 2px; padding: 10px 12px; line-height: 1.6; overflow-x: auto; white-space: nowrap; } .m-lease-cli__prompt { color: var(--meridian-text-faint); } .m-lease-facts { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; background: var(--meridian-bg-sunk); border-radius: 2px; } .m-lease-facts__row { display: flex; align-items: baseline; gap: 8px; font-family: var(--meridian-font-mono); font-size: 11.5px; } .m-lease-facts__k { color: var(--meridian-text-dim); text-transform: uppercase; letter-spacing: 0.6px; font-size: 9.5px; min-width: 92px; } .m-lease-facts__v { color: var(--meridian-text); min-width: 0; } .m-lease-facts__v--warn { color: var(--meridian-warn); } .m-lease-facts__v--sans { font-family: var(--meridian-font-sans); } /* Inline active-lease summary row on a freeze policy card. */ .m-lease-inline { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 2px; background: var(--meridian-pass-soft); border: 1px solid var(--meridian-pass); } .m-lease-inline__reason { font-size: 11.5px; color: var(--meridian-text-mid); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-lease-inline__who { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-text-dim); } .m-lease-inline__remaining { font-family: var(--meridian-font-mono); font-size: 10.5px; color: var(--meridian-warn); } /* Break-glass override surfaces (deploy side). */ .m-override-consequence { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--meridian-fail-soft); border: 1px solid var(--meridian-fail); border-radius: 2px; } .m-override-path { background: var(--meridian-bg-panel); border: 1px solid var(--meridian-border); border-radius: 2px; padding: 14px 16px; } .m-override-path--warn { border-color: var(--meridian-warn); } /* Hold-to-override press-and-hold button. */ .m-hold { position: relative; width: 100%; height: 46px; border-radius: 2px; overflow: hidden; border: 1px solid var(--meridian-border); background: var(--meridian-bg-sunk); color: var(--meridian-text-faint); font-family: var(--meridian-font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; cursor: default; -webkit-user-select: none; user-select: none; } .m-hold--armed { border-color: var(--meridian-fail); color: var(--meridian-fail); cursor: pointer; } .m-hold--done { border-color: var(--meridian-pass); color: var(--meridian-pass); } .m-hold__fill { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--meridian-fail-soft); } .m-hold--done .m-hold__fill { background: var(--meridian-pass-soft); } .m-hold__label { position: relative; }