*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ══════════════════════════════════════════════════════════════════════════ #105 / #444 / #399 — THE PARAQUALIS PALETTE, AND A DARK RAMP BUILT FROM IT. RULED by Craig 2026-08-20, as one answer to three issues that had been pulling in different directions: · #105, 2026-08-15: "it is the design of stuff, we use the ParaQualis color pallette for the design of the UI". · #444, 2026-07-29: "see if there is a standard set of colors published by someone who cares about accessibility to google, apple, microsoft, … Lets adopt that." Those are not the same instruction and dark mode is where they collide: the published ParaQualis palette is a LIGHT palette with no dark variants. His ruling was ParaQualis in BOTH modes with the dark ramp built from it — the app stays recognisably ours at night and we do the accessibility work ourselves rather than inheriting someone else's scale. He accepted that consequence explicitly, which is why every derived pair below carries its MEASURED contrast ratio: "we do it ourselves" only works if the number is checked rather than eyeballed. Every ratio here was computed from the sRGB relative luminance formula, not estimated. THE VALUES ARE QUOTED FROM THE BRAND FILE, which lives at `~/.claude/brand_colors.md` — OUTSIDE this repo, so RegCheck cannot see its own palette source. That is why they are written out here rather than referenced: this block is the repo's copy of record, and the brand file is the authority it was taken from (2026-05-19 brand asset, "2605 Paraqualis brand colors v1.tif"). THE BRAND NARRATIVE, because it constrains how these are used: the colours are the sky at sunset — deep blue at the top, through a lighter blue band, into warm orange and pink at the horizon. Cool-to-warm is the signature. The file's own rule: "Combine more than three blues + one orange in a single surface — the palette tells a story; don't make it shouty." WHAT THIS BLOCK IS NOT. It is not the sweep. #399 is the sweep over the ~1,400 hardcoded light literals, and Craig's ordering note is explicit: it runs AFTER these tokens exist, "or it hardcodes a second time against colours that are about to move". ══════════════════════════════════════════════════════════════════════════ */ :root { /* #1273 — the shared tooltip. Declared as TOKENS in both themes rather than written as literals in rc_tip.js: a colour named in JavaScript is a colour that cannot follow the theme, and a var() naming a token that does not exist is a hardcoded colour wearing one (styles.css records that mistake three times). Dark ink on a light ground here, inverted below. */ --tip-bg: #1f2937; --tip-fg: #f9fafb; --tip-border: transparent; /* #1917: a dark pill on a light page needs no edge */ /* ── The palette, verbatim from the brand file ───────────────────────── */ --pq-blue-900: #276BB2; /* Primary deep blue — headers, primary CTAs. 5.48 on white */ --pq-blue-800: #3274C2; /* Secondary deep blue — alt header / pressed */ --pq-blue-600: #4C8ED8; /* Mid blue — secondary buttons, active tabs, links */ --pq-blue-500: #5294DC; /* Mid blue, warmer — hover, focus rings */ --pq-blue-300: #89C0F5; /* Light blue — input grounds, info banners */ --pq-blue-200: #B6DBF6; /* Very light blue — subtle grounds, pills */ --pq-mint-050: #E7F3EB; /* Pale mint — page and card backgrounds */ --pq-slate-400: #81A5C1; /* Muted slate — secondary text, borders */ --pq-peach-200: #FECF81; /* Pale peach — soft highlights, badge grounds */ --pq-gold-400: #FFBE69; /* Golden orange — warning, attention */ --pq-orange-500:#FF8053; /* Vivid orange — key highlight */ --pq-coral-400: #F08568; /* Coral — destructive, softened */ --pq-cream-050: #EFEAE3; /* Warm cream — the alternative page ground */ /* #1903 (code review FE-F30) - values that were declared under three or more token names. Each is written ONCE, here; every surface token that used the literal is now an alias of its constant, so a change is one edit. */ --pq-white: #ffffff; --pq-mist-100: #e6eaf0; --pq-mist-200: #e2e8f0; --pq-green-800: #276749; --pq-green-300: #6ee7b7; --pq-navy-800: #1a3a5c; --pq-night-850: #1a212b; --pq-night-900: #1a202c; --pq-night-950: #0f172a; --pq-indigo-500: #4f6ddb; --pq-slate-750: #334155; --pq-rose-300: #fc9aa0; --pq-amber-500: #e8a330; --pq-blue-250: #9dbbe6; --pq-blue-350: #6fa8dc; --pq-grey-500: #6b7280; /* ── Derived, because the brand file has no value for these ──────────── */ /* The file is explicit that three of its own colours must not carry body text: #FF8053 is 2.9 on white, #81A5C1 is 3.0. Both fail AA for normal text, so anywhere a brand hue has to be INK it is darkened here and the measured result is recorded beside it. */ --pq-blue-050: #e2f1fb; /* blue-200 into white 60% — the palest ground */ --pq-slate-700: #546b7d; /* slate-400 into black 35% — 5.56 on white, 4.88 on mint. AA */ --pq-border: #e1ded8; /* #1938 — the artboard's neutral line; a separator, not ink */ --pq-danger: #a85d49; /* coral into black 30% — 4.85 on white, 4.26 on mint. AA normal on white */ --pq-warn: #946e3d; /* gold into black 42% — 4.61 on white. AA */ /* ── SEMANTIC ROLES, LIGHT ─────────────────────────────────────────────── The page ground is the brand's own mint rather than its cream. Both are offered by the file ("Page background: #EFEAE3 (warm cream) OR #E7F3EB (pale mint)"); mint is the smaller move from the cool grey the app has worn until now, and it keeps the cool-to-warm story running in the right direction. Cream is one line away if it reads better on a real screen — which is a judgement to make by looking, not by reasoning. */ /* #1938 — NEUTRAL GROUNDS (Craig 2026-10-06, comment 21760: "the colors are better than the existing with a neutral color, light grey (with the selected item highlighted ... I am preferring the light blue"). The page ground, the soft panel ground, the lines and the ink are the Option 1 revised artboard's paper greys (documentation/design/ui/design_handoff_qms_page/); the mint ground is retired. The light blue is --primary-pale, and it marks the SELECTED item only — hover is the neutral --hover-bg. */ --pq-ground: #f4f2ee; /* the page */ --pq-soft: #f6f5f2; /* a panel's own ground: rails, table heads, bands, insets */ --pq-surface: #ffffff; --pq-elevated: #ffffff; --pq-ink: #1c1d1f; /* 15.6 on the ground, 17.1 on white */ --pq-ink-muted: #565a61; /* 6.4 on the ground, 7.0 on white — AA */ --pq-on-danger: #ffffff; /* ink ON a --pq-danger fill (the notification badge) — 4.85 */ --pq-accent: var(--pq-blue-900); --pq-accent-2: var(--pq-blue-600); --pq-line: var(--pq-border); } /* ══════════════════════════════════════════════════════════════════════════ #444 / #399 — THE TOKENS THAT WERE REFERENCED AND NEVER DEFINED. Measured 2026-08-21: 47 custom properties are read by `var()` somewhere in the frontend and declared NOWHERE — 282 references, and 140 of them carry NO FALLBACK. A `var()` with no fallback and no definition makes the whole declaration INVALID AT COMPUTED-VALUE TIME, so the property falls back to inherited or initial. These are not wrong-theme colours. They are rendering failures, and they are failing in LIGHT MODE TOO. The worst of them by a distance: `--danger`, read 50 times with 43 of those unguarded. Every one of those is an error message or a destructive control that has been inheriting the ambient body colour instead of rendering red — including `frontend/app.js` writing `status.style.color = 'var(--danger)'` directly onto a status line. #444's own comment named this shape on 2026-08-16, from two instances found while touching this file for #405: "A token name that is not defined is a hardcoded colour wearing one, and it is invisible to a grep for hex literals in the obvious places. Worth a grep for the same pattern when this is picked up: `var(--something, #literal)` where the token does not exist." This is that grep, run. THIS IS A NET DELETION, NOT 47 NEW COLOURS. Most of these are SYNONYMS of tokens that already exist — five names for one surface, three for one border, two for one danger — so they are aliased onto the existing token rather than given values of their own. That is charter 6 applied to the token layer: the app had six vocabularies for one palette because each new surface invented the name it expected to find. Aliasing means they follow the theme automatically and there is still ONE place to change each colour. Two are deliberately NOT colours and are aliased to the stacks the app already uses (`--sans`, `--serif`), and the six `--{cat}-badge-ink` tokens get the light-mode literal their call sites already carry as a fallback, so a default domain (where `applyFindingColors` returns early) is no longer relying on a fallback that only half its call sites supply. ══════════════════════════════════════════════════════════════════════════ */ :root { /* — surfaces — #1655 item 1: THREE OF THESE NAMES ARE GONE. `--surface2`, `--surface3` and `--surface-alt` each aliased `var(--pq-elevated)`, exactly as `--surface-2` does — four names for one colour, which the audit called "naming drift papered over rather than resolved", and it was right: the comment here used to read "five names for two things" and simply described the problem. All 40 call sites across styles.css, app.js and the two sandboxes that link this file were rewritten to `--surface-2` first, so the rewrite is a provable no-op — every site resolved to `--pq-elevated` before and resolves to it now. The names were then deleted rather than left as aliases, because an alias kept "in case" is how a cluster of four becomes a cluster of five. WHY THIS HAD TO COME FIRST, and it is the audit's own argument: deciding which name wins is cheap while there are 40 sites and expensive once a tokenisation sweep has let hundreds of new sites pick one at random. */ --surface-2: var(--pq-elevated); --card-bg: var(--pq-elevated); --rc-panel: var(--pq-surface); --input-bg: var(--pq-surface); --sidebar-bg: var(--pq-ground); --background: var(--pq-ground); --bg-alt: var(--pq-ground); --bg-light: var(--pq-ground); --bg-primary: var(--pq-ground); /* #1938 — the subtle grounds are NEUTRAL; the light blue is selection only. */ --bg-subtle: var(--pq-soft); --rc-subtle-bg: var(--pq-soft); /* — hover: three names — NEUTRAL (#1938): a wash of the ink, so it reads on white, on a soft panel and in dark mode alike, and is never the selection. */ --hover-bg: color-mix(in srgb, var(--pq-ink) 6%, transparent); --bg-hover: var(--hover-bg); /* — ink: four names — */ --fg: var(--pq-ink); --rc-fg: var(--pq-ink); --text-color: var(--pq-ink); --text-secondary: var(--pq-ink-muted); --muted: var(--pq-ink-muted); --rc-muted: var(--pq-ink-muted); /* — lines: three names — */ --border-color: var(--pq-line); --rc-subtle-border: var(--pq-line); --rc-anchor-ring: var(--pq-accent-2); /* (BURNED — #1575) `--rc-find-selected` lived here, resolving to `--pq-blue-050` — "the palest ground", a BACKGROUND tint. Its one consumer drew it as a 2px OUTLINE on the selected document anchor, so the mark for "this is the finding you are looking at" was a near-white stroke on a white page: applied, computed, and invisible. Selection strokes use `--rc-anchor-ring` (the token the drawer's selected card already uses), so the page and the drawer cannot disagree about what selected looks like. */ /* — brand: four names — */ --brand: var(--pq-blue-900); --accent: var(--pq-accent); --rc-accent: var(--pq-accent); --accent-soft: var(--primary-pale); --primary-dark: var(--pq-blue-900); --primary-ultra-light: var(--primary-pale); /* `--primary-rgb` is read inside rgba(), so it must be a CHANNEL TRIPLE, not a colour. #276BB2 = 39 107 178. */ --primary-rgb: 39, 107, 178; --mist: var(--pq-soft); /* — status: five names for three states — */ --danger: var(--pq-danger); --error: var(--pq-danger); --ok: var(--pq-green-800); --success: var(--pq-green-800); --success-text: var(--pq-green-800); /* — type stacks, not colours — */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: Georgia, "Times New Roman", serif; /* #1654 — THE MONOSPACE STACK, which had no token while --sans and --serif did. Measured: 97 font-family declarations carry SIX different monospace stacks — `monospace` alone (15), `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`, `'SFMono-Regular', Consolas, monospace`, `ui-monospace, "SF Mono", Menlo, Consolas, monospace`, `'Courier New', Courier, monospace` and `'Courier New', monospace`. Those render as different typefaces on the same machine, so a tabular column and a code span disagree for no reason. This is the most complete of the six and the one the newest call sites already use. — */ --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* — the SIX finding badge inks. `applyFindingColors` mints these at runtime ONLY when a domain supplies custom colours, so on a default domain every call site was relying on its own literal fallback — and not all of them carried one. These are those literals, stated once. `--missing-badge-ink` joined them 2026-08-31: the missing badge shipped in v4.2.906 reading a token nobody had declared. It carried a `#fff` fallback so it rendered correctly and nothing looked wrong — the palette contract caught it, which is what that contract is for. #fff because --missing-bar is deep magenta (#ce1b7d), the darkest of the six bars. — */ --conflict-badge-ink: var(--pq-white); --gap-badge-ink: var(--pq-night-900); --vague-badge-ink: var(--pq-night-900); --unnecessary-badge-ink: var(--pq-white); --ai-badge-ink: var(--pq-white); --missing-badge-ink: var(--pq-white); /* ══ #1654 · THE SIZING SCALE ═══════════════════════════════════════════ Craig ruled 2026-09-20 after the UI consistency audit (#1652): "do 1 and 2 in that order as suggested". This is job 1. WHY IT EXISTS. Every custom property in this file was a COLOUR. There was no --space, no --radius, no --font-size, no --z. So every geometric value in 17,800 lines was a literal, and the drift is measurable: 866 font-size declarations across 61 distinct sizes once normalised to rem, 511 border-radius declarations across 37 values, 90 z-index declarations across 43 values, and eight different sizes for one .ic icon class. None of that arrived at once — each component was hand-tuned against its neighbours, so the set grows every time a surface is added. The scale is what makes the later consolidation finite: once it exists, "done" is a number rather than an opinion. NOTHING CONSUMES THESE YET, DELIBERATELY. Adoption is a separate item and is where the risk lives — source does not predict paint in this file (87 !important declarations, 32 duplicated selectors, 2,092 inline style sites). A custom property nothing references cannot change a pixel, which is precisely what makes this safe to land mid-delivery. IT IS DESCRIPTIVE, NOT IDEALISED, and that was a decision. Every value below is one the stylesheet already uses in quantity. A scale invented from first principles matches nothing and gets ignored; one derived from the actual distribution can be adopted a rule at a time. Where a step was dropped it is named as noise below, so the tightening is visible rather than silent. MEASURED IN THIS PASS, not taken from the audit. #1652's figures had already moved by the time this was built — an ordinary UI change (#1653) shifted the radius distribution enough to displace 5px from the top four and added two new one-off font sizes. That is the drift thesis demonstrated, and the reason these steps come from a fresh count. ═══════════════════════════════════════════════════════════════════════ */ /* — TYPE. rem, not px, and that is not a preference: rem scales with the reader's own browser text size and px does not, which the standing rule that interfaces respect user settings settles. 769 of 866 declarations are already rem; the 109 px and 10 em values are the deviation. The band 0.66–1.10 carries 94% of all type in the app; the four display steps cover the headings above it. Dropped as noise: the 0.01rem neighbours (0.62/0.63/0.64, 0.73/0.74, 0.79, 0.81/0.83/0.84, 0.86/0.87) and the px-derived thirds (0.6562, 0.7188, 0.8438). — */ --font-size-3xs: 0.66rem; /* 10.6px */ --font-size-2xs: 0.70rem; /* 11.2px */ --font-size-xs: 0.75rem; /* 12.0px */ --font-size-sm: 0.80rem; /* 12.8px */ --font-size-md: 0.85rem; /* 13.6px — the most-used band */ --font-size-lg: 0.90rem; /* 14.4px */ --font-size-xl: 1.00rem; /* 16.0px */ --font-size-2xl: 1.10rem; /* 17.6px */ --font-size-3xl: 1.25rem; /* 20.0px */ --font-size-4xl: 1.50rem; /* 24.0px */ --font-size-5xl: 2.00rem; /* 32.0px */ --font-size-6xl: 3.00rem; /* 48.0px */ /* — SPACE. One ramp for padding, margin AND gap, because they already share a vocabulary: the same 2/4/6/8/10/12 values dominate all three. An even 2px ramp to 16 then 4px to 32. The odd neighbours (5, 7, 9, 11) are real and common and are deliberately NOT steps — absorbing them into their even neighbour is the tightening this scale exists to enable. — */ --space-0: 0; --space-3xs: 2px; --space-2xs: 4px; --space-xs: 6px; --space-sm: 8px; --space-md: 10px; --space-lg: 12px; --space-xl: 14px; --space-2xl: 16px; --space-3xl: 20px; --space-4xl: 24px; --space-5xl: 32px; /* — RADIUS. The top four measured values cover 55% of all uses and the first six cover 73%. 5px and 7px are frequent and are deliberately not steps, for the same reason as the odd spaces. `pill` and `circle` are shapes rather than sizes and keep their own names so nobody has to remember that 999px means "fully round". — */ --radius-none: 0; --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-pill: 999px; --radius-circle: 50%; /* — ICON. One .ic class renders at eight different sizes between 11 and 18px, which is the drift this step names. Four even steps; 11, 13, 15 and 17 are the neighbours to absorb. — */ --icon-sm: 12px; --icon-md: 14px; --icon-lg: 16px; --icon-xl: 18px; /* — Z-INDEX. 43 distinct values from 0 to 12000 is not a scale, it is 43 separate decisions, and the reason they climbed is that each new floating thing had to beat whatever it landed on top of. These are LAYERS, named for what sits in them, and every value below is one the file already uses — so a rule adopting a layer keeps its current stacking rather than moving. The header really is above the modal layer (10200, measured): it is sticky and its z-index caps the menu inside it, which is why it outranks the floats. — */ --z-base: 1; --z-raised: 10; --z-sticky: 30; --z-chrome: 70; --z-dropdown: 300; --z-popover: 700; --z-overlay: 5000; --z-toast: 9000; --z-notify: 9999; --z-header: 10200; /* #1912 — A BLOCKING DIALOG OF A SURFACE (the reason box, the BPMN delete and lane-change confirm, the edit-suggestion box, the QMS template modal, the registry popover, the review drawer, the welcome panel): ABOVE every piece of page chrome - the process map header (10100), its menu (10120), the chat window (10150), the popover band (rc_anchor.js 10150-10199) and the top header (10200) - so nothing behind a dialog can be clicked. Seven of them sat at 1100-9999, under the map header, so its Save and Revert stayed live behind a delete's reason box. Below the progress family (11000-11060, the session warning must show over a dialog) and the branded modal. Within the band a dialog asked FROM another sits above it: calc(var(--z-dialog) + n), in steps of 10. */ --z-dialog: 10300; /* The app's branded modal (.modal-overlay: confirm, alert, prompt) - asked over anything, a surface dialog included. Was named at 1200, which is where the BPMN confirm that adopted it landed: under the map header. */ --z-modal: 11500; --z-topmost: 12000; /* #1761 — the dim behind a window that blocks the page (Start Analysis). */ --rc-scrim: rgba(15, 23, 42, 0.28); /* ── #755 — THE DATA BLOCK'S OWN TOKENS ──────────────────────────────── The block is ONE shared component with three call sites, and it was reading `--rc-db-*` — a family declared on `.pg-bpmn-host`, not on :root. On BPMN it is created with that host and the tokens resolve; on Level 1 and Level 2 it is created with `.pg-canvas-host`, the PARENT, so all twenty-one references fell through to their light literal fallbacks. The same block was dark on BPMN and light on the other two, in dark mode, side by side. The fallbacks were doing their job perfectly — they are simply light values, and they fired in both themes. Craig ruled 2026-08-21, against adopting each host's palette: "Option 1 is the obvious answer" — the block gets its own tokens and looks the same everywhere. It is a floating panel OVER the paper, not a graph element (established on #461), and the facts it reports are identical on all three surfaces because they are three views over one object model (P2). A component showing identical content that deliberately looks different in each place asks the user to learn it three times for no information. ALIASED TO `--pq-*`, NOT HAND-PICKED. 117 ParaQualis tokens exist as of v4.2.666; minting a parallel set is how a fifth un-spined family starts. Aliasing means the block inherits the dark ramp for free, which is why only the two values below need a dark twin at all. The `--rc-db-*` family is deliberately LEFT ALONE. It is scoped to `.pg-bpmn-host` because it IS BPMN's palette, and the BPMN dump panel still reads it. The bug was a shared component reaching into a surface-specific family, not the family being scoped. */ --rc-db-bg: var(--pq-surface); --rc-db-head: var(--pq-elevated); --rc-db-line: var(--pq-line); --rc-db-rule: var(--pq-border); --rc-db-fg: var(--pq-ink); --rc-db-mute: var(--pq-ink-muted); --rc-db-dim: var(--pq-slate-400); --rc-db-btn-bg: var(--pq-elevated); --rc-db-btn-fg: var(--pq-ink); /* #1292 — THE MINIMAP CHROME, as tokens, because it needs all THREE theme states and a media block only gives one. Both minimaps (BPMN and flow-graph V2) had their dark palette in a `@media (prefers-color-scheme: dark)` block and nowhere else. So when the viewer STATED dark through the old in-app override, the canvas themed and the minimap did not, and it sat bottom-right as the brightest thing on the screen. #1852 deleted that override (Craig 2026-09-30, "yes (a)": the theme follows the computer, #1809), so dark now has one signal: the prefers-color-scheme block. The comment at the `--pq-*` block says why this is the fix rather than a second media block: three states, and "everything above inherits the ramp for free, which is the point of aliasing rather than duplicating". These were also byte-identical between the two minimaps (charter 6). #1846 — one reader now: the Level 2 minimap (.pg-gav2-navigator). The BPMN surface's minimap is the adopted editor's own and is themed by the editor's --jj-* tokens in bpmn_editor/rc_theme.css. */ --rc-minimap-bg: rgba(248,250,252,0.92); --rc-minimap-border: #c8d1e0; --rc-minimap-shadow: 0 2px 10px rgba(0,0,0,0.12); } @media (prefers-color-scheme: dark) { :root { /* #1917 — a RAISED DARK SURFACE, not an inverted light pill. #1273 lightened the ground so a tooltip on a dark page kept an edge; the result was a white flash on every hover in dark mode (Craig's dark-contrast sensitivity), over the dark menus too. The edge now comes from a step up the slate ramp (slate-750, above the menu's #1e2c3f) and a slate-700 border, with light ink. Checked against WCAG AA by the contrast tests. */ --tip-bg: var(--pq-slate-750); --tip-fg: #f9fafb; --tip-border: var(--pq-slate-700); /* Only the four that do not follow a `--pq-*` alias need a dark twin; everything above inherits the ramp for free, which is the point of aliasing rather than duplicating. */ --ok: var(--pq-green-300); /* 10.14 on the dark surface — AA */ --success: var(--pq-green-300); --success-text: var(--pq-green-300); --gap-badge-ink: var(--pq-night-900); /* the gap and vague bars stay pale in dark, so their badge ink stays dark — measured, not assumed */ --vague-badge-ink: var(--pq-night-900); /* #755 — the data block. Only `dim` needs a twin: the rest alias `--pq-*` and inherit the dark ramp, which is the point of aliasing rather than duplicating. `--pq-slate-400` is a fixed step on the light ramp and reads as a mid-grey on a dark ground, so the dim (empty-value) text is lifted to stay legible. */ --rc-db-dim: #788594; /* #1292 — see the light block. */ --rc-minimap-bg: color-mix(in srgb, var(--pq-ground) 92%, transparent); /* #1655: on the ramp */ --rc-minimap-border: var(--pq-border); --rc-minimap-shadow: 0 2px 10px rgba(0,0,0,0.50); } } /* ── THE DARK RAMP ────────────────────────────────────────────────────────── Built from the same hues, lightness rebuilt so contrast holds — not a separate hand-picked set. The grounds are the brand deep blue mixed into a near-black neutral, so the dark app is a night version of the sunset rather than a grey app with blue buttons. MEASURED, every one, against the surface #192536: white 15.45 mint-050 13.55 cream-050 12.91 blue-200 10.63 blue-300 8.04 blue-600 4.54 blue-500 4.88 slate-400 5.95 gold-400 9.43 orange-500 6.23 coral-400 6.08 peach-200 10.64 Every one of those clears AA for normal text. That is the whole reason the ground was chosen where it was: a lighter ground would have pushed blue-600 below 4.5 and taken the mid-blues out of use as ink. NOTE ON THE TWO DEEPEST BLUES: #276BB2 and #3274C2 measure 3.1-3.8 against this ground and therefore CANNOT be ink here. In dark mode they are chrome — a filled button's ground, with light ink on top — and the mid and light blues take over as text. That inversion is what "the dark ramp is derived from it" actually means in practice. Two states: a bare `:root` above (light) and this media block (dark, when the computer says so). The theme follows the computer (#1809); the explicit `[data-theme]` override that once sat below was unreachable and was deleted (#1852). */ @media (prefers-color-scheme: dark) { :root { --pq-ground: #141517; /* #1938 — the neutral dark greys of the Option 1 revised artboard */ --pq-soft: #25282c; --pq-blue-sel: #1e2a3d; /* #1938 — the artboard's dark light-blue: the selection */ --pq-surface: #1d1f22; --pq-elevated: #25282c; --pq-ink: #e9e7e2; --pq-ink-muted: var(--pq-slate-400); /* 5.95 on surface — AA */ --pq-accent: var(--pq-blue-300); /* 8.04 — the deep blues cannot be ink here */ --pq-accent-2: var(--pq-blue-600); /* 4.54 — AA, the floor of the ramp */ --pq-line: #34373c; --pq-border: #34373c; --pq-danger: var(--pq-coral-400); /* 6.08 — the brand coral IS legible here */ --pq-on-danger: var(--pq-ground); /* 7.07 on the coral fill — white measured 2.54 (#1880) */ --pq-warn: var(--pq-gold-400); /* 9.43 */ /* #1938 — THE PALEST GROUND HAD NO DARK VALUE. These seven names resolve to --pq-blue-050 (#e2f1fb) in light, and nothing gave them a dark counterpart, so in dark mode they stayed pale under white ink: the QMS Structure list's band rows measured 1.15:1 (Test, 2026-10-06), and every hover and soft-accent ground on them did the same. In dark they follow --primary-pale, the one pale-ground name that already had a dark value (the elevated surface), so the dark pale ground is stated once. */ /* #1938 — and, as in light, neutral grounds and hover; the light blue (here its dark twin) is the selection only. */ --bg-subtle: var(--pq-soft); --rc-subtle-bg: var(--pq-soft); --hover-bg: color-mix(in srgb, var(--pq-ink) 8%, transparent); --bg-hover: var(--hover-bg); --accent-soft: var(--primary-pale); --primary-ultra-light: var(--primary-pale); --mist: var(--pq-soft); } } /* #1655 — WHICH THEME `light-dark()` READS. Every light literal in an ordinary rule carries its dark value as `light-dark(, )` (etc/bin/colour_dark_twins_1655.py), and the function answers from the element's used colour-scheme. So the scheme is stated once, here, with the same three states as the ramp: follow the OS by default, and let the app's own choice win in both directions. It also darkens native controls and scrollbars in dark, which the OS setting asks for. */ :root { color-scheme: light dark; } /* #1903 (code review FE-F38) - REDUCED MOTION IS ONE RULE, NOT A LIST. Someone who asks their computer for less motion gets none, on every animation and transition this stylesheet will ever declare - the same one line the public pages carry (public.css, content_mgt.css). It replaced 21 per-component blocks that covered 9 of 16 animations and 18 of 97 transitions. A component that needs a STILL state in place of its motion (a static progress bar, a dimmed loading line) declares only that, beside the component. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* #1957 — ONE CURSOR PER CONNECTOR DRAG. While a connector handle is held (rc_link_tools.js sets the class and the handle's own cursor), that cursor is shown everywhere on the page, so it no longer flips with whatever is under the pointer. The release (or a cancelled pointer) removes the class. */ html.rc-link-held, html.rc-link-held * { cursor: var(--rc-held-cursor, move) !important; } /* #2180: no hands */ :root { /* #105 — RE-POINTED AT THE PARAQUALIS PALETTE, 2026-08-21. These four carried `#1a3a5c` and its family: a navy that is not a ParaQualis colour and never was — the issue's own body records it as "legacy". They are the brand blues now, so a brand change is one edit at the `--pq-*` block rather than a sweep (charter 6). The measured numbers are on those definitions. */ --primary: var(--pq-blue-900); --primary-light: var(--pq-blue-600); /* NB a MID-TONE brand blue, NOT a pale tint. Never use as a background under body text (B-230 lesson). */ --primary-pale: var(--pq-blue-050); /* #1764 — THE CHROME PAIR, DEFINED ONCE. The domain's chrome background and font colour (#1641, Domain config) paint every piece of chrome through these two names: the app header and the QMS side panel read them, so one setting repaints both (Craig 2026-09-27, "One setting should control both"). The fallbacks are the pre-#1641 values, so a domain that states nothing renders as it always has. Resolved here, on :root, where the backend and app.js set both inputs. */ --chrome-bg: var(--domain-chrome-bg, var(--primary)); --chrome-ink: var(--domain-chrome-ink, #fff); /* #1880 — THE ONE TINT A CHROME GROUND MAY TAKE UNDER TEXT (hover, the selected nav item, the org select). Text on chrome is the full chrome ink — never a faded one — because white on the default blue is only 5.48: 80% white measured 4.14, 55% 2.8, and white on an 18% tint 3.84. At 6% it holds AA (tests/test_1880_*). Icon-only controls may tint harder. */ --chrome-tint: color-mix(in srgb, var(--chrome-ink) 6%, transparent); /* #1655 — `--primary` AS TEXT. `--primary` is the domain's Theme Colour (injected at page load, unbranched, in both themes), so as INK it is a navy on the dark surface: Craig 2026-09-26, "dark blue on a darker blue backround". In light this IS --primary, so every text site moved onto it renders exactly as before; the dark remap lightens it. */ --primary-ink: var(--primary); --primary-fg: var(--pq-accent); /* primary AS text/border/accent — split from the bg role so dark mode can lighten it (2026-06-26). It now follows `--pq-accent`, which IS that lightening: the two deepest brand blues cannot carry text on a dark ground. */ --bg: var(--pq-ground); --bg-white: var(--pq-surface); --text: var(--pq-ink); --text-muted: var(--pq-ink-muted); --border: var(--pq-line); --border-subtle: #ebe8e3; /* N3 — faint row divider; #1938 neutral */ /* 2026-06-26 dark-mode: define these explicitly (were referenced but only riding #fff fallbacks) so the global dark :root below has a light twin. */ --surface: var(--pq-surface); --text-primary: var(--pq-ink); --card: var(--pq-elevated); /* #1859 — THE QUOTED PASSAGE ON A FINDING CARD, a pair defined in BOTH themes. `.card-quote` had themed text on a fixed light wash, so in dark mode white text sat on light grey (2.74:1). Light keeps its look: a 55% surface wash over the card. Dark: see the dark :root below. */ --quote-surface: color-mix(in srgb, var(--pq-surface) 55%, transparent); --quote-text: var(--pq-ink); /* ── Finding-category BASES ──────────────────────────────────────────── `--{stem}-bar` is the ONE authored colour per category. Every other finding colour in the app is derived from it — see the derivation block below, and applyFindingColors() in app.js for the arithmetic CSS cannot do. The Settings → Branding picker writes these bases onto documentElement at runtime, so an inline value wins over the default here and the whole family moves with it. -text/-badge/-bg/-hi are the card/pill family and they are DERIVED here, not authored: each is a color-mix() of the base, so picking a colour moves the pill, the badge, the summary row and the highlight with it. Nothing in JS writes these four — that matters, because an inline style would beat the dark-mode block below and repaint dark pills with light-mode maths (the defect this replaced). The mixes reproduce the arithmetic they came from exactly: 60% base into black is the old mix-toward-black 0.40, 20% into white the old 0.80, 12% the old 0.88, 22% the old 0.78. Check with conflict — 60% of #ed1d1d into black is #8e1111, which is what this line used to say by hand. -hi is TRANSLUCENT rather than a white mix so one value works on any background and needs no dark twin. */ /* #512 — TWO DEFAULTS MOVED, because no ink could rescue them. WCAG 2.1 AA needs 4.5:1 for this 10-12px bold badge text. Measured, the old values reached AA with NEITHER white nor dark ink — they sat in the contrast valley, too light for dark and too dark for white: conflict #ed1d1d white 4.38 dark 4.05 best 4.38 unnecessary #3182ce white 4.03 dark 4.41 best 4.41 Darkened by 5% and 7% lightness respectively — visually near-identical, same hue — so WHITE now passes on both, which is the preferred ink. conflict #ea1313 white 4.56 unnecessary #2e79c0 white 4.55 #1310 adds the other half of the same contract: each base is also the visible BOUNDARY around a finding, so it must reach 3:1 against both editor grounds. Four defaults kept their hue and saturation and moved only far enough in lightness to clear that floor; the measured pairs live in the #1310 guard. rc_contrast.js still picks badge ink per fill, while the server refuses a configured colour that would break either contract (#1248/#1310). */ --conflict-bar: #ea1313; --gap-bar: #f1660a; --vague-bar: #93960a; --unnecessary-bar: #2e79c0; --ai-bar: #805ad5; /* Inserted (accepted-replacement) palette. --inserted-hi is the only -hi with a live consumer (.warn-banner-info, the benign-notice banner); Craig flagged 0.32 as "much too strong", so it stays at 16% where the rest of the family sits at 22%. That is a tuned value, not drift — leave it. */ --inserted-bar: #38a169; /* #174 — MISSING: the requirement is entirely ABSENT from the document. Distinct from --gap-bar (orange, "it is here but deficient") because the WORK is different — add rather than fix — and that is the whole reason it is its own category. CHOSEN BY MEASUREMENT, after my first choice failed. I picked #a3341f as a deep red-brown, reasoning that it sat "adjacent to conflict's red" and read as serious. #444's contrast contract then measured it at ONE DEGREE of hue from conflict (#ea1313) — the same colour, slightly darker, which as translucent fills on a dark page would have been genuinely hard to tell apart. #444's scope note says the categories must stay distinguishable FROM EACH OTHER as well as legible, and that is exactly the half a person eyeballing a swatch does not check. Deep magenta at hue 327 is 33 degrees clear of the nearest neighbour, the widest gap available in a palette that already occupies red, orange, yellow, green, blue and two violets. It reads as grave, which suits an absent regulatory requirement, and it is nobody else's colour. */ --missing-bar: #ce1b7d; /* Two more bases, so EVERY finding a canvas can paint has one — and so the Settings picker covers every one of them. Neither is an analyser category: `structural` is a finding SOURCE (source='parser'), violet to stay distinct from the pinker AI purple; `unknown` is the catch-all for a category the taxonomy does not name. #1653 — THESE NOW HAVE THE DERIVED SIBLINGS. This comment used to end "Neither has -text/-badge/-bg/-hi siblings because nothing renders a card or pill for them", and that premise was false by the time it was read: the filter row has carried a Structural pill since B-215, and the live report showed 53 structural findings on the document Craig was reading. So the chip had a hue and no ink for it. Derived here on the same formulas as every sibling rather than given a fallback, because a fallback would be a second rule for one of the eight. #1846 — LIGHTNESS ONLY, +1.6 points (was #854bdf; hue 263.5 and saturation unchanged, the #1310 rule for moving a base). The BPMN editor's structural "S" badge is a ring of this colour on a --pq-surface disc, and #854bdf measured 2.99:1 on the dark surface #192536 — under the 3:1 WCAG 1.4.11 floor for a graphical object. #8a52e0 measures 3.21:1 there and 3.39:1 on the dark editor ground, and still carries white text at 4.81:1 (the white-ink record in test_finding_badge_contrast.py). */ --structural-bar: #8a52e0; --unknown-bar: #718096; /* RESOLVED is a STATE, not one of the eight finding hues, and it is on the filter row beside them — so it needs the same token shape or it is the one chip built by hand. #2f855a is the green the #282 note already names for Resolved (green.700), one step DARKER than Inserted's green.600, which is the separation that note exists to protect. Nothing is re-picked here; the existing colour is given the family's formulas. */ --resolved-bar: #2f855a; /* BEGIN GENERATED #2058 finding tokens: light - backend/finding_color_tokens.py; do not edit */ --conflict-bg: color-mix(in srgb, var(--conflict-bar) 12%, white); --conflict-hi: color-mix(in srgb, var(--conflict-bar) 22%, transparent); --conflict-text: color-mix(in srgb, var(--conflict-bar) 60%, black); --conflict-badge: color-mix(in srgb, var(--conflict-bar) 20%, white); --gap-bg: color-mix(in srgb, var(--gap-bar) 12%, white); --gap-hi: color-mix(in srgb, var(--gap-bar) 22%, transparent); --gap-text: color-mix(in srgb, var(--gap-bar) 60%, black); --gap-badge: color-mix(in srgb, var(--gap-bar) 20%, white); --vague-bg: color-mix(in srgb, var(--vague-bar) 12%, white); --vague-hi: color-mix(in srgb, var(--vague-bar) 22%, transparent); --vague-text: color-mix(in srgb, var(--vague-bar) 60%, black); --vague-badge: color-mix(in srgb, var(--vague-bar) 20%, white); --unnecessary-bg: color-mix(in srgb, var(--unnecessary-bar) 12%, white); --unnecessary-hi: color-mix(in srgb, var(--unnecessary-bar) 22%, transparent); --unnecessary-text: color-mix(in srgb, var(--unnecessary-bar) 60%, black); --unnecessary-badge: color-mix(in srgb, var(--unnecessary-bar) 20%, white); --ai-bg: color-mix(in srgb, var(--ai-bar) 12%, white); --ai-hi: color-mix(in srgb, var(--ai-bar) 22%, transparent); --ai-text: color-mix(in srgb, var(--ai-bar) 60%, black); --ai-badge: color-mix(in srgb, var(--ai-bar) 20%, white); --inserted-bg: color-mix(in srgb, var(--inserted-bar) 12%, white); --inserted-hi: color-mix(in srgb, var(--inserted-bar) 16%, transparent); --inserted-text: color-mix(in srgb, var(--inserted-bar) 60%, black); --inserted-badge: color-mix(in srgb, var(--inserted-bar) 22%, transparent); --missing-bg: color-mix(in srgb, var(--missing-bar) 12%, white); --missing-hi: color-mix(in srgb, var(--missing-bar) 22%, transparent); --missing-text: color-mix(in srgb, var(--missing-bar) 60%, black); --missing-badge: color-mix(in srgb, var(--missing-bar) 20%, white); --structural-bg: color-mix(in srgb, var(--structural-bar) 12%, white); --structural-hi: color-mix(in srgb, var(--structural-bar) 22%, transparent); --structural-text: color-mix(in srgb, var(--structural-bar) 60%, black); --structural-badge: color-mix(in srgb, var(--structural-bar) 20%, white); --unknown-bg: color-mix(in srgb, var(--unknown-bar) 12%, white); --unknown-hi: color-mix(in srgb, var(--unknown-bar) 22%, transparent); --unknown-text: color-mix(in srgb, var(--unknown-bar) 60%, black); --unknown-badge: color-mix(in srgb, var(--unknown-bar) 20%, white); --resolved-bg: color-mix(in srgb, var(--resolved-bar) 12%, white); --resolved-text: color-mix(in srgb, var(--resolved-bar) 60%, black); --resolved-badge: color-mix(in srgb, var(--resolved-bar) 20%, white); /* END GENERATED #2058 finding tokens: light */ /* ── T-118 C8.3 — finding-decoration box palette (DERIVED) ───────────── ONE unified bordered-box model for every finding on a canvas: a border (`-edge`), a resting fill (`-fill`) and a stronger shade for the ACTIVE finding (`-sel`). Nothing here is authored. Each triple is a pure reference to its category's `--{stem}-bar` base, so moving the base moves the border and both fills with it — no JS, and no second value to keep in step. That is what lets the Settings → Branding picker, which writes only the bases, reach these surfaces at all, and what lets the graph canvas read these same vars at render time instead of holding its own hexes. -edge = the base -fill = base at 18% -sel = base at 32% Two mappings a reader needs: the CSS class carries the raw finding category, so `incomplete`→gap, `unnecessary_detail`→unnecessary and `ai_suggestion`→ai (see .rc-finding-* further down); and `structural` is keyed off a finding's SOURCE (source='parser'), not its category. */ /* BEGIN GENERATED #2058 finding tokens: box - backend/finding_color_tokens.py; do not edit */ --rc-find-conflict-edge: var(--conflict-bar); --rc-find-conflict-fill: color-mix(in srgb, var(--conflict-bar) 18%, transparent); --rc-find-conflict-sel: color-mix(in srgb, var(--conflict-bar) 32%, transparent); --rc-find-gap-edge: var(--gap-bar); --rc-find-gap-fill: color-mix(in srgb, var(--gap-bar) 18%, transparent); --rc-find-gap-sel: color-mix(in srgb, var(--gap-bar) 32%, transparent); --rc-find-missing-edge: var(--missing-bar); --rc-find-missing-fill: color-mix(in srgb, var(--missing-bar) 18%, transparent); --rc-find-missing-sel: color-mix(in srgb, var(--missing-bar) 32%, transparent); --rc-find-vague-edge: var(--vague-bar); --rc-find-vague-fill: color-mix(in srgb, var(--vague-bar) 18%, transparent); --rc-find-vague-sel: color-mix(in srgb, var(--vague-bar) 32%, transparent); --rc-find-unnecessary-edge: var(--unnecessary-bar); --rc-find-unnecessary-fill: color-mix(in srgb, var(--unnecessary-bar) 18%, transparent); --rc-find-unnecessary-sel: color-mix(in srgb, var(--unnecessary-bar) 32%, transparent); --rc-find-ai-edge: var(--ai-bar); --rc-find-ai-fill: color-mix(in srgb, var(--ai-bar) 18%, transparent); --rc-find-ai-sel: color-mix(in srgb, var(--ai-bar) 32%, transparent); --rc-find-inserted-edge: var(--inserted-bar); --rc-find-inserted-fill: color-mix(in srgb, var(--inserted-bar) 18%, transparent); --rc-find-inserted-sel: color-mix(in srgb, var(--inserted-bar) 32%, transparent); --rc-find-structural-edge: var(--structural-bar); --rc-find-structural-fill: color-mix(in srgb, var(--structural-bar) 18%, transparent); --rc-find-structural-sel: color-mix(in srgb, var(--structural-bar) 32%, transparent); --rc-find-unknown-edge: var(--unknown-bar); --rc-find-unknown-fill: color-mix(in srgb, var(--unknown-bar) 18%, transparent); --rc-find-unknown-sel: color-mix(in srgb, var(--unknown-bar) 32%, transparent); /* END GENERATED #2058 finding tokens: box */ /* #325 / #708 — THE THREE DISPOSITION STATES, so a finding's box in the document can say what has happened to it. Until now the anchor knew only `inserted`, so a rejected or agreed finding's card changed colour and the box round its text did not. NO NEW BRAND COLOURS, and that is deliberate. #492 makes the Settings colour picker the ONLY place a FINDING CATEGORY colour is chosen, and these are not categories — they are dispositions, and every one of them ALREADY HAS a colour Craig picked, living in two or three other homes: resolved — the green from `.stat-pill.resolved` and the card badge, chosen at #611 when he ruled black-on-dark-green out. rejected — the muted grey the rejected CARD already wears. acted — the soft green the acted CARD already wears. B-215's grammar rule is ONE colour in every home — chip, pill, card, and now the anchor. So this adds a fourth home for three existing colours rather than three new swatches to the picker. */ --rc-find-resolved-edge: var(--pq-green-800); --rc-find-resolved-fill: color-mix(in srgb, #276749 12%, transparent); --rc-find-resolved-sel: color-mix(in srgb, #276749 26%, transparent); --rc-find-acted-edge: #38a169; --rc-find-acted-fill: color-mix(in srgb, #38a169 10%, transparent); --rc-find-acted-sel: color-mix(in srgb, #38a169 24%, transparent); --rc-find-rejected-edge: var(--text-muted); --rc-find-rejected-fill: color-mix(in srgb, var(--text-muted) 8%, transparent); --rc-find-rejected-sel: color-mix(in srgb, var(--text-muted) 20%, transparent); /* ── M4 P2 — Process Graph design tokens (v4.0.38) ───────────────────── Semantic palette per node type. Originally read via getComputedStyle() by the Cytoscape renderer (graph_view.js — retired v4.1.128); today the remaining consumers are styles.css's own document-surface rules (the --rc-graph-section-* / --rc-sop-card-* uses) — names still stable. Dark-mode equivalents live in the "Process Graph dark-mode token overrides" @media block much further down this file. Memo §4.4 "visual design system" + §4.5 vector zoom. */ /* :Action — process step (the leaf of the procedure flow) */ --rc-graph-action-bg: var(--pq-indigo-500); --rc-graph-action-border: #2b3f8c; --rc-graph-action-text: var(--pq-white); /* :Decision — branching step */ --rc-graph-decision-bg: var(--pq-amber-500); --rc-graph-decision-border: #8a5e0c; --rc-graph-decision-text: #1a1a1a; /* :Section — explanatory chapter card (Scope/Purpose/Definitions/etc.) */ --rc-graph-section-bg: #eef4ff; --rc-graph-section-border: var(--pq-indigo-500); --rc-graph-section-text: #1a3389; /* :Procedure — operational flow container */ --rc-graph-procedure-bg: #eaf6ec; --rc-graph-procedure-border: #2f8a45; --rc-graph-procedure-text: #1f5a2c; /* :Procedures — top-level operational layer (wraps every :Procedure) */ --rc-graph-procedures-bg: #dff0e3; --rc-graph-procedures-border:#2f8a45; --rc-graph-procedures-text: #1f5a2c; /* :Context — page-1 title card (SOP identity at a glance) */ --rc-graph-context-bg: #fff8e8; --rc-graph-context-border: #d4a23c; --rc-graph-context-text: #5c3f0d; /* Edges — flow + branch + meta */ --rc-graph-edge-next: var(--pq-grey-500); --rc-graph-edge-branch: var(--pq-amber-500); --rc-graph-edge-branch-text: #8a5e0c; --rc-graph-edge-meta: #9aa3af; /* Selected node outline */ --rc-graph-selected-border: var(--pq-night-950); /* Role chip (in-card; v4.0.38 n8n pattern — no separate :Role nodes) */ --rc-graph-chip-resp-fg: #c7b8f0; /* lavender, on dark Action bg */ --rc-graph-chip-inv-fg: #a68bd9; /* v4.0.47 — SOP-as-Agent-card palette (Craig 2026-06-01). v4.0.48 LIGHTENED — dark navy header read as too "heavy" against a light canvas. New recipe: light tinted header, dark text, gold badge stays. Card surfaces feel like document-on-paper. */ --rc-sop-card-bg: var(--pq-white); --rc-sop-card-border: #cbd5e0; --rc-sop-card-header-bg: #eef3f9; --rc-sop-card-header-fg: var(--pq-navy-800); --rc-sop-card-header-meta: #718096; --rc-sop-card-badge-bg: #d4a23c; --rc-sop-card-badge-fg: #2d1f00; --rc-sop-card-slot-bg: var(--pq-white); --rc-sop-card-slot-hover: #f0f4fa; --rc-sop-card-slot-fg: #2d3748; --rc-sop-card-slot-dot: var(--pq-indigo-500); } /* #1903 — PLACED AFTER the plain :root that defines --chrome-bg/--chrome-ink: the same selector, so the later one wins. Before #1852 the dark rule carried an extra attribute test that outranked the plain one; #1852 simplified it to bare `:root`, and the banner and the QMS side panel stayed full domain blue in dark (regcheck, v4.3.1505). */ /* #1655 — THE CHROME IN DARK (Craig 2026-09-27: "The banner at the top of the screen is not following the dark mode motif"). The one chrome setting (#1764) still decides it: in dark, the domain's chrome colour keeps its HUE and is taken down into the ParaQualis dark ramp, with light ink, so the banner and the QMS side panel sit in the same palette as the page instead of a bright slab of the domain colour (hue is the constant, readability wins — 2026-07-22). Light mode is untouched: these only answer the two dark states. */ @media (prefers-color-scheme: dark) { :root { --chrome-bg: color-mix(in oklab, var(--domain-chrome-bg, var(--primary)) 38%, var(--pq-ground)); --chrome-ink: var(--pq-ink); } } /* ── 2026-06-26 GLOBAL DARK MODE — the missing :root remap (Phase 0 + 2). The app already honours prefers-color-scheme via component blocks (Process Graph, TipTap editor); this flips the whole app CHROME by remapping the core vars + the finding-category palette. Brand --primary stays (#1a3a5c reads on dark). Palette matches the editor/graph dark themes for consistency. ── */ @media (prefers-color-scheme: dark) { :root { /* core chrome #105 — RE-POINTED at the derived dark ramp, 2026-08-21. These were six hand-picked greys and one "lifted blue" (#6fa8dc) that is not a ParaQualis colour. The ramp above is built from the brand hues with every pair's contrast measured, so this block now says WHICH ROLE each token plays and the palette says what colour that is — one place to change, and the numbers are recorded where the values are. The core chrome no longer restates its own greys; what stays here is the finding-category derivation below, which is genuinely different in dark (the mix TARGETS invert) and has nothing to do with the brand ramp. */ --bg: var(--pq-ground); --bg-white: var(--pq-surface); --surface: var(--pq-surface); --card: var(--pq-elevated); --primary-pale: var(--pq-blue-sel); /* #1938 — the selection in dark */ --primary-fg: var(--pq-accent); /* the brand light blue: 8.04 on the dark surface */ /* #1655 — the domain's primary as INK, lightened for a dark ground: the hue is kept and the lightness adapts (Craig 2026-07-22: hue is the constant, readability wins). 30% of the domain colour into the dark theme's ink stays light whatever colour an administrator picks. */ /* #1655, Craig 2026-09-27: "3 different color schemes - we need to get this coordinated". Blue TEXT in dark is ONE blue, the accent; the domain's own colour shows in its chrome (#1641/#1764), not as a second text blue. */ --primary-ink: var(--pq-accent); --text: var(--pq-ink); --text-primary: var(--pq-ink); --text-muted: var(--pq-ink-muted); /* brand slate: 5.95 on the dark surface — AA */ /* #1859 — the quote sits in an OPAQUE inset of the ground colour, so its contrast does not depend on the category tint bleeding in from the card's left edge: white on #111721, 18.4:1. */ --quote-surface: var(--pq-ground); --quote-text: var(--pq-ink); --border: var(--pq-line); --border-subtle: rgba(255,255,255,0.055); /* N3 — faint row divider on dark */ /* Finding categories — darken bg/badge, lift text, keep the -bar accent. DERIVED from the same base as the light values above, so a colour picked in Settings moves the dark pills too. Only the mix TARGETS change: bg and badge mix into near-black and the raised surface instead of white, and text mixes toward white instead of black — the light-mode direction would give pale badges and near-black ink on a dark ground. The percentages are calibrated against the hand-tuned values these replaced, not invented: conflict lands within a channel or two of the old #2a1618 / #5a2a2e / #fc9aa0. A few channels drift up to ~25/255 on the blue of gap and the green of vague; that is the cost of one rule replacing six hand-picks, and it is the trade that lets the picker reach dark mode at all. -hi needs no dark twin: it is translucent, so it works on any ground. */ /* BEGIN GENERATED #2058 finding tokens: dark - backend/finding_color_tokens.py; do not edit */ --conflict-bg: color-mix(in srgb, var(--conflict-bar) 12%, var(--pq-ground)); --conflict-badge: color-mix(in srgb, var(--conflict-bar) 27%, var(--pq-elevated)); --conflict-text: color-mix(in srgb, var(--conflict-bar) 45%, white); --gap-bg: color-mix(in srgb, var(--gap-bar) 12%, var(--pq-ground)); --gap-badge: color-mix(in srgb, var(--gap-bar) 27%, var(--pq-elevated)); --gap-text: color-mix(in srgb, var(--gap-bar) 45%, white); --vague-bg: color-mix(in srgb, var(--vague-bar) 12%, var(--pq-ground)); --vague-badge: color-mix(in srgb, var(--vague-bar) 27%, var(--pq-elevated)); --vague-text: color-mix(in srgb, var(--vague-bar) 45%, white); --unnecessary-bg: color-mix(in srgb, var(--unnecessary-bar) 12%, var(--pq-ground)); --unnecessary-badge: color-mix(in srgb, var(--unnecessary-bar) 27%, var(--pq-elevated)); --unnecessary-text: color-mix(in srgb, var(--unnecessary-bar) 45%, white); --ai-bg: color-mix(in srgb, var(--ai-bar) 12%, var(--pq-ground)); --ai-badge: color-mix(in srgb, var(--ai-bar) 27%, var(--pq-elevated)); --ai-text: color-mix(in srgb, var(--ai-bar) 45%, white); --inserted-bg: color-mix(in srgb, var(--inserted-bar) 12%, var(--pq-ground)); --inserted-badge: color-mix(in srgb, var(--inserted-bar) 27%, var(--pq-elevated)); --inserted-text: color-mix(in srgb, var(--inserted-bar) 45%, white); --missing-bg: color-mix(in srgb, var(--missing-bar) 12%, var(--pq-ground)); --missing-badge: color-mix(in srgb, var(--missing-bar) 27%, var(--pq-elevated)); --missing-text: color-mix(in srgb, var(--missing-bar) 45%, white); --structural-bg: color-mix(in srgb, var(--structural-bar) 12%, var(--pq-ground)); --structural-badge: color-mix(in srgb, var(--structural-bar) 27%, var(--pq-elevated)); --structural-text: color-mix(in srgb, var(--structural-bar) 45%, white); --unknown-bg: color-mix(in srgb, var(--unknown-bar) 12%, var(--pq-ground)); --unknown-badge: color-mix(in srgb, var(--unknown-bar) 27%, var(--pq-elevated)); --unknown-text: color-mix(in srgb, var(--unknown-bar) 45%, white); --resolved-bg: color-mix(in srgb, var(--resolved-bar) 12%, var(--pq-ground)); --resolved-badge: color-mix(in srgb, var(--resolved-bar) 27%, var(--pq-elevated)); --resolved-text: color-mix(in srgb, var(--resolved-bar) 45%, white); /* END GENERATED #2058 finding tokens: dark */ /* #1653 — FOUR CATEGORIES WERE MISSING FROM THIS BLOCK, and the gap was silent because the light values still resolve: they are simply the wrong derivation on a dark ground. `missing` is the live one. It was added by #174 AFTER this block was written, so on a dark page it kept `color-mix(missing 60%, black)` as its INK — a near-black magenta on a dark surface — and a 20%-into-WHITE badge, a pale wash of a colour that has no business being pale here. Every other category inverted; this one did not, and nothing pointed at it. `structural`, `unknown` and `resolved` are new siblings from this same change and are derived here for the same reason, so the eight categories and the one state all invert together rather than six of nine. */ } } html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; background: var(--bg); color: var(--text); overflow: hidden; } /* #1641 — a swatch in the ParaQualis range is a BUTTON because pressing it does something; the ring is what says so, on focus as well as hover because the row is reachable by keyboard. */ .pq-swatch:hover,.pq-swatch:focus-visible{outline:2px solid var(--primary-fg);outline-offset:2px} /* ── Header ── */ header { /* #1641 — THE DOMAIN'S CHROME PAIR IS CONSUMED HERE. Craig asked for a background and a font colour per domain and ruled them on 2026-09-20 as an ACCENT PAIR on chrome rather than a page ground; the app header is the canonical piece of chrome, so this is where the pair lands. THE FALLBACKS ARE TODAY'S VALUES, so a domain that states nothing renders exactly as it does now: the backend emits no declaration at all when a field is empty, and these two var() calls then resolve to --primary and white. Nothing changes until an administrator chooses one. #1764: the pair and its fallbacks are defined ONCE, as --chrome-bg / --chrome-ink on :root, and every piece of chrome reads those. */ background: var(--chrome-bg); color: var(--chrome-ink); padding: 0 24px; height: 52px; display: flex; align-items: center; gap: 16px; flex-shrink: 0; border-bottom: 1px solid var(--border); /* #1938 — the calm bar as drawn */ /* L-048 (Craig 2026-06-18) — the header is `position:sticky` so it forms a stacking context; its z-index CAPS the ☰ menu dropdown inside it. The graph palette (.pg-palette, z-index 200) lives outside this context, so at the old z-index:100 the palette buttons poked THROUGH the open menu. Raise the whole header above the palette + the canvas floats (≤10050) so its dropdown wins — the top nav should sit on top of everything. */ z-index: 10200; position: sticky; top: 0; } .logo { display: flex; align-items: center; gap: 9px; } /* #1764 — EVERY CONTROL ON THE BANNER TAKES THE CHROME FONT COLOUR. The divider, the version stamp, the organisation picker, Menu, Help and Options were fixed white, so on a light chrome (cream, measured on v4.3.1273) they all but vanished while the tagline beside them followed the setting. Each is now --chrome-ink at the strength the white had, so the default chrome (white ink) renders exactly as before. */ .logo-sep { width: 1px; height: 20px; background: color-mix(in srgb, var(--chrome-ink) 25%, transparent); } .tagline { font-size: 0.82rem; /* #1880 — full chrome ink; opacity 0.7 measured 3.56 */ } /* ── Analysis progress ──────────────────────────────────────────────────────── * #300 (Craig 2026-08-05) — NOTHING IS LEFT TO STYLE. The floating window went at * v4.2.64 and became the Progress drawer; the drawer is now burned too. Gone with * it here: .status-log, .status-line, .status-latest and .status-error. * * A refusal now surfaces as .rc-toast.rc-toast-err (see the toast rules further * down) and everything else goes to the audit trail only. */ /* ── Layout ── */ .app-wrap { display: flex; height: calc(100vh - 52px); overflow: hidden; position: relative; } /* ── Left sidebar ── */ .sidebar { width: 320px; flex-shrink: 0; background: var(--bg-white); border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; gap: 0; position: relative; min-width: 260px; max-width: 560px; transition: width 0.2s, min-width 0.2s, border 0.2s; } .sidebar.sidebar-hidden { width: 0 !important; min-width: 0 !important; overflow: hidden; border-right: none; } /* ── T-154 P4 — document-window palette + launch popover ─────────────────── The sidebar is RETIRED: hidden but kept in the DOM so #rc-fw-host remains the float panel's home (the /api/analyze checkbox contract reads it wherever it lives). Picker → float (📚), Start-Analysis → launch popover (🔍). */ .app-wrap > .sidebar { display: none !important; } .doc-palette { width: 46px; flex-shrink: 0; background: var(--bg-white); border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; } .doc-palette-btn { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--bg-white); border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.12s, border-color 0.12s; } .doc-palette-btn:hover { background: light-dark(#eef2ff, color-mix(in oklab, #eef2ff 14%, var(--pq-surface))); border-color: #4f6ddb; } .doc-palette-btn.active { background: light-dark(#e0e7ff, color-mix(in oklab, #e0e7ff 14%, var(--pq-surface))); border-color: #4f6ddb; } .doc-launch-pop { position: fixed; left: 56px; top: 96px; z-index: 9998; background: var(--bg-white); /* Option 1c (2026-08-10) — FIXED 820x560: the card cannot grow from the inside (that growth is what pushed it off screen, #527). No border — the navy .sa-head supplies the top edge; the old 1px hardcoded-blue border had no dark twin. */ border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.28); width: 820px; max-width: calc(100vw - 24px); height: 560px; display: flex; flex-direction: column; overflow: hidden; } .doc-launch-pop.hidden { display: none; } /* #1761 — Start Analysis is MODAL on both surfaces (Craig 2026-09-27: "the start analysis dialog needs to prevent click behinds"). A sibling of the card, one z-index below it, that swallows every click meant for the page behind. */ .sa-modal-backdrop { position: fixed; inset: 0; background: var(--rc-scrim); } /* Option 1c — the .doc-launch-bar/.doc-launch-title/.doc-launch-x strip is deleted; the card's navy .sa-head is the drag handle and close home. */ .doc-launch-body { padding: 0; overflow: hidden; flex: 1; min-height: 0; display: flex; } .doc-launch-body > .sa-card { flex: 1; min-width: 0; } /* the relocated trigger section sheds its sidebar chrome inside the popover */ .doc-launch-body > .sidebar-section { padding: 0; border: none; } /* Drag handle on the right edge of the sidebar */ .sidebar-resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 20; background: transparent; transition: background 0.15s; } .sidebar-resizer:hover, .sidebar-resizer.dragging { background: var(--primary-light); opacity: 0.5; } .sidebar-section { padding: 16px; border-bottom: 1px solid var(--border); } .sidebar-section:last-child { border-bottom: none; margin-top: auto; } .section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .section-title .optional { font-weight: 400; text-transform: none; letter-spacing: 0; } .ich-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; } .remove-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 0.75rem; padding: 1px 4px; border-radius: 3px; flex-shrink: 0; line-height: 1; } .remove-btn:hover { background: var(--border); color: var(--conflict-text); } /* eCFR part checkboxes */ .parts-list { display: flex; flex-direction: column; gap: 3px; } .parts-list label { display: flex; align-items: flex-start; gap: 7px; padding: 5px 7px; border-radius: 5px; cursor: pointer; font-size: 0.8rem; line-height: 1.4; transition: background 0.15s; } .parts-list label:hover { background: var(--bg); } .parts-list input[type="checkbox"] { margin-top: 2px; cursor: pointer; accent-color: var(--primary-fg); flex-shrink: 0; } .part-num { font-weight: 600; } .part-desc { color: var(--text-muted); font-size: 0.73rem; } /* Analysis trigger panel — replaced the 2×3 grid with four explicit controls */ .trigger-panel { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg-subtle, #f8fafc); font-size: 0.78rem; } /* v3.12.36 (rework of v3.12.32) — trigger-row keeps the 2-col label/select layout, but the label column is narrowed from 90px → 56px so the select gets enough room for full option text + chevron. Pre-condition: the longest label ("Review") fits in 56px. The v3.12.32 ellipsis-truncation made the row WORSE (Craig: "you have made space by truncating the labels and this is worse") — this iteration removes truncation entirely and reclaims the space the labels never needed. */ .trigger-panel input[type="range"] { width: 100%; font-size: 0.78rem; padding: 0; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--text-color, inherit); font-family: inherit; } /* Batch-history delete button — visibly red so it can't be missed. Lives on the Tool B "Recent batches" rows; the icon-only siblings (Open / Export) didn't read as actions to Craig at first review. */ .batch-history-delete-btn { background: light-dark(#fee2e2, color-mix(in oklab, #fee2e2 14%, var(--pq-surface))); color: light-dark(#991b1b, color-mix(in oklab, #991b1b 45%, white)); border: 1px solid light-dark(#fca5a5, color-mix(in oklab, #fca5a5 30%, var(--pq-surface))); border-radius: 4px; font-size: 0.74rem; font-weight: 600; padding: 3px 10px; cursor: pointer; font-family: inherit; white-space: nowrap; } .batch-history-delete-btn:hover { background: light-dark(#fecaca, color-mix(in oklab, #fecaca 14%, var(--pq-surface))); border-color: #f87171; } /* "Add another analysis" affordance — appears after a successful first run. Hidden by the shared `.hidden` utility (#2279 removed a duplicate of it here). */ .add-pass-btn { background: var(--bg); color: var(--primary-ink, #1a3a5c); border: 1.5px solid var(--primary, var(--primary-fg)); border-radius: 6px; font-weight: 600; font-size: 0.78rem; padding: 6px 10px; cursor: pointer; font-family: inherit; transition: background 0.12s; } .add-pass-btn:hover { background: var(--bg-hover, #f1f5f9); } .add-pass-btn:disabled { opacity: 0.4; cursor: not-allowed; } .add-pass-reset { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; font-size: 0.74rem; padding: 6px 10px; cursor: pointer; font-family: inherit; } .add-pass-reset:hover { background: var(--bg-hover, #f1f5f9); color: var(--text-color); } /* Coverage panel — one row per analysis run on this SOP */ .coverage-panel { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-size: 0.72rem; } .coverage-panel.hidden { display: none; } .coverage-panel-header { font-weight: 600; color: var(--text-muted); margin-bottom: 6px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } .coverage-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 6px; padding: 4px 0; border-top: 1px dashed var(--border); align-items: center; } .coverage-row:first-of-type { border-top: none; } .coverage-rindex { font-family: monospace; font-weight: 700; color: var(--primary-fg); text-align: center; background: var(--bg-subtle); border-radius: 3px; padding: 1px 4px; font-size: 0.66rem; } .coverage-meta { display: flex; flex-direction: column; gap: 1px; overflow: hidden; } .coverage-meta-line { color: var(--text-color); } .coverage-meta-sub { color: var(--text-muted); font-size: 0.66rem; } /* T-065 — per-Challenger-pass model attribution lines under the meta-line. Slightly muted vs the main label, monospace so the model ids align cleanly when several rows stack. */ .coverage-pass-line { color: var(--text-muted); font-size: 0.7rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; line-height: 1.35; padding-left: 8px; } .coverage-count { font-family: monospace; color: var(--text-muted); font-size: 0.7rem; text-align: right; } /* Analyze button */ .analyze-btn { width: 100%; padding: 11px 16px; background: var(--primary); color: #fff; border: none; border-radius: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s, opacity 0.2s; letter-spacing: 0.2px; } .analyze-btn:hover:not(:disabled) { background: var(--primary-light); } .analyze-btn:disabled { opacity: 0.38; cursor: not-allowed; } .analyze-btn-stop { background: #c53030 !important; } .analyze-btn-stop:hover { background: #9b2c2c !important; } /* Spinner inside the Stop Analysis button */ @keyframes _spin { to { transform: rotate(360deg); } } .btn-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,0.4); border-top-color: light-dark(#fff, var(--pq-border)); border-radius: 50%; animation: _spin 0.7s linear infinite; flex-shrink: 0; } /* Analysis-in-progress banner */ /* T-180 — the run countdown + progress line now live IN the top-centre pill (moved off the small Stop button, which couldn't fit it). */ /* P4.6b — the flashing ellipsis (.analysis-dots / @keyframes _dots) was RETIRED. The banner now shows a steady, advancing "Analysing — Pass N of M" via #analysis-progress-text (see _handleProgress). Removed per the house standard against flashing long-op status (L-062). */ /* Framework reset bar */ .fw-reset-btn { background: none; border: 1px solid var(--border, #dde1e7); border-radius: 4px; color: var(--text-muted, #64748b); cursor: pointer; font-size: 0.72rem; padding: 3px 8px; width: 100%; text-align: left; transition: background 0.15s, color 0.15s; } .fw-reset-btn:hover { background: var(--bg-hover, #f1f5f9); color: var(--text, #1e293b); } /* Chat framework-select button (injected next to list items) */ .chat-fw-select-btn { background: none; border: 1px solid var(--primary, var(--primary-fg)); border-radius: 3px; color: var(--primary-ink, #1a3a5c); cursor: pointer; font-size: 0.68rem; margin-left: 6px; padding: 1px 5px; vertical-align: middle; white-space: nowrap; transition: background 0.15s, color 0.15s; } .chat-fw-select-btn:hover { background: var(--primary, #1a3a5c); color: #fff; } .chat-fw-select-btn.fw-unselected { background: none; border-color: #2b6cb0; color: light-dark(#2b6cb0, var(--pq-accent)); } .chat-fw-select-btn.fw-unselected:hover { background: #2b6cb0; color: #fff; } .chat-fw-select-btn.fw-selected { background: #276749; border-color: #276749; color: #fff; } .fw-ref-unselected { border-left: 2px solid #2b6cb0; padding-left: 4px; } .fw-ref-selected { border-left: 2px solid #276749; padding-left: 4px; } td.fw-ref-unselected, td.fw-ref-selected { border-left: none; padding-left: inherit; background: rgba(39,103,73,0.06); } .chat-fw-btn-wrap { display: inline-flex; gap: 3px; flex-wrap: wrap; margin-left: 4px; vertical-align: middle; } .ich-code-editable { cursor: text; border-bottom: 1px dashed transparent; } .ich-code-editable:hover { border-bottom-color: var(--primary, var(--primary-fg)); } /* Legend */ .legend { display: flex; flex-direction: column; gap: 9px; } /* ── Main document area ── */ .main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-width: 0; order: 0; } /* Placeholder */ .placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; color: var(--text-muted); } /* P4.50 — empty Document screen renders an entry toolbar at the TOP (like the QMS / Graph surfaces) instead of the centred upload prompt. */ .placeholder.placeholder--toolbar { justify-content: flex-start; align-items: stretch; padding: 0; text-align: left; } /* #279 (2026-07-20) — the P4.47/B-230 "current row" highlight is BURNED (Craig's ruling: the tint lingered and "doesn't really help anything"). Hover tint stays. */ /* P4.51 — login welcome panel (System / Organisation / Personal) */ .welcome-overlay { position: fixed; inset: 0; z-index: calc(var(--z-dialog) + 30); display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,0.45); padding: 20px; } .welcome-overlay .wp-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff); box-shadow: 0 12px 40px rgba(15,23,42,.22); max-width: 580px; width: 100%; overflow: hidden; } .wp-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--primary); color: #fff; } .wp-head .wp-hi { font-size: 16px; font-weight: 600; } .wp-sections { display: grid; grid-template-columns: 1fr 1fr 1fr; } .wp-sec { padding: 16px; border-right: 1px solid var(--border); } .wp-sec:last-child { border-right: none; } .wp-sec-hd { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--primary-ink); margin-bottom: 10px; } .wp-row { font-size: 13px; line-height: 1.5; margin-bottom: 4px; } .wp-row:empty { display: none; } .wp-row b { color: var(--text-primary); } .wp-row span { color: var(--text-secondary); } .wp-row .wp-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--primary); color: #fff; } /* B-093: .wp-row .wp-badge beats `.wp-row span` (else dark-on-navy, unreadable) */ .wp-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; } /* #91 — the messages section is a FULL-WIDTH ROW BENEATH the three columns, not a fourth column beside them. Craig 2026-08-10: "under all three of the existing messages. It runs the length of the dialog as a second level". The `:has()` rules that widened .wp-sections to four columns are DELETED rather than adjusted — the grid is three columns again, unconditionally, and has no opinion about whether a message exists. One fewer thing coupled to another. Prose needs width; a message in a quarter of a modal is one nobody reads. */ .wp-messages-sec { border-top: 1px solid var(--border); padding: 14px 18px; } .wp-messages-sec.hidden { display: none; } /* The messages themselves: each one labelled with WHOSE it is. An announcement from ParaQualis and one from the reader's own admin carry different weight, and a stack of unattributed paragraphs hides that. */ .wp-msg { margin-bottom: 10px; } .wp-msg:last-child { margin-bottom: 0; } .wp-msg-from { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; } .wp-msg-body { font-size: 13px; line-height: 1.5; white-space: pre-wrap; } @media (max-width: 560px) { /* The `:has()` twin is gone with the fourth column (#91, 2026-08-16) — the grid no longer varies with whether a message exists. */ .wp-sections { grid-template-columns: 1fr; } .wp-sec { border-right: none; border-bottom: 1px solid var(--border); } } /* P4.6a — Analysis History panel (prior runs for a document) */ .analysis-history-popup { position: fixed; z-index: 1200; width: 420px; max-width: calc(100vw - 24px); border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff); box-shadow: 0 12px 36px rgba(15,23,42,.20); overflow: hidden; } .analysis-history-header { display:flex; align-items:center; gap:7px; padding:11px 14px; background: var(--surface-2, #f6f7fb); border-bottom:1px solid var(--border); font:600 13px/1 system-ui; cursor:move; } .analysis-history-body { max-height: 60vh; overflow-y: auto; padding: 4px 0; } .ahist-row { padding:9px 14px; border-bottom:1px solid var(--border, #eceef3); } .ahist-row:last-child { border-bottom:none; } .ahist-when { font:600 12.5px/1.3 system-ui; color: var(--text-primary); } .ahist-meta { font:12px/1.4 system-ui; color: var(--text-secondary); } .ahist-fw { font:11.5px/1.4 system-ui; color: var(--text-secondary); margin-top:2px; } .ahist-empty, .ahist-loading { padding: 16px; text-align:center; color: var(--text-secondary); font:13px/1.4 system-ui; } /* P4.6a — Run Mode toggle (Design 1): explicit Add-to-existing vs Fresh */ .runmode-opt { flex:1; border:none; background: var(--surface,#fff); padding:6px 8px; font:600 11.5px/1.2 system-ui; cursor:pointer; color: var(--text-secondary,#667); } .runmode-opt + .runmode-opt { border-left:1px solid var(--border,#cfd2da); } .runmode-opt.active { background: var(--primary,#4f6ddb); color:#fff; } /* ── Start-Analysis card — option 1c "Section rail" (design handoff 2026-08-10, documentation/design/ui/design_handoff_analysis_window). One fixed-geometry card rendered by RCAnalysis.buildLaunchBody() into BOTH #doc-launch-body and the graph popover. Fallback literals point at the real token values so dark mode (the prefers-color-scheme blocks) inherits without a second block. ── */ .sa-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; font: 13px system-ui, -apple-system, sans-serif; color: var(--text-primary, #2d3748); } /* header — the drag handle and the window's top edge */ .sa-head { flex: none; display: flex; align-items: center; gap: 11px; padding: 13px 12px 12px 18px; background: var(--primary, #1a3a5c); color: #fff; cursor: move; user-select: none; border-radius: 10px 10px 0 0; } .sa-head-ic { width: 17px; height: 17px; } .sa-title { flex: 1; margin: 0; font: 600 1rem/1.2 system-ui; color: #fff; } .sa-doc-ctx { font: 11.5px/1 system-ui; color: rgba(255,255,255,.6); } /* body — rail | panes */ .sa-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 196px 1fr; } .sa-rail { background: var(--primary-pale, #eef3f9); border-right: 1px solid light-dark(#dbe4ee, var(--pq-border)); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; min-height: 0; } /* #1761 — QE Expert's families list: its heading and its tickable rows. */ .sa-qe-fams-hd { font: 600 11px/1.3 system-ui; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 0 4px 6px; } .sa-qe-fam { display: flex; align-items: flex-start; gap: 6px; padding: 4px 8px; font: 12px/1.3 system-ui; color: var(--text); cursor: pointer; } .sa-qe-fam:hover { background: var(--hover-bg); } .sa-qe-fam input { margin: 2px 0 0; flex: none; } .sa-qe-fam:focus-within { outline: 2px solid var(--primary-fg); outline-offset: -2px; } /* #2397/#2412 — RegPacks (frontend/rc_regsets.js), Settings > RegPacks. Rebuilt on Craig's test (2026-10-25): one top bar (pack dropdown, actions, Add, the Packs menu) and ONE scrolling list of the pack's documents with frozen headers; a framework item of several documents is a group in that list. Theme tokens only, so light and dark both follow the user's setting; the global prefers-reduced-motion rule stills the spinner. */ .rs-page { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .rs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); } .rs-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-secondary); } .rs-pick select { min-width: 220px; max-width: 360px; font-weight: 600; color: var(--text); } .rs-bar-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .rs-barmenu { position: relative; margin-left: auto; } .rs-barmenu-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-dialog, 50); width: min(380px, 90vw); display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 6px 20px color-mix(in srgb, var(--text) 18%, transparent); } .rs-jobs { border-top: 1px solid var(--border); padding-top: 6px; } .rs-jobs h5 { margin: 0 0 4px; font-size: 0.8rem; color: var(--text-secondary); } .rs-job-list { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; } .rs-job { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 5px 0; font-size: 0.82rem; border-bottom: 1px solid var(--border-subtle); } .rs-job-name { font-weight: 600; } .rs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .rs-form { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-subtle); font-size: 0.85rem; max-width: 560px; } .rs-form label { display: flex; flex-direction: column; gap: 2px; } .rs-form label.rs-check, .rs-check { flex-direction: row; display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; } .rs-form h6 { margin: 0; font-size: 0.85rem; } .rs-list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .rs-filter { width: 280px; max-width: 100%; } /* The scroll container owns the scroll, so the header row sticks to ITS top: a structural freeze, not a z-index layer over the page. separate borders keep sticky cells' lines. */ .rs-scroll { max-height: 68vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .rs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.82rem; } .rs-table thead th { position: sticky; top: 0; z-index: 1; background: var(--card); text-align: left; font-weight: 600; color: var(--text-secondary); padding: 5px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; } .rs-table td { padding: 3px 6px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .rs-table tr[tabindex]:focus-visible { outline: 2px solid var(--primary-fg); outline-offset: -2px; } .rs-table tr.rs-off td { opacity: 0.6; } .rs-doc[draggable="true"] { cursor: grab; } .rs-doc:hover td { background: var(--hover-bg); } .rs-grp td { background: var(--bg-subtle); border-top: 1px solid var(--border); font-weight: 400; } .rs-grp-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; } .rs-grp-name > .ic { width: 15px; height: 15px; color: var(--primary-fg); } .rs-name-edit { min-width: 240px; font-weight: 600; } .rs-mem td:first-child { padding-left: 28px; box-shadow: inset 3px 0 0 var(--primary-fg); } .rs-carried td { background: var(--hover-bg); font-style: italic; } /* Where a drop lands: a line before or after the row, or the whole header for "into". */ .rs-drop-before td { box-shadow: inset 0 2px 0 var(--primary-fg); } .rs-drop-after td { box-shadow: inset 0 -2px 0 var(--primary-fg); } .rs-drop-into td { background: var(--hover-bg); box-shadow: inset 0 0 0 1px var(--primary-fg); } .rs-cite-row td { background: var(--bg-subtle); } .rs-cite { display: flex; flex-direction: column; gap: 4px; max-width: 560px; padding: 4px 0 4px 28px; } .rs-try { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: var(--text-secondary); } .rs-addr { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rs-addr a { color: var(--primary-fg); } .rs-ident { overflow-wrap: anywhere; } .rs-ord { display: inline-block; min-width: 1.6em; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .rs-force { font-size: 0.8rem; } .rs-actions { white-space: nowrap; } .rs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .rs-link { background: none; border: none; padding: 0; color: var(--primary-fg); text-decoration: underline; cursor: pointer; font: inherit; } .rs-icon { background: none; border: 1px solid transparent; border-radius: 4px; padding: 2px 4px; cursor: pointer; color: var(--text-secondary); } .rs-icon:hover:not(:disabled) { border-color: var(--border); color: var(--text); } .rs-icon:disabled { opacity: 0.35; cursor: default; } .rs-icon .ic { width: 14px; height: 14px; } .rs-ctx { position: fixed; z-index: var(--z-dialog, 50); min-width: 220px; display: flex; flex-direction: column; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 6px 20px color-mix(in srgb, var(--text) 18%, transparent); } .rs-ctx button { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: none; border-radius: 5px; background: none; color: var(--text); font-size: 0.85rem; text-align: left; cursor: pointer; } .rs-ctx button:hover:not(:disabled), .rs-ctx button:focus-visible { background: var(--hover-bg); outline: none; } .rs-ctx button:disabled { opacity: 0.4; cursor: default; } .rs-ctx .rs-ctx-danger { color: var(--danger); } .rs-ctx .ic { width: 15px; height: 15px; } .rs-chip { font-size: 0.72rem; padding: 1px 6px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-secondary); white-space: nowrap; } .rs-n { font-size: 0.78rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .rs-muted { color: var(--text-secondary); font-size: 0.82rem; } .rs-ok { color: var(--ok); font-size: 0.82rem; } .rs-warn { color: var(--pq-warn); font-size: 0.82rem; } .rs-err { color: var(--danger); } .rs-file { cursor: pointer; } .rs-status { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border); border-left-width: 4px; background: var(--surface); font-size: 0.88rem; } .rs-status > span { flex: 1; } .rs-status-ok { border-left-color: var(--ok); } .rs-status-warn { border-left-color: var(--pq-warn); } .rs-status-err { border-left-color: var(--danger); } .rs-busy { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0; color: var(--text-secondary); font-size: 0.82rem; } .rs-spin { width: 14px; height: 14px; flex: none; border: 2px solid var(--border); border-top-color: var(--primary-fg); border-radius: 50%; animation: spin 0.9s linear infinite; } .rs-report { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; } .rs-report ul { margin: 4px 0 6px 18px; padding: 0; } /* #2195 — a feature the organisation's plan does not include is not offered (RCPlan, app.js). !important because the controls marked carry display rules of their own. */ [data-plan-excluded] { display: none !important; } /* #1761 — the families QE Expert searches: a scrolling list under "Review & run" (Craig 2026-09-27: "a separate list underneath Review and Run which is a multi select scrolling list"). It takes the rail's spare height and scrolls inside it, so the window never resizes. Theme tokens only. */ .sa-qe-fams { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; } .sa-qe-fams-list { flex: 1 1 auto; min-height: 4.5em; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: 3px 0; } /* .sa-qe-fams-hd and the .sa-qe-fam row share the background-documents rules (#2085, above). */ /* #1761 — one of QE Expert's suggestion rows. Its layout lives HERE rather than inline because an inline display beats the [hidden] attribute: on v4.3.1273 a row narrowed out of QE's search kept display:flex and stayed on screen. The [hidden] rule restates what the attribute means for this flex row. */ .rc-qe-row { display: flex; gap: 6px; align-items: baseline; padding: 3px 2px; font-size: 12px; cursor: pointer; } .rc-qe-row[hidden] { display: none; } .sa-rail-item { display: flex; align-items: center; gap: 9px; text-align: left; border: none; border-radius: 7px; padding: 9px 11px; font: 600 12.5px/1.2 system-ui; cursor: pointer; background: transparent; color: light-dark(#41556e, var(--pq-accent)); transition: background .12s, color .12s; } .sa-rail-item:hover { background: rgba(26,58,92,.07); } .sa-rail-item.active { background: var(--primary, #1a3a5c); color: #fff; } .sa-rail-item.active:hover { background: var(--primary, #1a3a5c); } .sa-rail-item .ic { width: 15px; height: 15px; } .sa-rail-label { flex: 1; } .sa-rail-count { font: 600 11px/1 system-ui; border-radius: 10px; padding: 3px 7px; background: rgba(26,58,92,.11); color: inherit; } .sa-rail-foot { margin-top: auto; font: 11px/1.5 system-ui; color: light-dark(#7d8ea3, var(--pq-ink-muted)); } /* panes — all in the DOM, one visible; only the framework list scrolls */ .sa-panes { min-width: 0; min-height: 0; display: flex; } .sa-pane { flex: 1; min-width: 0; min-height: 0; } .sa-pane-fw { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .sa-fw-row { display: flex; gap: 9px; align-items: center; } .sa-fw-searchwrap { position: relative; flex: 1; display: block; } .sa-fw-searchic { position: absolute; left: 9px; top: 8px; width: 15px; height: 15px; stroke: #9aa5b1; pointer-events: none; } .sa-fw-search { width: 100%; box-sizing: border-box; padding: 7px 9px 7px 30px; border: 1px solid light-dark(#cfd6de, var(--pq-border)); border-radius: 6px; background: var(--surface, #fff); color: var(--text-primary, #2d3748); font: 13px system-ui; } .sa-fw-qe-btn { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.2 system-ui; padding: 6px 10px; border: 1px solid var(--primary, #1a3a5c); border-radius: 7px; background: transparent; color: var(--primary-ink, #1a3a5c); cursor: pointer; transition: background .12s, color .12s; } .sa-fw-qe-btn:hover { background: var(--primary, #1a3a5c); color: #fff; } .sa-fw-qe-btn .ic { width: 14px; height: 14px; } .sa-fw-qe-out:not(:empty) { max-height: 160px; overflow: auto; } .sa-fw-mount { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; padding: 8px 6px; } .sa-pane-set { padding: 16px 18px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; } .sa-field > label { display: block; font: 600 12px/1 system-ui; color: light-dark(#5a6472, var(--pq-ink-muted)); margin-bottom: 6px; } .sa-select { width: 100%; max-width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid light-dark(#cfd6de, var(--pq-border)); border-radius: 6px; background: var(--surface, #fff); color: var(--text-primary, #2d3748); font: 13px system-ui; } .sa-scope, .sa-helper { max-width: 440px; } .sa-depth, .sa-mode { max-width: 440px; } .sa-helper { font: 11.5px/1.5 system-ui; color: light-dark(#8a93a3, var(--pq-ink-muted)); margin-top: 6px; } .sa-runmode-row .sa-seg { max-width: 360px; } .sa-seg { display: flex; border: 1px solid light-dark(#cfd6de, var(--pq-border)); border-radius: 7px; overflow: hidden; } .sa-seg .sa-runmode-opt { flex: 1; border: none; background: var(--surface, #fff); padding: 7px 8px; font: 600 12px/1.2 system-ui; cursor: pointer; color: light-dark(#66717f, var(--pq-ink-muted)); transition: background .12s, color .12s; } .sa-seg .sa-runmode-opt + .sa-runmode-opt { border-left: 1px solid light-dark(#cfd6de, var(--pq-border)); } .sa-seg .sa-runmode-opt.active { background: var(--primary, #1a3a5c); color: #fff; } .sa-est { font: 12px/1.4 system-ui; color: var(--text-muted, #718096); } .sa-pane-run { padding: 18px; overflow-y: auto; } .sa-eyebrow { font: 700 10.5px/1 system-ui; letter-spacing: .06em; text-transform: uppercase; color: light-dark(#8a93a3, var(--pq-ink-muted)); margin-bottom: 10px; } .sa-review { display: grid; grid-template-columns: 120px 1fr; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; overflow: hidden; font: 12.5px/1.5 system-ui; } .sa-review-k { padding: 10px 12px; background: light-dark(#f7f9fc, var(--pq-elevated)); color: light-dark(#5a6472, var(--pq-ink-muted)); font-weight: 600; border-bottom: 1px solid var(--border-subtle, #eef1f4); } .sa-review-v { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle, #eef1f4); } .sa-review-k:nth-last-child(2), .sa-review-v:last-child { border-bottom: none; } .sa-run-note { margin-top: 14px; padding: 11px 13px; background: var(--primary-pale, #eef3f9); border-radius: 7px; font: 12px/1.55 system-ui; color: light-dark(#40506a, var(--pq-accent)); } /* footer — labelled actions (T-164; the icon-only pair was the "weak" defect) */ .sa-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border, #e2e8f0); background: light-dark(#fbfcfd, var(--pq-surface)); } .sa-fwnote { flex: 1; font: 12px/1.4 system-ui; color: var(--text-muted, #718096); margin: 0; } .sa-fwnote.warn { color: light-dark(#b45309, color-mix(in oklab, #b45309 45%, white)); } .sa-fwnote.ok { color: light-dark(#1c7a3f, color-mix(in oklab, #1c7a3f 45%, white)); } /* #2099 — the analysis's price, beside the Start button (light and dark). */ .sa-credit-quote { font: 12px/1.4 system-ui; white-space: nowrap; margin-right: 8px; color: var(--text-muted, #718096); } .sa-credit-quote[data-state="cost"] { font-weight: 600; color: var(--text, #1f2937); } /* #2247 — a refused run (an unavailable model): the refusal colours .rc-tell-warn uses, wrapping, because the sentence carries its next step. */ .sa-credit-quote[data-state="refused"] { white-space: normal; font-weight: 600; padding: 4px 8px; border-radius: 6px; background: var(--gap-bg); color: var(--gap-text); } .sa-foot .sa-cancel { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--primary-fg, #1a3a5c); background: light-dark(#fff, var(--pq-surface)); color: var(--primary-fg, #1a3a5c); font: 500 0.82rem system-ui; cursor: pointer; transition: background .12s; } .sa-foot .sa-cancel:hover { background: light-dark(#e8edf5, var(--pq-elevated)); } .sa-foot .sa-start { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 8px; border: none; background: var(--primary, #1a3a5c); color: #fff; font: 600 0.82rem system-ui; cursor: pointer; transition: background .12s; } .sa-foot .sa-start:hover { background: var(--primary-light, #2a5a8c); } .sa-foot .sa-start .ic { width: 15px; height: 15px; } .sa-foot .sa-start:disabled { opacity: .38; cursor: not-allowed; } /* ── WT-2 (Craig 2026-07-19) — centre-screen analysis countdown ────────────── A non-blocking "Analysing… m:ss / ~m:ss" (elapsed / estimate) pinned to the middle of the screen while a run is live, so it visibly progresses even when the top-centre pill is out of the user's eyeline. pointer-events:none keeps it from intercepting clicks. Colours are the shared design tokens, which are already theme-aware (the prefers-color-scheme remap), so this reads correctly in light AND dark automatically. The overrun red is a single mid-red legible on both surfaces. */ /* #575/#431 — the bespoke document analysis pill (spinner + "Analysing…" + Cancel) is BURNED, not restyled: the document now mounts the shared .pg-run-chip (one look, one arithmetic — RCAnalysisTimer). The clock span keeps its id-name class inside the chip but takes the chip's own typography, so nothing here survives. Charter 7 — git remembers the old pill. */ .placeholder h2 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 8px; } .placeholder p { font-size: 0.87rem; max-width: 380px; line-height: 1.6; } /* Loading */ .loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text-muted); } .spinner { width: 38px; height: 38px; border: 3px solid var(--border); border-top-color: var(--primary-fg); border-radius: 50%; animation: spin 0.75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-msg { font-size: 0.95rem; color: var(--text); } .loading-sub { font-size: 0.82rem; } /* Results */ .results { flex: 1; display: flex; flex-direction: column; min-height: 0; } .results-bar { background: var(--bg-white); border-bottom: 1px solid var(--border); padding: 12px 20px; display: flex; align-items: center; gap: 14px; flex-shrink: 0; flex-wrap: wrap; } .stats { display: flex; gap: 8px; flex-wrap: wrap; } /* #442 — the host slot the ONE pill row is moved into on Level 1 / Level 2 / BPMN. The chips themselves carry all their own styling (`.rc-chip`, #1653 — this said `.stat-pill` until the chip replaced it), which is the point of moving the node rather than rebuilding it: the canvas cannot drift from the document in appearance any more than it can in counts. Only the surrounding strip is described here — a quiet band under the graph toolbar, matching `.results-bar`'s padding and separator so the two surfaces read as the same piece of furniture in two places. Theme tokens throughout, so it follows light/dark without a second rule. */ .rc-pillrow-host { padding: 8px 20px; border-top: 1px solid var(--border); background: var(--bg-white); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex-shrink: 0; } .rc-pillrow-host.hidden { display: none; } /* ── #1653 · THE FINDING CHIP ──────────────────────────────────────────────── Craig, 2026-09-20, on the pills this replaces: they "look a little 1980s", and he wants "something a more 2026, something lighter in terms of look. More professional, more constructed and engineered". Ruled from specimens: "I agree with your assessment C and E as stated." WHAT MADE THE OLD ONE HEAVY WAS EVERYTHING AT ONCE — a 20px fully-round capsule, weight 700, UPPERCASE with letter-spacing, and a saturated fill. Each is defensible alone; together they shout. The chip turns all four down and spends the saturation in ONE place instead: a solid bar of the category's own hue at the leading edge, which is also the only part a reader needs to tell eight categories apart at a glance. TWO WEIGHTS OF ONE TREATMENT, not two components. .rc-chip--cap an 8px full-height block of the hue — the chip standing alone (the filter row), where nothing else carries the colour. .rc-chip--rule a 3px leading border instead — the chip ON a finding card, where the card is already tinted with the same hue. A full cap there would be a third coloured field in one object. THE CAP IS CLIPPED BY THE FRAME, not rounded itself: `overflow:hidden` on the frame plus `align-items:stretch` is what makes it meet the border exactly at the radius, at any font size, with no second radius to keep in step. THE COUNT CELL IS MONOSPACE WITH TABULAR FIGURES AND A MIN-WIDTH because the filter row is read as a COLUMN of numbers as often as a row of labels — "0" and "147" must occupy the same box or the eye cannot compare them. That is what the hairline and the slightly distinct ground behind it are for too: the count is a different KIND of fact from the name, so it gets its own cell rather than being run into the label as "147 Conflicts". */ .rc-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; background: var(--bg-white); font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer; user-select: none; vertical-align: middle; transition: opacity 0.15s, border-color 0.15s; } /* A chip that only labels (a finding card's category) is not clickable. */ .rc-chip.rc-chip--static { cursor: default; } .rc-chip-cap { width: 8px; flex: 0 0 8px; background: var(--chip-bar, var(--text-muted)); } .rc-chip--rule { border-left: 3px solid var(--chip-bar, var(--text-muted)); } .rc-chip-name { padding: 6px 9px 5px; /* #1665 — 600 -> 400. Craig, 2026-09-20: "they are showing bold and I think the sandbox did not do that - i would prefer it look lighter so not bold". WORTH BEING CLEAR ABOUT WHOSE MISTAKE THIS WAS: the weight came from my own #1653 specification, which called for 600 on the name cell, and the sandbox did the same. So the build matched the spec exactly and the SPEC was wrong. Nothing was implemented incorrectly; the thing that needed changing was the decision. The count cell keeps its own weight — it is a number and reads as one — so this is the name alone. */ font-weight: 400; color: var(--chip-ink, var(--text)); white-space: nowrap; } .rc-chip-count { padding: 6px 8px 5px; /* #1665 — `--mono` (:root, ~line 216) is this exact stack. Restating it here is the same defect this item exists to remove, one concept with two definitions, just in a value rather than a selector. */ font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--text-muted); border-left: 1px solid var(--border); background: var(--bg); min-width: 30px; text-align: right; box-sizing: border-box; } .rc-chip.pill-dimmed { opacity: 0.45; } .rc-chip:not(.rc-chip--static):hover { border-color: var(--chip-bar, var(--border)); } /* ONE MAP, BOTH VOCABULARIES, and the aliasing is deliberate rather than hidden. The filter row calls the category `gap`, `unnecessary` and `ai`; `normCat()` and the finding cards call the same three `incomplete`, `unnecessary_detail` and `ai_suggestion`. Two names for one fact is a defect, but it is not THIS change's defect to rename — the class names reach the analyser payload and the stored category. So both spellings are listed here, against one set of tokens, where a reader can see they are the same thing. Reconciling the vocabularies is tracked separately. THE THREE HAND-PICKED CHIPS ARE GONE, folded into the derived tokens they were always approximating: resolved's #c6f6d5/#276749, inserted's #f0fff4/#2f855a, and structural's #ede5fa/#5b21b6 with its separate dark twin. Each was a pair of literals maintained by hand, and structural's existed only because an alpha background had composited dark-on-dark in dark mode (2026-07-22). The derived tokens invert at the source now, so the twin is not needed and cannot drift. Craig's ruling from that day still governs and is satisfied by construction: the HUE carries the meaning and never changes; LIGHTNESS adapts per theme. Full rule set: documentation/design/ui/theme_colour_rules.md §1 and §7. */ .rc-chip.conflict { --chip-bar: var(--conflict-bar); --chip-ink: var(--conflict-text); } .rc-chip.gap, .rc-chip.incomplete { --chip-bar: var(--gap-bar); --chip-ink: var(--gap-text); } .rc-chip.missing { --chip-bar: var(--missing-bar); --chip-ink: var(--missing-text); } .rc-chip.vague { --chip-bar: var(--vague-bar); --chip-ink: var(--vague-text); } .rc-chip.unnecessary, .rc-chip.unnecessary_detail { --chip-bar: var(--unnecessary-bar); --chip-ink: var(--unnecessary-text); } .rc-chip.ai, .rc-chip.ai_suggestion { --chip-bar: var(--ai-bar); --chip-ink: var(--ai-text); } .rc-chip.inserted { --chip-bar: var(--inserted-bar); --chip-ink: var(--inserted-text); } .rc-chip.resolved { --chip-bar: var(--resolved-bar); --chip-ink: var(--resolved-text); } .rc-chip.structural { --chip-bar: var(--structural-bar); --chip-ink: var(--structural-text); } .rc-chip.unknown { --chip-bar: var(--unknown-bar); --chip-ink: var(--unknown-text); } /* #2053 — a finding not yet handled, on the Level 1 / Level 2 / BPMN rows. The app's danger token, not a category's colour (a picked Conflict colour must not repaint it), and it inverts with the scheme: 4.85:1 on white, 6.50:1 on the dark surface. */ .rc-chip.unresolved { --chip-bar: var(--danger); --chip-ink: var(--danger); } /* #2053 — the same chip at the density of a canvas row. */ .rc-chip--compact { flex-shrink: 0; font-size: 10px; } .rc-chip--compact .rc-chip-name { padding: 2px 6px; } @media (prefers-color-scheme: dark) { .finding-id-badge.finding-id-structural { background: #271f3f; color: #c4b5fd; border-color: #4c3a7a; } } /* The card's identifying badge, structural variant — it carries a human TITLE now ("Headings jump from 1.0 to 4.0"), not the raw SF-…-135 id (which is the rcUid and meant nothing to a reader). The id lives in the tooltip; it is still the key reports and dispositions use. Craig 2026-07-12: "the message is a bit cryptic". */ .finding-id-badge.finding-id-structural { /* 2026-07-22 — same alpha-composites-into-the-page defect as .stat-pill.structural above, and the same fix: the two rgba values computed against white and made opaque (0.12 → #ede5fa, 0.35 → #ccb4f2). Light mode unchanged; dark twin below. */ background: #ede5fa; color: #5b21b6; border: 1px solid #ccb4f2; font-family: inherit; /* it is prose now, not an identifier — don't monospace it */ font-weight: 600; letter-spacing: 0; text-transform: none; max-width: 100%; white-space: normal; /* a real sentence may wrap */ } /* ── Coverage badge ── */ .coverage-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 12px; font-size: 0.70rem; color: var(--text-muted); background: var(--primary-pale); border-bottom: 1px solid var(--border); flex-shrink: 0; } .coverage-label { font-weight: 600; margin-right: 2px; } .coverage-item { background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; padding: 1px 7px; white-space: nowrap; } .coverage-run-date { opacity: 0.65; font-size: 0.88em; margin-left: 3px; } /* 2026-04-29: docx-preview is now THE primary .docx renderer (mammoth retired). docx-preview controls its own page geometry (sized in real units, body content positioned relative to a page wrapper). Neutralise the host container's padding, border, max-width, and font so docx-preview's layout isn't shrunk into a 960px box and clipped — that causes table-headers and body paragraphs to overlap. */ .doc-body.docx-render { background: light-dark(#e6e6e6, var(--pq-line)); padding: 8px 0; border: none; border-radius: 0; max-width: none; margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; word-break: normal; } .doc-body.docx-render .docx-wrapper { background: transparent; padding: 0; } .doc-body.docx-render .docx-wrapper > section.docx { /* docx-preview uses CSS Paged Media-style sizing on each section.docx (the "page"). */ margin: 0 auto 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.12); background: var(--bg-white); /* 2026-04-29: docx-preview's own CSS sets `display: flex; flex-flow: column` on section.docx, which interacts badly with the negative margin-top docx-preview puts on the page header (header sits in the padding-top zone with `margin-top: calc(headerMargin - topMargin)` — a negative value). In flex column layout that negative margin doesn't reliably push subsequent siblings, so the body article ends up overlapping the title-block table. Force display: block — flow layout handles the negative-margin pattern correctly: header sits in the header zone, article naturally follows at header.bottom regardless of header content height. The flex-only `margin-bottom: auto` trick on the article (which pushed footer to section bottom) becomes a no-op; for a rendered preview that's fine — footer just ends up right after the body, which matches user expectation. */ display: block !important; } .doc-body.docx-render section.docx > article { /* Drop the flex-only margin-bottom: auto trick when block layout is forced */ margin-bottom: 0 !important; /* v3.7.50: removed `padding-top: 1px` (was margin-collapse defence based on a wrong diagnosis — the actual bug was the title-block table width, fixed in v3.7.47-49). */ } /* v3.7.48: docx-preview sets `display: flex` on the header element. In flex layout, `width: 100%` on a child doesn't force expansion to the full container — flex items size by content unless explicitly stretched. So v3.7.47's `width: 100%` on the title-block table wasn't actually filling the 672px-wide header (table stayed at 591px, content-sized). Force header back to block layout and the standard width rules apply. The header naturally has only block-style children (paragraphs + the title-block table), so block layout is the correct default — flex was just the docx-preview default that didn't fit. */ .doc-body.docx-render section.docx > header { display: flow-root !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; /* v3.7.55: docx-preview gives the header `background: rgb(26,58,92)` (dark blue) — translated from page-header shading that's NOT in the original Word visual. Cell row 1 has gray shading; rows 2-3 are transparent (white in original). The dark-blue header bg therefore shows through rows 2-3, making them appear blue with white text (also docx-preview-set). Original has white bg + black text. Force the header bg transparent and the text black to restore the original visual. The row-1 gray cell shading stays (it's per-cell, not on the header). */ background-color: transparent !important; } .doc-body.docx-render section.docx > header, .doc-body.docx-render section.docx > header * { color: black !important; } /* v3.7.47: title-block table forced to span full content width. Word's original render treats the page header as margin-to-margin; docx-preview emits `width: auto` which sizes only to the column widths total and leaves the right column too narrow, causing the right-side header logo to wrap and right-aligned dates to truncate. */ .doc-body.docx-render section.docx > header table { width: 100% !important; } /* 2026-04-29: hanging-indent for bulleted lists (Craig: "the line should then go to the indent level — this would line things up"). docx-preview emits each bulleted paragraph as p.docx-num-X-N { display: list-item; list-style-position: inside; text-indent: -18pt; margin-left: 18pt; } p.docx-num-X-N::before { content: "\9 "; } That's the classic hanging-indent pattern but it relies on marker_width == |text-indent|. Our marker is "" — wider than 18pt because CSS `\9` is rendered with default `tab-size: 8`. Result: first-line text starts ~6px to the right of the left margin; wrapped lines start exactly at the left margin — wrapped text appears LEFT of where first-line text begins. Misalignment. Fix: remove the negative text-indent and absolutely position the ::before marker just to the LEFT of the content edge. With text-indent: 0 and the marker out of flow, all lines (first + wrapped) align at the same x-position — clean hanging indent regardless of marker width or tab-rendering. */ .doc-body.docx-render p[class*="docx-num"] { text-indent: 0 !important; position: relative; } .doc-body.docx-render p[class*="docx-num"]::before { position: absolute !important; right: 100% !important; margin-right: 4pt !important; /* Keep the original content / counter-increment / font-family from docx-preview's generated rule — we override only positioning. */ } /* 2026-04-29: Word stores `` on title-block table rows; docx-preview translates this to inline `height: ` on each ``. When that row gets MORE content than the exact height (or when a multi-line cell on one row pushes content into the next row's space), body paragraphs overlap the table — Craig's GCP SOP screenshot showed "To define the procedure..." body text bleeding through the dark blue title-block banner. Override the inline height to `auto` so rows size to content. The previous `ignoreHeight: true` option only affects the PAGE section's minHeight (per docx-preview source), not row heights — so this CSS-side override is what actually resolves the overlap. Trade-off: any intentionally tall decorative row gets compacted to its content; for SOPs this is the right call. */ .doc-body.docx-render tr { height: auto !important; } .doc-body.docx-render td, .doc-body.docx-render th { overflow: visible; } /* (BURNED — B-115 WP3, v4.1.279) docx-preview .hl display rule removed. */ /* Saved Analyses list — compact card rows replacing the old table layout. */ .saved-analyses-list { display: flex; flex-direction: column; gap: 6px; } .saved-empty { padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 0.88rem; } .saved-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-white); transition: background 0.12s, border-color 0.12s; } .saved-row:hover { background: var(--hover-bg); border-color: var(--primary-fg); } .saved-row-main { flex: 1; min-width: 0; } .saved-row-name { font-weight: 600; font-size: 0.88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .saved-row-meta { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } .saved-row-meta .saved-by { font-style: italic; } .saved-count { display: inline-block; padding: 1px 8px; border-radius: 10px; font-weight: 600; font-size: 0.74rem; } .saved-count.count-zero { background: light-dark(#e8f5e8, var(--pq-elevated)); color: light-dark(#2a7a2a, color-mix(in oklab, #2a7a2a 45%, white)); } .saved-count.count-low { background: light-dark(#fff5d4, color-mix(in oklab, #fff5d4 14%, var(--pq-surface))); color: light-dark(#946000, color-mix(in oklab, #946000 45%, white)); } .saved-count.count-mid { background: light-dark(#fde2c4, color-mix(in oklab, #fde2c4 14%, var(--pq-surface))); color: light-dark(#b35400, color-mix(in oklab, #b35400 45%, white)); } .saved-count.count-high { background: light-dark(#fde0e0, color-mix(in oklab, #fde0e0 14%, var(--pq-surface))); color: light-dark(#b03030, color-mix(in oklab, #b03030 45%, white)); } .saved-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .saved-row-actions .btn-sem { padding: 4px 10px; font-size: 0.78rem; } .saved-row-actions .saved-export, .saved-row-actions .saved-delete { padding: 4px 8px; min-width: 30px; } .saved-row-actions .saved-delete { color: light-dark(#c53030, color-mix(in oklab, #c53030 45%, white)); border-color: #c53030; } .saved-row-actions .saved-delete:hover { background: #c53030; color: #fff; } /* "+N new" badge inside stat pills */ .pill-new-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; color: light-dark(#2a7a2a, color-mix(in oklab, #2a7a2a 45%, white)); background: light-dark(#e8f5e8, var(--pq-elevated)); border-radius: 8px; padding: 0 5px; margin-left: 4px; vertical-align: middle; } /* ── Quality Expert Chat modal ── */ .qe-chat-messages { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; min-height: 0; background: var(--bg); } .qe-chat-intro { color: var(--text-muted); font-size: 0.83rem; font-style: italic; text-align: center; padding: 24px 16px; line-height: 1.6; } .qe-chat-row { display: flex; } .qe-chat-row-user { justify-content: flex-end; } .qe-chat-row-asst { justify-content: flex-start; } .qe-chat-bubble { max-width: 82%; padding: 9px 13px; border-radius: 10px; font-size: 0.84rem; line-height: 1.55; word-break: break-word; } .qe-bubble-user { background: var(--primary); color: #fff; border-radius: 12px 12px 3px 12px; } .qe-bubble-asst { background: var(--bg-white); border: 1px solid var(--border); border-radius: 12px 12px 12px 3px; color: var(--text); } .qe-bubble-asst table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 0.82rem; } .qe-bubble-asst td { padding: 5px 8px; border: 1px solid var(--border); vertical-align: top; } .qe-bubble-asst ul { padding-left: 18px; margin: 4px 0; } .qe-bubble-asst li { margin-bottom: 3px; } .qe-bubble-asst h1, .qe-bubble-asst h2, .qe-bubble-asst h3 { margin: 8px 0 4px; font-size: 0.9rem; } .qe-chat-footer { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg-white); flex-shrink: 0; } .qe-chat-input { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 0.85rem; font-family: inherit; background: var(--bg-white); color: var(--text); line-height: 1.4; } .qe-chat-input:focus { outline: none; border-color: var(--primary-light, #4a3899); } .qe-chat-send-btn { background: var(--primary); color: #fff; border: none; border-radius: 6px; padding: 0 14px; font-size: 1.1rem; cursor: pointer; align-self: flex-end; height: 36px; transition: background 0.15s; } .qe-chat-send-btn:hover { filter: brightness(1.15); } .qe-chat-send-btn:disabled { opacity: 0.45; cursor: not-allowed; } .qe-thinking { color: var(--text-muted); font-style: italic; } /* ── Domain panel (the system admin's Domain tab; #2024) ── */ .domain-builtin-badge { font-size: 0.68rem; padding: 1px 5px; border-radius: 3px; background: var(--primary); color: #fff; border: 1px solid var(--primary-fg); font-weight: 600; } .file-tab { padding: 8px 16px; font-size: 0.78rem; font-weight: 500; cursor: pointer; border: none; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); white-space: nowrap; transition: color 0.15s, border-color 0.15s; display: flex; align-items: center; gap: 6px; } .file-tab:hover { color: var(--text); } .file-tab.active { color: var(--primary-fg); border-bottom-color: var(--primary-fg); font-weight: 600; } /* Source file badge on finding cards */ .source-badge { font-size: 0.68rem; background: rgba(0,0,0,0.07); border-radius: 4px; padding: 2px 6px; color: var(--text-muted); margin-top: 5px; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Summary view (all-files tab) */ .summary-file-block { background: var(--bg-white); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 20px; overflow: hidden; } .summary-file-header { background: var(--primary); color: #fff; padding: 10px 16px; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 10px; } .summary-file-stats { display: flex; gap: 8px; margin-left: auto; } .summary-findings { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; } .summary-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 0.8rem; line-height: 1.5; cursor: pointer; transition: filter 0.15s; } .summary-row:hover { filter: brightness(0.95); } .summary-row.conflict { background: var(--conflict-bg); } .summary-row.incomplete { background: var(--gap-bg); } .summary-row.vague { background: var(--vague-bg); } .summary-row.unnecessary_detail { background: var(--unnecessary-bg); } .summary-row.ai_suggestion { background: var(--ai-bg); } .summary-row-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; } .summary-row-dot.conflict { background: var(--conflict-bar); } .summary-row-dot.incomplete { background: var(--gap-bar); } .summary-row-dot.vague { background: var(--vague-bar); } .summary-row-dot.unnecessary_detail { background: var(--unnecessary-bar); } .summary-row-dot.ai_suggestion { background: var(--ai-bar); } .summary-row-body { flex: 1; min-width: 0; } .summary-row-ref { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; } /* ICH guideline collapsible groups */ .ich-group-toggle { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; } .ich-group-toggle:hover { color: var(--primary-fg); background: var(--hover-bg); border-radius: 3px; } .group-arrow { font-size: 0.7rem; opacity: 0.6; flex-shrink: 0; } .ich-group-items { display: none; /* collapsed by default */ padding-left: 2px; } .ich-group-items.ich-group-open { display: block; } /* Parts list grouped */ .parts-group-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary-fg); padding: 8px 7px 3px; display: block; } .parts-loading { font-size: 0.8rem; color: var(--text-muted); padding: 6px 7px; } /* Document text viewer */ .doc-scroll { flex: 1; overflow-y: auto; overflow-x: visible; padding: 28px 32px; position: relative; } .doc-body { background: var(--bg-white); border: 1px solid var(--border); border-radius: 8px; padding: 28px 32px; font-family: 'Calibri', 'Segoe UI', Arial, sans-serif; font-size: 0.84rem; line-height: 1.65; word-break: break-word; max-width: 960px; margin: 0 auto; } /* A.2r-2b — #doc-body is a STACK of per-document surfaces (one editor or legacy render each); exactly one is visible (inline display toggled in JS). A surface is a transparent pass-through so the page chrome on .doc-body (or the grey .doc-body.docx-render page-viewer) shows around its content. */ .rc-surface { display: block; background: transparent; border: 0; padding: 0; margin: 0; } /* Styled document blocks */ .doc-h1 { font-size: 1.15rem; font-weight: 700; margin: 1.3em 0 0.35em; color: var(--primary-fg); border-bottom: 2px solid var(--border); padding-bottom: 3px; font-family: 'Calibri', 'Segoe UI', Arial, sans-serif; line-height: 1.3; } .doc-h2 { font-size: 1.0rem; font-weight: 700; margin: 1.1em 0 0.3em; color: var(--primary-fg); font-family: 'Calibri', 'Segoe UI', Arial, sans-serif; line-height: 1.35; } .doc-h3 { font-size: 0.93rem; font-weight: 700; margin: 0.95em 0 0.25em; color: var(--text); font-family: 'Calibri', 'Segoe UI', Arial, sans-serif; line-height: 1.4; } .doc-h4, .doc-h5, .doc-h6 { font-size: 0.88rem; font-weight: 700; margin: 0.85em 0 0.2em; color: var(--text); font-family: 'Calibri', 'Segoe UI', Arial, sans-serif; } .doc-body-block { margin: 0.25em 0; line-height: 1.65; } .doc-list-item { margin: 0.2em 0 0.2em 1.6em; line-height: 1.7; position: relative; } .doc-list-item::before { content: "•"; position: absolute; left: -1.1em; color: var(--text-muted); } .doc-list-num-item { margin: 0.2em 0 0.2em 1.6em; line-height: 1.7; } /* Indentation levels for nested list/body paragraphs */ .doc-indent-1 { margin-left: 1.6em; padding-left: 1.5em; } .doc-indent-2 { margin-left: 3.2em; padding-left: 3em; } .doc-indent-3 { margin-left: 4.8em; padding-left: 4.5em; } .doc-indent-4 { margin-left: 6.4em; padding-left: 6em; } .doc-indent-5 { margin-left: 8.0em; padding-left: 7.5em; } /* Nested list items: bump on top of the base margin already set */ .doc-list-item.doc-indent-1, .doc-list-num-item.doc-indent-1 { margin-left: 3.2em; } .doc-list-item.doc-indent-2, .doc-list-num-item.doc-indent-2 { margin-left: 4.8em; } .doc-list-item.doc-indent-3, .doc-list-num-item.doc-indent-3 { margin-left: 6.4em; } .doc-list-item.doc-indent-4, .doc-list-num-item.doc-indent-4 { margin-left: 8.0em; } .doc-list-item.doc-indent-5, .doc-list-num-item.doc-indent-5 { margin-left: 9.6em; } /* Legacy pipe-delimited table rows (old archives) */ .doc-table-row { margin: 0.15em 0; padding: 4px 8px; background: light-dark(#f8fafc, var(--pq-elevated)); border-left: 3px solid var(--border); font-size: 0.8rem; line-height: 1.5; } /* Proper HTML table rendering (new parser) */ .doc-table-wrap { overflow-x: auto; margin: 0.75em 0; } .doc-table { width: 100%; border-collapse: collapse; font-size: 0.81rem; line-height: 1.45; table-layout: fixed; } .doc-table td, .doc-table th { overflow-wrap: break-word; word-break: normal; } .doc-table th, .doc-table td { border: 1px solid var(--border); padding: 5px 9px; vertical-align: top; text-align: left; } .doc-table th { background: light-dark(#eef2f7, var(--pq-elevated)); font-weight: 700; font-family: 'Calibri', 'Segoe UI', Arial, sans-serif; font-size: 0.79rem; color: var(--text); } .doc-table td { background: var(--bg-white); } .doc-table tr:nth-child(even) td { background: light-dark(#f8fafc, var(--pq-elevated)); } .doc-table-cell.doc-table-merged { color: var(--text-muted); font-style: italic; } .doc-indent-6 { padding-left: 9em; } .doc-indent-7 { padding-left: 10.5em; } .doc-indent-8 { padding-left: 12em; } /* Alignment overrides */ .doc-align-center { text-align: center; } .doc-align-right { text-align: right; } .doc-align-justify { text-align: justify; } /* Inline images embedded in Word documents */ .doc-inline-img { max-width: 100%; height: auto; display: block; margin: 0.5em auto; border-radius: 2px; } /* ── the resize grip ────────────────────────────────────────────────────────── The old handle was a 6px strip with `background: transparent` — invisible until you hovered the exact six pixels. Craig, after months of daily use: "I can't drag it." That is not a control, it is a secret. A 10px hit area, with a grip you can SEE. (The sidebar resizer has the identical defect — L-089.) */ /* #513 — THE GRIP IS THE DRAWER'S EDGE, NOT A GAP. Craig 2026-08-01: "the tabs are still clear of the drawer". They were, by ten transparent pixels. The rail rides at the host's left edge (#453) and the host's leftmost child is this grip, so a `background: transparent` grip put a 10px strip of canvas between the tab and the drawer it belongs to — the tab read as floating rather than as the drawer's handle. It is NOT closed by moving the rail inward: the grip runs the full height, so overlapping the tabs would leave a resize dead-zone the height of the rail. The 10px is functional and stays; what was wrong is that it was painted as nothing. Painted as the drawer's own surface, the tab abuts a continuous edge exactly as it abuts the window edge when the drawer is shut, and the centre pill still says "drag me". */ .rc-rz { position: relative; width: 10px; flex-shrink: 0; cursor: col-resize; background: var(--bg-white); z-index: 20; display: flex; align-items: center; justify-content: center; border-left: 3px solid var(--primary); box-shadow: -6px 0 16px -10px rgba(15, 23, 42, 0.20); } .rc-rz::before { content: ''; width: 3px; height: 34px; border-radius: 2px; background: var(--border); transition: background 0.15s, height 0.15s; } .rc-rz:hover::before, .rc-rz.dragging::before { background: var(--primary-fg); height: 56px; } .rc-rz.rc-hidden { display: none; } /* ── the drawer ─────────────────────────────────────────────────────────────── */ .rc-drawer { --rc-w: 308px; width: var(--rc-w); flex-shrink: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-white); /* #513 — the LEFT rule now lives on the grip (.rc-rz), which sits immediately to this drawer's left and carries the edge the tab abuts. Keeping it here too drew two hairlines 10px apart. */ transition: width 0.24s ease, opacity 0.18s ease; } /* #513 — no `border-left-width: 0` any more: the drawer no longer HAS a left border to collapse. Its 3px signature edge lives on the grip, and the grip is display:none when the drawer is shut, so the edge goes with it. */ .rc-drawer.rc-shut { width: 0; opacity: 0; } /* while dragging, the width must track the cursor exactly — no easing */ .app-wrap.rc-dragging .rc-drawer { transition: none; } /* children hold their width, so a closing drawer WIPES its content rather than squashing it through a 240ms reflow */ .rc-drawer-head, .rc-drawer-body { min-width: var(--rc-w); box-sizing: border-box; } .rc-drawer-head { display: flex; align-items: center; gap: 8px; padding: 24px 24px 18px; flex-shrink: 0; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--primary-pale, #eef3f9) 0%, var(--bg-white, #ffffff) 100%); position: relative; } .rc-drawer-head h2 { font-size: 0.85rem; font-weight: 600; color: var(--text); margin: 0; flex: 1; white-space: nowrap; } .rc-drawer-body { flex: 1; overflow-y: auto; padding: 20px 22px 28px; background: var(--bg, #f0f2f5); } .rc-drawer > .rc-drawer-head { background: var(--primary); border-bottom: none; box-shadow: none; padding: 8px 14px; min-height: 64px; /* all heads match the Findings depth — its controls set the height (Craig 2026-07-13) */ box-sizing: border-box; flex-wrap: wrap; align-content: center; row-gap: 4px; } .rc-drawer > .rc-drawer-head::after { display: none; } /* kill the stray gradient hairline that rule leaks onto the rail */ .rc-drawer > .rc-drawer-head h2 { color: #fff; } /* the Findings head carries controls built for a LIGHT header — flip them to a translucent-white treatment so they stay legible on the navy bar. */ /* #1800 — the sort select ("Document order") is one of those controls. It kept its light-header muted text, so on the blue bar it read as near-black on blue while "Auto-debate" beside it read clearly. Same rule, same colours. */ .rc-drawer > .rc-drawer-head .run-all-debates-btn, .rc-drawer > .rc-drawer-head .finding-sort-select { color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.06); } .rc-drawer > .rc-drawer-head .run-all-debates-btn:hover, .rc-drawer > .rc-drawer-head .run-all-debates-btn.is-active, .rc-drawer > .rc-drawer-head .finding-sort-select:hover:not(:disabled) { background: rgba(255, 255, 255, 0.20); border-color: rgba(255, 255, 255, 0.6); color: #fff; } /* The OPEN list is drawn by the browser on its own surface, so the options take the page's text and surface, never the bar's white. */ .rc-drawer > .rc-drawer-head .finding-sort-select option { color: var(--text); background: var(--pq-surface); } @media (prefers-contrast: more) { .rc-drawer > .rc-drawer-head .run-all-debates-btn, .rc-drawer > .rc-drawer-head .finding-sort-select { border-color: currentColor; } } /* the tab rail lifts with the panels (overrides the flatter base shadow) */ .rc-tab { box-shadow: -2px 2px 10px rgba(15, 23, 42, 0.10); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 30px; padding: 11px 0 13px; cursor: pointer; border: 1px solid var(--border); border-right: none; border-radius: 9px 0 0 9px; background: var(--surface); color: var(--text-muted); transition: background 0.15s, color 0.15s, border-color 0.15s; } /* the body is a light well the cards sit ON, with even padding + gaps between cards (sandbox .dscroll). Scoped so it never hits the graph panel body. */ .rc-drawer > .rc-drawer-body { background: var(--bg-white); } .rc-drawer > .rc-drawer-body.findings-scroll { padding: 10px; display: flex; flex-direction: column; gap: 8px; } /* Finding cards = the sandbox Ledger card: a clean white card, hairline border, a coloured LEFT RAIL that still carries severity (kept as information, not a full background fill), gently embossed off the well. Scoped to the drawer so the editor's in-document finding marks are untouched. */ /* Severity reads at a glance: a tint that FADES left→right off the coloured rail into the card (Craig 2026-07-13) — the type is obvious, the text stays on a light ground. Rail + fade are BOTH derived from the per-category --*-bar var (the same palette the app already owns, theme-aware) via color-mix — nothing is hardcoded, so the admin-editable colours and dark mode both flow through. #1653 — the rail, the radius and the gradient now live HERE rather than being restated per category; `--card-bar` is the only thing a category sets. */ .rc-drawer .finding-card { background: linear-gradient(90deg, color-mix(in srgb, var(--card-bar, transparent) 22%, var(--bg-white)), var(--bg-white) 72px); border: 1px solid var(--border); border-left: 3px solid var(--card-bar, var(--primary-fg)); border-radius: 4px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 6px -4px rgba(15, 23, 42, 0.14); } /* #1653 — THE LEAK IS NEAR THE LEFT EDGE ONLY. Craig: "for the finding I would do a small amount of leak into the background of the finding, near the left edge only." The tint was reaching the plain surface at 60% of the CARD'S WIDTH, so a wide drawer washed most of the card and a narrow one washed a different amount of it — a proportion where the instruction is a distance. 72px is a distance: the same on every drawer width, and it leaves the text on clean ground wherever the card is read. EIGHT CATEGORIES, ONE RULE. This was five hand-written gradients covering conflict, incomplete, vague, unnecessary_detail and ai_suggestion — so `missing` (added deliberately by #174), `inserted`, `structural` and `unknown` had NO card rule at all and drew the default --primary-fg rail with no tint. A reader could not tell a Missing finding's card from a category the product does not name. The gradient now lives once on the base rule and reads `--card-bar`; each category sets that one property. Adding the ninth is a line, and forgetting it is visible immediately because the card has no rail colour rather than the wrong one. */ .rc-drawer .finding-card.conflict { --card-bar: var(--conflict-bar); } .rc-drawer .finding-card.incomplete { --card-bar: var(--gap-bar); } .rc-drawer .finding-card.missing { --card-bar: var(--missing-bar); } .rc-drawer .finding-card.vague { --card-bar: var(--vague-bar); } .rc-drawer .finding-card.unnecessary_detail { --card-bar: var(--unnecessary-bar); } .rc-drawer .finding-card.ai_suggestion { --card-bar: var(--ai-bar); } .rc-drawer .finding-card.inserted { --card-bar: var(--inserted-bar); } .rc-drawer .finding-card.structural { --card-bar: var(--structural-bar); } .rc-drawer .finding-card.unknown { --card-bar: var(--unknown-bar); } .rc-drawer .finding-card:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 4px 12px -4px rgba(15, 23, 42, 0.20); } @media (prefers-color-scheme: dark) { .rc-rz { box-shadow: -6px 0 16px -10px rgba(0, 0, 0, 0.5); } /* #513 — see light-mode note */ .rc-drawer .finding-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px -4px rgba(0, 0, 0, 0.45); } .rc-drawer .finding-card:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.55); } } /* ── the tab rail ───────────────────────────────────────────────────────────── */ .rc-tabrail { position: absolute; right: 0; top: 96px; z-index: 9; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } /* no document open → nothing to put in a drawer */ .rc-tabrail.rc-hidden { display: none; } .rc-tab:hover { background: var(--hover-bg); color: var(--primary-fg); border-color: var(--primary-fg); } /* OPEN — this drawer is out, so the tab now means "push it back in" */ .rc-tab.rc-open { background: var(--primary-pale); color: var(--primary-fg); border-color: var(--primary-fg); box-shadow: none; } .rc-tab .ic { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform 0.22s ease; } .rc-tab.rc-open .ic { transform: rotate(180deg); } /* ‹ becomes › */ .rc-tab-lab { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 10.5px/1 system-ui, sans-serif; letter-spacing: 0.11em; text-transform: uppercase; } /* white on --primary (#1a3a5c) is ~10.9:1 — and --primary is NOT overridden on dark, so this one pairing holds in both schemes without a media query. */ .rc-tab-n { background: var(--primary); color: #fff; border-radius: 999px; min-width: 17px; padding: 2px 4px; font: 700 10px/1.3 system-ui, sans-serif; text-align: center; } /* #303 — .rc-tab-dot and its @keyframes are BURNED (Craig 2026-08-05: "we dont need the dot nomenclature at all — in fact it was a serious error, because putting a dot on a tab sometimes is not fail loud"). A 7px mark on a tab the user may not be looking at is a signal that has to be noticed to work. What it used to say is now said as a warning the user cannot miss. */ /* ── the Metadata drawer body ───────────────────────────────────────────────── Read-only. It renders from RCDoc.qmsDocContext — the QMS record already on the document object — so there is no second copy of the data and nothing to keep in step. Editing stays in the QMS, which owns it; the button routes there. */ .rc-meta-btn { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); padding: 7px 13px; font: 600 12px/1 system-ui, sans-serif; cursor: pointer; } .rc-meta-btn:hover { border-color: var(--primary-fg); color: var(--primary-fg); } .rc-meta-btn.is-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .rc-meta-btn.is-primary:hover { background: var(--primary-light); border-color: var(--primary-light); color: #fff; } /* edit-mode inputs */ textarea.rc-meta-in { resize: vertical; } /* #649 / #1922 — THE ONE PICK-LIST (app.js _rcOpenPickPopover): QE lenses, confirmed frameworks and groups. A button that reads as an input (it IS one of its window's controls), opening a popover of multiply-checkable values. Every colour is a token, so it follows the viewer's light/dark choice. */ button.rc-pick-trigger { text-align: left; cursor: pointer; } button.rc-pick-trigger:hover { border-color: var(--primary-fg); } .rc-pick-pop { min-width: 15rem; max-width: 26rem; max-height: 60vh; overflow-y: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); padding: 8px; } .rc-pick-filter { display: block; width: 100%; margin-bottom: 6px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); font: inherit; } .rc-pick-group { margin: 8px 6px 2px; color: var(--text-muted); font: 600 0.72rem/1.3 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; } .rc-pick-opt { display: flex; gap: 8px; align-items: baseline; padding: 5px 6px; border-radius: 5px; cursor: pointer; font: 400 0.84rem/1.4 system-ui, sans-serif; } .rc-pick-opt[hidden] { display: none; } .rc-pick-opt small { color: var(--text-muted); } .rc-pick-opt:hover { background: var(--bg-subtle, rgba(127, 127, 127, 0.10)); } .rc-pick-stray { font-style: italic; } .rc-pick-empty { padding: 8px 6px; color: var(--text-muted); font: 400 0.82rem/1.4 system-ui, sans-serif; } .rc-pick-acts { display: flex; justify-content: flex-end; padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--border); } /* Status and Version stay READ-ONLY even in edit mode, and say WHY (Craig 2026-07-13: "except status, version — that should only be in the QMS or by the workflow"). A field that silently has no input looks broken; one that explains itself is a control. */ .rc-meta-err { margin: 0 12px; padding: 8px 10px; border-radius: 6px; background: var(--conflict-bg); color: var(--conflict-text); font-size: 0.8rem; line-height: 1.4; } .rc-meta-err.hidden { display: none; } .findings-scroll { overflow-y: auto; flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 8px; } /* #489 INSTANCES — one findings pane per open document, inside the one scroll host. The host is a flex column with an 8px gap and its CHILDREN used to be the finding cards themselves; with a pane between them the host now has a single child, so the pane has to carry the column layout or every card loses its spacing. It also has to fill the host, or a short list would not stretch and the cards would bunch at the top of a half-height box. Same rules, one level down. */ .rc-findings-pane { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; } .no-findings { text-align: center; font-size: 0.82rem; color: var(--text-muted); padding: 24px 12px; } /* #483 — the LOADING state, distinct from the empty one. A pulse says "still coming" where the plain empty state says "there is nothing"; without it the two read identically and the user cannot tell a slow document from an empty one. Honours prefers-reduced-motion — the words already carry the meaning, so the animation is an enhancement rather than the signal. */ .no-findings.rc-findings-loading { animation: rc-findings-pulse 1.6s ease-in-out infinite; } @keyframes rc-findings-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { /* the still state shown in place of the motion (#1903: the motion itself is off for everything, by the one global rule near the top) */ .no-findings.rc-findings-loading { opacity: 0.85; } } /* #754 — THE QMS LIBRARY'S LOADING STATE, DISTINCT FROM ITS EMPTY ONE. The same split the findings pane already makes (.rc-findings-loading above, #483): a pulse says "still coming" where the plain empty state says "there is nothing". Without it the two read identically, and on this surface the wrong one reads as data loss. prefers-reduced-motion honoured for the same reason as there - the words carry the meaning and the animation is an enhancement, not the signal. */ .qma-empty.qma-empty-loading { animation: qma-empty-pulse 1.6s ease-in-out infinite; } @keyframes qma-empty-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { /* the still state shown in place of the motion (#1903: the motion itself is off for everything, by the one global rule near the top) */ .qma-empty.qma-empty-loading { opacity: 0.85; } } /* ── #434 — THE CARD-FILTER BANNER ─────────────────────────────────────────── A filtered list with nothing saying it is filtered reads as a document with two findings rather than a document showing two of nineteen. Sticky, because the thing it qualifies scrolls under it. Tokens only — it inherits the drawer's light/dark palette rather than carrying a second one. */ /* #505 — THE BANNER IS FULL-BLEED, so nothing can pass beside or above it. Craig, on the A10 card drawer: "as the findings move behind the banner on the drawer you can see them wither side and abpve th banner needs to stop that as it looks very odd." The cause is geometry, not layering: `.findings-scroll` has `padding: 10px`, so a banner with `top: 0` sticks to the CONTENT-box top and leaves a 10px transparent strip above it, and sits 10px in from each edge. Cards scrolling under it were visible through all three gaps. The background was already opaque — adding z-index or a stronger fill would not have touched it, which is exactly why the guardrail says this class gets a STRUCTURAL fix. So it spans the scroller: negative margins cancel the container's padding and the padding is put back on the banner itself, which keeps the content in the same place while the BAR reaches every edge. It reads as a header bar for the list now rather than a floating chip, so the rounding and the side/top borders go with it and a single bottom rule separates it from the first card. */ .rc-cardfilter-banner { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -10px -10px 0; padding: 12px 20px 9px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: var(--card); font-size: 0.78rem; color: var(--text-muted); } /* #375 — the label must SHRINK so the controls stay on its row. A long step title ("step 1.1.4 “File final approved Global”") has a large min-content width, which pushed Clear filter onto a line of its own — detached from the thing it clears and below where the eye goes. Craig, testing v4.2.471: "There is no clear filter button". It was there; it did not read as one and it was not where a control belongs. */ .rc-cardfilter-what { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .rc-cardfilter-what strong { color: var(--text); font-weight: 600; } /* #375 — READ AS A CONTROL AT REST, not only on hover. This was a transparent pill with muted-grey text and a muted-grey border, sitting on a muted-grey banner, with no icon — indistinguishable from the label beside it until the pointer was already on it. The app's own standard is icon + LABEL by default with a hover tooltip on every button; this had neither the icon nor a border that separated it from its background. */ .rc-cardfilter-banner button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-white); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; } .rc-cardfilter-banner button .ic { width: 12px; height: 12px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } /* --primary-fg, NOT --primary: the brand navy is a BACKGROUND role and does not lift in dark mode. The -fg twin exists precisely for text/border/accent use and reads on both themes. */ .rc-cardfilter-banner button:hover { border-color: var(--primary-fg); color: var(--primary-fg); } /* Finding cards */ .finding-card { border-radius: 7px; padding: 11px 12px; cursor: pointer; border: 1px solid transparent; transition: transform 0.12s, box-shadow 0.12s; } /* #1665 — THE FLAT PER-CATEGORY RULES ARE GONE, and their removal is the whole fix for Craig's report that "the finding cards do not match the sandbox look where the color wss to bleed across from the left and fade out quite quickly". THE GRADIENT WAS BUILT CORRECTLY AND NEVER WON. `.rc-drawer .finding-card` (above) sets the gradient, the rail and the radius, so a category needs to declare only `--card-bar`. Five flat rules stood here setting a flat `background` and a `border-color` on the same elements: .rc-drawer .finding-card two classes (0,2,0) .finding-card.conflict two classes (0,2,0) IDENTICAL SPECIFICITY, and at a tie the LATER rule wins. These sat 368 lines further down the file, so the rule written to replace them was silently overridden by them. Nothing errored, nothing logged, the stylesheet parsed cleanly — seeing it required computing specificity on two selectors a third of a file apart and then remembering that ties fall to source order. DELETED RATHER THAN OUT-SPECIFIED. Raising specificity or adding !important would have left two competing definitions of a card's background and made the next one harder to see. The losing machinery goes. THE ITEM SAID EIGHT; THERE WERE FIVE — conflict, incomplete, vague, unnecessary_detail and ai_suggestion. The other `.finding-card.*` rules in this file (`card-active`, `resolved`, `rejected`) are STATES rather than categories and are deliberately untouched: deleting a state rule because it looked like a category rule is exactly the silent regression this pass exists to avoid. */ .finding-card:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.08); } /* #398 — Craig: "the highlighting on a finding in the finding drawer of the document surface needs to be stronger". It was a 2px outline in --primary, which on a card that ALREADY carries a category tint and a coloured border reads as one more line among several. The selected card has to be findable at a glance in a scrolling list of twenty, so it now carries three signals that do not compete with the category colour rather than one that does: * a thicker ring PLUS a soft halo, so it separates from its neighbours * a left accent bar — the one edge the category border does not emphasise * a lift, matching the hover idiom the list already uses Colour alone was never going to be enough here: the category tint owns colour on this card, so the selection has to speak in weight and depth instead. Uses the same --rc-anchor-ring token as the in-document anchor highlight (#322), so "this is the selected finding" looks the same in the drawer and on the page. */ .finding-card.card-active { outline: 3px solid var(--rc-anchor-ring, #2563eb); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(37, 99, 235, .16), 0 4px 14px rgba(15, 23, 42, .18); transform: translateY(-1px); position: relative; } .finding-card.card-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 3px 0 0 3px; background: var(--rc-anchor-ring, #2563eb); } /* Hover must not out-shout the selection — without this, moving the mouse over a neighbour makes it look more selected than the selected one. */ .finding-card.card-active:hover { transform: translateY(-1px); } @media (prefers-color-scheme: dark) { .finding-card.card-active { outline-color: #60a5fa; box-shadow: 0 0 0 5px rgba(96, 165, 250, .22), 0 4px 14px rgba(0, 0, 0, .5); } .finding-card.card-active::before { background: #60a5fa; } } /* #613 — THIS ROW WRAPS. It carried `flex-wrap: nowrap` from v3.3.92, when it held an id badge, a category and one or two icons. It now accumulates the id badge, an info button, engine/category/severity/action/conflict/FDA badges, rejected/acted/provenance/debate-outcome/disposition pills AND the per-card buttons — a variable count that depends on how much state a finding carries. On F003 (four badges + Dismiss) the row overran the card and clipped Dismiss. Clipping the LAST item is what makes nowrap the wrong choice here rather than merely tight: the last items are the ACTIONS. The user can see something is there and cannot reach it. A taller card on a heavily-badged finding is the cheaper cost, so the row wraps and the buttons are pushed to the end of the line they land on. */ .card-top { display: flex; align-items: center; gap: 4px; margin-bottom: 7px; flex-wrap: wrap; row-gap: 5px; min-width: 0; } /* Keep the actions together at the trailing edge once the row has wrapped, so they read as a group rather than as two more badges. */ .card-top > button { margin-left: auto; } .card-top > button ~ button { margin-left: 0; } /* #1653 — SENTENCE CASE, AND THE LETTER-SPACING GOES. The category badge that used this is now the chip; what is left here are the card's OTHER markers — the rule code, the Insert after / Insert before / Comment action chips, the overlap warning and the GENERAL marker. They kept weight 700, UPPERCASE with 0.4px tracking and a 10px capsule, which is the same four dials turned up at once that made the pills read "a little 1980s". Turning them down here is what stops a card pairing a 2026 chip with a 1980s badge. The solid saturated fill stays on these: they are markers, not categories, and they are the only coloured thing left on the card besides its rail. */ .cat-badge { font-size: 0.68rem; font-weight: 600; letter-spacing: 0; padding: 3px 7px; border-radius: 3px; line-height: 1; color: #fff; } /* WT-24 (#189, Craig 2026-07-19) — the badge label ink is CONTRAST-DERIVED from the badge's own --{cat}-bar background, never hardcoded white: dark ink on a light bar (VAGUE gold, GAP orange), white on a dark bar. The static defaults below are the authoritative WCAG ink choices applied to the default bars; applyFindingColors (app.js) re-derives --{cat}-badge-ink from the authoritative contrast contract whenever an admin re-colours a category, so any admin-chosen colour stays readable. Applies to the badge label path generally, not one colour. */ .cat-badge.conflict { background: var(--conflict-bar); color: var(--conflict-badge-ink, #fff); } .cat-badge.incomplete { background: var(--gap-bar); color: var(--gap-badge-ink, #1a202c); } /* `missing` had NO rule until 2026-08-31, because the analyser had never emitted the category — the contract offered four of the six and this was not one of them. The first `missing` finding ever produced (F020 on GCD-SOP-405.00) therefore drew an unstyled badge, and the only coloured thing left on the card was its `Insert after` ACTION chip: Craig read the card as having an insertion instruction where its category should be. Same shape as the mixed-cell detector that was also absent for this category — a value nothing could produce gets styled by nobody. */ .cat-badge.missing { background: var(--missing-bar); color: var(--missing-badge-ink, #fff); } .cat-badge.vague { background: var(--vague-bar); color: var(--vague-badge-ink, #1a202c); } .cat-badge.unnecessary_detail { background: var(--unnecessary-bar); color: var(--unnecessary-badge-ink, #fff); } .cat-badge.ai_suggestion { background: var(--ai-bar); color: var(--ai-badge-ink, #fff); } /* T-182 — GENERAL (document-level, unanchored-by-design) finding marker. Neutral slate so it reads as an attribute, not a severity; theme-aware for dark mode. */ .cat-badge.general-badge { background: light-dark(#475569, #64748b); } /* #1674 — an outside reviewer's finding and its adoption. Tokens only: the slate and the deep blue both carry white text at AA in either theme. */ .cat-badge.external-badge { background: var(--pq-slate-700); } .cat-badge.external-adopted { background: var(--pq-blue-900); } .finding-adopt-btn { font: inherit; font-size: 0.72rem; font-weight: 600; line-height: 1; padding: 3px 8px; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-white); color: var(--primary-ink); display: inline-flex; align-items: center; gap: 4px; } .finding-adopt-btn:hover { border-color: var(--primary-ink); } .finding-adopt-btn .ic { width: 12px; height: 12px; } .sev-badge { font-size: 0.64rem; font-weight: 600; text-transform: uppercase; padding: 2px 6px; border-radius: 10px; margin-left: auto; flex-shrink: 0; /* #2325 — a level's colours come from the domain data as --sev-bg / --sev-fg; the stylesheet decides how they are drawn, so dark mode can draw them too. */ background: var(--sev-bg, transparent); color: var(--sev-fg, inherit); } @media (prefers-color-scheme: dark) { /* #2325 — the data's light tint would be a light patch on a dark card: draw a dark tint of the level's own colour behind a lightened version of it. */ .sev-badge { background: color-mix(in srgb, var(--sev-fg, currentColor) 28%, transparent); color: color-mix(in srgb, var(--sev-fg, currentColor) 45%, #fff); } } /* Axis-model severity bands (legacy fallback tint; the data-driven badge path uses inline colours from _domainConfig.qe_classification). material keeps the old "high" amber, minor the old "medium" yellow, advisory the old "low" green. */ .sev-critical { background: light-dark(#fed7d7, #3b1a1a); color: light-dark(#9b2c2c, #fc8181); } .sev-material { background: light-dark(#feebc8, #3a2a12); color: light-dark(#c05621, #f6ad55); } .sev-minor { background: light-dark(#fefcbf, #35300f); color: light-dark(#975a16, #e9c46a); } .sev-advisory { background: light-dark(#c6f6d5, #13301f); color: light-dark(#276749, #68d391); } .card-quote { font-size: 0.77rem; font-style: italic; color: var(--quote-text); /* #1859 — a themed pair, never a literal */ margin-bottom: 7px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding: 5px 7px; background: var(--quote-surface); border-radius: 4px; line-height: 1.5; } .card-explain { font-size: 0.78rem; line-height: 1.5; color: var(--text); margin-bottom: 6px; } .card-ref-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card-ref-row .engine-badge { flex: 0 0 auto; } .card-ref { font-size: 0.72rem; color: var(--text-muted); display: flex; gap: 4px; align-items: flex-start; flex: 1 1 auto; min-width: 0; } .card-ref-clickable { cursor: pointer; } .card-ref-clickable:hover { color: var(--primary-fg); } /* "Worth a look" flag (v3.14.81) — the cited CFR has FDA-483 enforcement history. Theme-aware danger colour overrides the muted ref colour; the clickable child keeps its own hover. A visual cue, not a score. */ .card-ref-flagged { color: var(--danger); font-weight: 600; cursor: help; } /* N? (Craig 2026-06-26) — non-CFR citation detail ("Appendix D, Assurance 5") reads as full body text, not a greyed/disabled control between the blue chips. */ .card-ref-detail { color: var(--text); } /* #1839 — a finding that cites a superseded regulation version says so beside the reference. Informational, not a warning colour: the citation was right when raised. */ .card-ref-superseded { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 6px; font-size: 0.85em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; } .card-ref-superseded .ic { width: 0.95em; height: 0.95em; } /* ═══ N2 — semantic button tiers (Craig 2026-06-27; design: button-semantic-sandbox.html). ★ THIS IS THE CANONICAL STATEMENT OF THE HOUSE BUTTON STANDARD (#758, ruled by Craig 2026-08-21). Two other blocks used to restate it — one of them saying the opposite — and two statements of one rule at different strengths is charter 6. They point here now. If the rule changes, it changes HERE and nowhere else. Default is NEUTRAL soft-outline; colour is the semantic exception and each colour means ONE thing. Primary = brand-blue #276BB2 (filled, affirmative CTA); Caution = golden (reversible-destructive, e.g. Revoke); Danger = coral (irreversible, e.g. Delete/Reset). Sunset-palette grounded. Foundation for the app-wide rollout. ═══ */ :root { --btn-primary: var(--pq-blue-900); --btn-primary-h:#3274C2; --btn-caution:#b9770e; --btn-caution-bg:#fff7e9; --btn-danger:#c0392b; --btn-danger-bg:#fdecea; } @media (prefers-color-scheme: dark) { :root { --btn-primary:#4C8ED8; --btn-primary-h:#5294DC; --btn-caution: var(--pq-gold-400); --btn-caution-bg:rgba(255,190,105,0.12); --btn-danger:#ef6a5a; --btn-danger-bg:rgba(239,106,90,0.12); } } /* #2326 — THE ONE BUTTON. .opt-action-btn was a second spelling of this with its own rule; every use is .btn-sem now. The font was `font:600 0.82rem/1 inherit`, which is invalid ('inherit' cannot sit inside the shorthand), so the browser dropped the whole declaration and these buttons drew in its default font, size and weight. Longhand. */ .btn-sem { cursor:pointer; font-family:inherit; font-size:0.82rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--text); transition:background .12s, border-color .12s, color .12s; white-space:nowrap; } .btn-sem .ic { width:15px; height:15px; } .btn-sem:hover { background:var(--hover-bg); } /* #1938 — hover is neutral; blue is the primary action */ /* #1732 — a disabled button LOOKS disabled (Save semantics: nothing to do). It had no rule, so a disabled Map read exactly like an enabled one. */ .btn-sem:disabled, .btn-sem:disabled:hover { opacity:.45; cursor:not-allowed; } .btn-sem.primary:disabled:hover { background:var(--btn-primary); border-color:var(--btn-primary); } .btn-sem.primary { border-color:var(--btn-primary); background:var(--btn-primary); color:#fff; } .btn-sem.primary:hover { background:var(--btn-primary-h); border-color:var(--btn-primary-h); color:#fff; } .btn-sem.caution { border-color:var(--btn-caution); color:var(--btn-caution); } .btn-sem.caution:hover { background:var(--btn-caution-bg); border-color:var(--btn-caution); color:var(--btn-caution); } .btn-sem.danger { border-color:var(--btn-danger); color:var(--btn-danger); } .btn-sem.danger:hover { background:var(--btn-danger); border-color:var(--btn-danger); color:#fff; } /* Per-ref clickable chip — multi-ref findings (e.g. "21 CFR 312.52(b); 21 CFR 312.50") render each ref as its own chip so left-click (view text) and right-click (FDA citation history) target the specific ref the user clicked, not the concatenated string. */ .card-ref-chip { cursor: pointer; color: var(--primary-ink, #2b6cb0); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; padding: 0 1px; border-radius: 2px; transition: background-color 0.12s ease; } .card-ref-chip:hover { background-color: rgba(43, 108, 176, 0.10); text-decoration-style: solid; } .card-ref-chip:active { background-color: rgba(43, 108, 176, 0.20); } /* #228 — visible inspection-citation badge beside a CFR chip. Left-clickable (and keyboard-operable) affordance that opens the FDA 483 citation history, so the detail is reachable without a right-click (Craig's Magic Mouse). */ .card-ref-cite { cursor: pointer; color: var(--primary-ink, #2b6cb0); text-decoration: none; margin-left: 1px; padding: 0 2px; border-radius: 2px; font-weight: 600; line-height: 1; transition: background-color 0.12s ease; } .card-ref-cite sup { font-size: 0.72em; } .card-ref-cite:hover, .card-ref-cite:focus-visible { background-color: light-dark(#2b6cb024, rgba(99, 179, 237, 0.18)); outline: none; } @media (prefers-color-scheme: dark) { .card-ref-cite { color: var(--primary-ink, #63b3ed); } } /* Cited-CFR frequency band (L-031 display heuristic) — a subtle enforcement- density cue on the ref chip, keyed to the finding's FDA 483 citation count. Deliberately NOT the severity red: a warm underline + faint wash so it reads as "how often regulators cite this reg", distinct from the finding's severity. */ .card-ref-chip.card-ref-freq-high { background-color: light-dark(#c056211f, rgba(246, 173, 85, 0.16)); text-decoration-color: light-dark(#c05621, #f6ad55); text-decoration-style: solid; } .card-ref-chip.card-ref-freq-medium { background-color: light-dark(#b7791f1a, rgba(233, 196, 106, 0.13)); text-decoration-color: light-dark(#b7791f, #e9c46a); } .card-ref-chip.card-ref-freq-low { background-color: light-dark(#7a7a0014, rgba(214, 214, 0, 0.10)); text-decoration-color: light-dark(#7a7a00, #d6d600); } /* ── Regulation text popup ── */ .reg-popup { position: fixed; /* was absolute — viewport-clamp + draggable so it can't render half off-screen or strand on scroll (Craig img#28) */ z-index: 5000; width: 460px; max-width: calc(100vw - 32px); background: Canvas; color: CanvasText; border: 1px solid var(--border, #d1d5db); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.22); font-size: 0.82rem; overflow: hidden; } .reg-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--primary, #2b6cb0); color: #fff; } .reg-popup-title { font-weight: 700; font-size: 0.84rem; flex: 1; } .reg-popup-body { padding: 12px; max-height: 380px; overflow-y: auto; white-space: pre-wrap; line-height: 1.6; font-family: inherit; } .reg-popup-loading { color: var(--text-muted); font-style: italic; } /* #2388 — "Showing the first N of M characters": in the regulation text popup and * the Frameworks pane, both of which lay their text out pre-wrap. */ .reg-text-cut { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2, #f7f8fb); color: var(--text-secondary); font-size: 0.8rem; line-height: 1.4; } .reg-popup-error { color: light-dark(#b91c1c, color-mix(in oklab, #b91c1c 45%, white)); } /* The regulation unit model's text: one line per unit of the section the citation * sits in, the cited lines marked; provenance above, and a note when the text * has changed since the finding was raised. */ .reg-unit-prov { white-space: normal; color: var(--text-secondary); font-size: 0.78rem; margin: 0 0 8px; } .reg-unit-changed { white-space: normal; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 7px 10px; border: 1px solid light-dark(#d69e2e, #b7791f); border-radius: 6px; background: light-dark(#fffaf0, color-mix(in oklab, #b7791f 18%, Canvas)); color: var(--text); font-size: 0.8rem; line-height: 1.4; } .reg-unit-choices { white-space: normal; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; } .reg-unit-choices .is-on { border-color: var(--primary, #2b6cb0); color: var(--primary-ink, #2b6cb0); } .reg-unit-lines { white-space: normal; } .reg-unit-line { white-space: pre-wrap; margin: 0 0 4px; border-left: 3px solid transparent; padding-right: 4px; } .reg-unit-target { border-left-color: var(--primary, #2b6cb0); background: light-dark(rgba(43, 108, 176, 0.08), rgba(99, 160, 230, 0.14)); } .reg-unit-label { font-weight: 700; } .reg-unit-heading { font-weight: 600; } .card-ref-unmatched { color: var(--text-secondary); font-size: 0.78em; white-space: nowrap; } /* The finding card's sources (Craig and Karen 2026-10-24). Style 1, the labelled * chip: one line per source, a basis chip then the citation. Style 2, side by * side: the document's words beside each source's words. The basis colours are * the design page's, light and dark. */ .card-basis { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 0.7rem; font-weight: 600; line-height: 1.4; padding: 1px 7px; border-radius: 999px; white-space: nowrap; } .card-basis .ic { width: 12px; height: 12px; } .card-basis-reg { color: light-dark(#1d4f91, #9cc2f2); background: light-dark(#e2ebf7, #1c2c42); } .card-basis-ext { color: light-dark(#0f6b62, #7fd3c8); background: light-dark(#ddf1ee, #143430); } .card-basis-int { color: light-dark(#6a3d9a, #c9a8ef); background: light-dark(#efe6f8, #2e2240); } .card-basis-bg { color: light-dark(#5b6470, #b4bcc6); background: light-dark(#eceef1, #2c3036); } .card-src-stack { display: grid; gap: 4px; margin-top: 6px; } .card-src-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } .card-src-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .card-src-btn { font-size: 0.78rem; padding: 2px 8px; } .card-src-btn .ic { width: 13px; height: 13px; } .card-sbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; } .card-sbs > div { min-width: 0; border-radius: 4px; padding: 6px 8px; font-size: 0.92em; overflow-wrap: anywhere; } .card-sbs-mine { background: var(--surface-2, #f4f2ee); font-style: italic; } .card-sbs-theirs { border: 1px solid var(--border); display: grid; gap: 7px; } .card-sbs-lab { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 0.74rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 2px; /* never upper-cased: 211.84(d) is not 211.84(D) */ } .card-sbs-lab .ic { width: 12px; height: 12px; } .card-sbs-loading { color: var(--text-secondary); } @media (max-width: 520px) { .card-sbs { grid-template-columns: 1fr; } } /* D-017 — live step-redirect link (stepRef node) + navigate flash */ .rc-stepref { color: var(--primary-ink, #2b6cb0); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-weight: 600; white-space: nowrap; border-radius: 3px; padding: 0 1px; } .rc-stepref:hover { background: light-dark(#eef2ff, color-mix(in oklab, #eef2ff 14%, var(--pq-surface))); } .rc-stepref-flash { outline: 2px solid #f59e0b; outline-offset: 2px; background: light-dark(#fff7e6, color-mix(in oklab, #fff7e6 14%, var(--pq-surface))); transition: background 0.3s, outline-color 0.3s; } /* FDA Form 483 citation-history popup — right-click on a finding card's regulation reference. Visually parallel to .reg-popup so the two surfaces look like a related family but distinct (different header colour distinguishes the two right-click vs left-click affordances). */ .fda-citations-popup { position: fixed; /* W1-B (#4): viewport-anchored — pane scrolling can't strand it off-screen */ z-index: 10050; /* v4.1.44 — above the graph finding popup (9999) / edit popover (10000) so the citation drill-in isn't hidden behind them */ width: 720px; max-width: calc(100vw - 32px); background: Canvas; color: CanvasText; border: 1px solid var(--border, #d1d5db); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.22); font-size: 0.82rem; overflow: hidden; } .fda-citations-popup-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #4a5568; /* slate — distinct from the blue reg-popup header */ color: #fff; } .fda-citations-popup-title { font-weight: 700; font-size: 0.84rem; flex: 1; } .fda-citations-popup-body { /* W1-B (#4): cap to the viewport so the popup never exceeds the screen; its own scroll keeps long citation tables fully reachable. */ padding: 12px; max-height: min(420px, calc(100vh - 140px)); overflow-y: auto; } .fda-citations-loading { color: var(--text-muted); font-style: italic; } .fda-citations-error { color: light-dark(#b91c1c, color-mix(in oklab, #b91c1c 45%, white)); } .fda-citations-ref { font-family: monospace; font-size: 0.78rem; padding: 4px 8px; background: light-dark(#f1f5f9, var(--pq-elevated)); border-radius: 4px 4px 0 0; color: light-dark(#334155, var(--pq-ink)); } /* v3.9.47 — descriptive section title rendered under the ref chip when the backend resolved it from cached eCFR text. Visually continuous with .fda-citations-ref above (shared bg, no border between, rounded only on the bottom). v3.9.48 — when a section-level finding triggers a roll-up across subsections, the title sits between the ref chip and the .fda-citations-rollup banner; remove the bottom radius + bottom margin so the three pieces stack visually as one block. */ .fda-citations-section-title { padding: 4px 8px 6px; background: light-dark(#f1f5f9, var(--pq-elevated)); border-radius: 0; color: light-dark(#475569, var(--pq-ink-muted)); font-size: 0.85rem; font-style: italic; border-top: 1px solid var(--border); margin-bottom: 0; } .fda-citations-section-title:last-child { border-radius: 0 0 4px 4px; margin-bottom: 10px; } /* v3.9.48 — section-level findings aggregate citations across all matched subsections. This banner tells the reviewer which subsections contributed so they don't think the popup ran a precise per-subsection lookup. */ .fda-citations-rollup { padding: 5px 8px 6px; margin-bottom: 10px; background: light-dark(#fef9c3, color-mix(in oklab, #fef9c3 14%, var(--pq-surface))); border-radius: 0 0 4px 4px; color: light-dark(#713f12, color-mix(in oklab, #713f12 45%, white)); font-size: 0.78rem; border-top: 1px solid light-dark(#fde68a, color-mix(in oklab, #fde68a 30%, var(--pq-surface))); } /* Description column on each FDA citation row. Constrains width so the table doesn't blow out for unusually long descriptions; row's title attribute carries the long_description for hover-on-row. */ .fda-citations-desc-cell { color: light-dark(#1e293b, var(--pq-ink)); line-height: 1.3; word-wrap: break-word; overflow-wrap: anywhere; } /* Subtle visual cue that the row is hover-able for more detail. */ .fda-citations-tbl tbody tr[title]:hover { background-color: light-dark(#f8fafc, var(--pq-elevated)); cursor: help; } .fda-citations-norm { color: var(--text-muted); font-style: italic; } .fda-citations-empty { padding: 12px; color: var(--text-muted); background: light-dark(#f8fafc, var(--pq-elevated)); border-radius: 4px; text-align: center; } .fda-citations-hint { margin-top: 6px; font-size: 0.75rem; opacity: 0.85; } .fda-citations-tbl { width: 100%; border-collapse: collapse; font-size: 0.78rem; /* Fixed layout so the Citations column never gets squeezed to zero by a long Description. Each column's width is set explicitly via the colgroup-style nth-child rules below. */ table-layout: fixed; } .fda-citations-tbl th { text-align: left; padding: 4px 8px; background: light-dark(#f1f5f9, var(--pq-elevated)); color: light-dark(#475569, var(--pq-ink-muted)); font-weight: 600; border-bottom: 1px solid var(--border, #d1d5db); } .fda-citations-tbl th.num { text-align: right; } .fda-citations-tbl td { padding: 4px 8px; border-bottom: 1px solid light-dark(#f1f5f9, var(--pq-border)); } .fda-citations-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; } /* Column widths — total ~688px to match the 720px popup minus 32px of body padding. Description is the elastic column (rest of width). */ .fda-citations-tbl th:nth-child(1), .fda-citations-tbl td:nth-child(1) { width: 60px; } /* FY */ .fda-citations-tbl th:nth-child(2), .fda-citations-tbl td:nth-child(2) { width: 110px; } /* Program */ .fda-citations-tbl th:nth-child(4), .fda-citations-tbl td:nth-child(4) { width: 80px; } /* Citations */ .fda-citations-tbl tr.fda-citations-year-first td { border-top: 1px solid var(--border, #d1d5db); } .fda-citations-tbl tr.fda-citations-year-total td { background: light-dark(#fafbfc, var(--pq-elevated)); color: light-dark(#475569, var(--pq-ink-muted)); } .fda-citations-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border, #d1d5db); font-size: 0.78rem; } .fda-citations-footer > div { margin-bottom: 3px; } .fda-citations-source { margin-top: 6px; color: var(--text-muted); font-size: 0.72rem; font-style: italic; } .fda-citations-subtotal { margin-top: 6px; margin-bottom: 16px; padding: 6px 10px; background: light-dark(#f8fafc, var(--pq-elevated)); border-radius: 4px; font-size: 0.78rem; color: light-dark(#475569, var(--pq-ink-muted)); } .fda-citations-grand-footer { background: light-dark(#f1f5f9, var(--pq-elevated)); padding: 10px; border-radius: 6px; border-top: 2px solid #4a5568; } .card-more-row { margin-top: 6px; text-align: right; } .card-more-btn { background: none; border: none; cursor: pointer; font-size: 0.72rem; color: var(--primary-fg); /* N6 — brighter, readable in dark (was --primary-light, too dim) */ padding: 0; text-decoration: underline; text-underline-offset: 2px; } .card-more-btn:hover { color: var(--primary-fg); } .card-suggestion { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; } .suggestion-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: light-dark(#276749, #6ee7b7); margin-bottom: 4px; } .suggestion-intro { font-size: 0.74rem; color: var(--text-muted); font-style: italic; margin-bottom: 5px; } .suggestion-text { font-size: 0.79rem; line-height: 1.55; color: var(--text); background: light-dark(#ffffff99, rgba(255,255,255,0.05)); border-radius: 4px; padding: 6px 8px; border-left: 3px solid var(--primary-light); } /* #906 / §15.1.4 — which model produced the proposal, at the point it is read. Deliberately QUIET: it is provenance a reader consults, not a headline. Sits directly beneath the proposed text so the two are read together, and uses existing tokens rather than new literals — the visual-standards ratchet (#743) counts a new hardcoded colour here as debt, and it would be right to. */ .suggestion-model { font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.01em; } .suggestion-replacement { border-left-color: light-dark(#276749, #6ee7b7); background: light-dark(#f0fff4, #14342a); color: light-dark(#1a202c, #e6eaf0); font-family: inherit; white-space: pre-wrap; } .suggestion-original { border-left-color: light-dark(#b7791f, #d4a23c); background: light-dark(#fffaf0, #2a2412); color: light-dark(#1a202c, #e6eaf0); font-family: inherit; white-space: pre-wrap; } /* N7 (Craig 2026-06-27) — the proposed-replacement box family is hardcoded light: suggestion-text rides a white overlay; suggestion-replacement/-original use a light bg + near-black text; suggestion-label is dark green. Flip for dark so the header is a brighter green and the box stops "still being in light mode". */ /* ── Expert Review formatted response ── */ .er-section-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--primary-fg); margin: 14px 0 6px; } .er-section-label:first-child { margin-top: 0; } .er-list { margin: 0 0 4px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; } .er-list li { font-size: 0.88rem; line-height: 1.6; color: var(--text); } .er-para { font-size: 0.88rem; line-height: 1.7; color: var(--text); margin: 0 0 8px; } .er-gap { height: 8px; } .er-hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; } .er-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; margin: 8px 0; } .er-table th, .er-table td { padding: 5px 10px; border: 1px solid var(--border); text-align: left; line-height: 1.4; } .er-table th { background: var(--surface-2); font-weight: 600; } /* ── Expert Review 3-panel modal layout ── */ .er-header-logo { height: 28px; width: auto; object-fit: contain; flex-shrink: 0; } .er-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } .er-reg-panel { padding: 12px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); flex-shrink: 0; } .er-reg-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .er-reg-ref { font-size: 0.78rem; color: var(--text-muted); margin-left: auto; } /* Table variant: no italic or quotation marks — table fills the space */ .er-reg-quote-table { font-style: normal; padding: 4px 0; overflow-x: auto; } .er-reg-quote-table .er-table { font-size: 0.8rem; } .er-reg-quote { font-style: italic; font-size: 0.9rem; color: var(--text); margin-bottom: 6px; padding-left: 12px; border-left: 3px solid var(--border); line-height: 1.5; } .er-reg-explanation { font-size: 0.83rem; color: var(--text-muted); line-height: 1.5; } .er-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .er-panel-content { flex: 1; overflow-y: auto; padding: 14px 16px; min-height: 0; } .er-discuss-btn { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--primary-fg); background: var(--surface); color: var(--primary-fg); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; padding: 0; } .er-discuss-btn:hover:not(:disabled) { background: var(--primary); color: #fff; } .er-discuss-btn:disabled { opacity: 0.3; cursor: not-allowed; } /* Conclusion strip in main expert review modal */ .er-debate-section { border-top: 1px solid var(--border); flex-shrink: 0; max-height: 180px; display: flex; flex-direction: column; overflow: hidden; } .er-conclusion-text { font-size: 0.86rem; line-height: 1.6; color: var(--text); } /* Expert Review — three-pane floating window */ .er-fullscreen-overlay { position: fixed; inset: 0; z-index: 300; pointer-events: none; /* transparent — clicks pass through to the app */ } .er-fullscreen-overlay.hidden { display: none; } .er-fullscreen-box { position: fixed; left: calc(50% - 44vw); top: 6vh; width: 88vw; height: 84vh; min-width: 640px; min-height: 340px; display: flex; flex-direction: column; background: var(--bg-white, #fff); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.28); resize: both; overflow: hidden; pointer-events: all; } /* #1968 — THE WINDOW-CONTROL GROUP (was .er-win-*, the expert-review window's own): minimise and maximise beside THE close (.rc-close, #1700), shared by the expert- review window and the document window so a window's controls look one way. Default (macOS): the three dots on the LEFT, close / minimise / maximise; their glyph shows when the pointer is over the group, as the OS does. The dot colours are the operating system's own, so they are literals in both themes. */ .rc-win-controls { display: flex; align-items: center; gap: 7px; margin-right: 6px; flex-shrink: 0; order: -1; /* macOS: left of the title */ } .rc-win-btn { width: 13px; height: 13px; border-radius: 50%; border: none; cursor: pointer; padding: 0; transition: filter 0.12s; flex-shrink: 0; font-size: 0; /* the glyph (data-label) shows off the Mac only */ line-height: 13px; color: rgba(0, 0, 0, 0.55); } .rc-win-btn:hover { filter: brightness(0.8); } .rc-win-min { background: #febc2e; } .rc-win-max { background: #28c840; } /* a window that cannot grow greys its green dot, as the Mac does */ .rc-win-btn:disabled { background: var(--border); cursor: default; filter: none; } body.os-mac .rc-win-controls:hover .rc-win-btn:not(:disabled)::before { content: attr(data-mac-label); font-size: 11px; font-weight: 700; } /* Windows / Linux: the controls move RIGHT and show their glyphs */ body.os-win .rc-win-controls, body.os-other .rc-win-controls { order: 10; margin-right: 0; margin-left: 4px; gap: 0; align-self: stretch; } body.os-win .rc-win-btn, body.os-other .rc-win-btn { width: auto; height: auto; min-width: 36px; border-radius: 0; background: transparent; color: var(--text); font-size: 0.85rem; padding: 0 10px; border-left: 1px solid var(--border); } body.os-win .rc-win-btn::before, body.os-other .rc-win-btn::before { content: attr(data-label); font-size: 0.85rem; } body.os-win .rc-win-btn:hover:not(:disabled), body.os-other .rc-win-btn:hover:not(:disabled) { background: var(--surface-2); filter: none; } body.os-win .rc-win-btn:disabled, body.os-other .rc-win-btn:disabled { background: transparent; opacity: 0.4; } body.os-win .rc-win-controls > .rc-close, body.os-other .rc-win-controls > .rc-close { margin-left: 6px; align-self: center; } /* Every other window's close takes its OS treatment from .rc-close (#1700, at the end of this file). */ .er-fullscreen-header { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); cursor: move; user-select: none; border-radius: 8px 8px 0 0; } .er-fullscreen-header button { cursor: pointer; } .er-fullscreen-title { flex: 1; font-size: 0.95rem; font-weight: 700; color: var(--primary-fg); } .er-fullscreen-header-actions { display: flex; align-items: center; gap: 8px; } .er-fullscreen-body { flex: 1; display: flex; min-height: 0; overflow: hidden; } /* Reg panel (Finding box) scrolls independently */ .er-left-discuss-bar { flex-shrink: 0; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface-2); display: flex; justify-content: center; } .er-left-discuss-bar .er-discuss-btn { width: auto; padding: 7px 20px; font-size: 0.85rem; } /* Pane resize handle (shared by both handles) */ .er-pane-resize-handle { width: 5px; cursor: col-resize; background: var(--border); flex-shrink: 0; transition: background 0.15s; } .er-pane-resize-handle:hover, .er-pane-resize-handle.dragging { background: var(--primary); } /* Pane 3: Discussion transcript */ .er-debate-bubbles { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; background: var(--surface-2); } .er-debate-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .er-debate-placeholder-text { color: var(--text-muted); font-size: 0.88rem; text-align: center; max-width: 220px; line-height: 1.6; } #er-debate-modal .modal-header, #admin-modal .modal-header { /* v3.12.12 — drag UI Polish */ cursor: grab; user-select: none; } #er-debate-modal .modal-header:active, #admin-modal .modal-header:active { cursor: grabbing; } /* Admin modal — fixed position so it can be dragged */ /* v3.9.40 — widened from 1340px to 1700px so the 8-column Audit Log table (with the new column-aligned in-`` filter row from T-091) fits without horizontal scroll on typical desktop viewports. The min(…, 96vw) cap still prevents overflow on narrow screens. */ #admin-modal:not(.hidden) { display: block; } /* N1 (Craig 2026-06-26) pinned this to 10300 so the admin modal cleared the Process-Graph header (10100) and the top nav (10200), because .modal-overlay's default was 200. REMOVED 2026-08-16: the default is now 11500, which clears both by a wide margin, so the pin is doing nothing except stating a number that would silently become a CEILING if the base ever rose past it. */ /* Detail cards are launched from WITHIN the admin modal (double-click an Audit row or a Billing "By call" row). The generic .modal-overlay default z-index was 200 — far BELOW #admin-modal's then-10300 — so the detail rendered BEHIND the panel it was opened from (Craig's screenshot #4). A detail modal opened from over another modal must still stack ABOVE it, and that is the ONE thing this rule still says now that the base is right. Coherent layer order: progress(11000-11060) < overlays(11500) < detail-over-a-modal(11510) < rc-tell(12000). */ #audit-detail-modal { z-index: 11510; } /* #1630 — THE SETTINGS WINDOW IS A FIXED FRAME AND NEVER RESIZES ON A TAB SWITCH. Craig 2026-09-14: "the windows change size as you switch beteween tabs, which means it always feels crowded. So ... a fixed size and cleaner, n=morre empty look and feel for the settings pages." THE DEFECT was that nothing here stated a HEIGHT. The shared `.modal-box` rule gives every dialog `max-height: 82vh`, which is a CEILING, not a size — so each of the 23 admin tabs sized the frame to its own content and the window jumped on every switch. `height` is stated HERE and never on the shared `.modal-box`: that rule is used by 34 dialogs across the app, and a fixed height on it would resize every one of them. The scoping IS the fix, not a detail of it. The width was previously stated TWICE — this rule said 1700px while an inline style on the element said 1200px and, being inline, silently won. The live value (1200px) is kept and the inline copy is deleted, so there is now one definition. `vh` rather than a pixel height so the frame tracks the viewport instead of overflowing a short screen. */ #admin-modal .modal-box { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 1200px; width: min(1200px, 96vw); /* The binding constraint. Content adapts to the frame; the frame never adapts to the content. `.modal-body` already scrolls (`flex:1; overflow:auto`), so a dense tab scrolls inside this box and a light one sits in whitespace — and the box is the same size either way. */ height: 82vh; } /* #1630 — THE DENSITY IDIOM, APPLIED ONCE FOR THE WHOLE TAB FAMILY. From the Usage view shipped as the exemplar on #1628: generous whitespace, hairline separators, no boxed panels. ONE implementation rather than 23. Every tab builds its content from `.opt-section` (75 uses in index.html, 13 more built in app.js), so restyling that class UNDER `#admin-modal` reaches the entire family in one rule — and a tab added later inherits the idiom instead of having to be remembered. Editing 23 tabs' markup would have been 23 copies of one decision, which is the thing that drifts. Scoped to `#admin-modal`: `.opt-section` is used outside Settings too, and those surfaces keep the boxed look they have today. */ #admin-modal .opt-section { /* No boxed panels. The box was a background, a border and a corner radius drawing a frame around content that needs no frame; a hairline above each section separates them with far less ink. */ background: transparent; border: none; border-radius: 0; border-top: 1px solid var(--border); /* Generous whitespace. Horizontal padding drops to 0 so every section's text aligns on one left edge down the whole panel, rather than each box insetting its own contents by 18px. */ padding: 22px 0 6px; margin-bottom: 0; } /* The first section in a panel sits directly under the tab strip, so a rule above it would read as a second underline to the strip rather than as a separator. */ #admin-modal [id^="admin-tab-panel-"] > .opt-section:first-child, #admin-modal .opt-section:first-child { border-top: none; padding-top: 6px; } /* A section heading names its group; it is not a title bar. Lighter weight and a wider letter-spacing at a smaller size reads as a label rather than a banner. */ /* #1630 re-test (Craig 2026-09-25: Email, Periodic Review, Workflow, Instrumentation, Data Load and Structural Rules "use different fonts and weights"). Those six tabs head their sections with

