/* ============================================================================ CP26 mirrored-portal theme — reconciled from observation reports E1 + E2. Rule used where they disagreed: prefer the value marked "measured" over "approx". Where both were approximate, one was chosen and the conflict is noted in a comment beginning CONFLICT:. Fonts are declared as families only. No @import, no CDN — the prototype must work offline. If IBM Plex is not installed locally the stack falls back to Helvetica/system sans, which keeps the metrics close enough to read true. ========================================================================== */ /* -------------------------------------------------------------- 1. TOKENS */ :root { --font-sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Ink — E1 and E2 agree on every value here. */ --ink: #232833; /* primary heading + body ink */ --ink-strong: #232833; --ink-hover: #363D49; --ink-mid: #4D5563; /* E2: ops secondary text */ --ink-soft: #667080; /* the highest-count ink role */ --ink-faint: #8D95A1; --ink-on-dark:#FFFFFF; /* Surfaces */ --surface: #FFFFFF; --surface-sunk: #F5F6F8; /* table headers, inset/record panels — both agree */ /* CONFLICT: borders. E1 measured one border colour, #E2E5E9. E2 measured two, #CBD5E1 for hairlines/table rules/input borders and #E2E5E9 for client dividers. Both are marked measured. Resolved in E2's favour because it is the superset and it explains E1's single value as the client case. */ --border: #CBD5E1; /* tables, inputs, ops hairlines */ --border-soft: #E2E5E9; /* client dividers, card edges */ /* House accent present in both portals (E1 + E2 agree, measured). */ --house-accent: #A52A84; /* Status. --danger/--success-bg are E2 measured and beat E1's approximations. CONFLICT: green/amber. Both agents read these off screenshots (approx). E1's values are used because E1 named a role for each. */ --danger: #DC2626; --danger-ink: #C0392B; --danger-bg: #FDF2F0; --success: #1F7A4D; --success-bg: #DCFCE7; --warn: #B45309; --warn-bg: #FEF3C7; --info: #2563EB; /* Radii. CONFLICT: E1 read 6px as dominant everywhere; E2 counted hits per portal and got ops 4px / client 6px. E2's is the finer measurement, so radius is a per-portal token below; cards are 8px in both. */ --radius-sm: 3px; --radius-lg: 8px; --radius-pill: 999px; /* Elevation. E1 found one shadow, E2 found two. Superset kept; E1's warning still holds — nothing deeper than this exists in the product. */ --shadow-hair: 0 1px 1px rgba(11,13,17,.04); --shadow-card: 0 1px 2px rgba(11,13,17,.06), 0 1px 1px rgba(11,13,17,.04); /* Spacing. CONFLICT: E1 gave one ladder; E2 measured two distinct rhythms. E2's split is used — ops on 8/16/24, client on 6/10/12/16/20/24. */ --s-2: 2px; --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-10: 10px; --s-12: 12px; --s-14: 14px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-32: 32px; } /* ------------------------------------------------- 2. PORTAL VARIANTS Every page sets exactly one of these on : or */ .cp--client { --page-bg: #FAFBFC; /* measured, both agents agree */ --primary: #D93F04; /* burnt orange, measured, both agents agree */ --primary-tint: #FDECE6; --link: #D93F04; --radius: 6px; --rail: 55px; /* E2 measured 55; E1 approx 56 */ --gutter: var(--s-16); --card-border: var(--border-soft); } .cp--ops { /* CONFLICT: ops page background. E1 read #F5F6F8-ish (approx); E2 measured #FFFFFF. Measured wins. */ --page-bg: #FFFFFF; /* CONFLICT: ops accent. E1 said the primary/active nav and the primary button are both magenta #A52A84. E2 measured ops links/nav-active as blue #2563EB and the single primary button as magenta #A52A84. E2's split is used because it is the more specific measurement, EXCEPT for the active nav block, where E1 described a concrete filled magenta row and E2 lumped nav-active in with links. Active nav = magenta; links/tiles = blue. This is the one place a reviewer may find the mirror off. */ --primary: #2563EB; /* links, count tiles, numeric accents */ --cta: #A52A84; /* the filled primary button, and active nav */ --primary-tint: #EFF4FE; --link: #2563EB; --radius: 4px; --rail: 240px; /* measured, both agents agree */ --rail-bg: #232833; /* E2 measured; E1 approx #1E2430. Measured wins. */ --rail-ink: #D7DBE2; --gutter: var(--s-16); --card-border: var(--border); } /* --------------------------------------------------------- 3. PAGE SHELL */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.cp { font-family: var(--font-sans); font-size: 13px; /* E2: 13px is 128 of 181 text nodes */ line-height: 1.45; color: var(--ink); background: var(--page-bg); -webkit-font-smoothing: antialiased; } .cp-mono, code, kbd, samp { font-family: var(--font-mono); } .cp-shell { display: flex; min-height: 100vh; } .cp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* --- client left rail: icon-only, light --------------------------------- */ .cp-rail { flex: 0 0 var(--rail); width: var(--rail); background: var(--surface); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; align-items: center; padding-bottom: var(--s-12); } .cp-rail__logo { height: 50px; width: 100%; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 20px; border-bottom: 1px solid var(--border-soft); } .cp-rail__nav { display: flex; flex-direction: column; gap: var(--s-10); padding-top: var(--s-12); } .cp-rail__item { width: 39px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); color: var(--ink-soft); text-decoration: none; font-size: 15px; border: 0; background: transparent; cursor: pointer; } .cp-rail__item:hover { background: var(--surface-sunk); color: var(--ink); } .cp-rail__item.is-active { background: var(--primary-tint); color: var(--primary); } .cp-rail__spacer { height: var(--s-16); } /* --- ops left sidebar: 240px, dark charcoal ----------------------------- */ .cp-sidebar { flex: 0 0 var(--rail); width: var(--rail); background: var(--rail-bg); color: var(--rail-ink); display: flex; flex-direction: column; padding: 0 var(--s-8) var(--s-8); border-top: 2px solid var(--house-accent); } .cp-sidebar__brand { color: #fff; font-size: 22px; font-weight: 700; padding: var(--s-16) var(--s-8) var(--s-8); } .cp-sidebar__search { height: 39px; margin-bottom: var(--s-16); display: flex; align-items: center; gap: var(--s-8); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 0 var(--s-8); color: #B9BFC9; font-size: 13px; } .cp-sidebar__search kbd { margin-left: auto; font-size: 11px; background: rgba(0,0,0,.28); color: #B9BFC9; border-radius: var(--radius-sm); padding: 2px 5px; } .cp-sidebar__nav { display: flex; flex-direction: column; gap: var(--s-4); } .cp-sidebar__item { height: 37px; display: flex; align-items: center; gap: var(--s-8); padding: 0 var(--s-12); border-radius: var(--radius); color: var(--rail-ink); text-decoration: none; font-size: 14px; font-weight: 500; } .cp-sidebar__item:hover { background: rgba(255,255,255,.07); color: #fff; } .cp-sidebar__item.is-active { background: var(--cta); color: #fff; } .cp-sidebar__foot { margin-top: auto; padding-top: var(--s-16); color: #7D8694; font-family: var(--font-mono); font-size: 11px; } /* --- top bars ----------------------------------------------------------- */ .cp-topbar { height: 52px; flex: 0 0 auto; background: var(--surface); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: var(--s-12); padding: 0 var(--s-20); } .cp--ops .cp-topbar { height: 55px; } .cp-crumbs { display: flex; align-items: center; gap: var(--s-6); font-size: 13px; color: var(--ink-soft); } .cp-crumbs a { color: var(--ink-soft); text-decoration: none; } .cp-crumbs a:hover { color: var(--ink); text-decoration: underline; } .cp-crumbs__sep { color: var(--ink-faint); } .cp-crumbs__here { color: var(--ink); } .cp-topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-12); } .cp-user { display: flex; align-items: center; gap: var(--s-8); font-size: 14px; font-weight: 600; } .cp-avatar { width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--primary-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .cp-buildtag { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); } /* --- content column ----------------------------------------------------- */ .cp-content { padding: 36px var(--s-24) 96px; } .cp--client .cp-content { max-width: 926px; } /* E2 measured ~850px column */ .cp--ops .cp-content { max-width: none; padding-top: var(--s-24); } /* ------------------------------------------------------- 4. TYPOGRAPHY */ .cp-h1 { font-size: 28px; line-height: 32px; font-weight: 700; margin: 0 0 var(--s-6); letter-spacing: -.01em; } .cp--ops .cp-h1 { font-size: 22px; line-height: 28px; } .cp-h2 { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0 0 var(--s-6); } .cp-h3 { font-size: 14px; line-height: 20px; font-weight: 600; margin: 0 0 var(--s-4); } /* The product's signature: a limit-declaring sentence directly under the H1. */ .cp-lede { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 var(--s-20); max-width: 68ch; } .cp-prose { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 var(--s-10); } .cp-prose:last-child { margin-bottom: 0; } .cp-help { font-size: 12px; line-height: 1.5; color: var(--ink-faint); margin: var(--s-6) 0 0; } .cp-label { font-size: 11px; font-weight: 500; color: var(--ink-soft); letter-spacing: .01em; } .cp-strong { color: var(--ink); font-weight: 600; } .cp-content a { color: var(--link); } /* ------------------------------------------------------------ 5. CARDS */ .cp-card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-hair); margin-bottom: var(--s-16); } .cp--ops .cp-card { box-shadow: var(--shadow-card); } .cp-card__head { padding: var(--s-12) var(--s-16); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; gap: var(--s-10); } .cp-card__title { font-size: 15px; font-weight: 600; margin: 0; } .cp-card__body { padding: var(--s-16); } .cp-card__foot { padding: var(--s-10) var(--s-16); border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: var(--s-10); background: var(--surface-sunk); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .cp-card--flat { box-shadow: none; } .cp-card--alarm { border-color: var(--danger); background: var(--danger-bg); } .cp-card--warn { border-color: var(--warn); background: var(--warn-bg); } .cp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); } @media (max-width: 760px) { .cp-grid2 { grid-template-columns: 1fr; } } /* The page-header pattern: title left, limit-declaring prose right. */ .cp-pagehead { display: flex; gap: var(--s-24); align-items: flex-start; } .cp-pagehead__prose { margin-left: auto; max-width: 46ch; font-size: 13px; color: var(--ink-soft); } /* ------------------------------------ 6. STEP CARDS (Connect domain page) */ .cp-step { counter-increment: cp-step; } .cp-steps { counter-reset: cp-step; } .cp-step__head { padding: var(--s-12) var(--s-16); border-bottom: 1px solid var(--border-soft); font-size: 15px; font-weight: 600; display: flex; align-items: baseline; gap: var(--s-8); } .cp-step__head::before { content: counter(cp-step) "."; color: var(--ink-soft); font-weight: 600; } .cp-step__body { padding: var(--s-16); } .cp-step.is-done .cp-step__head { color: var(--ink-soft); } .cp-step.is-done .cp-step__head::before { color: var(--success); } /* ---------------------------------- 7. RECORD / CODE PANELS + COPY BUTTON */ .cp-record { background: var(--surface-sunk); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--s-14) var(--s-16); margin: var(--s-10) 0; } .cp-record__row { display: flex; align-items: baseline; gap: var(--s-10); padding: var(--s-4) 0; } .cp-record__key { flex: 0 0 95px; font-size: 13px; color: var(--ink-soft); } .cp-record__val { font-family: var(--font-mono); font-size: 13px; color: var(--ink); word-break: break-all; } .cp-record__note { font-size: 12px; color: var(--ink-faint); margin-top: var(--s-8); } .cp-record__badge { font-size: 11px; font-weight: 600; color: var(--info); margin-left: var(--s-8); } .cp-copy { margin-left: auto; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 12px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: var(--radius-sm); } .cp-copy:hover { background: rgba(0,0,0,.05); color: var(--ink); } .cp-copy.is-copied { color: var(--success); } .cp-copy::before { content: "\29C9"; font-size: 12px; } /* --------------------------------------------------- 8. DEFINITION LISTS */ .cp-dl { border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } .cp-dl__row { display: flex; gap: var(--s-16); padding: var(--s-12) var(--s-16); border-bottom: 1px solid var(--border-soft); } .cp-dl__row:last-child { border-bottom: 0; } .cp-dl__key { flex: 0 0 190px; font-size: 13px; font-weight: 500; color: var(--ink); } .cp-dl__val { font-size: 13px; color: var(--ink); min-width: 0; } .cp-dl__val--mono { font-family: var(--font-mono); word-break: break-all; } .cp-dl__val--empty { color: var(--ink-faint); } .cp-dl__help { font-size: 12px; color: var(--ink-faint); margin-top: var(--s-4); } /* --------------------------------------------------------- 9. TABS */ .cp-tabs { display: flex; gap: var(--s-4); background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: var(--s-4); margin-bottom: var(--s-10); } .cp-tabs__item { height: 32px; display: inline-flex; align-items: center; padding: 0 var(--s-14); font-size: 14px; font-weight: 500; color: var(--ink-hover); text-decoration: none; border-radius: var(--radius); } .cp-tabs__item.is-active { color: var(--primary); font-weight: 600; background: var(--primary-tint); } .cp-subtabs { display: flex; gap: var(--s-24); margin: 0 0 var(--s-20); padding: 0 var(--s-4); } .cp-subtabs__item { height: 26px; font-size: 13px; color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; } .cp-subtabs__item.is-active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); } /* ------------------------------------------------------- 10. TABLES */ .cp-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13px; } .cp-tablewrap { border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--s-16); } .cp-table thead th { background: var(--surface-sunk); text-align: left; font-size: 12px; font-weight: 600; color: var(--ink); padding: var(--s-10) var(--s-16); border-bottom: 1px solid var(--border); white-space: nowrap; } .cp--ops .cp-table thead th::after { content: " \2195"; color: var(--ink-faint); font-weight: 400; } .cp--ops .cp-table thead th.cp-nosort::after { content: ""; } .cp-table tbody td { padding: var(--s-14) var(--s-16); border-bottom: 1px solid var(--border-soft); vertical-align: top; } .cp-table tbody tr:last-child td { border-bottom: 0; } .cp-table tbody tr.is-highlight { background: var(--primary-tint); } .cp-table__action { text-align: right; } .cp-table__action a { color: var(--link); font-size: 13px; font-weight: 600; text-decoration: none; } .cp-table__empty { padding: var(--s-16); font-size: 13px; color: var(--ink-soft); } /* ------------------------------------------- 11. BADGES / STATUS PILLS CONFLICT: E1 read client status pills as radius-6 rectangles with a leading dot; E2 read ops badges as fully-rounded 11px pills. Both are kept, scoped to the portal that was observed, because that is the likeliest reading. */ .cp-pill { display: inline-flex; align-items: center; gap: var(--s-6); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius); background: var(--surface-sunk); color: var(--ink-soft); } .cp--ops .cp-pill { border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; padding: 3px 9px; } .cp-pill__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; } .cp-pill--ok { color: var(--success); background: var(--success-bg); } .cp-pill--warn { color: var(--warn); background: var(--warn-bg); } .cp-pill--danger { color: var(--danger); background: var(--danger-bg); } .cp-pill--info { color: var(--info); background: var(--primary-tint); } .cp-pill--muted { color: var(--ink-soft);background: var(--surface-sunk); } .cp-pill--running { color: var(--info); background: var(--primary-tint); } .cp-pill--running .cp-pill__dot { animation: cp-blink 1.1s ease-in-out infinite; } @keyframes cp-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .cp-pill--running .cp-pill__dot { animation: none; } } .cp-envchip { display: inline-flex; align-items: center; gap: var(--s-8); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 3px var(--s-10); font-size: 13px; font-weight: 600; background: var(--surface); } .cp-envchip__slug { font-family: var(--font-mono); font-weight: 400; color: var(--ink-soft); border-left: 1px solid var(--border-soft); padding-left: var(--s-8); } /* ------------------------------------------------------- 12. BUTTONS */ .cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-6); font: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 10px var(--s-16); border-radius: var(--radius); border: 1px solid transparent; background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; } .cp--ops .cp-btn { font-size: 13px; padding: 8px var(--s-12); } .cp-btn--primary { background: var(--primary); color: #fff; } .cp--ops .cp-btn--primary { background: var(--cta); } .cp-btn--primary:hover { filter: brightness(.94); } .cp-btn--ghost { border-color: var(--border); color: var(--ink); } .cp-btn--ghost:hover { background: var(--surface-sunk); } .cp-btn--danger { background: var(--danger); color: #fff; } .cp-btn--link { background: transparent; border: 0; color: var(--link); padding: 0; font-size: 13px; } .cp-btn[disabled], .cp-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; } .cp-btnrow { display: flex; flex-wrap: wrap; gap: var(--s-10); align-items: center; } /* ------------------------------------------------- 13. FORM CONTROLS */ .cp-field { margin-bottom: var(--s-16); } .cp-field__label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: var(--s-6); } .cp-field__hint { font-size: 12px; color: var(--ink-faint); margin: var(--s-4) 0 var(--s-6); } .cp-input, .cp-textarea, .cp-select { width: 100%; font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px var(--s-10); } .cp-input--mono, .cp-textarea--mono { font-family: var(--font-mono); } .cp-input:focus, .cp-textarea:focus, .cp-select:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary); } .cp-textarea { min-height: 84px; resize: vertical; line-height: 1.5; } .cp-choice { display: flex; gap: var(--s-8); align-items: flex-start; padding: var(--s-10) 0; } .cp-choice input { margin-top: 3px; } .cp-choice__body { font-size: 13px; } .cp-choice__body b { display: block; font-weight: 600; } .cp-choice__body span { color: var(--ink-soft); } .cp-fieldset { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--s-12) var(--s-16); margin: 0 0 var(--s-16); } .cp-fieldset legend { font-size: 13px; font-weight: 600; padding: 0 var(--s-6); } /* ------------------------------------------- 14. NOTES / CALLOUTS / STRIP */ .cp-note { border: 1px solid var(--border-soft); border-left: 3px solid var(--ink-faint); background: var(--surface-sunk); border-radius: var(--radius); padding: var(--s-12) var(--s-14); font-size: 13px; color: var(--ink); margin: var(--s-10) 0; } .cp-note--warn { border-left-color: var(--warn); background: var(--warn-bg); } .cp-note--danger { border-left-color: var(--danger); background: var(--danger-bg); } .cp-note--info { border-left-color: var(--info); background: var(--primary-tint); } .cp-note b { font-weight: 600; } /* Who holds the baton — journey status strip (J1 step 3). */ .cp-baton { display: flex; gap: 0; border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); margin-bottom: var(--s-12); } .cp-baton__seg { flex: 1; padding: var(--s-12) var(--s-14); border-right: 1px solid var(--border-soft); } .cp-baton__seg:last-child { border-right: 0; } .cp-baton__seg.is-current { background: var(--primary-tint); box-shadow: inset 0 -3px 0 var(--primary); } .cp-baton__seg.is-done { color: var(--ink-faint); } .cp-baton__who { font-size: 11px; font-weight: 500; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; } .cp-baton__what { font-size: 13px; font-weight: 600; margin-top: 2px; } /* Stat / count tiles (ops dashboard). */ .cp-tiles { display: flex; gap: var(--s-12); flex-wrap: wrap; margin-bottom: var(--s-16); } .cp-tile { min-width: 137px; background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: var(--s-16); text-align: center; text-decoration: none; color: inherit; box-shadow: var(--shadow-card); } .cp-tile__num { font-size: 28px; font-weight: 700; color: var(--primary); line-height: 1.1; } .cp-tile__cap { font-size: 12px; color: var(--ink-soft); margin-top: var(--s-4); } .cp-tile--alarm { border-color: var(--danger); background: var(--danger-bg); } .cp-tile--alarm .cp-tile__num { color: var(--danger); } /* Small circled i, used next to section titles in ops. */ .cp-info { width: 14px; height: 14px; border-radius: var(--radius-pill); border: 1px solid var(--ink-faint); color: var(--ink-faint); font-size: 10px; line-height: 12px; text-align: center; display: inline-block; cursor: help; } /* Event log rendering, shared by the entry page and any page that shows it. */ .cp-log { font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--card-border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } .cp-log__row { display: flex; gap: var(--s-12); padding: var(--s-8) var(--s-14); border-bottom: 1px solid var(--border-soft); } .cp-log__row:last-child { border-bottom: 0; } .cp-log__row--meta { background: var(--surface-sunk); color: var(--ink-faint); } .cp-log__time { flex: 0 0 74px; color: var(--ink-faint); } .cp-log__type { flex: 0 0 auto; min-width: 210px; color: var(--ink); font-weight: 500; } .cp-log__actor { flex: 0 0 74px; color: var(--ink-soft); } .cp-log__payload { color: var(--ink-soft); word-break: break-all; } /* ============================================================ 15. PROVENANCE Working design direction §10. Deliberately loud: the brief grades this. */ .prov-marked { position: relative; } :root[data-prov-on] .prov-marked { border-radius: var(--radius, 6px); padding-top: 26px !important; box-shadow: inset 3px 0 0 var(--prov-colour, #999); background-image: linear-gradient(var(--prov-wash, transparent), var(--prov-wash, transparent)); background-clip: padding-box; } :root[data-prov-on] .prov-marked[data-prov="observed"] { --prov-colour: #1F7A4D; --prov-wash: rgba(31,122,77,.05); } :root[data-prov-on] .prov-marked[data-prov="proposed"] { --prov-colour: #A52A84; --prov-wash: rgba(165,42,132,.06); } :root[data-prov-on] .prov-marked[data-prov="proposed-needs-capability"] { --prov-colour: #B45309; --prov-wash: rgba(180,83,9,.08); } :root[data-prov-on] .prov-marked[data-prov="proposed-needs-capability"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(135deg, rgba(180,83,9,.07) 0 8px, transparent 8px 16px); } .prov-tag { position: absolute; top: 4px; left: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: var(--s-6); font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; pointer-events: none; } .prov-tag__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--prov-colour, #999); flex: 0 0 auto; } .prov-tag__text { color: var(--prov-colour, #999); } .prov-tag__note { font-weight: 500; font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prov-tag--observed { --prov-colour: #1F7A4D; } .prov-tag--proposed { --prov-colour: #A52A84; } .prov-tag--proposed-needs-capability { --prov-colour: #B45309; } /* Marks on inline controls must not deform them: the 26px head-room rule above is for blocks. On a control the tag sits ABOVE the element instead. */ :root[data-prov-on] .prov-marked:is(button, a, input, select, label, span, code, kbd) { padding-top: 0 !important; margin-top: 18px; overflow: visible; } :root[data-prov-on] .prov-marked:is(button, a, input, select, label, span, code, kbd) > .prov-tag { top: auto; bottom: 100%; left: 0; right: auto; margin-bottom: 3px; white-space: nowrap; } /* Inert-by-design controls carrying the needs-capability mark. */ :root[data-prov-on] .prov-marked[data-prov="proposed-needs-capability"] .cp-btn { opacity: .55; } .prov-panel { position: fixed; right: 16px; bottom: 16px; z-index: 9999; width: 320px; max-width: calc(100vw - 32px); background: #FFFFFF; border: 1px solid #CBD5E1; border-radius: 8px; box-shadow: 0 6px 20px rgba(11,13,17,.14); font-family: var(--font-sans); font-size: 12px; color: #232833; } .prov-panel__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; } .prov-panel__switch { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer; font: inherit; padding: 0; } .prov-panel__track { width: 34px; height: 18px; border-radius: 999px; background: #CBD5E1; position: relative; transition: background .12s; flex: 0 0 auto; } .prov-panel__knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 999px; background: #fff; transition: transform .12s; } .prov-panel__switch.is-on .prov-panel__track { background: #A52A84; } .prov-panel__switch.is-on .prov-panel__knob { transform: translateX(16px); } .prov-panel__switchlabel { font-weight: 600; font-size: 12px; } .prov-panel__fold { margin-left: auto; border: 1px solid #CBD5E1; border-radius: 4px; background: #fff; font: inherit; font-size: 11px; padding: 3px 8px; cursor: pointer; } .prov-panel__body { border-top: 1px solid #E2E5E9; padding: 10px 12px 12px; max-height: 50vh; overflow: auto; } .prov-panel__intro { margin: 0 0 8px; color: #667080; line-height: 1.45; } .prov-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .prov-legend__row { display: flex; gap: 8px; align-items: flex-start; } .prov-legend__swatch { width: 10px; height: 10px; border-radius: 2px; margin-top: 3px; flex: 0 0 auto; background: #999; } .prov-legend__row--observed .prov-legend__swatch { background: #1F7A4D; } .prov-legend__row--proposed .prov-legend__swatch { background: #A52A84; } .prov-legend__row--proposed-needs-capability .prov-legend__swatch { background: #B45309; } .prov-legend__body { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; } .prov-legend__body b { font-size: 12px; } .prov-legend__body span { color: #667080; } @media print { .prov-panel { display: none; } }