/* These styles are generated from project.scss. */ /* CKEditor's floating balloons (the Link popup, image contextual toolbar, etc.) default to z-index ~1000 (--ck-z-panel = --ck-z-default + 999, and the vendored bundle sets --ck-z-default: 1) — below Bootstrap's own offcanvas (1045, see .feedback-offcanvas below). Every balloon mounts to document.body, not inside the editor's own container, so a selector scoped to .feedback-offcanvas can never reach it — this has to be a global override. Inside the feedback panel this made clicking "Link" open the balloon invisibly behind the panel, reading as "the button does nothing" (#819). Raised well above every fixed/sticky z-index this platform uses (max 1030 elsewhere) so it's not a near thing. !important is load-bearing, not defensive: base.html's own {% block css %} (project.css) always renders before {% block javascript %} / extra_js (ckeditor5.css) — confirmed by reading base.html, not assumed — on every page that loads CKEditor synchronously (8D, tickets, fmea, issues, pcp), and the feedback panel lazy-loads ckeditor5.css later still. Same :root selector, same specificity — whichever stylesheet is last in the DOM wins the cascade, and that is always CKEditor's own. Without !important this override would be silently undone on every single page, not just the one it was reported on. Broader than "just the balloons," worth knowing before touching this again: --ck-z-default feeds ten z-index rules in the vendored bundle, not only --ck-z-panel (balloons) — nine stay inside the editable (dropdown arrows, table column resizer, etc., where 1 vs 1100 is inert either way); the tenth, .ck-block-toolbar-button, would escape the editor and sit above this platform's sticky headers/Bootstrap modal/popover — currently moot, since BlockToolbar isn't in getRichTextPlugins() (project.js). Does not break CKEditor's own fullscreen mode, but only incidentally: fullscreen's own rule is html.ck-fullscreen, body.ck-fullscreen { --ck-z-default: calc(var(--ck-z-fullscreen) + 1) }, i.e. 10001 — an !important on :root wins on the element, but CKEditor adds the ck-fullscreen class to *both* html and body, and body's own non-important value then wins there (closer in the cascade), which is where the fullscreen UI actually renders. Also moot today: Fullscreen isn't loaded either. */ :root { --ck-z-default: 1100 !important; } .alert-debug { color: black; background-color: white; border-color: #d6e9c6; } .alert-error { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; } .mermaid-preview { min-height: 200px; overflow: auto; } .md-preview { min-height: 120px; } .rendered-markdown p:last-child { margin-bottom: 0; } /* Release notes sit inside a card whose header already names the release and its date, so a heading in the note itself is subordinate to that -- at default markdown sizes an

rendered larger than the release title above it, in every single card. / .release-notes h1, .release-notes h2, .release-notes h3, .release-notes h4 { font-size: 1rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.25rem; } .release-notes > :first-child { margin-top: 0; } / CodeMirror wrapper for [data-markdown-editor] textareas (#397) — matches Bootstrap's .form-control appearance since it visually replaces one. / .markdown-editor.CodeMirror { height: auto; min-height: 6rem; border: 1px solid #ced4da; border-radius: 0.375rem; font-size: 1rem; padding: 0.375rem 0.25rem; } .clickable-row { cursor: pointer; } .min-width-0 { min-width: 0; } .card-narrow { max-width: 600px; } .badge-xs { font-size: 0.65em; } / Reusable "i" info-icon button (#546) — a small circular button that opens a Bootstrap popover explaining a field/label. See {% info_icon %} in edp/workflows/templatetags/ui_tags.py. / .info-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; padding: 0; border: 1px solid #6c757d; border-radius: 50%; background: transparent; color: #6c757d; font-size: 0.7rem; font-style: italic; font-weight: 700; line-height: 1; cursor: pointer; } .info-icon-btn:hover, .info-icon-btn:focus { color: #495057; border-color: #495057; } / #894 — Bootstrap's own popover default (276px) was fine for the original two-short-paragraph content (the Track field's own info icon) but crams the 3-column severity scoring table (_severity_scale.html) into cramped, heavily-wrapped cells. Widened for every info-icon popover platform-wide rather than adding a per-usage override — the Track field's own content only gets more breathing room, never less, from a wider box. / .popover { --bs-popover-max-width: 420px; } / Canvas editor / .canvas-workspace { position: relative; height: calc(100vh - 185px); min-height: 400px; } .canvas-stencil-panel { position: absolute; left: 8px; top: 8px; z-index: 10; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); width: 68px; } .stencil-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border-radius: 4px; cursor: grab; font-size: 0.65rem; color: #555; user-select: none; } .stencil-item:hover { background: #f0f4ff; } .stencil-item:active { cursor: grabbing; } / Prevent SVG children from intercepting drag events on the parent div / .stencil-item svg { pointer-events: none; } .stencil-edge-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border-radius: 4px; cursor: pointer; font-size: 0.65rem; color: #555; user-select: none; background: none; border: none; width: 100%; } .stencil-edge-btn:hover { background: #f0f4ff; } .stencil-divider { border: none; border-top: 1px solid #dee2e6; margin: 2px 0; } .canvas-area { flex: 1; min-width: 0; background: #f8f9fa; overflow: hidden; } .canvas-props-panel { width: 380px; flex-shrink: 0; overflow-y: auto; background: #fff; } / #675 — a soft blue tint replaces the previous flat grey so section headers stand out from the plain white card bodies around them; platform-wide (every canvas-section-header consumer: eightd's D0-D8, the workflows canvas editor panel, requirements' own accordion), since none of those besides eightd's own Theory/Report-level-Tests cards below actually nest one header inside another today — this is "level 1" by default, and .canvas-section-header-nested (below) lightens it one step for the cases that do nest. / .canvas-section-header { background: #a9cbe8; border-bottom: 1px solid #7ba7d1; padding: 0.375rem 0.75rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #2c4a66; display: flex; justify-content: space-between; align-items: center; user-select: none; width: 100%; border-left: none; border-right: none; border-top: none; text-align: left; } button.canvas-section-header:hover { background: #94bce0; color: #1c344a; } / #675 — "level 2": lighter tint for a header nested inside another section's own card body (eightd's D4 Theory cards, Report-level Tests sub-card) so the hierarchy reads at a glance — combined with .canvas-section-header, not a replacement for it. / .canvas-section-header.canvas-section-header-nested { background: #cfe1f2; border-bottom-color: #a8c8e4; color: #3d5a75; } button.canvas-section-header.canvas-section-header-nested:hover { background: #bcd4ec; } .canvas-meta-chevron { transition: transform 0.2s; } [aria-expanded="false"] .canvas-meta-chevron { transform: rotate(-90deg); } .canvas-zoom-display { min-width: 52px; cursor: default; text-align: center; } .canvas-rankdir-select { width: auto; min-width: 72px; } .canvas-panel-resize-handle { width: 6px; flex-shrink: 0; cursor: col-resize; background: transparent; transition: background 0.15s; z-index: 10; } .canvas-panel-resize-handle:hover, .canvas-panel-resize-handle.dragging { background: #adb5bd; } / Read-only workflow viewer embedded on procedure pages. / .workflow-viewer { height: calc(100vh - 240px); min-height: 400px; background: #f8f9fa; overflow: hidden; border-radius: 0.375rem; } .viewer-sticky { position: sticky; top: 4rem; } .fmea-entry-panel-scroll { max-height: calc(100vh - 5rem); overflow-y: auto; } / Nested links inside a .stretched-link ticket row (tickets:list) — without this, the row's own .stretched-link ::after overlay sits above and intercepts clicks meant for the linked-8D links. Also lands in #573. / .ticket-row-links a { position: relative; z-index: 1; } / #761 — per-row "Duplicate" action on the ticket list. Carries Bootstrap's own .btn .btn-sm .btn-outline-secondary alongside this class so it reads as a real button rather than a bare link (Thom's ask), matching the Duplicate button on the ticket detail page; this class only adds the reveal behaviour and the stacking fix. Hidden until the row is hovered so it adds no permanent visual weight to an already-wide table (also Thom's ask), but deliberately NOT hover-only: - :focus-within keeps it reachable by keyboard, where there is no hover at all and the control would otherwise be permanently invisible. - The (hover: none) block below pins it visible on touch devices, which never fire hover — field staff on a tablet would otherwise have no way to reach it. position/z-index for the same reason .ticket-row-links above needs them: the row's own .stretched-link ::after overlay covers the whole row, and without lifting this above it the click is swallowed and silently navigates to the detail page instead of duplicating. / .ticket-row-action { position: relative; z-index: 1; opacity: 0; transition: opacity 0.12s ease-in-out; } tr:hover > td > .ticket-row-action, tr:focus-within > td > .ticket-row-action { opacity: 1; } @media (hover: none) { .ticket-row-action { opacity: 1; } } / 8D report read-only detail view (eightdreport_detail.html) / .eightd-detail-kv-label { width: 20%; } .eightd-detail-whystep-num { width: 5%; } .fmea-filter-sticky { position: sticky; top: 4rem; background: #fff; z-index: 10; padding-top: 0.375rem; padding-bottom: 0.5rem; border-bottom: 1px solid #dee2e6; margin-bottom: 0.75rem; } / 8D report/branch header — title + back-link + View/PDF/Edit buttons (#653) — stays visible while the long D0-D8 page scrolls, so the actions stay reachable without scrolling back to the top. Same sticky-under-navbar shape as .fmea-filter-sticky, but top: 3.5rem (not 4rem) — measured live against the rendered navbar's own border-box bottom edge (56px = 3.5rem); 4rem left an 8px gap showing scrolled-past page content peeking through between the two sticky elements. margin-top: -0.25rem pulls the header up into the navbar wrapper's own trailing `mb-1` margin (blank space, not part of the navbar's painted area) so the header's natural resting position exactly matches its sticky offset — without this, the header visibly drifts up those 4px the instant you start scrolling (its natural position sat 4px below the sticky threshold, so scrolling "used up" that gap before it locked in place) instead of being pinned from the first pixel of scroll. / .eightd-page-header-sticky { position: sticky; top: 3.5rem; margin-top: -0.25rem; background: #fff; z-index: 10; padding-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #dee2e6; } .fmea-sort-link { color: inherit; } .fmea-sort-link:hover { color: #0d6efd; } .viewer-graph-header { cursor: default; } .viewer-fit-btn { font-size: 0.7rem; } / PCP deliverable status — mirrors the source Excel's color legend / .pcp-status-not_started { background-color: #f8f9fa; color: #212529; } .pcp-status-missing { background-color: #dc3545; color: #fff; } .pcp-status-to_be_reviewed { background-color: #d63384; color: #fff; } .pcp-status-checked { background-color: #ffc107; color: #212529; } .pcp-status-validated { background-color: #198754; color: #fff; } .pcp-grid-cell { min-width: 150px; font-size: 0.7rem; } .pcp-grid-category-cell { max-width: 140px; } .pcp-grid-chip { display: block; padding: 0.1rem 0.3rem; margin-bottom: 2px; border-radius: 0.2rem; text-decoration: none; line-height: 1.3; word-break: break-word; } .pcp-grid-chip:hover { opacity: 0.85; } .pcp-grid-chip-number { font-weight: 700; margin-right: 0.25rem; } / PCP stage header row — groups tollgate columns into named stages (Product definition, Product development, ...), cycling through a fixed palette since the number/names of stages are template-defined. The first three colors are lifted directly from the source Excel's own stage header fills (Product Definition/Development/Industrialization), computed from its theme + tint values so the platform visually matches the sheet Thom is used to reading. / .pcp-stage-header { text-transform: uppercase; letter-spacing: 0.02em; font-weight: 600; } / Bootstrap 5's table cells set background-color via `.table > :not(caption) > * > `, a higher-specificity selector than a plain class — the `.table` prefix here (two classes) is needed to win the cascade instead of silently losing to Bootstrap's default. / .table .pcp-stage-0 { background-color: #ffcc66; } .table .pcp-stage-1 { background-color: #b4c7e7; } .table .pcp-stage-2 { background-color: #a9d18e; } .table .pcp-stage-3 { background-color: #e2d9f3; } /* PCP grid — boxed scrollable panel with a sticky header, so the stage/tollgate/phase column headers stay legible on a tall grid. `position: sticky` does NOT work on a plain Bootstrap `.table-responsive` wrapper: it sets `overflow-x: auto` only, but per the CSS overflow spec a non-`visible` x-axis forces the y-axis to compute to `auto` too — turning `.table-responsive` into its own scroll container. Since that div has no fixed height, it just grows to fit the table and never actually scrolls, so a sticky descendant has nothing to stick against. Giving it a bounded `max-height` + explicit `overflow: auto` here makes it a real scrollport (both axes, like a spreadsheet pane) so the sticky header actually has something to pin against. / .pcp-grid-scroll { max-height: calc(100vh - 220px); overflow: auto; } / Three stacked header rows each need their own cumulative top offset (a plain `top: 0` on all three would make row 2 and row 3 jump up and overlap row 1 at the same sticky point, instead of stacking below it). Hardcoded rem guesses here caused a visible jump the instant a row became stuck (offset didn't exactly match the row's real rendered height) and a hairline border gap at that boundary — the offsets are measured from actual rendered row heights instead, via CSS custom properties set by initPcpGridStickyHeader() in project.js. Row 2/3 get an explicit white background so scrolled body rows don't show through underneath; row 1's stage-color cells already have an opaque background via .pcp-stage-N above, and its one plain corner cell gets .pcp-grid-sticky-corner instead so it doesn't fight that cascade. box-shadow (not border) reinforces the boundary below each row — Bootstrap's own collapsed border between cells doesn't repaint reliably while one side is position: sticky, so it visibly flickers/goes transparent under scroll; a box-shadow is painted inside each cell's own box regardless of stickiness, masking that flicker with a stable line. `will-change: transform` forces the browser to composite the sticky cell on its own GPU layer — without it, some browsers rasterize position: sticky elements at a slightly different sub-pixel offset than the content scrolling beneath them each frame, showing a hairline seam of that content through the boundary; compositing separately keeps the cell's own paint (background + box-shadow) pixel-stable regardless. / .pcp-grid-sticky-thead th { position: sticky; z-index: 2; box-shadow: inset 0 -1px 0 #dee2e6; will-change: transform; } .pcp-grid-sticky-thead tr:nth-child(1) th { top: 0; } .pcp-grid-sticky-thead tr:nth-child(2) th { top: var(--pcp-grid-row1-height, 1.75rem); background-color: #fff; } .pcp-grid-sticky-thead tr:nth-child(3) th { top: var(--pcp-grid-row12-height, 4.75rem); background-color: #fff; text-align: left; vertical-align: top; } / Bootstrap 5's table cells set background-color via `.table > :not(caption) > * > `, a higher-specificity selector than a plain class — the `.table` prefix here (two classes) is needed to win the cascade instead of silently losing to Bootstrap's default (same gotcha as .pcp-stage-N above; the sticky rows' own `th` selectors above already carry enough specificity to win without this, since they chain through `tr:nth-child(N)`, but this single-class selector doesn't). `!important` because this cell reportedly stayed transparent even after the `.table` specificity bump — belt-and-braces against whatever else is still winning the cascade on it. / .table .pcp-grid-sticky-corner { background-color: #fff !important; } /* First column frozen on horizontal scroll too, spreadsheet-style — the category name is otherwise meaningless once scrolled out of view to the left. Header row's first cell (category label / empty corner) needs `left` in addition to the `top` it already gets above, so it stays pinned at both edges at once; a higher z-index than the plain sticky-top header cells (2) and the sticky-left body column (1) below ensures it renders above both wherever they visually meet. / .pcp-grid-sticky-thead tr th:first-child { left: 0; z-index: 3; background-color: #fff !important; box-shadow: inset -1px 0 0 #dee2e6, inset 0 -1px 0 #dee2e6; will-change: transform; } .pcp-grid-table tbody tr > :first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 #dee2e6; will-change: transform; } .table .pcp-grid-category-cell { background-color: #fff; } .pcp-stage-chip { min-width: 220px; } / Restyle ClearableFileInput's plain checkbox into a small outline button — scoped to the deliverable document card only, not every ClearableFileInput platform-wide. / .pcp-document-card input[type="checkbox"][id$="-clear_id"] { display: none; } .pcp-document-card label[for$="-clear_id"] { display: inline-block; padding: 0.1rem 0.5rem; margin-left: 0.5rem; font-size: 0.7rem; border: 1px solid #dc3545; color: #dc3545; border-radius: 0.2rem; cursor: pointer; } .pcp-document-card label[for$="-clear_id"]:hover { background-color: #dc3545; color: #fff; } / FMEA Action Priority badges / .ap-high { background-color: #dc3545; color: #fff; } .ap-medium { background-color: #fd7e14; color: #fff; } .ap-low { background-color: #198754; color: #fff; } / FMEA entry list / .fmea-search-input { max-width: 220px; } .btn-xs { padding: 0.1rem 0.4rem; font-size: 0.75rem; } .fmea-revalidation-toggle { cursor: pointer; } .fmea-scoring-guide-link { font-size: 0.8rem; } .fmea-scoring-guide { background-color: #f8f9fa; border: 1px solid #dee2e6; } .fmea-guide-table { font-size: 0.78rem; } .fmea-guide-table td:first-child { font-weight: 600; text-align: center; width: 2rem; } .fmea-col-nr { width: 2.5rem; } .fmea-col-score { width: 2.5rem; } .fmea-col-ap { width: 3rem; } .fmea-scores-table { table-layout: fixed; width: 100%; } .fmea-scores-col-label { width: 4rem; } .fmea-scores-col-val { width: 3rem; } .fmea-scores-col-rpn { width: 3.5rem; } .fmea-scores-col-ap { width: 3rem; } .fmea-review-select { width: auto; display: inline-block; } .fmea-scores-table .form-control { padding: 0.15rem 0.2rem; text-align: center; font-size: 0.8125rem; } .fmea-node-mini-form { background: #f8f9fa; border: 1px solid #dee2e6; } .fmea-filter-select { max-width: 220px; } .fmea-advanced-filter-row { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 0.5rem 0.75rem; } .fmea-phase-add-row { max-width: 320px; } .fmea-phase-remove-btn { background: none; border: none; padding: 0 0 0 4px; color: inherit; line-height: 1; cursor: pointer; opacity: 0.7; } .fmea-phase-remove-btn:hover { opacity: 1; } .fmea-guide-tab { font-size: 0.8rem; padding: 0.25rem 0.75rem; } .fmea-field-error { font-size: 0.7rem; color: #dc3545; } .field-error { font-size: 0.7rem; color: #dc3545; } .fmea-autoresize { resize: none; overflow-y: hidden; } .fmea-timestamp { font-size: 0.72rem; color: #6c757d; } .fmea-action-card { padding: 0.4rem 0.5rem; border-radius: 0.25rem; background-color: #f8f9fa; } .fmea-action-update { padding: 0.3rem 0.5rem; border-radius: 0.25rem; background-color: #f8f9fa; } .autosave-label { position: absolute; top: -1.5rem; right: 0; color: #6c757d; } / Remove native number-input spinners so cost-line amounts align with the plain Total figure below them (the spinner arrows otherwise eat into the input's width and throw off the right-aligned digits). / .cost-line-amount { -moz-appearance: textfield; } .cost-line-amount::-webkit-outer-spin-button, .cost-line-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } / Module list table — fixed layout prevents column-width shifts on row expand / #module-list-table { table-layout: fixed; width: 100%; } .module-col-name { width: 24%; } .module-col-node { width: 32%; } .module-col-person { width: 28%; } .module-col-actions { width: 16%; } / Clickable module rows / .module-row { cursor: pointer; } .module-row-actions a { position: relative; z-index: 1; } / System tree table — fixed layout prevents column-width shifts on row expand / #system-tree-table { table-layout: fixed; width: 100%; } / Editor layout (4 cols) / .sys-col-name { width: 30%; } .sys-col-module { width: 20%; } .sys-col-owner { width: 20%; } .sys-col-actions { width: 30%; } / Viewer layout (3 cols) / .sys-col-name-viewer { width: 50%; } .sys-col-module-viewer { width: 25%; } .sys-col-owner-viewer { width: 25%; } / Clickable system node rows / .system-node-row-actions a { position: relative; z-index: 1; } / Nested links inside a .stretched-link ticket row (tickets:list) — without this, the row's own .stretched-link ::after overlay sits above and intercepts clicks meant for the linked-8D links. / .ticket-row-links a { position: relative; z-index: 1; } / Tree indentation for SystemNode / OrgChartNode list views. !important needed to beat Bootstrap's .table-sm compound selector. / .tree-depth-0 { padding-left: 0.5rem !important; } .tree-depth-1 { padding-left: 2rem !important; } .tree-depth-2 { padding-left: 3.5rem !important; } .tree-depth-3 { padding-left: 5rem !important; } .tree-depth-4 { padding-left: 6.5rem !important; } .tree-depth-5 { padding-left: 8rem !important; } / Actions dashboard "Sources" filter dropdown (#376) / .actions-source-menu { min-width: 16rem; max-height: 20rem; overflow-y: auto; } / Requirements / .req-indent-0 { padding-left: 0; } .req-indent-1 { padding-left: 1.5rem; display: block; } .req-indent-2 { padding-left: 3rem; display: block; } .req-indent-3 { padding-left: 4.5rem; display: block; } .req-md-help { background: #f8f9fa; font-size: 0.8rem; } / Issue Tracker 2D review diagram (chance x impact) / .issue-diagram-svg-wrapper { overflow-x: auto; } .issue-diagram-svg { max-width: 100%; height: auto; } .issue-diagram-cell { width: 100%; height: 100%; padding: 0.25rem; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.25rem; overflow-y: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .issue-diagram-card { width: 7.5rem; padding: 0.25rem 0.4rem; background: #fff; border: 1px solid #adb5bd; border-radius: 0.2rem; font-size: 0.7rem; line-height: 1.2; text-decoration: none; color: inherit; display: block; } .issue-diagram-card:hover { border-color: #495057; background: #f8f9fa; } .issue-diagram-card.ap-high { border-color: #dc3545; } .issue-diagram-card.ap-medium { border-color: #fd7e14; } .issue-diagram-card.ap-low { border-color: #198754; } .issue-diagram-grid-line { stroke: #dee2e6; stroke-width: 1; } .issue-diagram-axis-line { stroke: #495057; stroke-width: 1.5; } .issue-diagram-axis-label { font-size: 0.85rem; fill: #495057; text-anchor: middle; } .issue-diagram-tick-label { font-size: 0.75rem; fill: #6c757d; } .issue-diagram-tick-label-x { text-anchor: middle; } .issue-diagram-tick-label-y { text-anchor: end; } .percent-readout { display: inline-block; min-width: 3em; text-align: right; font-variant-numeric: tabular-nums; } / A whole-card/row is clickable via hx-get (matching system_tree/orgchart's click-to-expand convention) — action buttons inside it need their own stacking context above the row's own click target. / .issue-action-card-actions { position: relative; z-index: 2; } / 8D report editor's section sidebar (decision #9, .claude/plans/8D-app-plan.md) — stays in view while the (long, D0-D8) form scrolls past it. top (#653 follow-up) must clear both the sticky navbar and the sticky page header above it (title + View/PDF/Edit buttons, also #653) — the header's own height varies with title length/viewport width (long report titles wrap), so it's measured live in JS (initEightdStickyOffsets() in project.js) rather than guessed as a fixed rem value, same reasoning as PCP's own initPcpGridStickyHeader(). The 9.25rem fallback covers the common single-line-title case for the brief window before JS runs. / .eightd-section-nav { position: sticky; top: var(--eightd-sidebar-sticky-top, 9.25rem); } / D0/D3/D5/D6/D7 "Not applicable" section-header lock (#710, replaces #666's older field-dimming mechanism entirely) — checking the box (initEightdSectionNotApplicable() in _eightd_edit_scripts.html) forces the section closed and strips the header's own data-bs-toggle attribute so clicking it does nothing; this class is the visual half of that lock, applied/removed alongside it. Unlike #666's pointer-events: none (deliberately NOT reused here — that trick was about not excluding a still-submitted field from FormData, which doesn't apply to a header button that isn't a form field at all), this only needs to look non-interactive, not behave like one — the removed data-bs-toggle attribute is what actually disables the click. / .eightd-header-locked { opacity: 0.6; cursor: default; } / #710 — the toggle button no longer alone in its own header once a Not-applicable checkbox sits beside it (same reason .eightd-hypothesis-header-toggle, folded into this now-shared class, existed for the Theory card's own Delete button, #576) — it can't claim the header's full width the way a lone .canvas-section-header assumes. / .eightd-section-header-shared { width: auto; flex: 1 1 auto; } / Rich text editors (#447) — a page with several fields showed a full CKEditor toolbar on every one of them at once, too crowded; collapsed by default and only shown while that specific field has focus (see initRichTextEditors() in project.js), plus a bit more editing room than CKEditor's own default editable height. !important is warranted here: CKEditor injects its own stylesheet into at runtime, after project.css has already loaded, so its .ck-toolbar { display: flex } wins any same-specificity tie regardless of source order otherwise. / .ck-toolbar.eightd-toolbar-collapsed { display: none !important; } .eightd-richtext-editable { min-height: 8rem; } / Rendered rich text (#500 follow-up) — a CKEditor-embedded carries no width constraint of its own, so it can overflow its container at natural pixel size. #500 fixed this inside eightdreport_pdf.html's own