, which this rule did not reach, so they kept the browser's bold default. 14 of the family's 44 section headings are h4; they get the same treatment rather than a rewrite of the markup. */ #admin-modal .opt-section > h3, #admin-modal .opt-section > h4 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; } /* Thin bars. The controls keep their semantics and their hit area; what comes off is visual mass. */ #admin-modal .opt-section .btn-sem, #admin-modal .opt-section .btn-sem { padding-top: 5px; padding-bottom: 5px; } /* ── Conclusion block (top of pyramid) ─────────────────────────────── */ .er-conclusion-block { flex-shrink: 0; border-bottom: 1px solid var(--border); } .er-outcome-panel { padding: 16px 20px; } .er-outcome-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .er-outcome-label-consensus { color: light-dark(#2d7a4f, color-mix(in oklab, #2d7a4f 45%, white)); } .er-outcome-label-impasse { color: light-dark(#b45309, color-mix(in oklab, #b45309 45%, white)); } .er-consensus-actions { margin-top: 10px; display: flex; justify-content: flex-end; gap: 8px; } /* Equal-width buttons in consensus action bar */ .er-consensus-actions .btn-sem { min-width: 130px; text-align: center; } .er-outcome-text { font-size: 0.9rem; line-height: 1.65; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; } .er-impasse-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .er-impasse-card { border-radius: 8px; border: 1px solid var(--border); overflow: hidden; font-size: 0.86rem; } .er-impasse-card-hdr { padding: 6px 12px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .er-impasse-card-qe .er-impasse-card-hdr { background: var(--primary-pale, #eef4fb); color: var(--primary-fg); border-bottom: 1px solid light-dark(#c3d9f0, color-mix(in oklab, #c3d9f0 30%, var(--pq-surface))); } .er-impasse-card-inspector .er-impasse-card-hdr { background: light-dark(#fff3e8, color-mix(in oklab, #fff3e8 14%, var(--pq-surface))); color: light-dark(#c05621, color-mix(in oklab, #c05621 45%, white)); border-bottom: 1px solid light-dark(#f6d2b0, color-mix(in oklab, #f6d2b0 30%, var(--pq-surface))); } .er-impasse-card-body { padding: 10px 12px; line-height: 1.6; color: var(--text); } .er-extra-round-bar { display: flex; align-items: center; gap: 12px; padding-top: 4px; } .er-extra-round-hint { font-size: 0.8rem; color: var(--text-muted); } /* ── Replacement text section ───────────────────────────────────────── */ .er-replacement-section { flex-shrink: 0; border-top: 1px solid var(--border); padding: 14px 20px; background: var(--surface); } .er-replacement-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: light-dark(#276749, color-mix(in oklab, #276749 45%, white)); margin-bottom: 8px; } .er-replacement-text { font-size: 0.88rem; line-height: 1.65; color: var(--text); background: light-dark(#f0fff4, var(--pq-elevated)); border: 1px solid light-dark(#9ae6b4, color-mix(in oklab, #9ae6b4 30%, var(--pq-surface))); border-radius: 6px; padding: 10px 14px; word-break: break-word; } .er-replacement-text .repl-para { margin: 0 0 10px; } .er-replacement-text .repl-para:last-child { margin-bottom: 0; } .er-replacement-text .repl-bullet { padding-left: 1.2em; text-indent: -1.2em; margin: 2px 0; } .er-replacement-text .repl-bullet::before { content: "• "; color: light-dark(#276749, color-mix(in oklab, #276749 45%, white)); } .er-replacement-text .repl-numbered { margin: 2px 0; } .er-replacement-text table { width: 100%; border-collapse: collapse; font-size: 0.83rem; margin: 4px 0; } .er-replacement-text table th, .er-replacement-text table td { border: 1px solid var(--border-color, #d1d5db); padding: 4px 8px; text-align: left; vertical-align: top; } .er-replacement-text table th { background: var(--surface-2, #f3f4f6); font-weight: 600; } .er-agreed-actions-text table { width: 100%; border-collapse: collapse; font-size: 0.83rem; margin: 4px 0; } .er-agreed-actions-text table th, .er-agreed-actions-text table td { border: 1px solid #e8c96a; padding: 4px 8px; vertical-align: top; } .er-agreed-actions-text table th { background: light-dark(#fef3c7, color-mix(in oklab, #fef3c7 14%, var(--pq-surface))); font-weight: 600; } .er-gen-thinking { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--text-muted); font-style: italic; } .er-agreed-actions-section { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; } .er-agreed-actions-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: light-dark(#C05621, color-mix(in oklab, #C05621 45%, white)); margin-bottom: 6px; } .er-agreed-actions-text { font-size: 0.85rem; background: light-dark(#FFFBEB, color-mix(in oklab, #FFFBEB 14%, var(--pq-surface))); border: 1px solid #F6D860; border-radius: 6px; padding: 10px 14px; white-space: pre-wrap; word-break: break-word; color: light-dark(#7A4F1A, color-mix(in oklab, #7A4F1A 45%, white)); } .er-bubble-row { display: flex; flex-direction: column; max-width: 78%; } .er-bubble-row-inspector { align-self: flex-start; } .er-bubble-row-qe { align-self: flex-end; align-items: flex-end; } .er-bubble-speaker { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } /* ── Debate voice palette — SINGLE SOURCE OF TRUTH (B-129, rule 6). Both the voice CARDS (.er-voice-* headers) and the transcript BUBBLES (.er-bubble-*) consume these custom properties — the debate-4voice-sandbox pattern restored after the S1 bake-in wrote two independent blocks and the Process Owner / Inspector bubbles drifted (Chakra purple / 2-voice-era orange). Card values are the sandbox-faithful truth. Dark values honour prefers-color-scheme. */ :root{ --dv-ia-bg:#e6fffa; --dv-ia-fg:#0e7c86; --dv-ia-bd:#b2f5ea; --dv-insp-bg:#fcecea; --dv-insp-fg:#c0392b; --dv-insp-bd:#f2c6c0; --dv-qe-bg:#e8f1fb; --dv-qe-fg: var(--pq-blue-900); --dv-qe-bd:#c3d9f0; --dv-po-bg:#fbf3df; --dv-po-fg:#b8860b; --dv-po-bd:#ecd9a8; --dv-you-bg:#f0fff4; --dv-you-fg:#2f855a; --dv-you-bd:#c6f6d5; } @media (prefers-color-scheme: dark){ :root{ --dv-ia-bg:#123330; --dv-ia-fg:#4fd1c5; --dv-ia-bd:#234e52; --dv-insp-bg:#2a1618; --dv-insp-fg: var(--pq-rose-300); --dv-insp-bd:#5c2a2e; --dv-qe-bg:var(--pq-surface); --dv-qe-fg: var(--pq-blue-350); --dv-qe-bd:#2c5282; --dv-po-bg:#2a2310; --dv-po-fg:#e9c46a; --dv-po-bd:#6b5a23; --dv-you-bg:#14331e; --dv-you-fg:#68d391; --dv-you-bd: var(--pq-green-800); } } .er-bubble-row-inspector .er-bubble-speaker { color: var(--dv-insp-fg); } .er-bubble-row-qe .er-bubble-speaker { color: var(--dv-qe-fg); } .er-bubble { padding: 10px 14px; border-radius: 16px; font-size: 0.86rem; line-height: 1.6; color: var(--text); } .er-bubble-inspector { background: var(--dv-insp-bg); border-bottom-left-radius: 4px; border: 1px solid var(--dv-insp-bd); } .er-bubble-qe { background: var(--dv-qe-bg); border-bottom-right-radius: 4px; border: 1px solid var(--dv-qe-bd); } /* ── 4-voice debate (S1, project_persona_debate_tuning §13) — protect voices left, enable voices right, chair centred. Colors come from the shared voice palette above. */ .er-bubble-row-internal_auditor { align-self: flex-start; } .er-bubble-row-process_owner { align-self: flex-end; align-items: flex-end; } .er-bubble-row-you { align-self: flex-end; align-items: flex-end; } .er-bubble-row-chair { align-self: center; align-items: center; max-width: 90%; } .er-bubble-row-internal_auditor .er-bubble-speaker { color: var(--dv-ia-fg); } .er-bubble-row-process_owner .er-bubble-speaker { color: var(--dv-po-fg); } .er-bubble-row-you .er-bubble-speaker { color: var(--dv-you-fg); } .er-bubble-row-chair .er-bubble-speaker { color: var(--text-muted, #718096); } .er-bubble-internal_auditor { background: var(--dv-ia-bg); border: 1px solid var(--dv-ia-bd); border-bottom-left-radius: 4px; } .er-bubble-process_owner { background: var(--dv-po-bg); border: 1px solid var(--dv-po-bd); border-bottom-right-radius: 4px; } .er-bubble-you { background: var(--dv-you-bg); border: 1px solid var(--dv-you-bd); border-bottom-right-radius: 4px; } .er-bubble-chair { background: var(--surface, #f7fafc); border: 1px dashed var(--border, #cbd5e0); font-style: italic; border-radius: 12px; font-size: 0.82rem; } @media (prefers-color-scheme: dark) { .er-bubble-chair { background: var(--pq-surface); } } /* ══════════════════════════════════════════════════════════════════════════ #242 — THE SHARED ENGINEERING DATA BLOCK (.pg-datablock) ONE component (rc_data_block.js RCDataBlock), consumed by BOTH surfaces: the BPMN projection and the Flow / Process Map. Craig 2026-07-20, VERIFY FAILED on v4.2.169 — measured root cause: the block had NO stylesheet rule at all. Its entire box (including `display:flex`, on which the WT-30 contract depends — 50vh cap, pinned drag bar, internal scroll) lived in an inline cssText string, and TWO separate call sites toggled visibility with `style.display = ''`, which DELETES that inline declaration. Measured in headless Chrome: computed display went flex→block on the first toggle, collapsing the capped/scrolling body. Only the FLOW instance was written to, which is exactly why the BPMN one looked fine. The fix is structural, not a patch: the LOOK lives here, in CSS, where a display toggle cannot reach it; visibility is a `.hidden` class flipped by ONE writer (RCDataBlock.sync). Only per-surface position (left/bottom, and whatever the user drags it to) stays inline. */ .pg-datablock { position: absolute; z-index: 6; /* #461/#711 — WIDTH AND HEIGHT ARE THE USER'S NOW, within bounds. This was a hard `width: 330px`, which is the "long" half of Craig's complaint: a 96px key column inside a 330px box wraps every real value into a narrow ribbon. The corner grip writes inline `width`/`height`, so these are the FLOOR and CEILING rather than the size — exactly as `left`/`top` are inline and the box rules are not. The 50vh line keeps WT-30's contract as a CEILING: grow to at most half the screen, then the CONTENT scrolls internally, so the title bar (the drag handle) never leaves the screen and the block can always be moved. */ width: 330px; min-width: 240px; max-width: min(720px, 60vw); min-height: 120px; max-height: 50vh; display: flex; flex-direction: column; background: var(--rc-panel, #fff); border: 1.5px solid #94a3b8; border-radius: 4px; /* #461 — the ONE text-size lever. Every size inside the block is `em` off this, so the A+/A− control changes one number and the whole block follows. It was 10.5px with five independent px literals below it, which is why "the text is tiny" had no single thing to turn up. */ font-size: 10.5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } /* #461/#711 — THE CORNER GRIP. Deliberately its own element rather than CSS `resize: both`: the native resizer needs `overflow` set on the box, and this box's `overflow` is load-bearing for the WT-30 flex contract (#242 records what happened the last time something reached into it). Same mechanism as the title-bar drag — a pointer handler writing inline styles — so there is one interaction model on this component, not two. */ .pg-datablock .rc-db-grip { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; z-index: 2; background: linear-gradient(135deg, transparent 50%, var(--rc-db-dim, #94a3b8) 50%, var(--rc-db-dim, #94a3b8) 62%, transparent 62%, transparent 74%, var(--rc-db-dim, #94a3b8) 74%, var(--rc-db-dim, #94a3b8) 86%, transparent 86%); border-radius: 0 0 3px 0; } .pg-datablock .rc-db-grip:hover { background-color: var(--rc-db-head, #e2e8f0); } .pg-datablock.hidden { display: none; } .pg-datablock .rc-db-body { overflow-y: auto; flex: 1; min-height: 0; } /* #461 — THE ROW GRAMMAR, which had no stylesheet rule at all. `_metaRow` emits `.rc-db-row` / `.rc-db-k` / `.rc-db-v` and only the three #677 authored rows had any styling, through `.rc-db-meta` further down this file. Every other row carried its layout inline, so the key column was a hardcoded 96px in two separate builders. Stating it once here is what lets a wider block actually use the width — which #461's own body asks first: "does a wider block make the strip readable without a text change?" The key column is now proportional, so widening the block widens the VALUE rather than leaving a 96px label beside a 600px ribbon. */ .pg-datablock .rc-db-row { display: flex; border-bottom: 1px solid var(--rc-db-line, #e2e8f0); } .pg-datablock .rc-db-k { flex: 0 0 30%; max-width: 132px; padding: 0.38em 0.76em; font-weight: 700; color: var(--rc-db-mute, #64748b); border-right: 1px solid var(--rc-db-line, #e2e8f0); } .pg-datablock .rc-db-v { flex: 1; min-width: 0; padding: 0.38em 0.76em; color: var(--rc-db-fg, #0f172a); overflow-wrap: anywhere; } .pg-datablock .rc-db-v.rc-db-empty { color: var(--rc-db-dim, #94a3b8); font-style: italic; } /* #461 — the counts strip and the notes block, in `em` so the one lever reaches them. They were 10px and 9.5px literals, which is why turning the container size up left the two smallest things on the block exactly as they were. */ .pg-datablock .rc-db-counts { display: flex; flex-wrap: wrap; gap: 0.38em 0.95em; padding: 0.57em 0.76em; border-top: 2px solid var(--rc-db-rule, #cbd5e1); color: var(--rc-db-fg, #0f172a); font-size: 0.95em; } .pg-datablock .rc-db-notes { padding: 0.48em 0.76em; color: var(--rc-db-mute, #64748b); font-size: 0.9em; line-height: 1.35; border-top: 1px solid var(--rc-db-line, #e2e8f0); } /* #649 — the block's Edit / Review footer. Pinned below the scroll body, like the drag bar is pinned above it, so the two doors into the metadata window are always reachable however long the block's contents run. */ .pg-datablock .rc-db-foot { display: flex; gap: 6px; flex: none; padding: 6px 8px; border-top: 1px solid var(--rc-db-rule, #cbd5e1); background: var(--rc-db-head, #e2e8f0); border-radius: 0 0 3px 3px; } .pg-datablock .rc-db-btn { display: inline-flex; align-items: center; gap: 5px; font: 700 10px/1.4 inherit; padding: 3px 9px; border: 1px solid var(--rc-db-dim, #94a3b8); border-radius: 3px; background: var(--rc-db-btn-bg, #f8fafc); color: var(--rc-db-btn-fg, #334155); cursor: pointer; } .pg-datablock .rc-db-btn:hover { border-color: var(--btn-primary); color: var(--btn-primary); } .pg-datablock .rc-db-btn .ic { width: 11px; height: 11px; } /* #461 — pushes the text-size pair to the right of the footer, so the two DOORS into the record and the two controls that change how it LOOKS read as separate groups rather than one row of four. */ .pg-datablock .rc-db-foot-sp { flex: 1; } /* An icon-only button needs no label gap and should stay square. */ .pg-datablock .rc-db-btn.rc-db-text { padding: 3px 6px; gap: 0; } /* #258 — the palette ⓘ toggle shows an active face while the block is open */ .pg-palette button[data-tool="datablock"].is-active { color: var(--accent, #4f6ddb); } /* #295 (Craig 2026-07-24) — the Level 1 process-overview surface host */ .pg-level1 { position: absolute; inset: 0; overflow: auto; background: var(--bg-white, #fff); z-index: 2; /* #1903 (FE-F17) - Level 1's palette, read by level1.js; dark below (#1903 block) */ --rc-l1-bg: #eef3f0; --rc-l1-card: var(--pq-white); --rc-l1-line: #dbe4dd; --rc-l1-ink: #16283b; --rc-l1-eyebrow: var(--pq-blue-900); } .pg-level1.hidden { display: none; } /* #295 — enlarge the pie-halo handles so the icons read (Craig 2026-07-24: too small). Two-class specificity (.joint-halo .handle) beats the runtime joint-plus.css. */ .joint-halo .handle { width: 32px; height: 32px; background-size: 24px 24px; background-repeat: no-repeat; background-position: center; } /* #330 Drop 2 — connector-menu escape hatches (Reset route / Reset label) */ .rc-halo-linkbtn { margin-top: 6px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border, #cbd5e0); border-radius: 7px; background: transparent; color: var(--primary-fg, #1a2b45); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .rc-halo-linkbtn:hover { background: rgba(39, 107, 178, .10); } .rc-halo-pop, .rc-halo-inspector { background: var(--bg-white, #fff); border: 1px solid var(--border, #cbd5e0); border-radius: 10px; box-shadow: 0 12px 30px rgba(8, 20, 40, .24); padding: 10px; font-family: var(--sans, system-ui, sans-serif); } .rc-halo-colour { display: flex; align-items: center; gap: 8px; } .rc-halo-swrow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; } /* #414 — the rename popover's hint line. It used to borrow .rc-halo-swrow, the colour picker's six-column swatch GRID, which stretched the panel far past its 340px textarea — Craig: "far too much unused space to the right hand side, needs to be closer in size to the edit box". A hint is one line of text, so it gets a plain block, and the panel sizes to its widest real child. */ .rc-halo-hint { margin-top: 6px; font-size: 12px; line-height: 1.35; } .rc-halo-rename { width: max-content; max-width: min(92vw, 380px); } .rc-halo-sw { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(0,0,0,.18); cursor: pointer; padding: 0; } .rc-halo-sw:focus-visible { outline: 3px solid #89c0f5; outline-offset: 1px; } .rc-halo-pick { width: 34px; height: 26px; border: 1px solid var(--border, #cbd5e0); border-radius: 6px; background: var(--bg-white, #fff); cursor: pointer; padding: 0; } .rc-halo-input { width: 240px; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border, #cbd5e0); border-radius: 7px; background: var(--bg-white, #fff); color: var(--primary-fg, #1a2b45); } .rc-halo-input:focus-visible { outline: 3px solid #89c0f5; outline-offset: 1px; } /* #382 — THE APPEARANCE PANEL. `.rc-halo-colour` stays a single flex row for the fill-only callers it has always served; the moment the panel carries more than one section it stacks, so Fill / Text colour / Text style read as a short form rather than a widening strip. One rule change, both shapes. */ .rc-halo-appearance { flex-direction: column; align-items: stretch; gap: 4px; min-width: 176px; } .rc-halo-appearance .rc-hi-label:first-of-type { margin-top: 0; } .rc-halo-aptitle { font-size: 12px; font-weight: 700; color: var(--primary-fg, #1a2b45); margin-bottom: 2px; } /* The current value is stated, not implied — without it the panel cannot answer "what is this set to now", which is the first thing anyone asks of a picker. */ .rc-halo-sw.is-current { outline: 2px solid var(--primary-fg, #1a2b45); outline-offset: 2px; } .rc-halo-stylerow { grid-template-columns: repeat(2, 1fr); gap: 6px; } .rc-halo-styletog { height: 26px; border-radius: 6px; cursor: pointer; padding: 0; border: 1px solid var(--border, #cbd5e0); background: var(--bg-white, #fff); color: var(--primary-fg, #1a2b45); font-size: 14px; line-height: 1; } .rc-halo-styletog:hover { border-color: var(--primary-fg, #1a2b45); } .rc-halo-styletog.is-on { background: var(--primary-fg, #1a2b45); color: light-dark(#fff, #0b1523); border-color: var(--primary-fg, #1a2b45); } .rc-halo-styletog:focus-visible { outline: 3px solid #89c0f5; outline-offset: 1px; } .rc-halo-inspector { width: 320px; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .rc-hi-title { font-family: var(--serif, Georgia, serif); font-size: 16px; font-weight: 700; color: var(--primary-fg, #1a2b45); margin-bottom: 6px; } .rc-hi-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, #64748b); margin-top: 8px; } .rc-hi-list { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--primary-fg, #1a2b45); } .rc-hi-list li { margin: 2px 0; line-height: 1.35; } .rc-hi-empty { font-size: 12.5px; color: var(--text-muted, #94a3b8); font-style: italic; margin-top: 2px; } .rc-hi-notes { width: 100%; min-height: 64px; margin-top: 4px; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border, #cbd5e0); border-radius: 7px; background: var(--bg-white, #fff); color: var(--primary-fg, #1a2b45); resize: vertical; } @media (prefers-color-scheme: dark) { /* #1655 — THE PIE ITSELF. Craig 2026-09-26: "The BPMN Halo is all white". joint-plus.css paints the pie's disc (`.handles`) white with a black rim and its toggle white, and nothing here answered them, so in dark the ring's light-ink icons (rc_halo.js switches them) sat on a white disc. `:root` lifts these above the library's four-class rules, which load after this file and would otherwise win the tie. Same colours as the halo's own popovers below, so the ring and what it opens match. */ :root .joint-halo.joint-theme-default.pie .handles { background-color: var(--pq-elevated); border-color: var(--pq-border); } :root .joint-halo.joint-theme-default.pie .slice { stroke: #33456a; } :root .joint-halo.joint-theme-default.pie .slice:hover, :root .joint-halo.joint-theme-default.pie .handle.selected .slice { fill: #263452; } :root .joint-halo.joint-theme-default.pie .pie-toggle { background-color: var(--pq-elevated); border-color: var(--pq-border); } .rc-halo-pop, .rc-halo-inspector { background: var(--pq-elevated); border-color: var(--pq-border); } .rc-halo-pick, .rc-halo-input, .rc-hi-notes { background: var(--pq-surface); border-color: var(--pq-border); color: #e6edf7; } .rc-hi-title, .rc-hi-list { color: #e6edf7; } /* #382 — the appearance panel in dark. The current-swatch ring and the style toggles both key off --primary-fg, which is near-black, so both go invisible here without their own values. */ .rc-halo-aptitle { color: #e6edf7; } .rc-halo-sw.is-current { outline-color: #89c0f5; } .rc-halo-styletog { background: var(--pq-surface); border-color: var(--pq-border); color: #e6edf7; } .rc-halo-styletog:hover { border-color: #89c0f5; } .rc-halo-styletog.is-on { background: #89c0f5; border-color: #89c0f5; } } /* ── #330 (Craig 2026-07-24) — BPMN halo shape-type picker + editing chrome ── */ .rc-halo-shapes { display: flex; flex-direction: column; gap: 3px; min-width: 230px; } .rc-halo-shape { text-align: left; padding: 7px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--primary-fg, #1a2b45); font: inherit; font-size: 13.5px; cursor: pointer; } .rc-halo-shape:hover { background: rgba(39, 107, 178, .10); } .rc-halo-shape.is-current { border-color: #276bb2; font-weight: 700; } .rc-halo-shape.is-disabled { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; cursor: default; color: var(--text-muted, #94a3b8); } .rc-halo-shape.is-disabled:hover { background: transparent; } .rc-halo-shape.is-disabled em { font-style: italic; font-size: 11px; opacity: .85; white-space: nowrap; } /* #1768 — the lane-change question is a blocking modal, not a popover (was z-index 700). */ .pg-bpmn-confirm-back { position: fixed; inset: 0; background: rgba(8,20,40,.35); z-index: calc(var(--z-dialog) + 10); display: flex; align-items: center; justify-content: center; } .pg-bpmn-confirm { width: 420px; max-width: 92vw; background: var(--bg-white, #fff); border: 1px solid var(--border, #cbd5e0); border-radius: 12px; box-shadow: 0 20px 50px rgba(8,20,40,.35); padding: 18px 20px; font-family: var(--sans, system-ui, sans-serif); color: var(--primary-fg, #1a2b45); } .pg-bpmn-confirm-h { font-family: var(--serif, Georgia, serif); font-size: 17px; font-weight: 700; margin-bottom: 8px; } .pg-bpmn-confirm-b { font-size: 13.5px; line-height: 1.5; color: var(--text-muted, #475569); margin-bottom: 12px; } .pg-bpmn-confirm-list { margin: 4px 0 8px 18px; font-size: 13px; } /* #1846: the steps and findings a Delete orphans */ .pg-bpmn-confirm-l { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, #64748b); margin-bottom: 4px; } .pg-bpmn-confirm-reason { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--border, #cbd5e0); border-radius: 7px; background: var(--bg-white, #fff); color: var(--primary-fg, #1a2b45); box-sizing: border-box; } .pg-bpmn-confirm-reason:focus-visible { outline: 3px solid #89c0f5; outline-offset: 1px; } .pg-bpmn-confirm-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .pg-bpmn-confirm-row button { font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 8px; cursor: pointer; } .pg-bpmn-confirm-cancel { background: transparent; border: 1px solid var(--border, #cbd5e0); color: var(--primary-fg, #1a2b45); } .pg-bpmn-confirm-ok { background: #276bb2; border: 1px solid #276bb2; color: #fff; } .pg-bpmn-confirm-ok:hover { background: #1f5a99; } @media (prefers-color-scheme: dark) { .pg-bpmn-confirm { background: var(--pq-elevated); border-color: var(--pq-border); color: #e6edf7; } .rc-halo-shape { color: #e6edf7; } .pg-bpmn-confirm-reason { background: var(--pq-surface); border-color: var(--pq-border); color: #e6edf7; } .pg-bpmn-confirm-cancel { color: #e6edf7; border-color: var(--pq-border); } .pg-bpmn-confirm-b { color: #aebbd0; } } /* Fail-loud surface — shown when a requested level cannot render (no fallback). */ .pg-proc-error { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 32px; z-index: 5; background: var(--bg-white, #fff); } .pg-proc-error-box { max-width: 520px; text-align: center; border: 1px solid var(--border, #cbd5e0); border-left: 4px solid #b8860b; border-radius: 10px; padding: 24px 28px; background: var(--mist, #f7f9fc); } .pg-proc-error-h { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--primary-fg, #1a2b45); margin-bottom: 10px; } .pg-proc-error-p { font-size: 14px; line-height: 1.5; color: var(--text-muted, #55647e); } @media (prefers-color-scheme: dark) { .pg-proc-error { background: var(--pq-surface); } .pg-proc-error-box { background: var(--pq-elevated); border-color: var(--pq-border); } .pg-proc-error-h { color: #e6edf7; } .pg-proc-error-p { color: #9fb0cc; } } /* ── D-037 BPMN view — the canvas host (U-4, v4.2.92) ────────────────────── Craig 2026-07-13: "No scroll bars, the zoom in and zoom out buttons dont work". The host had NO rule at all — it was an unstyled div inside an absolutely- positioned, overflow:hidden .pg-canvas-host, so the paper had no viewport to scroll inside and anything past its edge was simply unreachable. The tab strip is chrome and stays put. Since #1846 the adopted editor scrolls its own PaperScroller inside .rc-bpmn-editor-host; the hand-built view's scroll viewport and its scrollbar rules were burned with bpmn_view.js. */ .pg-bpmn-host { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg); --rc-bpmn-paper: var(--pq-white); --rc-bpmn-gutter: var(--pq-mist-200); --rc-bpmn-gutter-line: var(--pq-slate-750); --rc-bpmn-band-fg: var(--pq-night-950); --rc-bpmn-task-fill: var(--pq-white); --rc-bpmn-task-stroke: #5b7ab5; --rc-bpmn-call-stroke: var(--pq-navy-800); --rc-bpmn-task-num: var(--pq-slate-750); --rc-bpmn-task-title: #2d3748; --rc-bpmn-gw-fill: #fff8ec; --rc-bpmn-gw-stroke: #c08015; --rc-bpmn-gw-fg: #7c4a03; --rc-bpmn-ev-fill: var(--pq-white); --rc-bpmn-ev-start: #16a34a; --rc-bpmn-ev-end: #e11d2a; --rc-bpmn-ev-start-fill: #dcfce7; --rc-bpmn-ev-end-fill: #fee2e2; --rc-bpmn-ev-stroke: #111827; --rc-bpmn-ev-link: var(--pq-navy-800); --rc-bpmn-ev-glyph: #b91c1c; --rc-bpmn-ev-text: #000000; --rc-bpmn-ev-caption: var(--pq-night-950); --rc-bpmn-note-fill: var(--pq-white); --rc-bpmn-note-stroke: var(--pq-slate-750); --rc-bpmn-note-fg: var(--pq-night-950); --rc-bpmn-art-fill: #f8fafc; --rc-bpmn-art-top: #eef2f7; --rc-bpmn-art-stroke: #64748b; --rc-bpmn-art-fg: var(--pq-slate-750); --rc-bpmn-link: var(--pq-navy-800); --rc-bpmn-link-lbl-bg: var(--pq-white); --rc-bpmn-link-lbl-bd: #7d96b4; --rc-bpmn-link-lbl-fg: var(--pq-night-950); --rc-bpmn-port-fill: #dbeafe; --rc-bpmn-port-stroke: #1d4ed8; --rc-bpmn-select: var(--pq-blue-900); --rc-bpmn-finding: #b91c1c; } /* ── D-037 BPMN view — multi-process tabs (monochrome, Craig M3 gate) ── */ /* #1553 — `.doc-surface-tabs` / `.doc-surface-tab` share these declarations rather than copying them. Craig, on the quality report: "make it like the sub process tab", so the visual language is deliberately the same one. TWO NAMES, ONE RULE SET, and the reason is the note under .pg-bpmn-pagetabs below: this file deliberately does NOT give the page tabs the phase strip's class, because a phase and a page are different KINDS of choice and one visual language for both would say they are the same. Choosing between the document and its quality report IS the same kind of choice as choosing a sub-process page — peer views of one document — which is why sharing is right here and was wrong there. Sharing the CLASS itself would have put a BPMN name on the document surface; sharing the SELECTOR keeps both names honest and leaves one place to change the look. */ .doc-surface-tabs{display:flex;gap:4px;padding:6px 10px 0;background:#fff;border-bottom:1px solid #444;} .doc-surface-tab{border:1px solid #444;border-bottom:none;background:#fff;color:#000; border-radius:6px 6px 0 0;padding:4px 14px;font-size:12px;cursor:pointer;} .doc-surface-tab.on{background:#000;color:#fff;font-weight:600;} /* #1553 — THE QUALITY REPORT PANEL. A sibling of .doc-sheet, so it deliberately does NOT take the sheet's page chrome: the sheet is the controlled document and this is a statement about it. Colours come from the theme tokens rather than literals so it follows prefers-color-scheme with the rest of the app. */ /* #2113 — the panel's width, padding and card come from the sheet's rule (.doc-sheet, .doc-qr), so its edges are the header row's. Only its own text colour is here. */ .doc-qr{ color:var(--text, #111827); } .doc-qr-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .doc-qr-head h2{ margin:0; font-size:1.1rem; } .doc-qr-note{ font-style:italic; opacity:.85; max-width:70ch; } .doc-qr-warn{ font-weight:600; color:var(--conflict-text, #b42318); max-width:70ch; } .doc-qr-table{ border-collapse:collapse; margin:14px 0; width:100%; font-size:13px; } .doc-qr-table th, .doc-qr-table td{ border:1px solid var(--border, #d0d5dd); padding:5px 9px; text-align:left; vertical-align:top; } .doc-qr-table th{ background:var(--surface-2, #f3f4f6); font-weight:600; } /* #1647 — THE FINDINGS TABLE CARRIES PROSE NOW, so it needs column widths the summary can actually use. Craig asked for "up to 3 lines long by 1 or 2 would be better": the width is what decides that, so the three short columns are held narrow and the two prose columns take the rest. `table-layout:fixed` is what makes the percentages hold rather than being renegotiated by the longest cell, which is how a summary column ends up 40 characters wide. */ .doc-qr-findings{ table-layout:fixed; } .doc-qr-findings th:nth-child(1), .doc-qr-findings td:nth-child(1){ width:9%; } .doc-qr-findings th:nth-child(2), .doc-qr-findings td:nth-child(2){ width:14%; } .doc-qr-findings th:nth-child(3), .doc-qr-findings td:nth-child(3){ width:14%; } .doc-qr-findings th:nth-child(4), .doc-qr-findings td:nth-child(4){ width:38%; } .doc-qr-findings th:nth-child(5), .doc-qr-findings td:nth-child(5){ width:25%; } /* Long quoted passages and unbroken identifiers must wrap rather than force the table wider than its host. */ .doc-qr-findings td{ overflow-wrap:anywhere; } /* An ABSENCE that states which absence it is (#1647). Muted, because it is not a value — but present, because a blank cell is a column that answers nothing, which is the defect the paragraph anchor was reported for. */ .doc-qr-none{ font-style:italic; opacity:.7; } /* #1846 pass 4c — THE BPMN SURFACE IS THE ADOPTED EDITOR (bpmn_surface.js). The kit's frame expects a full-height flex column (its demo's #app), so the editor host fills the BPMN host above the page tabs. The Objects button shows or hides the editor's own docked palette. */ .rc-bpmn-surface .rc-bpmn-editor-host{ flex:1 1 auto; min-height:0; position:relative; display:flex; flex-direction:column; width:100%; } .rc-bpmn-surface.rc-hide-stencil .stencil-container{ display:none; } /* #1846 (regcheck's measurement on dev v4.3.1484) — ONE ROW OF CHROME ABOVE THE DRAWING. It was three: the phase tabs (names wrapping to two lines), then the editor's print / "Save as: PNG" bar, then its Export .bpmn strip, leaving the drawing about 520px. Now the phase tabs (lent to the editor's frame by bpmn_surface.js _dockPhaseTabs), the print / Save-as tools and the Export strip share the first row of a grid, and the drawing has the rest. The row's ground and rule are the phase strip's own look, drawn once behind the whole row (::before), so the row reads as one bar whether or not there are phases. */ .rc-bpmn-surface .rc-bpmn-editor{ display:grid; grid-template-columns:minmax(0, 1fr) auto auto; grid-template-rows:auto minmax(0, 1fr); } .rc-bpmn-surface .rc-bpmn-editor::before{ content:""; grid-area:1 / 1 / 2 / -1; background:#fff; border-bottom:1px solid #444; } /* #1956 — the process navigator takes the slot the phase tabs had. */ .rc-bpmn-surface .rc-bpmn-editor > .rc-bpmn-procnav{ grid-area:1 / 1; min-width:0; align-self:center; } .rc-bpmn-surface .rc-bpmn-editor > .app-toolbar{ grid-area:1 / 2; min-height:0; align-self:center; } .rc-bpmn-surface .rc-bpmn-editor > .app-toolbar .joint-toolbar{ width:auto; height:auto; min-height:32px; padding:2px 6px; background:transparent; border-bottom:none; } /* The Export strip ends clear of the Findings tab rail and any open drawer: --rc-drawer-occupied is the measured width of both (RCDrawers.applyReserve), the same measurement the minimaps move by. */ .rc-bpmn-surface .rc-bpmn-editor > .rc-editor-strip{ grid-area:1 / 3; align-self:center; padding-right:calc(8px + var(--rc-drawer-occupied, 0px)); } .rc-bpmn-surface .rc-bpmn-editor > .app-body{ grid-area:2 / 1 / 3 / -1; } /* #1956 — "Go to process": a native select, so the OS draws its list and its type-ahead; theme tokens so it follows the colour scheme. */ .rc-bpmn-procnav{ display:flex; align-items:center; gap:6px; padding:0 10px; font-size:12px; color:var(--text, #111827); white-space:nowrap; } .rc-bpmn-procnav.hidden{ display:none; } .rc-bpmn-procnav-select{ max-width:320px; min-width:0; font-size:12px; padding:2px 4px; color:var(--text, #111827); background:var(--card, #fff); border:1px solid var(--border, #9ca3af); border-radius:4px; } /* The band gone to is outlined for a moment; the one global prefers-reduced-motion rule stills it. */ .rc-phase-band.rc-phase-flash > rect:first-of-type{ stroke:var(--primary, #2563eb); stroke-width:4; animation:rc-phase-flash 1.6s ease-out; } @keyframes rc-phase-flash{ from{ stroke-opacity:1; } to{ stroke-opacity:0; } } /* #343 — the width grip at the right edge of a band's header (moved there from the phase tab, #1956): quiet until the pointer arrives. */ .rc-phase-grip{ fill:transparent; cursor:col-resize; transition:fill .12s ease; } .rc-phase-grip:hover,.rc-phase-grip.is-dragging{ fill:light-dark(#0000002a, rgba(255,255,255,.22)); } @media (prefers-color-scheme: dark){ .rc-bpmn-surface .rc-bpmn-editor::before{ background:var(--surface, #1f2329); border-bottom-color:var(--pq-border); } } /* #1493 — THE PAGE TABS, along the bottom like a spreadsheet's sheet tabs. Craig 2026-09-07: "like browser tabs or excel sheets (along the bottom)". Deliberately NOT the same class as the phase strip above: a phase is a band within one page, a page is a level of the process, and one visual language for both would say they are the same kind of choice. So these tuck UP into the canvas (radius on the bottom corners) where the phase tabs tuck down. */ .pg-bpmn-pagetabs{ display:flex;gap:4px;padding:0 10px 6px;background:#fff; border-top:1px solid #444;flex:0 0 auto;overflow-x:auto; } /* The strip's own 10px left padding is all the inset there is. The hand-built view once pushed the tabs right from JS (GUTTER_W + POOL_W) to clear its lane gutter; that gutter and the JS were burned with bpmn_view.js (#1846), and the adopted editor draws lane names inside the pool, so nothing needs clearing. */ .pg-bpmn-pagetab{ border:1px solid #444;border-top:none;background:#fff;color:#000; border-radius:0 0 6px 6px;padding:4px 12px;font-size:12px;cursor:pointer; white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis; } .pg-bpmn-pagetab.on{background:#000;color:#fff;font-weight:600;} /* The main process is the document, not a sheet beside the others. */ .pg-bpmn-pagetab.main{font-weight:600;} /* ── #1675 — THE STEP THE SELECTED FINDING IS ON ──────────────────────────── Craig 2026-09-20, on several steps carrying findings: "you cant tell which one. Sa[m]e as the document surface there needs to be some extra highlighting applied to the appropriate step". THE SAME GESTURE AS THE DOCUMENT SURFACE, NOT THE SAME CSS. `.rc-finding .is-active` marks the page with a ring, an inset rail and a one-shot pulse — but that is CSS on HTML, and a BPMN step is a JointJS `` in SVG where `outline` and `box-shadow` do not apply. `filter: drop-shadow()` DOES apply to SVG and follows the shape's real outline rather than its bounding box, which is the closer reading of the gesture for a diamond or an event circle. So: same ring colour, same pulse timing, same one-at-a-time rule, drawn the way this surface can draw it. The colour is `--rc-anchor-ring` — the token the document surface and the drawer's selected card already read (#322), so "selected" is one decision in one place rather than three surfaces agreeing by coincidence. The ring and glow are held in their OWN variables so the dark override below only restates two colours. Overriding `filter` directly would not work: the keyframes set `filter` too, and an animation beats a plain declaration while it plays, so a dark-mode rule written that way would be ignored for the first 900ms — visible exactly when the user is looking. */ .rc-bpmn-finding-focus { --rc-bpmn-focus-ring: var(--rc-anchor-ring, #2563eb); --rc-bpmn-focus-glow: rgba(37, 99, 235, 0.40); filter: drop-shadow(0 0 1px var(--rc-bpmn-focus-ring)) drop-shadow(0 0 4px var(--rc-bpmn-focus-ring)) drop-shadow(0 0 10px var(--rc-bpmn-focus-glow)); animation: rc-bpmn-finding-pulse 900ms ease-out 1; } @keyframes rc-bpmn-finding-pulse { 0% { filter: drop-shadow(0 0 1px var(--rc-bpmn-focus-ring)) drop-shadow(0 0 2px var(--rc-bpmn-focus-ring)) drop-shadow(0 0 0 transparent); } 70% { filter: drop-shadow(0 0 1px var(--rc-bpmn-focus-ring)) drop-shadow(0 0 8px var(--rc-bpmn-focus-ring)) drop-shadow(0 0 18px var(--rc-bpmn-focus-glow)); } 100% { filter: drop-shadow(0 0 1px var(--rc-bpmn-focus-ring)) drop-shadow(0 0 4px var(--rc-bpmn-focus-ring)) drop-shadow(0 0 10px var(--rc-bpmn-focus-glow)); } } /* The canvas follows the app theme (#304 — `--rc-bpmn-paper` flips to #0f141a), so the mark has to as well. `--rc-anchor-ring` does NOT flip on its own (`--pq-accent-2` is the same blue in both schemes), which is why the document surface states its dark ring explicitly too. */ @media (prefers-color-scheme: dark) { .rc-bpmn-finding-focus { --rc-bpmn-focus-ring: #60a5fa; --rc-bpmn-focus-glow: rgba(96, 165, 250, 0.45); } } /* #1520 — the two-factor schedule on the Organisation tab. The number sits with its unit, because "7" and "1" mean nothing apart from "days" and "%". */ .org-mfa-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;} .org-input.org-mfa-num{width:88px;flex:0 0 auto;} #org-mfa-section input:disabled{opacity:.6;cursor:not-allowed;} /* The DIAGRAM stays a white page in both themes — it is a printed artifact and Craig's M3 gate is explicitly monochrome-on-white. The CHROME around it (tab strip, scrollbars) follows the OS theme like the rest of the app. */ @media (prefers-color-scheme: dark) { /* #1553 — the document-surface tabs ride the same rules in dark mode too; a shared look that diverged in one colour scheme would be worse than two honest looks. */ .doc-surface-tabs { background: var(--surface, #1f2329); border-bottom-color: var(--pq-border); } .pg-bpmn-pagetabs{ background: var(--surface, #1f2329); border-top-color:var(--pq-border); } .pg-bpmn-pagetab { background: var(--surface, #1f2329); color: var(--text, #e5e7eb); border-color:var(--pq-border); } .pg-bpmn-pagetab.on{ background: var(--accent); color: #fff; } /* #2325: no light block in dark mode */ .doc-surface-tab { background: var(--surface, #1f2329); color: var(--text, #e5e7eb); border-color: var(--pq-border); } .doc-surface-tab.on { background: var(--accent); color: #fff; } /* #2325 */ } /* ── S2a intent-to-respond / next-speaker panel (from debate-4voice-sandbox, Craig 2026-07-11: visible to ANY user behind the "Next speaker" toggle). ── */ .er-need-panel{position:fixed;top:118px;right:32px;z-index:60;width:274px;background:var(--surface,#fff); border:1px solid var(--border,#cbd5e0);border-radius:12px;box-shadow:0 10px 30px rgba(10,20,35,.18);display:none} .er-need-panel.show{display:block} .er-need-hd{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#2d3748;color:#eaf1f9;border-radius:12px 12px 0 0;user-select:none} .er-need-t{font-weight:600;font-size:12px} .er-need-sp,.er-need-nsp{flex:1} .er-need-bd{padding:11px 12px;display:flex;flex-direction:column;gap:9px} .er-need-row{display:flex;flex-direction:column;gap:3px} .er-need-nl{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text,#2d3748)} .er-need-nl b{font-variant-numeric:tabular-nums} .er-need-bar{height:7px;border-radius:5px;background:var(--border,#e2e8f0);overflow:hidden} .er-need-bar > i{display:block;height:100%;border-radius:5px;transition:width .5s ease;width:0} .er-need-row[data-voice="internal_auditor"] .er-need-bar>i{background:var(--dv-ia-fg)} .er-need-row[data-voice="inspector"] .er-need-bar>i{background:var(--dv-insp-fg)} .er-need-row[data-voice="qe"] .er-need-bar>i{background:var(--dv-qe-fg)} .er-need-row[data-voice="process_owner"] .er-need-bar>i{background:var(--dv-po-fg)} .er-need-row.next .er-need-nl{font-weight:700} .er-need-row.next .er-need-nl::after{content:"· next";color:var(--dv-you-fg,#2f855a);font-weight:700;font-size:10px} .er-need-ft{padding:7px 12px 10px;font-size:10.5px;color:var(--text-muted,#718096);border-top:1px solid var(--border,#e2e8f0)} #er-need-toggle.is-active{background:var(--dv-you-bg,#f0fff4);border-color:var(--dv-you-fg,#2f855a);color:var(--dv-you-fg,#2f855a)} @media (prefers-color-scheme: dark){ .er-need-panel{background:var(--pq-surface);border-color:var(--pq-border)} .er-need-nl{color:#e2e8f0} .er-need-bar{background:var(--pq-line)} } /* ── 4-voice debate modal layout (S1 bake-in of debate-4voice-sandbox) ── */ .er-4v-body{display:flex;flex-direction:column;overflow:hidden;min-height:0} .er-finding-bar{padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface-2,#f7f8fa);flex:0 0 auto} /* #469 — EQUAL COLUMNS. `1fr` is `minmax(auto, 1fr)`, and a grid item's automatic minimum is its MIN-CONTENT size — so the Quality Expert's header, which alone carries lens chips and was set `white-space:nowrap`, pushed its own column to roughly twice the width of its three peers. `minmax(0, 1fr)` removes the content floor, and the four voices are then sized by the grid, not by how much furniture each header happens to carry. They are peers in the debate model; one looking weightier than the rest before a word is read is the opposite of what a four-voice panel is for. */ .er-voices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto 1fr auto;gap:11px;padding:13px 14px;flex:0 0 auto;background:var(--surface);border-bottom:1px solid var(--border);overflow-y:auto;max-height:40vh} @media (max-width:980px){ .er-voices{grid-template-columns:repeat(2,minmax(0,1fr))} } .er-voice{border:1px solid var(--border);border-radius:11px;background:var(--surface);display:flex;flex-direction:column;min-height:170px;max-height:300px} /* #469 supersedes B-130. B-130 kept every header on ONE line and ellipsized the QE's lens chips so the four stayed uniform. Craig 2026-07-29 reverses the trade-off: "If another line is needed for each of the participants so that the QE person can get the lenses in then so be it, but col width should be consistent." So the header WRAPS and shows the lenses in full. */ .er-voice-hd{display:flex;align-items:center;gap:7px;padding:8px 11px;border-bottom:1px solid var(--border);border-radius:11px 11px 0 0;font-weight:600;font-size:0.82rem;flex-wrap:wrap;row-gap:4px;white-space:normal;min-height:37px} .er-voice-frame{font-weight:500;font-size:0.62rem;opacity:.8;text-transform:uppercase;letter-spacing:.4px;flex:0 0 auto} #er-qe-active-lens{flex:0 1 auto;min-width:0} /* …and all four headers take the height of the TALLEST, at render time — not a constant, which would leave a permanent empty second line on a document whose QE has no lenses. Subgrid makes the four cards share the parent's row tracks, so header/body/rung line up across the panel. Guarded: without subgrid the cards stay plain flex columns and only the header heights differ. */ @supports (grid-template-rows: subgrid) { .er-voice{display:grid;grid-row:span 3;grid-template-rows:subgrid;max-height:none} .er-voice-body{min-height:0} } .er-voice-hd .er-spinner{margin-left:auto} .er-voice-hd .er-popout-btn{margin-left:6px} .er-voice-internal_auditor .er-voice-hd{background:var(--dv-ia-bg);color:var(--dv-ia-fg)} .er-voice-inspector .er-voice-hd{background:var(--dv-insp-bg);color:var(--dv-insp-fg)} .er-voice-qe .er-voice-hd{background:var(--dv-qe-bg);color:var(--dv-qe-fg)} .er-voice-process_owner .er-voice-hd{ background: var(--dv-po-bg); color: var(--dv-po-fg)} @media (prefers-color-scheme: dark) { .er-voice-process_owner .er-voice-hd { color: #e9c46a; background: #2a2310; } } .er-voice-body{padding:9px 11px;overflow:auto;flex:1;font-size:0.8rem;line-height:1.5} .er-voice-rung{padding:6px 11px;border-top:1px solid var(--border);font-size:0.66rem;color:var(--text-muted);display:flex;align-items:center;gap:6px} .er-voice-rung:empty{display:none} .er-rung{font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:6px;border:1px solid;white-space:nowrap} /* Axis-model disposition tints (voice-landing chips): dismiss=grey, monitor=blue, remediate=green. */ .er-disp-dismiss{ color: light-dark(#64748b, #94a3b8); border-color: light-dark(#64748b, #94a3b8)} .er-disp-monitor{ color: light-dark(#1e40af, #63b3ed); border-color: light-dark(#1e40af, #63b3ed)} .er-disp-remediate{ color: light-dark(#276749, #68d391); border-color: light-dark(#276749, #68d391)} .er-thread-pane{flex:1 1 0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;background:var(--surface-2,#f7f8fa)} .er-thread-hd{display:flex;align-items:center;gap:10px;padding:10px 16px 4px;font-size:0.9rem} .er-thread-t{font-weight:600;display:inline-flex;align-items:center;gap:6px} .er-composer{display:flex;gap:9px;align-items:flex-end;padding:10px 16px 12px;border-top:1px solid var(--border);background:var(--surface);flex:0 0 auto} .er-composer-field{flex:1;display:flex;flex-direction:column;gap:4px} .er-composer-lbl{font-size:0.68rem;color:var(--text-muted)} .er-composer textarea{width:100%;resize:none;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font:inherit;font-size:0.85rem;padding:8px 11px;min-height:38px;max-height:110px} .er-composer textarea:focus{outline:none;border-color:#2e7d5b} .er-rung-strip{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 10px;align-items:center;font-size:0.72rem;color:var(--text-muted)} .er-rung-strip:empty{display:none} .er-rung-strip .er-rc{display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:2px 8px} .er-agreed-rung{margin-left:8px} /* B-192 — "Revert first" guidance shown in place of the dead Reject button on an inserted finding. Colour comes from theme vars (no hardcoded palette). */ .er-revert-note{display:inline-flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--text-muted)} .er-revert-note .ic{width:14px;height:14px;flex:0 0 auto} /* #277 engine · #289 presentation — objection ledger as flowing PROSE (Craig's ruling: no chip/pill furniture; the prose speaks for itself). Theme vars only. */ .er-objection-ledger{margin:6px 0 10px;padding:7px 10px;border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:8px;background:var(--surface);font-size:0.78rem} .er-objection-ledger:empty{display:none} .er-obj-ledger-body{margin:3px 0;line-height:1.55} .er-obj-ledger-prose{margin-top:6px;padding-top:6px;border-top:1px dashed var(--border);color:var(--text-muted);font-size:0.75rem} /* Axis-display outcome strip (L-093) — chair decision + grouped voice landings. Layout only; tag colours reuse the SSOT .sev-* and .er-disp-* classes. (Do NOT write those two glob names with a slash between them: "*" + "/" closes this comment early and the leaked text voids the next rule — that exact typo silently dropped .er-axis-chair/.er-axis-landings's flex layout from v4.2.49 until the 2026-07-31 comment sweep found it.) */ .er-axis-chair,.er-axis-landings{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:4px 0} .er-axis-lbl{color:var(--text-muted);font-weight:600} @media (prefers-color-scheme: dark){ .er-voice-internal_auditor .er-voice-hd{background:#123330;color:#4fd1c5} .er-voice-inspector .er-voice-hd{background:#2a1618;color:#fc9aa0} .er-voice-qe .er-voice-hd{background:var(--pq-surface);color:#6fa8dc} } /* Start Discussion button — normal inline button in the thread header (was breaking) */ .er-thread-hd .er-discuss-btn{position:static;width:auto;flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 13px;font-size:0.8rem;border-radius:8px} /* copy-to-clipboard on agreed actions / replacement */ .er-replacement-label,.er-agreed-actions-label{display:flex;align-items:center;gap:6px} .er-copy-btn{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--border);color:var(--text-muted);border-radius:7px;padding:2px 9px;font-size:0.7rem;cursor:pointer;font-weight:600} .er-copy-btn:hover{border-color:var(--primary);color:var(--primary-ink)} /* consensus/outcome as a dismissable pop-out — keeps the discussion visible (Craig 2026-07-01) */ .er-outcome-overlay{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px} .er-outcome-overlay.hidden{display:none} .er-outcome-backdrop{position:absolute;inset:0;background:rgba(8,16,28,.5)} /* #1668 — "Consensus reached / the chair is compiling the meeting notes". Craig 2026-09-20. A SIBLING of .er-outcome-card in the same overlay, sized and shaped like it so the swap reads as one surface changing its contents rather than two panels appearing. Tokens throughout (no literals): this panel has to survive dark mode, and a hand-picked colour here is exactly the drift #1655 was written to stop. */ .er-compiling-card{width:min(420px,92vw);padding:28px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .er-compiling-title{font-weight:600;font-size:1.05rem;color:var(--text)} .er-compiling-sub{color:var(--text-muted);font-size:.92rem} /* Elapsed, not a countdown — tabular so the digits do not jitter each second. */ .er-compiling-elapsed{color:var(--text-muted);font-size:.82rem;font-variant-numeric:tabular-nums} .er-compiling-spinner{width:26px;height:26px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent,var(--text-muted));animation:er-compiling-spin .9s linear infinite} @keyframes er-compiling-spin{to{transform:rotate(360deg)}} .er-compiling-dots{animation:er-compiling-fade 1.4s ease-in-out infinite} @keyframes er-compiling-fade{0%,100%{opacity:.25}50%{opacity:1}} /* The words carry the meaning; the motion is decoration. A reader who has asked for less of it still gets a panel that plainly says what is happening. */ @media (prefers-reduced-motion: reduce) { /* the still state shown in place of the motion (#1903: the motion itself is off for everything, by the one global rule near the top) */ .er-compiling-dots { opacity:1; } } /* #1668 — the placeholder speaks to whoever is looking at it. The popup has no QMS library, so telling its user to open one names a control that is not on their screen. Hidden by default and swapped on body.popup-mode, so neither audience ever sees the other's sentence and no JS has to run to pick. */ .placeholder-popup{display:none} body.popup-mode .placeholder-standalone{display:none} body.popup-mode .placeholder-popup{display:block} .er-outcome-card,.er-compiling-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 56px rgba(20,40,70,.28)} .er-outcome-card{position:relative;width:min(680px,94vw);max-height:84vh;display:flex;flex-direction:column;overflow:hidden} .er-outcome-card-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600} .er-outcome-card-hd span{display:inline-flex;align-items:center;gap:8px} .er-outcome-card-bd{padding:14px 16px;overflow:auto} .er-debate-waiting { padding: 28px 16px; color: var(--text-muted); font-size: 0.9rem; display: flex; align-items: center; gap: 10px; } .er-actions-bar { padding: 7px 16px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-shrink: 0; align-items: center; } /* Equal-width Report/Regenerate header buttons */ .er-fullscreen-header-actions .btn-sem { min-width: 115px; text-align: center; } /* B-022 — the brevity (Craig D8). Dark the input surface; fixes login + all org forms consistently. */ @media (prefers-color-scheme: dark) { .org-input { background: var(--card); border-color: var(--border); } .org-input::placeholder { color: var(--text-muted); } .org-input option { background: var(--card); color: var(--text); } } /* Required-field validation state — red border when a compulsory field is left empty on submit (cleared on the next keystroke). */ .org-input.input-invalid { border-color: var(--conflict-text, #c53030); box-shadow: 0 0 0 1px var(--conflict-text, #c53030); } .org-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; } .org-checks label { display: flex; align-items: center; gap: 5px; font-size: 0.82rem; cursor: pointer; white-space: nowrap; } .org-textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 4px; font-size: 0.82rem; font-family: inherit; resize: vertical; background: var(--input-bg, #fff); color: var(--text); line-height: 1.5; } /* ── Lined textarea (numbered lines) ── */ .lined-wrap { display: flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; min-height: 228px; max-height: 400px; background: var(--bg-white); } .org-textarea.lined-ta { flex: 1; border: none; border-radius: 0; resize: none; padding: 7px 9px; font-family: 'Courier New', Courier, monospace; font-size: 0.82rem; line-height: 1.5; min-height: 228px; overflow-y: auto; background: var(--bg-white); } .cal-lined-wrap { min-height: 80px; max-height: 160px; } .cal-textarea.lined-ta { min-height: 80px; overflow-y: auto; font-family: inherit; font-size: 0.8rem; } .opt-field-hint { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); margin-left: 6px; } .org-save-row { display: flex; align-items: center; gap: 12px; } /* ── Calibration tab ── */ .cal-loading { padding: 16px; color: var(--text-muted); font-size: 0.85rem; } .cal-principle { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 12px; overflow: hidden; } .cal-principle-name { background: var(--sidebar-bg); padding: 7px 12px; font-size: 0.83rem; font-weight: 700; color: var(--primary-fg); border-bottom: 1px solid var(--border); } .cal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .cal-field { padding: 10px 12px; } .cal-field:first-child { border-right: 1px solid var(--border); } .cal-label { display: block; font-size: 0.75rem; font-weight: 700; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.4px; } .cal-label.never { color: light-dark(#c62828, color-mix(in oklab, #c62828 45%, white)); } .cal-label.always { color: light-dark(#2e7d32, color-mix(in oklab, #2e7d32 45%, white)); } .cal-textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 0.8rem; font-family: inherit; resize: vertical; background: var(--input-bg, #fff); color: var(--text); line-height: 1.5; } /* ── SUCCESS section ── */ .success-label { display: flex; align-items: flex-start; gap: 8px; padding: 7px 6px; border-radius: 5px; cursor: pointer; transition: background 0.15s; margin-bottom: 2px; } .success-label:hover { background: var(--hover-bg); } .success-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; } .success-hint { font-size: 0.68rem; color: var(--text-muted); margin-top: 1px; line-height: 1.3; } .success-run-btn { display: block; width: 100%; margin-top: 10px; padding: 8px 0; background: linear-gradient(135deg, #1565c0, #0d47a1); color: #fff; border: none; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; letter-spacing: 0.3px; transition: opacity 0.15s; } .success-run-btn:disabled { opacity: 0.45; cursor: not-allowed; } .success-run-btn:not(:disabled):hover { opacity: 0.88; } /* ── Password show/hide ── */ .pw-wrap { position: relative; display: flex; align-items: center; } .pw-wrap .org-input { flex: 1; padding-right: 2.2rem; } .pw-toggle-btn { position: absolute; right: 6px; background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--text-muted); padding: 2px 4px; line-height: 1; opacity: 0.6; } .pw-toggle-btn:hover { opacity: 1; } /* ── Auth modals ── */ .auth-form { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; } .auth-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: -4px; } .auth-error { color: var(--conflict-text); background: var(--conflict-badge); border: 1px solid light-dark(#fed7d7, color-mix(in oklab, #fed7d7 30%, var(--pq-surface))); border-radius: 4px; padding: 6px 10px; font-size: 0.82rem; } .auth-ok { color: light-dark(#276749, color-mix(in oklab, #276749 45%, white)); background: light-dark(#c6f6d5, color-mix(in oklab, #c6f6d5 14%, var(--pq-surface))); border: 1px solid light-dark(#9ae6b4, color-mix(in oklab, #9ae6b4 30%, var(--pq-surface))); border-radius: 4px; padding: 6px 10px; font-size: 0.82rem; } .auth-link-btn { background: none; border: none; color: var(--primary-fg); /* #1880 — --primary-light measured 3.4 on white */ font-size: 0.82rem; cursor: pointer; text-decoration: underline; padding: 4px 0; text-align: center; } .auth-link-btn:hover { text-decoration-thickness: 2px; } .admin-users-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .admin-users-table th { background: var(--primary-pale); padding: 6px 10px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--border); } .admin-users-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .admin-users-table tr:last-child td { border-bottom: none; } .user-disabled { opacity: 0.55; } /* ── Users table (admin users tab) ── */ .user-badge.warn { background: #c05621; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 1px 5px; border-radius: 8px; } .user-badge.sys { background: var(--primary); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 1px 5px; border-radius: 8px; } .user-badge.domain { background: #5b21b6; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 1px 5px; border-radius: 8px; } .user-badge.org { background: #065f46; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 1px 5px; border-radius: 8px; } /* #1737 — Quality Lead, a category held beside the class badge. Colours as its siblings. */ .user-badge.ql { background: #1e40af; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 1px 5px; border-radius: 8px; } /* ── Org list cards (Admin Panel → Organisations) ─────────────────────────── Modernised look: white surface, breathing room, clear button hierarchy. The same .user-card markup is reused for users elsewhere; org-specific tweaks live under .org-card. */ #admin-orgs-list { display: flex; flex-direction: column; gap: 10px; } .org-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } .org-card:hover { box-shadow: 0 4px 12px rgba(26, 58, 92, 0.08); border-color: var(--border); } .org-card-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; } .org-card-main { min-width: 0; } /* allow children to truncate cleanly */ .org-card-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; } .org-card-name { font-size: 1rem; font-weight: 600; color: var(--primary-fg); line-height: 1.3; } .org-card-meta { display: flex; flex-wrap: wrap; gap: 14px 18px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; } .org-card-meta code { font-family: 'Courier New', monospace; font-size: 0.78rem; background: var(--primary-pale); color: var(--primary-fg); padding: 1px 6px; border-radius: 4px; } .org-card-id { font-family: 'Courier New', monospace; font-size: 0.72rem; color: var(--text-muted); } .org-card-members { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); } /* #2134 — the organisation's plan and licence window (system administrators). */ .org-plan-host:empty { display: none; } .org-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 0.85rem; } .org-plan-state[data-state="grace"] { color: var(--pq-warn); font-weight: 600; } .org-plan-state[data-state="locked"] { color: var(--conflict-text, var(--text)); font-weight: 600; } .org-plan-editor { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; align-items: end; } .org-plan-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-muted); } .org-plan-warn, .org-plan-adds { grid-column: 1 / -1; margin: 0; font-size: 0.82rem; } .org-plan-warn { color: var(--conflict-text, var(--text)); } .org-plan-actions { grid-column: 1 / -1; display: flex; gap: 8px; } .org-plan-status { font-size: 0.78rem; color: var(--text-muted); } .org-plan-status.save-ok { color: var(--ok, var(--text)); } .org-plan-status.save-fail { color: var(--conflict-text, var(--text)); } .org-member-chip { background: var(--primary-pale); color: var(--primary-fg); font-size: 0.74rem; padding: 2px 8px; border-radius: 999px; font-weight: 500; } .org-member-empty { font-size: 0.78rem; color: var(--text-muted); font-style: italic; } .org-member-more { font-size: 0.74rem; color: var(--text-muted); padding: 2px 4px; align-self: center; } .org-card-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 96px; } /* Pill-style badges for the org row — calmer palette than the user badges */ .org-pill { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid transparent; line-height: 1.5; letter-spacing: 0.01em; } .org-pill-domain { background: light-dark(#e6f1fa, color-mix(in oklab, #e6f1fa 14%, var(--pq-surface))); /* tint of --primary */ color: var(--primary-fg); border-color: light-dark(#c9dcef, color-mix(in oklab, #c9dcef 30%, var(--pq-surface))); } /* Secondary (outlined) and danger button variants — used in org/user cards */ .btn-sem.opt-action-secondary { background: var(--bg-white); color: var(--primary-fg); border: 1px solid var(--primary-light); } .btn-sem.opt-action-secondary:hover { background: var(--hover-bg); color: var(--primary-fg); } .btn-sem.opt-action-danger { background: var(--bg-white); color: var(--conflict-text); border: 1px solid light-dark(#fbb6ae, color-mix(in oklab, #fbb6ae 30%, var(--pq-surface))); } .btn-sem.opt-action-danger:hover { background: var(--conflict-text); color: #fff; border-color: var(--conflict-text); } /* #146 — find, order, and a list that scrolls. * * Craig 2026-05-30: *"the list of users in the user tab of admin needs to * scroll as there could be hundreds, at least 5 visible … We will also need * find, filter and order functionality."* * * Every colour here is a token, so the tab follows the user's theme rather * than pinning a light palette into a surface that has a dark one. */ .users-toolbar { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; } .users-search { flex: 1 1 260px; max-width: 380px; padding: 5px 9px; font-size: 0.82rem; font-family: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 5px; } .users-search:focus { outline: none; border-color: var(--accent, var(--text-muted)); } .users-count { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; } /* THE SCROLL, and the number Craig gave. "At least 5 visible" is the floor, * not the target — the cap is a height rather than a row count because the * edit form expands inline underneath a row, and counting rows would shrink * the list to nothing the moment somebody opened one. */ .users-scroll { max-height: 52vh; min-height: 11rem; overflow-y: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; } /* The header has to survive the scroll, or sorting a long list means scrolling * back to the top to change your mind. Structural, per the sticky-header * guardrail: it stays in flow and carries its own background rather than * being lifted out with z-index and an opaque panel. */ .users-scroll .users-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface, var(--bg)); } .users-th-sortable { cursor: pointer; user-select: none; } .users-th-sortable:hover { color: var(--text); } .users-th-sortable.is-sorted { color: var(--text); } .users-sort-caret { display: inline-block; width: 0.9em; margin-left: 2px; font-size: 0.7em; } .users-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; } .users-table thead th { text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); padding: 4px 10px 6px; border-bottom: 2px solid var(--border); white-space: nowrap; } .users-table thead th.user-col-cb { text-align: center; } .user-row td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; } .user-row.user-disabled { opacity: 0.55; } .user-row:hover td { background: var(--surface); } .user-col-name { font-weight: 600; } .user-col-meta { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; } .user-col-edit { text-align: right; white-space: nowrap; } .user-edit-btn { background: none; border: none; cursor: pointer; font-size: 1.25rem; padding: 2px 6px; color: var(--text-muted); border-radius: 4px; line-height: 1; } .user-edit-btn:hover { color: var(--primary-fg); background: var(--surface); } /* ── User inline edit form ── */ .user-edit-form { padding: 12px 14px; background: var(--surface); } .user-edit-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: end; margin-bottom: 8px; } @media (max-width: 700px) { .user-edit-grid { grid-template-columns: 1fr 1fr; } } /* (Logo drop-zone CSS retired with the /logo/ upload store — branding-graphics-review.) */ /* ── Admin: Domain Editor ── */ /* #1641 — ONE SCROLLER, THE WINDOW'S. Craig's test, 2026-09-26: "The window is not using all the realestate and therefore requires scrolling". This layout was a fixed 540px box scrolling inside the Settings frame, which is itself a fixed 82vh frame whose body scrolls (#1630) — two scrollers, one nested in the other, and dead space under the box on any tall window. Now the editor takes its natural height and the frame's body is the only scroller; the domain list stays pinned beside it and Save Changes stays in view. */ /* #1641 round 3 — TWO SCROLLERS, SIDE BY SIDE. Craig's test, 2026-09-27: "During the scroll the items on the left panel also scrolled, they shoud scroll independantly from the other panel." The sticky list inside the window's one scroller did not hold. So the layout now has a definite height - the space the window's body actually has below the tab strip, MEASURED by _sizeDomainEditor (app.js) because the strip wraps to one, two or three rows - and the list and the editor each scroll inside it, independently. The window's body no longer has anything to scroll on this tab. */ .domain-editor-layout { display: flex; gap: 0; align-items: stretch; border: 1px solid var(--border); border-radius: 6px; min-height: 320px; overflow: hidden; } .domain-list-col { display: flex; flex-direction: column; width: 190px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface); min-height: 0; } .domain-list-pane { flex: 1; min-height: 0; overflow-y: auto; } .domain-edit-pane { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 16px 20px 0; } .domain-edit-pane .de-actions { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 0 14px; background: var(--surface); border-top: 1px solid var(--border); } /* The colour section: the house range beside the domain's own fields, so a pick lands where it is seen; one column when the frame is narrow. */ .de-colour-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 28px; align-items: start; } .pq-swatch[aria-pressed="true"] { outline: 2px solid var(--pq-ink); outline-offset: 2px; } .domain-list-item { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; transition: background .12s; } .domain-list-item:hover { background: var(--bg-hover, #f0f4f8); } .domain-list-item.active { background: var(--primary-ultra-light, #e8f0f8); border-left-color: var(--primary-fg); } .domain-list-name { font-weight: 600; font-size: 0.88rem; margin-bottom: 3px; } .domain-list-meta { display: flex; align-items: center; gap: 6px; } .domain-custom-badge { font-size: 0.68rem; background: light-dark(#d4edda, color-mix(in oklab, #d4edda 14%, var(--pq-surface))); color: light-dark(#155724, color-mix(in oklab, #155724 45%, white)); padding: 1px 5px; border-radius: 3px; font-weight: 600; } /* T-079(3) — "template" indicator for zero-framework domains. Replaces the earlier behaviour of concatenating " Template" onto the brand name, which doubled up to "SUCCESS QMS Template Template" when the brand name itself ended in "Template". */ .domain-template-badge { font-size: 0.68rem; background: light-dark(#fef3c7, color-mix(in oklab, #fef3c7 14%, var(--pq-surface))); color: light-dark(#92400e, color-mix(in oklab, #92400e 45%, white)); padding: 1px 5px; border-radius: 3px; font-weight: 600; border: 1px solid light-dark(#fde68a, color-mix(in oklab, #fde68a 30%, var(--pq-surface))); } .de-section-heading { margin: 0 0 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); } .de-label { font-size: 0.82rem; font-weight: 600; margin: 8px 0 3px; color: var(--text-secondary); } /* #1698 — the Raise-a-finding window: the step as it reads now, and the Suggest button on the suggested-change label's row. Tokens only, so both themes follow. */ .rc-af-current { max-height: 10rem; overflow-y: auto; white-space: pre-wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font-size: var(--font-size-sm); } .rc-af-label-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xs); } .rc-af-label-row .btn-sem { margin-bottom: 3px; } /* ── AI Chat — open button ── */ /* HISTORY, IN THE PAST TENSE. The Chat-with-AI-Inspector button moved into a `.results-actions` toolbar at v3.8.28, alongside Expert/Report/Audit/Edit, and took `.download-btn`'s styling instead of its own `.chat-open-btn`. BOTH OF THOSE CLASSES ARE GONE: P-03 (Craig 2026-06-25) moved every one of those actions into the floating doc palette, and #1440 deleted the empty toolbar and its rules once nothing was left inside it. Chat is a palette tool now and carries the palette's own styling. Kept because it explains where `.chat-open-btn` went, which is otherwise unanswerable. */ /* ── Floating chat window ── */ .chat-float { position: fixed; bottom: 24px; right: 24px; width: 480px; height: 560px; min-width: 320px; min-height: 280px; display: flex; flex-direction: column; color-scheme: light dark; background: Canvas; color: CanvasText; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.22); /* #1902 — above the process map's header (.graph-view-header, 10100) and the canvas floats beneath it; below the top nav (10200) and the modals. At 900 the map header covered this window's own header on the process map, so Pop out, Reset position and Close could not be reached. */ z-index: 10150; resize: both; overflow: hidden; } .chat-float.hidden { display: none; } .chat-float-header { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--primary); color: #fff; border-radius: 9px 9px 0 0; cursor: grab; user-select: none; flex-shrink: 0; } .chat-float-header:active { cursor: grabbing; } .chat-title { font-weight: 600; font-size: 0.88rem; color: #fff; } .chat-header-btn { background: none; border: none; cursor: pointer; font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1; padding: 0 2px; } .chat-header-btn:hover { color: #fff; } .chat-mode-bar { display: flex; gap: 0; padding: 5px 10px; background: light-dark(#f1f5f9, var(--pq-elevated)); border-bottom: 1px solid var(--border); flex-shrink: 0; } .chat-mode-btn { flex: 1; padding: 4px 0; font-size: 0.78rem; font-weight: 500; border: 1px solid light-dark(#cbd5e1, color-mix(in oklab, #cbd5e1 30%, var(--pq-surface))); background: var(--bg-white); color: light-dark(#475569, var(--pq-ink-muted)); cursor: pointer; transition: background 0.15s, color 0.15s; } .chat-mode-btn:first-child { border-radius: 5px 0 0 5px; } .chat-mode-btn:last-child { border-radius: 0 5px 5px 0; border-left: none; } .chat-mode-btn.active { background: var(--primary); color: #fff; border-color: var(--primary-fg); } .chat-mode-btn:not(.active):hover { background: light-dark(#e2e8f0, var(--pq-line)); } .chat-messages { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .chat-msg { display: flex; flex-direction: column; gap: 3px; max-width: 92%; } .chat-msg.user { align-self: flex-end; } .chat-msg.assistant { align-self: flex-start; } .chat-bubble { padding: 8px 12px; border-radius: 10px; font-size: 0.84rem; line-height: 1.55; word-break: break-word; } .chat-msg.user .chat-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 3px; white-space: pre-wrap; } .chat-msg.assistant .chat-bubble { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 3px; } .chat-msg.streaming .chat-bubble { opacity: 0.8; white-space: pre-wrap; } .chat-md { line-height: 1.55; } .chat-md h1, .chat-md h2, .chat-md h3 { margin: 10px 0 4px; font-weight: 700; } .chat-md h1 { font-size: 1rem; } .chat-md h2 { font-size: 0.95rem; } .chat-md h3 { font-size: 0.9rem; } .chat-md code { background: var(--bg); padding: 1px 4px; border-radius: 3px; font-family: monospace; font-size: 0.85em; } /* Markdown rendering inside assistant bubbles */ .chat-bubble p { margin: 0 0 8px; } .chat-bubble p:last-child { margin-bottom: 0; } .chat-bubble ul, .chat-bubble ol { margin: 4px 0 8px 18px; } .chat-bubble li { margin-bottom: 3px; } .chat-bubble strong { font-weight: 700; } .chat-bubble em { font-style: italic; } /* Markdown tables */ .chat-bubble table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin: 8px 0; } .chat-bubble th, .qe-bubble-asst th { /* #2085 — one table header for both chats */ background: var(--primary-pale); padding: 5px 8px; text-align: left; font-weight: 600; border: 1px solid var(--border); } .chat-bubble td { padding: 4px 8px; border: 1px solid var(--border); vertical-align: top; } .chat-bubble tr:nth-child(even) td { background: var(--bg); } /* Suggested change card */ .chat-change-card { margin: 8px 0 2px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 0.81rem; background: Canvas; } .chat-change-card.applied { border-color: #276749; background: light-dark(#f0fff4, var(--pq-elevated)); } .chat-change-label { padding: 5px 10px; background: var(--gap-bg); font-weight: 600; font-size: 0.78rem; color: var(--gap-text); border-bottom: 1px solid var(--border); } .chat-change-card.applied .chat-change-label { background: light-dark(#c6f6d5, color-mix(in oklab, #c6f6d5 14%, var(--pq-surface))); color: light-dark(#276749, color-mix(in oklab, #276749 45%, white)); } .chat-change-original { padding: 6px 10px; background: light-dark(#fff5f5, var(--pq-elevated)); border-bottom: 1px solid var(--border); color: var(--conflict-text); font-family: monospace; font-size: 0.79rem; white-space: pre-wrap; } .chat-change-replacement { padding: 6px 10px; background: light-dark(#f0fff4, var(--pq-elevated)); border-bottom: 1px solid var(--border); color: light-dark(#276749, color-mix(in oklab, #276749 45%, white)); font-family: monospace; font-size: 0.79rem; white-space: pre-wrap; } .chat-change-rationale { padding: 5px 10px; color: var(--text-muted); font-size: 0.77rem; border-bottom: 1px solid var(--border); } .chat-change-actions { padding: 6px 10px; display: flex; gap: 8px; } .chat-apply-btn { padding: 4px 12px; background: #276749; color: #fff; border: none; border-radius: 5px; font-size: 0.78rem; cursor: pointer; font-weight: 600; } .chat-apply-btn:hover { background: #1d4e35; } .chat-apply-btn:disabled { opacity: 0.5; cursor: default; } .chat-applied-badge { padding: 4px 10px; background: light-dark(#c6f6d5, color-mix(in oklab, #c6f6d5 14%, var(--pq-surface))); color: light-dark(#276749, color-mix(in oklab, #276749 45%, white)); border-radius: 5px; font-size: 0.78rem; font-weight: 600; } .chat-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--bg); flex-shrink: 0; } .chat-input { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 0.84rem; font-family: inherit; background: Canvas; color: CanvasText; line-height: 1.4; } .chat-input:focus { outline: none; border-color: var(--primary-fg); } .chat-send-btn { padding: 0 14px; background: var(--primary); color: #fff; border: none; border-radius: 6px; font-size: 1.1rem; cursor: pointer; align-self: flex-end; height: 36px; flex-shrink: 0; } .chat-send-btn:hover { background: var(--primary-dark, #1a5276); } .chat-send-btn:disabled { opacity: 0.4; cursor: default; } /* T-074(14) — Multi-paragraph insertion renders as one continuous highlight. docx-preview emits Word's track-changes runs as elements. When a paragraph_plus_list / paragraph_range finding inserts N consecutive paragraphs, each becomes its own

...

block — visually reading as N separated green blocks with paragraph-margin gaps between them. Collapse the margin between adjacent insertion paragraphs so the reader sees one continuous block of inserted content. */ .doc-body.docx-render .docx-wrapper p:has(ins) { margin-top: 6px; margin-bottom: 6px; } .doc-body.docx-render .docx-wrapper p:has(ins) + p:has(ins) { margin-top: 0; } /* (BURNED — B-115 WP3, v4.1.279) the v3.12.35 docx-render .hl block-level promotion rules lived here — unreachable since the overlay burn (no producer for either 'docx-render' or 'hl' classes). */ /* ── SOP Builder ─────────────────────────────────────────────────────────── */ .sop-field { margin-bottom: 10px; } .sop-field textarea, .sop-field input[type="text"] { width: 100%; border: 1px solid var(--border); border-radius: 5px; padding: 7px 10px; font-size: 0.84rem; font-family: inherit; background: Canvas; color: CanvasText; resize: vertical; line-height: 1.4; } .sop-field textarea:focus, .sop-field input[type="text"]:focus { outline: none; border-color: var(--primary-fg); } /* ── SOP Document Preview ────────────────────────────────────────────────── */ .sop-doc-step-text { color: light-dark(#222, var(--pq-ink)); } /* ── SCR-004/008: Procedure table ───────────────────────────────────────── */ .sop-proc-step-text { vertical-align: top; } /* ── Admin panel persona-model dropdown (T-046 / v3.12.4) ── Override the OS-native option styling so the open dropdown panel matches the closed select's font size. Without this, browsers fall back to a platform-default font that's visibly larger than 0.85rem and causes long model labels (e.g. "Google Gemini 2.5 Flash-Lite") to truncate inside the popup. */ .admin-persona-model-select { font-size: 0.85rem; font-family: inherit; } .admin-persona-model-select option { font-size: 0.85rem; font-family: inherit; } /* ── Admin panel tabs (T-060: file-tab style with two-row support + sticky) ── */ .admin-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--text-muted); /* #1756 — a token, not a literal grey */ margin: 0 -24px 18px; padding: 6px 24px 0; align-items: flex-end; position: sticky; top: 0; background: var(--surface, #fff); z-index: 5; } .admin-tab { flex: 0 0 auto; min-width: 0; text-align: center; padding: 7px 14px 8px; --admin-tab-line: var(--border); border: 1.5px solid var(--admin-tab-line); border-bottom: none; background: var(--bg, #f5f5f7); font-size: 0.82rem; font-weight: 500; color: var(--text-muted); cursor: grab; border-radius: 8px 8px 0 0; margin-bottom: 0; position: relative; transition: color 0.15s, background 0.15s, border-color 0.15s; white-space: nowrap; margin-left: -2px; z-index: 1; } .admin-tab:hover { color: var(--primary-fg); background: var(--hover-bg); border-color: var(--primary-fg); } .admin-tab.active { color: var(--primary-fg); background: var(--bg-white, #fff); border: 2px solid var(--primary-fg); border-bottom: 2px solid var(--bg-white, #fff); font-weight: 700; z-index: 3; margin-bottom: -2px; cursor: default; /* already selected (was a second rule for this selector) */ } .admin-tab:first-child { margin-left: 0; } /* #1756 — the row-based "front tab" and "tab behind" rules (#1547) are BURNED with the rows themselves: Settings is a navigation rail now (below), so no tab hangs and there is no row to put a tab in front of. The file-tab look above stays for the strips inside a Settings page (External Data's document lists). */ /* Being dragged: lifted, translucent, and above everything so it reads as the thing under the pointer rather than as a tab that has changed state. */ .admin-tab.is-dragging { opacity: 0.55; z-index: 9; cursor: grabbing; } /* Respect a reduced-motion preference: the tab strip has a colour transition and a drag; the transition is the part that can be turned off without losing meaning. */ /* end #406 tab strip */ .admin-tab-danger { color: var(--danger); } .admin-tab-danger:hover { color: var(--danger); background: var(--hover-bg); } .admin-tab-danger.active { color: var(--danger); background: var(--surface, #fff); border-color: var(--danger); border-bottom-color: var(--surface, #fff); } /* ── #1756 — SETTINGS IS A NAVIGATION RAIL, NOT A WRAPPING TAB STRIP ────────── Craig 2026-09-27: "Get a proper UI design on the tabs so they look much more modern and professional - check what other systems do". With 25 sections the file-tab strip wrapped to three rows, and a wrapped row of file tabs always leaves some tabs resting on nothing — no treatment of the rows fixes that (A, B and C all tried). What mature products do at this count: macOS System Settings, Windows Settings, VS Code, GitHub, Stripe, Linear and Notion all put the sections in a vertical list on the left and the page on the right; Office and browsers keep tabs only because they have few. So: a rail. It never wraps, so nothing can hang, and the section in front is simply the highlighted row. Same buttons, ids, order and drag-to-rearrange (#406) — only the layout moves. Theme tokens only, so light, dark and high-contrast all follow the system. */ #admin-modal .modal-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); padding: 0; min-height: 0; overflow: hidden; /* the rail and the page each scroll on their own */ } #admin-modal #admin-tabs { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; margin: 0; padding: 12px 10px; border-bottom: 0; border-right: 1px solid var(--border); /* A slightly shaded panel in BOTH schemes (measured on v4.3.1273: --surface-2 resolves to the page's own white, so the rail was not shaded at all). Mixed from tokens that flip with prefers-color-scheme, never a fixed tint. */ background: color-mix(in oklab, var(--pq-ink) 4%, var(--pq-surface)); position: static; overflow-y: auto; min-height: 0; } #admin-modal .admin-content { min-height: 0; overflow-y: auto; overflow-x: hidden; /* the page never scrolls sideways ... */ padding: 16px 24px 24px; } /* ... a section whose content is wider than the page scrolls within itself (#1756: AI Models ran 21px over, measured on v4.3.1273, scrolling the whole page sideways). Contained per section, so the rest of the page stays put. */ #admin-modal .admin-content .opt-section { min-width: 0; overflow-x: auto; } #admin-modal .admin-tab { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-weight: 500; text-align: left; white-space: normal; line-height: 1.25; } #admin-modal .admin-tab .ic { flex: 0 0 auto; color: var(--text-muted); } /* #1756 — hover and the active fill are MIXED from tokens that flip. --hover-bg and --accent-soft are a fixed pale blue in both schemes, which painted a near-white patch with pale text on the dark window (measured on v4.3.1273). */ #admin-modal .admin-tab:hover { background: color-mix(in oklab, var(--pq-ink) 8%, var(--pq-surface)); color: var(--text); } #admin-modal .admin-tab.active { background: color-mix(in oklab, var(--pq-accent-2) 16%, var(--pq-surface)); color: var(--primary-fg); font-weight: 600; box-shadow: inset 3px 0 0 var(--primary-fg); /* the marker bar, as in the tools above */ border: 0; margin: 0; } #admin-modal .admin-tab.active .ic { color: var(--primary-fg); } #admin-modal .admin-tab:focus-visible { outline: 2px solid var(--primary-fg); outline-offset: -2px; } #admin-modal .admin-tab-danger, #admin-modal .admin-tab-danger .ic { color: var(--danger); } #admin-modal .admin-tab-danger.active { box-shadow: inset 3px 0 0 var(--danger); } @media (prefers-contrast: more) { #admin-modal .admin-tab.active { outline: 2px solid var(--primary-fg); outline-offset: -2px; } } /* ── Audit log table ── */ /* v3.9.41 — Fixed-layout column widths so the 8-column table stays inside the modal regardless of content. Earlier `width: max-content` let event names like `data.sensitive_read` and long Target/Detail strings push the table wider than the container, which surfaced as a horizontal scroll bar after T-091 added the in-`` filter row. Percentages adapt to whatever modal width is available; long content wraps on word boundaries inside its column. */ .audit-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.78rem; } /* v3.12.18 — Event column widened from 13% → 16% to fit long event names like `billing.tokens.expert_review.inspector` without overflowing into Category. Other Details slimmed 19% → 16% to compensate. Event cell uses `overflow-wrap: anywhere` so dots in dotted names act as wrap points. */ /* #720 — column 1 was the ONLY one of the eight with no wrap rule, and the Time cell also carried an inline `white-space:nowrap`. In a `table-layout: fixed` table an unwrappable 19-character timestamp cannot shrink, so it ran under the Event name. The 2% comes back off column 6 so the eight widths still sum to exactly 100 — and the width MUST be set here rather than on a cell, because the header and body are two separate elements kept in column alignment SOLELY by these nth-child rules. */ .audit-table th:nth-child(1), .audit-table td:nth-child(1) { width: 14%; word-break: break-word; } /* Time */ .audit-table th:nth-child(2), .audit-table td:nth-child(2) { width: 16%; overflow-wrap: anywhere; word-break: break-word; } /* Event */ .audit-table th:nth-child(3), .audit-table td:nth-child(3) { width: 8%; word-break: break-word; } /* Category */ .audit-table th:nth-child(4), .audit-table td:nth-child(4) { width: 9%; word-break: break-word; } /* Severity */ .audit-table th:nth-child(5), .audit-table td:nth-child(5) { width: 11%; word-break: break-word; } /* Actor */ .audit-table th:nth-child(6), .audit-table td:nth-child(6) { width: 17%; word-break: break-word; } /* Target / Detail */ .audit-table th:nth-child(7), .audit-table td:nth-child(7) { width: 16%; word-break: break-word; } /* Other Details */ .audit-table th:nth-child(8), .audit-table td:nth-child(8) { width: 9%; word-break: break-word; } /* Outcome */ /* #1756 — Severity and Outcome take 2% each from Target / Detail, still summing to 100, so their headers fit (see `.audit-table th` below). */ /* #2413 — Time takes 1% more from Target / Detail (13 -> 14, 18 -> 17), still summing to 100, so its time half ("03:34:08 PM") fits on its own line. */ /* #1756 — the events list fills the fixed Settings window instead of sitting in a 320px box with ~250px empty below it (measured on v4.3.1273). */ #admin-modal .admin-content:has(> #admin-tab-panel-audit:not(.hidden)) { display: flex; flex-direction: column; } #admin-tab-panel-audit:not(.hidden) { flex: 1 0 auto; display: flex; flex-direction: column; } #admin-tab-panel-audit > .opt-section { flex: 1 0 auto; display: flex; flex-direction: column; } #admin-tab-panel-audit #audit-log-table { flex: 1 1 320px; min-height: 320px; } /* T-074(17) v3.12.18 — header table sits OUTSIDE the body's scroll container so body rows physically cannot scroll into the header band. No sticky positioning, no opaque background workaround — clean structural separation. Per Craig: "Simply have the top of the scrolling list be below the header row, so it never scrolls that high." Backgrounds inherit from the surrounding panel so the original colour scheme reads correctly. */ .audit-table th { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--border); font-weight: 600; } /* #1756 — a HEADER never breaks inside a word ('Severit / y', 'Outcom / e', measured on v4.3.1273 once the rail narrowed the page). Same specificity as the per-column rules above and declared after them, so it overrides their word-break for headers only; body cells keep wrapping. */ .audit-table th:nth-child(n) { word-break: normal; overflow-wrap: normal; } /* Body table: bottom rule under each row, no extra column-header styling. */ .audit-table td { padding: 4px 8px; border-bottom: 1px solid var(--border-subtle, #eee); vertical-align: top; } .audit-table tr:hover td { background: var(--hover-bg); } /* #2106 — one class per TONE of audit_log.AUDIT_OUTCOMES: success = ok; warning and refused = warn (a refusal is a warning, not a failure); failure = bad; running = neutral. light-dark() follows the reader's scheme. */ .audit-outcome-ok { color: light-dark(#276749, color-mix(in oklab, #276749 45%, white)); font-weight: 600; } .audit-outcome-bad { color: light-dark(#c53030, color-mix(in oklab, #c53030 45%, white)); font-weight: 600; } .audit-outcome-warn { color: light-dark(#975a16, color-mix(in oklab, #975a16 45%, white)); font-weight: 600; } .audit-outcome-neutral { color: light-dark(#4a5568, var(--pq-ink-muted)); font-weight: 600; } .audit-security-event { color: light-dark(#b7620a, color-mix(in oklab, #b7620a 45%, white)); font-weight: 700; } .audit-table tr.audit-security-row td { background: light-dark(#fff8f0, var(--pq-elevated)); } .audit-table tr.audit-security-row:hover td { background: light-dark(#feebd4, color-mix(in oklab, #feebd4 14%, var(--pq-surface))); } /* v3.7 audit-rebuild — severity pills */ .audit-sev-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.70rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.4; } .audit-sev-info { background: light-dark(#e3f0fb, color-mix(in oklab, #e3f0fb 14%, var(--pq-surface))); color: light-dark(#1c6ec0, var(--pq-accent)); } .audit-sev-warn { background: light-dark(#fff3cd, color-mix(in oklab, #fff3cd 14%, var(--pq-surface))); color: light-dark(#946100, color-mix(in oklab, #946100 45%, white)); } .audit-sev-security { background: light-dark(#fde2d8, color-mix(in oklab, #fde2d8 14%, var(--pq-surface))); color: light-dark(#b7400a, color-mix(in oklab, #b7400a 45%, white)); } .audit-sev-critical { background: light-dark(#fcd7d4, color-mix(in oklab, #fcd7d4 14%, var(--pq-surface))); color: light-dark(#a01818, color-mix(in oklab, #a01818 45%, white)); font-weight: 700; } /* Clipped audit cell; its full value is shown by the shared RCTip element. */ .audit-td-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; cursor: default; } /* #1444 — the cell tooltip's `::after` is DELETED. It drew `content: attr(data-tip)` with its own colours, delay and max-width — a THIRD tooltip implementation beside RCTip and the palette's (which #1443 retired). These cells now carry `data-rc-tip` and RCTip draws them, so the app has one tooltip and one set of styling for it. The `.audit-td-clip` rule above stays: the ellipsis clipping is what makes a tooltip necessary here and is a different concern from drawing one. */ /* T-039: row-level double-click affordance. The multi-line row summary now uses the shared RCTip element via data-rc-tip, so it can wrap and escape this scroll container. */ tr.audit-row-clickable { position: relative; cursor: default; } /* #1444 — the row tooltip's `::after` is DELETED, and it carried a live defect worth recording. The selector `tr.audit-row-clickable[data-tip]:hover::after` was declared TWICE: once with `opacity: 0` plus `transition: opacity 0.15s 0.6s`, and again immediately below with `opacity: 1`. Same selector, same specificity, so the later one won. The cell tooltip's pattern that this was copied from works because its BASE rule is not `:hover` — the pseudo-element exists at opacity 0 and transitions in. Here both rules were `:hover`, so the pseudo-element came into existence already opaque and THE 0.6s DELAY NEVER HAPPENED. That delay was the whole mechanism: the comment above said the row tooltip "appears on row hover with a longer delay so it doesn't fight cell tooltips". It was fighting them from the first frame. RCTip replaces the delay hack with a structural answer — it walks UP from the hovered element and takes the NEAREST tooltip, so a clipped cell shows its own and only an untipped cell falls through to the row summary. Two tooltips can no longer be on screen at once, by construction rather than by timing. */ tr.audit-row-clickable:hover { background: var(--hover-bg); } .audit-detail-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle, #eee); font-size: 0.85rem; } .audit-detail-row:last-child { border-bottom: none; } .audit-detail-label { color: var(--text-muted, #6b7280); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .audit-detail-value { word-break: break-word; } .audit-detail-code { background: light-dark(#f7fafc, var(--pq-elevated)); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; margin: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.75rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; } /* ════════════════════════════════════════════════════════════════════════════ QMS Access Panel ════════════════════════════════════════════════════════════════════════════ */ /* Layout, rail, toolbar and buttons: see "#1938 · OPTION 1 REVISED" below. */ .qma-empty { color: var(--text-muted, #718096); font-size: 0.9rem; padding: 40px 0; text-align: center; } /* #726/#648 (2026-08-17) — THE ACTIONS COLUMN IS GONE (Craig: "just using * speace and untidy"); git holds its CSS. The table itself is styled in the * "#1938 · OPTION 1 REVISED" block below. */ /* Type badges — #1938: quiet and neutral, as the artboard draws them (calm colour throughout); the level classes stay so a level can be styled again. */ .qma-level-badge { display: inline-block; padding: 3px 6px; border-radius: 4px; font: 500 11px/1 var(--mono); color: var(--text-muted); border: 1px solid var(--border); background: transparent; } /* Status — #1938: soft pills. Effective green, Draft neutral, review due amber, warning red; each a pair defined for light and dark. */ .qma-status-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; } .qma-status-draft { background: var(--pq-soft); color: var(--text-muted); border: 1px solid var(--border); } .qma-status-review { background: light-dark(#f6ecd9, #3a2f1a); color: light-dark(#8a5a0b, #e7c27d); } .qma-status-live { background: light-dark(#e6f1ea, #1f3328); color: light-dark(#2d6b45, #8fd0a8); } .qma-status-warn { background: light-dark(#f8e5e2, #3a1d1d); color: light-dark(#9a2f22, #f2a99e); } .qma-status-inactive { background: var(--pq-soft); color: var(--text-muted); } /* Detail drawer */ .qma-detail-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 520px; background: var(--bg-white); border-left: 2px solid var(--primary, #1a365d); display: flex; flex-direction: column; box-shadow: -4px 0 18px rgba(0,0,0,0.1); z-index: 10; } /* Form */ .qma-form-group { display: flex; flex-direction: column; gap: 3px; } .qma-form-group label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted, #555); } .qma-input { padding: 6px 8px; border: 1px solid var(--border, #ccc); border-radius: 4px; font-size: 0.83rem; font-family: inherit; background: var(--bg-white); width: 100%; box-sizing: border-box; } .qma-input:focus { outline: 2px solid var(--primary, #1a365d); border-color: transparent; } .qma-ta { resize: vertical; min-height: 56px; } /* Uniform action buttons (Craig 2026-05-22): same padding + a shared min-width so the row reads as one consistent set regardless of label length (Metadata / Edit / Save / Delete), instead of each button hugging its text. */ .qma-detail-error { color: light-dark(#c53030, color-mix(in oklab, #c53030 45%, white)); font-size: 0.82rem; margin-top: 8px; padding: 6px 10px; background: light-dark(#fff5f5, var(--pq-elevated)); border-radius: 4px; border: 1px solid #fc8181; } /* Relationships */ .qma-rel-add { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border, #eee); margin-bottom: 12px; } .qma-rel-list, .qma-rev-list { display: flex; flex-direction: column; gap: 6px; } .qma-rel-empty { color: var(--text-muted, #718096); font-size: 0.82rem; padding: 12px 0; } .qma-rel-item { display: flex; align-items: flex-start; justify-content: space-between; padding: 8px 10px; background: var(--pq-soft); border-radius: 5px; font-size: 0.82rem; gap: 8px; } .qma-rel-info { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .qma-rel-direction { font-weight: 700; color: var(--primary-ink, #1a365d); } .qma-rel-type { font-weight: 600; background: light-dark(#dbeafe, color-mix(in oklab, #dbeafe 14%, var(--pq-surface))); color: light-dark(#1e40af, var(--pq-accent)); padding: 1px 5px; border-radius: 3px; font-size: 0.74rem; } .qma-rel-target { color: var(--text); } .qma-rel-rationale { color: var(--text-muted, #718096); font-style: italic; } .qma-rel-delete { background: none; border: none; color: var(--text-muted, #999); cursor: pointer; font-size: 0.85rem; flex-shrink: 0; } .qma-rel-delete:hover { color: #e53e3e; } /* Reviews */ .qma-rev-item { padding: 10px 12px; background: light-dark(#f9fafb, var(--pq-elevated)); border-radius: 5px; border-left: 3px solid var(--primary, #1a365d); font-size: 0.82rem; margin-bottom: 6px; } .qma-rev-header { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; } .qma-rev-trigger { font-weight: 600; color: var(--primary-ink, #1a365d); } .qma-rev-status { padding: 2px 7px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; background: light-dark(#e5e7eb, var(--pq-line)); color: light-dark(#374151, var(--pq-ink)); } .qma-rev-date { color: var(--text-muted, #718096); margin-left: auto; font-size: 0.78rem; } .qma-rev-notes { color: var(--text-muted, #555); margin-bottom: 4px; } .qma-rev-conclusion { font-size: 0.8rem; } .qma-rev-actions { display: flex; gap: 8px; margin-top: 6px; } /* Tool panels */ .qma-tool-panel { flex: 1; overflow-y: auto; padding: 18px; } .qma-tool-header { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 700; color: var(--primary-ink, #1a365d); margin-bottom: 16px; } /* Integrity */ .qma-int-ok { color: light-dark(#276749, color-mix(in oklab, #276749 45%, white)); font-weight: 600; font-size: 0.9rem; padding: 12px; background: light-dark(#f0fff4, var(--pq-elevated)); border-radius: 5px; } .qma-int-summary { font-size: 0.85rem; color: var(--text-muted, #555); margin-bottom: 12px; } .qma-int-issue { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 5px; font-size: 0.83rem; margin-bottom: 6px; } .qma-int-error { background: light-dark(#fff5f5, var(--pq-elevated)); border-left: 4px solid #e53e3e; } .qma-int-warning { background: light-dark(#fffbeb, color-mix(in oklab, #fffbeb 14%, var(--pq-surface))); border-left: 4px solid #d69e2e; } .qma-int-badge { font-weight: 700; font-size: 0.72rem; min-width: 52px; } .qma-int-code { font-family: monospace; color: var(--text-muted, #666); font-size: 0.78rem; } /* Import drop zone */ .qma-import-label { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .qma-import-banner { padding: 8px 16px; background: light-dark(#ebf8ff, color-mix(in oklab, #ebf8ff 14%, var(--pq-surface))); border-bottom: 1px solid light-dark(#bee3f8, color-mix(in oklab, #bee3f8 30%, var(--pq-surface))); font-size: 0.82rem; color: light-dark(#2b6cb0, var(--pq-accent)); } .qma-import-banner.hidden { display: none; } /* #1590 — `.qma-ctx-note` REMOVED, with its dark-theme partner further down this file. It was #725's block explanation of why menu entries are greyed; Craig ruled the block-level caution panel out three times (#1294, #1277, #1590) and the reason it carried is already on each disabled row's own `title=`. Do not reintroduce a rule pairing `--btn-caution-bg` with explanatory prose on a block element. */ /* ── #1577 — the library's folder hierarchy (QMS-DS-001 §4.26) ─────────────── */ /* #1922 — THE ONE TREE (Folders and Structure), the Finder list view. The indent is the WIDTH of its own element in the row's first cell, driven by the depth the element carries: arbitrary depth (§4.26.1) rules out a class per level, and it must not be cell padding — ui_theme.css's compact-density rule (`:root:not([data-dens="comfortable"]) .qma-table td`, specificity 0,3,1) resets every cell's padding and silently erased the #1577 indent. A faint guide line per level marks where a folder's contents end in a wide table. */ .qma-tree-indent { display: inline-block; width: calc(var(--qma-depth, 0) * 18px); height: 1.4em; vertical-align: middle; background-image: repeating-linear-gradient(to right, transparent 0 8px, var(--border, #e5e7eb) 8px 9px, transparent 9px 18px); } .qma-tree-caret { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-muted, #6b7280); cursor: pointer; vertical-align: middle; } .qma-tree-caret:hover, .qma-tree-caret:focus-visible { color: var(--text, #111827); background: var(--bg-subtle, #f4f5f7); } .qma-tree-caret.is-spacer { cursor: default; background: none; } .qma-cell-number, .qma-tree-cell { white-space: nowrap; } /* #1938 — the Folders view's folder rows are gone with the view; the folders are the rail (.qms-rail-folder). */ /* The drop target under the pointer while a document or folder is dragged. */ .qma-row.is-drop-target > td { background: var(--primary-pale, #f0f7ff); box-shadow: inset 0 0 0 2px var(--primary-ink, #1d4ed8); } /* #2119 — the small picture under the pointer while dragging (setDragImage): an icon and the number, so the folder or group being dropped on stays visible. It must be RENDERED for the browser to snapshot it, so it is parked off-screen rather than hidden. */ .qma-drag-ghost { position: fixed; top: -1000px; left: -1000px; display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 4px 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; pointer-events: none; } .qma-drag-ghost .ic { width: 14px; height: 14px; flex: none; } .qma-row[draggable="true"] { cursor: grab; } /* The folder picker (#folder-pick-modal): the same tree, one button per folder. */ .qma-pick-folder { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .qma-pick-folder:hover, .qma-pick-folder:focus-visible { border-color: var(--border, #e5e7eb); } .qma-pick-folder[aria-selected="true"] { background: var(--primary-pale, #f0f7ff); border-color: var(--primary-ink, #1d4ed8); } .qma-pick-folder.is-current { color: var(--text-muted, #6b7280); cursor: default; } .qma-pick-here { font-size: 0.78rem; } .qma-folder-count { min-width: 1.5rem; padding: 0 6px; border-radius: 999px; background: var(--border, #e5e7eb); color: var(--text-muted, #6b7280); font-size: 0.72rem; text-align: center; } .qma-icon-btn { padding: 3px 5px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text-muted, #6b7280); cursor: pointer; } .qma-icon-btn:hover { border-color: var(--border, #e5e7eb); color: var(--text, #111827); } .qma-icon-btn.danger:hover { border-color: var(--danger, #b91c1c); color: var(--danger, #b91c1c); } /* ── #112 — the Structure view, Used by and the links panel (QMS-DS-001 §4.28) ── */ /* Colours are theme TOKENS only, so dark mode and the per-person palettes need no second rule here. The indent is the folder hierarchy's own declaration above. */ .qma-row.qma-struct-selected > td { background: var(--primary-pale); } .qma-row.qma-struct-selected > td:first-child { box-shadow: inset 3px 0 0 var(--primary-ink); } .qma-struct-band > td { background: var(--pq-soft); font-size: 13px; font-weight: 600; } .qma-struct-band-note { color: var(--text-muted); font-size: 0.78rem; margin-left: 8px; } .qma-struct-note > td { color: var(--text-muted); font-size: 0.82rem; } /* Craig 2026-10-07: "the cols are still not showing properly, running off the page to the right. The space given for the version is many times what is required." Measured (v4.3.1601): a full-width note row ("504.1_Ad Hoc Data Request Form — not in the library yet ...") inherited .qma-tree-cell's nowrap, held the table at 1,421 px against a 994-1,130 px pane, and auto layout shared the excess across every column. Full-width rows wrap; the short columns take their content width, and the slack goes to Document. */ .qma-table .qma-struct-note > td, .qma-table .qma-struct-band > td { white-space: normal; } .qma-table th:is([data-col="number"], [data-col="type"], [data-col="status"], [data-col="version"], [data-col="effective"], [data-col="groups"], [data-col="usedby"]) { width: 1%; } /* The heading filters and the Analysis cell no longer set their column's floor: a filter is as wide as its column (Level's options made Type 155 px for a 120 px badge), and "Not analysed / no process" may take two lines. */ .qma-table thead .qma-th-filter { width: 100%; min-width: 0; box-sizing: border-box; } .qma-table td[data-col="analysis"] { white-space: normal; } .qma-struct-dashed { display: inline-block; padding: 1px 8px; border: 1px dashed var(--border); border-radius: 6px; } .qma-struct-clause { font-family: monospace; font-size: 0.75rem; color: var(--text-muted); } .qma-usedby-btn, .qma-link-btn { padding: 1px 6px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--primary-ink); font: inherit; font-size: 0.82rem; cursor: pointer; } .qma-usedby-btn:hover, .qma-link-btn:hover { border-color: var(--border); } .qma-usedby-btn.is-none { color: var(--text-muted); } .qma-struct-panel { position: fixed; top: 96px; right: 16px; bottom: 16px; width: min(380px, 92vw); overflow: auto; padding: 12px 14px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 22px rgba(0,0,0,0.14); z-index: var(--z-sticky); } .qma-struct-panel-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .qma-struct-panel h4 { margin: 14px 0 4px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .qma-struct-panel ul { margin: 0; padding-left: 16px; } .qma-struct-state, .qma-struct-muted { color: var(--text-muted); font-size: 0.75rem; } .qma-struct-applies { margin: 2px 0 6px; font-size: 0.78rem; color: var(--text-muted); } @media (prefers-reduced-motion: no-preference) { .qma-struct-panel { transition: opacity .12s; } } /* ── T-170 — parent-child version-aware rows ───────────────────────────────── */ /* Child (in-progress Draft) + history rows are visually subordinate to their parent: a hairline left rail, a softened background, and an indented title. */ .qma-row-child > td, .qma-row-history > td { background: var(--pq-soft); /* #1938 — neutral; the light blue is selection only */ border-top: 0; } .qma-cell-indent { padding-left: 22px !important; } .qma-child-rail { color: var(--text-muted, #9ca3af); font-family: monospace; margin-right: 4px; } .qma-child-tag { font-weight: 600; font-size: 0.78rem; color: var(--primary-ink, #1a365d); } .qma-hist-tag { font-weight: 500; font-size: 0.78rem; color: var(--text-muted, #6b7280); font-style: italic; } /* The collapsible history header row (the "N earlier versions" toggle). */ .qma-row-history-toggle > td { background: transparent; } .qma-hist-toggle-label { padding-left: 22px !important; color: var(--text-muted, #6b7280); font-size: 0.78rem; font-weight: 500; cursor: pointer; user-select: none; } .qma-hist-toggle-label:hover { color: var(--primary-ink, #1a365d); } .qma-hist-caret { display: inline-block; vertical-align: -2px; margin-right: 4px; } .qma-hist-caret .ic { width: 13px; height: 13px; } /* ── T-170 — QMS list Settings menu ────────────────────────────────────────── */ .qma-settings-wrap { position: relative; display: inline-block; } .qma-settings-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 260px; background: var(--bg-white); border: 1px solid var(--border, #d1d5db); border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,0.14); padding: 8px; z-index: 30; } .qma-settings-menu-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #6b7280); padding: 4px 8px 6px; } .qma-settings-menu-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 5px; font-size: 0.82rem; cursor: pointer; } .qma-settings-menu-item:hover { background: var(--hover-bg); } .qma-settings-menu-item input[type="checkbox"] { margin: 0; cursor: pointer; } @media (prefers-color-scheme: dark) { /* #1590 — `.qma-ctx-note`'s dark border rule removed with the class itself. */ /* #1577 — only the two surfaces that name a literal need a dark value; the rest of the folder rules already read their colours from tokens that the theme block redefines. One definition, no second palette to drift. */ .qma-folder-count { background: var(--border, #374151); color: var(--fg, #d1d5db); } .qma-row-child > td, .qma-row-history > td { background: rgba(255,255,255,0.03); } .qma-child-tag { color: var(--primary-fg); } /* B-230 — was --primary-light: a mid-tone navy, invisible on the dark surface */ .qma-settings-menu { background: var(--surface, #1f2937); border-color: var(--border, #374151); } .qma-settings-menu-item:hover { background: rgba(255,255,255,0.06); } } /* Document taxonomy popup (from graph right-click) */ .qma-doc-tax-popup { position: fixed; top: 80px; right: 20px; background: var(--bg-white); border: 1px solid var(--border, #ddd); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.18); z-index: 9998; width: 360px; max-height: 60vh; display: flex; flex-direction: column; } .qma-doc-tax-popup.hidden { display: none; } .qma-doc-tax-popup-hdr { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--primary, #1a3a5c); color: #fff; font-weight: 600; font-size: 0.88rem; border-radius: 8px 8px 0 0; flex-shrink: 0; } .qma-doc-tax-popup-body { padding: 16px; overflow-y: auto; flex: 1; } .qma-doc-tax-popup-section { margin-bottom: 14px; } .qma-doc-tax-popup-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary-ink, #1a3a5c); margin-bottom: 6px; } .qma-doc-tax-popup-chips { display: flex; flex-wrap: wrap; gap: 5px; } .qma-doc-tax-popup-chip { background: var(--primary-pale, #eef3f9); border: 1px solid light-dark(#b8cfe8, color-mix(in oklab, #b8cfe8 30%, var(--pq-surface))); color: var(--primary-ink, #1a3a5c); border-radius: 10px; padding: 2px 9px; font-size: 0.78rem; } .qma-doc-tax-popup-empty { font-size: 0.8rem; color: var(--text-muted); font-style: italic; } /* Graph view */ .qma-graph-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 18px; } .qma-graph-panel.hidden { display: none; } .qma-graph-controls { display: flex; gap: 8px; margin-left: auto; } .qma-graph-body { flex: 1; display: flex; gap: 12px; overflow: hidden; min-height: 0; } #qma-graph-canvas { flex: 1; border: 1px solid var(--border, #ddd); border-radius: 6px; background: light-dark(#fafafa, var(--pq-elevated)); min-height: 400px; } .qma-graph-legend { width: 160px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; font-size: 0.78rem; } .qma-legend-title { font-weight: 700; font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted, #666); margin-bottom: 6px; letter-spacing: 0.04em; } .qma-legend-item { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--text, #333); } .qma-legend-node { display: inline-block; width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; } .qma-legend-edge { display: inline-block; width: 22px; height: 3px; border-radius: 2px; flex-shrink: 0; } /* Taxonomy — chip-based UI */ .qma-tax-rebuild-btn { font-size: 0.78rem; margin-left: auto; } .qma-tax-section { margin-bottom: 20px; } /* #770 — a tag the organisation has not yet agreed. A WARNING, not an error: the tag is correct (the document says it), it simply does not filter yet. Uses the palette's OWN warning pair, `--gap-bg` / `--gap-text` — the same two `.rc-tell-warn` uses for a refusal, which is the identical semantic. I had invented `--warn-fg`/`--warn-bg`/`--warn-border`, which are declared nowhere; a var() with no definition is invalid at computed-value time and the declaration is dropped. The palette contract test caught it. Using declared tokens also deletes the bespoke dark-mode blocks — they theme themselves. */ .rc-mw-provisional { color: var(--gap-text); } /* ── #770 · the org taxonomy governance inbox ────────────────────────────── Pending vocabulary decisions, above the settled vocabulary, because a decision waiting is what needs attention and the agreed set is reference. */ .qma-tax-inbox { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--gap-text); border-left-width: 4px; border-radius: 6px; background: var(--gap-bg); } .qma-tax-inbox-hdr { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--gap-text); margin-bottom: 4px; } .qma-tax-inbox-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-top: 1px solid var(--border, #e3e8ee); } .qma-tax-inbox-row:first-of-type { border-top: 0; } .qma-tax-inbox-term { display: flex; align-items: center; gap: 6px; } .qma-tax-inbox-kind { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } /* #1880 — was opacity 0.7 */ /* The provenance takes the free space, because it is what the decision rests on: four documents is a gap in the vocabulary, one is probably a typo. */ .qma-tax-inbox-prov { flex: 1 1 220px; font-size: 0.78rem; color: var(--text-muted); } /* #1880 — was opacity 0.85 */ .qma-tax-inbox-actions { display: flex; gap: 6px; flex-wrap: wrap; } /* #1736 — a provisional term no document uses: greyed, with the day it retires. */ /* #1880 — GREYED BY COLOUR, NOT BY FADING: opacity 0.55 took 'provisional' to 2.15 and the kind label (0.7 inside it) to 2.36. Muted ink and italics still read as set aside. */ .qma-tax-inbox-row.is-unreferenced .qma-tax-inbox-term, .qma-tax-inbox-row.is-unreferenced .qma-tax-inbox-prov { color: var(--text-muted); font-style: italic; } .qma-tax-inbox-gone { flex-basis: 100%; display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-muted); } /* #1736 — confirmed terms no document uses, kept until pruned. */ .qma-tax-unused { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-white); } .qma-tax-unused-hdr { font-size: 0.82rem; font-weight: 700; color: var(--text); margin-bottom: 4px; } .qma-tax-unused-row { display: flex; align-items: center; gap: 8px 12px; padding: 6px 0; border-top: 1px solid var(--border); } .qma-tax-unused-row .btn-sem { margin-left: auto; } /* Greyed, never dashed: a confirmed term, and the dash means provisional (#1809). */ .qma-tax-chip2.is-unused { opacity: 0.7; } /* #1717 — Confirm all sits at the header's far end, seen before the list. */ .qma-tax-inbox-hdr .qma-tax-confirm-all { margin-left: auto; font-weight: 600; } /* #1732 — the suggested term is the button that maps onto it. A link in look, in the row's own colour, so it reads in both schemes. */ .qma-tax-sugg-link { font: inherit; font-weight: 700; color: inherit; background: none; border: 0; padding: 0 1px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .qma-tax-sugg-link:hover { text-decoration-thickness: 2px; } .qma-tax-sugg-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; } .qma-tax-sugg-link:disabled { opacity: 0.5; cursor: progress; } /* #1732 — the Same as… window. The list takes the height the fixed window leaves, so filtering never resizes it under the reader. */ .qma-tax-map-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; } .qma-tax-map-intro { margin: 0; font-size: 0.85rem; color: var(--text); } .qma-tax-map-searchrow { display: flex; align-items: center; gap: 10px; } .qma-tax-map-searchrow .qma-input { flex: 1; font-size: 0.9rem; padding: 8px 10px; color: var(--text); } .qma-tax-map-count { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; } .qma-tax-map-list { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-white); } .qma-tax-map-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-size: 0.86rem; text-align: left; cursor: pointer; } .qma-tax-map-row:last-child { border-bottom: 0; } .qma-tax-map-row:hover { background: var(--hover-bg); } .qma-tax-map-row.is-selected { background: var(--btn-primary); color: #fff; } .qma-tax-map-row.is-selected .qma-tax-map-count, .qma-tax-map-row.is-selected .qma-tax-map-hint { color: #fff; border-color: light-dark(#fff, var(--pq-border)); } .qma-tax-map-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .qma-tax-map-name { flex: 1; min-width: 0; overflow-wrap: anywhere; } .qma-tax-map-hint { font-size: 0.7rem; font-weight: 600; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--gap-text); color: var(--gap-text); white-space: nowrap; } .qma-tax-map-row.is-suggested:not(.is-selected) { background: var(--gap-bg); } .qma-tax-map-empty { margin: 0; padding: 14px 12px; font-size: 0.85rem; color: var(--text-muted); } .qma-tax-map-outcome { font-size: 0.82rem; color: var(--text-muted); min-width: 0; } .qma-tax-map-btns { display: flex; gap: 8px; flex-shrink: 0; } @media (prefers-contrast: more) { .qma-tax-map-row, .qma-tax-map-list { border-color: var(--text); } } /* #1674 — the What came back window. */ #pqrj-return-body { font-size: 0.88rem; color: var(--text); } .pqrj-lead { margin: 0 0 10px; font-weight: 600; } .pqrj-h { margin: 16px 0 6px; font-size: 0.85rem; font-weight: 700; } .pqrj-list { margin: 0; padding-left: 20px; } .pqrj-list li { margin: 3px 0; } .pqrj-muted { color: var(--text-muted); font-size: 0.8rem; margin: 6px 0 0; } .pqrj-props { display: flex; flex-direction: column; gap: 6px; } .pqrj-prop { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .pqrj-prop input { margin-top: 3px; } .pqrj-ftext { display: block; } .pqrj-flag { font-size: 0.7rem; font-weight: 600; padding: 0 5px; border-radius: var(--radius-xs); border: 1px solid var(--gap-text); color: var(--gap-text); } .pqrj-source { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); min-width: 0; } .pqrj-source input { width: 160px; color: var(--text); } .qma-tax-section-hdr { font-size: 0.78rem; font-weight: 700; color: var(--primary-ink, #1a365d); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .qma-tax-auto-badge { font-size: 0.68rem; font-weight: 500; background: light-dark(#e8f4e8, var(--pq-elevated)); color: light-dark(#276749, color-mix(in oklab, #276749 45%, white)); border-radius: 3px; padding: 1px 6px; text-transform: none; letter-spacing: 0; } .qma-tax-chips-row { display: flex; flex-wrap: wrap; gap: 6px; } .qma-tax-empty-hint { font-size: 0.8rem; color: var(--text-muted); font-style: italic; } .qma-tax-chip2 { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-pale, #eef3f9); border: 1px solid light-dark(#b8cfe8, color-mix(in oklab, #b8cfe8 30%, var(--pq-surface))); color: var(--primary-ink, #1a3a5c); border-radius: 14px; padding: 3px 10px 3px 12px; font-size: 0.82rem; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .qma-tax-chip2:hover { background: light-dark(#ddeaf8, color-mix(in oklab, #ddeaf8 14%, var(--pq-surface))); border-color: var(--primary, var(--primary-fg)); } .qma-tax-chip2.active { background: var(--primary, #1a3a5c); color: #fff; } .qma-tax-chip2.active .qma-tax-chip-x { color: rgba(255,255,255,0.7); } .qma-tax-count { background: var(--primary, #1a3a5c); color: #fff; border-radius: 10px; font-size: 0.68rem; padding: 0 5px; min-width: 16px; text-align: center; } .qma-tax-chip2:hover .qma-tax-count { background: var(--bg-white); color: var(--primary-ink, #1a3a5c); } .qma-tax-chip2.active .qma-tax-count { background: rgba(255,255,255,0.3); color: #fff; } .qma-tax-chip-x { background: none; border: none; cursor: pointer; padding: 0 1px; font-size: 0.75rem; color: var(--text-muted); line-height: 1; } .qma-tax-chip-x:hover { color: light-dark(#c53030, color-mix(in oklab, #c53030 45%, white)); } .qma-tax-add-row { display: flex; gap: 6px; margin-top: 16px; align-items: center; } .qma-tax-add-select { flex: 0 0 auto; width: 140px; font-size: 0.82rem; } .qma-tax-add-input { flex: 1; font-size: 0.82rem; } .qma-tax-impact-panel { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; } .qma-tax-impact-hdr { font-size: 0.88rem; font-weight: 600; margin-bottom: 10px; color: var(--primary-ink, #1a3a5c); } .qma-tax-no-impact { font-size: 0.82rem; color: var(--text-muted); font-style: italic; } .qma-tax-impact-doc { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 0.84rem; } .qma-tax-impact-doc:hover { background: var(--surface-2, #f7f8fa); } .qma-tax-impact-num { font-weight: 600; color: var(--text-muted); min-width: 80px; } .qma-tax-impact-title { flex: 1; } /* ── QMS Library picker modal ─────────────────────────────────────────────── */ .qms-lib-picker-search { width: 100%; box-sizing: border-box; padding: 7px 10px; margin-bottom: 10px; border: 1px solid var(--border, #ccc); border-radius: 6px; font-size: 0.85rem; font-family: inherit; } .qms-lib-picker-list { flex: 1; overflow-y: auto; border: 1px solid var(--border, var(--border)); border-radius: 6px; } .qms-lib-picker-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border, var(--border)); cursor: pointer; transition: background 0.12s; } .qms-lib-picker-row:last-child { border-bottom: none; } .qms-lib-picker-row:hover { background: var(--hover-bg, #f0f4f8); } .qms-lib-picker-num { font-size: 0.78rem; color: var(--muted, #718096); min-width: 80px; white-space: nowrap; } .qms-lib-picker-info { flex: 1; min-width: 0; } .qms-lib-picker-title { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qms-lib-picker-meta { font-size: 0.76rem; color: var(--muted, #718096); margin-top: 2px; } .qms-lib-picker-row--no-file { cursor: default; opacity: 0.5; } .qms-lib-picker-row--no-file:hover { background: transparent; } .qms-lib-picker-no-file { font-size: 0.72rem; color: var(--muted, #718096); border: 1px solid var(--border, var(--border)); border-radius: 4px; padding: 1px 5px; white-space: nowrap; flex-shrink: 0; } .qms-lib-picker-empty { padding: 24px; text-align: center; font-size: 0.85rem; color: var(--muted, #718096); } /* ── #1938 · the vocabulary chips, in the toolbar's Filter picker ─────────── */ .qma-tax-group { margin-bottom: 10px; } .qma-tax-group-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; /* #1938 — the picker sits on the page's ground, not the chrome sidebar it was written for, so the label is the page's ink. */ color: var(--text); padding: 0 4px; margin-bottom: 4px; } .qma-tax-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px; } .qma-tax-chip { font-size: 0.72rem; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--border, #ccc); background: var(--surface-2, #f7f8fa); color: var(--fg, #333); cursor: pointer; transition: all 0.12s; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; } .qma-tax-chip:hover { background: var(--hover-bg, #e2e8f0); border-color: var(--accent, #2b6cb0); color: var(--accent, #2b6cb0); } .qma-tax-chip.active { background: var(--accent, #2b6cb0); border-color: var(--accent, #2b6cb0); color: #fff; } /* #1938 — the Filter picker, its chips and the header. The header reuses the metadata window's .rc-mw-glance / .rc-mw-next (one copy, #1937). */ .qma-filter-wrap { position: relative; } .qma-filter-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(360px, 80vw); max-height: 60vh; overflow-y: auto; padding: 12px; background: var(--bg-white); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 18%, transparent); } .qma-filter-pop.hidden { display: none; } .qma-filter-search { width: 100%; margin-bottom: 10px; } .qma-filter-none { font-size: 0.74rem; color: var(--text-muted); font-style: italic; } .qma-filter-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } /* ══ #1938 · OPTION 1 REVISED (Craig 2026-10-06, comment 21760) ═══════════════ The artboard is documentation/design/ui/design_handoff_qms_page/Option1Revised.dc.html. ONE header card across the page; below it ONE card holding the rail beside the document pane. Neutral grounds, the light blue (--primary-pale) ONLY for the selected item, neutral hover, blue only for the primary action and links. Tokens only, so dark mode and every appearance palette follow. */ .qms-access-wrap { display: flex; flex-direction: column; gap: 16px; height: calc(100vh - 52px); box-sizing: border-box; /* The bottom clears the fixed Report-an-issue button (#1880), so the rail's last entries are never under it. */ padding: 20px 24px calc(var(--report-fab-inset) + var(--report-fab-size) + 8px); background: var(--bg); overflow: hidden; position: relative; } .qms-access-wrap > .qma-head, .qms-access-wrap > .qma-body { width: 100%; max-width: 1392px; margin: 0 auto; box-sizing: border-box; } /* The header card */ .qma-head { flex: none; display: flex; flex-direction: column; gap: 16px; padding: 18px 22px; background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; } .qma-head-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .qma-head-title { min-width: 0; } .qma-head-org { font-size: 13px; color: var(--text-muted); min-height: 1em; } .qma-head-h1 { margin: 2px 0 0; font-size: 22px; font-weight: 600; color: var(--text); } .qma-head-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .qma-head-acts .qma-search-input { width: 240px; font-size: 14px; padding: 7px 10px; border-radius: 6px; } .qms-access-wrap.is-tool .qma-list-only { display: none; } /* The figures: label above, figure below, in a row (the shared inset, #1937). */ .qma-inset { padding: 16px 20px; } .qma-inset .rc-mw-glance { display: flex; flex-wrap: wrap; gap: 12px 36px; } .qma-inset .rc-mw-g-k { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; margin-bottom: 0; } .qma-inset .rc-mw-g-v { font-size: 20px; font-weight: 600; } .qma-inset .rc-mw-next { font-size: 14px; justify-content: space-between; } .qma-next.hidden { display: none; } /* The card below: the rail beside the document pane */ .qma-body { flex: 1; min-height: 0; display: flex; background: var(--bg-white); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .qms-access-sidebar { flex: 0 0 260px; max-width: 290px; box-sizing: border-box; background: var(--pq-soft); color: var(--text); border-right: 1px solid var(--border); /* #1969 — its top line level with the list's, below the card's heading (qms_access.js _alignRailToList measures it; 0 when a tool view shows) */ padding: var(--qma-list-top, 0px) 6px 12px; overflow-y: auto; /* #2245:begin — a column (below); one rule for the rail, #2278 */ display: flex; flex-direction: column; /* #2245:end */ } /* #2245:begin — the rail is a column: only the folder and group LISTS may shrink, each scrolling in its own area, so the headings, "+ New folder", "+ New group", Work and Explore stay in view however many folders and groups there are (Craig 2026-10-18). The two lists shrink together, in proportion to their length, so neither pushes the other off; a short list takes only its own height. The rail's own scroll stays for a window too short even for the lists' floor. (#2278: the column declarations sit in the rail's one rule above, so the rail has one definition.) */ .qms-access-sidebar > * { flex: none; } /* the section shrinks; its floor (heading + the list's floor + its add button) is set when drawn (_keepCurrentInView). CSS cannot say it: a section's own automatic minimum counts its list's FULL height (measured: the sections then never shrank), and 0 let a list spill over the section below (measured: '+ New folder' drawn under Groups). */ .qms-access-sidebar > .qms-rail-sec[data-rail-sec="folders"], .qms-access-sidebar > .qms-rail-sec[data-rail-sec="groups"] { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; } .qms-rail-sec > .qms-rail-h, .qms-rail-sec > .qms-rail-add { flex: none; } .qms-rail-folders, .qms-rail-groups { /* takes what its section has left after the heading and the add button; the floor is the section's (set when drawn), so a short list reserves no empty space */ flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; /* the keep-in-view arithmetic measures items against the list itself */ scrollbar-width: thin; scrollbar-color: var(--border) transparent; /* themed, light and dark */ } /* #2245:end */ .qms-rail-h { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding: 14px 8px 6px; } .qms-rail-sec[data-rail-sec="groups"] .qms-rail-h { padding-top: 18px; } .qms-rail-rule { border-top: 1px solid var(--border); margin: 14px 6px 0; } .qms-rail-item, .qms-rail-add { width: 100%; box-sizing: border-box; text-align: left; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 400; padding: 7px 12px; cursor: pointer; } .qms-rail-add { color: var(--text-muted); text-decoration: none; } .qms-rail-sec[data-rail-sec="folders"] .qms-rail-add { padding-left: 28px; } .qms-rail-item .ic { width: 15px; height: 15px; flex: none; } .qms-rail-item:hover, .qms-rail-add:hover { background: var(--hover-bg); } .qms-rail-item:focus-visible, .qms-rail-add:focus-visible { outline: 2px solid var(--primary-fg); outline-offset: -2px; } /* Where you are: the ONE selection colour, and weight, so it is never colour alone. */ .qms-rail-item.is-current, .qms-rail-folder.is-current .qms-rail-item { background: var(--primary-pale); font-weight: 600; } .qms-rail.is-tool .qms-rail-folder.is-current .qms-rail-item { background: none; font-weight: inherit; } @media (prefers-contrast: more) { .qms-rail-item.is-current { outline: 2px solid var(--text); outline-offset: -2px; } } .qms-rail-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qms-rail-n { flex: none; margin-left: auto; font-size: 12px; font-weight: 400; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* The folders: a flat list, indented by depth (QMS, then 16px a level). The indent is the item's own padding, so the selection band runs the full width. */ .qms-rail-folder { --qma-rail-indent: calc(12px + var(--qma-depth, 0) * 16px); } .qms-rail-folder .qms-rail-fname { padding-left: var(--qma-rail-indent); } .qms-rail-folder.is-drop-target { outline: 2px dashed var(--primary-fg); outline-offset: -2px; border-radius: 8px; } /* A group: its name, and beneath it its regulations and member count. #2126 — press-and-hold opens the group's menu on a touch screen; the phone's own callout and text selection would otherwise sit on top of it. */ .qms-rail-group { flex-direction: column; align-items: flex-start; gap: 1px; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .qms-rail-gsub { font-size: 12px; font-weight: 400; color: var(--text-muted); } .qms-rail-note { font-size: 13px; color: var(--text-muted); padding: 2px 12px; } /* The document pane */ .qms-access-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; } .qma-sect-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 16px 20px 10px; flex-wrap: wrap; flex: none; } .qma-crumbs { font-size: 13px; color: var(--text-muted); min-height: 1em; } .qma-view-title { margin: 0; font-size: 19px; font-weight: 600; color: var(--text); } /* Structure | List: one segmented control; the chosen one is the selection colour. */ .qma-view-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .qma-view-switch .qma-btn-secondary { border: 0; border-radius: 0; background: var(--bg-white); color: var(--text); padding: 7px 12px; min-height: 34px; font-size: 13px; font-weight: 400; box-shadow: none; } .qma-view-switch .qma-btn-secondary + .qma-btn-secondary { border-left: 1px solid var(--border); } .qma-view-switch .qma-btn-secondary.active { background: var(--primary-pale); font-weight: 600; } .qms-access-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 0 20px 14px; background: transparent; border-bottom: 1px solid var(--border); flex: none; } .qms-access-toolbar-left { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 1; } .qms-access-toolbar-right { display: flex; gap: 8px; align-items: center; } .qms-access-toolbar .qma-select { font-size: 13px; padding: 6px 10px; min-height: 34px; border-radius: 6px; } .qma-search-input { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; background: var(--bg-white); color: var(--text); width: 240px; } .qma-select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--bg-white); color: var(--text); /* N4 — a