/* The page scrollbar predates Aurora: the thumb was the old #7386D5 purple * and the track a fixed light #CFD8DC, neither of which moved when the rest * of the UI was repainted, and the light track glared under * [data-theme="dark"]. Both now resolve through the --scrollbar-* aliases * defined in aurora.css, which carry per-theme values. The hex fallbacks * are only reached if custom.css is ever served without aurora.css; they * are the previous appearance, not a definition (aurora.css is the one * place these names are defined, per the alias-block note there). */ html { --scrollbarBG: var(--scrollbar-track, #CFD8DC); --thumbBG: var(--scrollbar-thumb, #7386D5); } body::-webkit-scrollbar { width: 11px; } body { scrollbar-width: auto; scrollbar-color: var(--thumbBG) var(--scrollbarBG); } body::-webkit-scrollbar-track { background: var(--scrollbarBG); } body::-webkit-scrollbar-thumb { background-color: var(--thumbBG) ; border-radius: 6px; border: 3px solid var(--scrollbarBG); } html { background: lightgrey; height: 100%; overflow: hidden; } body { height: 100%; background: whitesmoke; overflow: scroll; margin: 0 auto; font: 100%/1.4 sans-serif; border: 1px solid rgba(0, 0, 0, 0.25) } .fivecolumns { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .goaltexteditor { width: 56em; } .goalordereditor { width: 7em; } .goalactiveeditor { width: 7em; } /* Login + reset-password chrome — Aurora-aligned (2026-05). * * The `.bg-purple` / `.neumorphism-*` class names are kept (multiple * pages reference them by name and we don't want to touch their * markup just to rename), but the visuals were reskinned from the * 2019-era purple neumorphism look to match Aurora's surface, accent, * and radius tokens. The login template now also pulls cms/css/aurora.css * directly so design tokens (--surface-N, --accent-N, --radius-N, * --space-N) are available pre-session. * * Falls back gracefully on resetpw.php which still uses the old * neumorphism-card wrapper but inherits the same calmer surface. */ .bg-purple { background-color: var(--surface-0, #f6f7f9); background-image: radial-gradient( ellipse 1200px 800px at 0% 0%, color-mix(in oklch, var(--accent-3, #c8e0f7) 18%, transparent), transparent 60% ), radial-gradient( ellipse 1000px 700px at 100% 100%, color-mix(in oklch, var(--accent-6, #6aa6e2) 10%, transparent), transparent 55% ); background-attachment: fixed; min-height: 100vh; color: var(--text-1, #1f2937); } .neumorphism-card { border-radius: var(--radius-3, 14px); background: var(--surface-1, #ffffff); border: 1px solid var(--border-subtle, #e5e7eb); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08); color: var(--text-1, #1f2937); } /* Legacy header card — kept defined in case resetpw or another * pre-Aurora page still references it. Same Aurora surface as the * main card so the two read as one composition. */ .neumorphism-jumbotron { border-radius: var(--radius-3, 14px); background: var(--surface-1, #ffffff); border: 1px solid var(--border-subtle, #e5e7eb); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); color: var(--text-1, #1f2937); } #upload_gif { display:none; } .upload_div { position: relative; overflow: hidden; margin: 10px; } .upload_div input.upload_control { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .ocm-btn-primary { color: var(--text-on-accent, #fff); background-color: var(--accent-7, #005DBD); border-color: var(--accent-7, #005DBD); } .ocm-btn-primary:hover, .ocm-btn-primary:focus { color: var(--text-on-accent, #fff); background-color: var(--accent-6, #0076D8); border-color: var(--accent-6, #0076D8); } .ocm-btn-primary:active, .ocm-btn-primary.active { color: var(--text-on-accent, #fff); background-color: var(--accent-9, #00367C); border-color: var(--accent-9, #00367C); } .ocm-btn-primary:focus-visible { box-shadow: 0 0 0 0.25rem rgba(0, 118, 216, .4); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-6, #0076D8) 40%, transparent); } /* Aurora restores the save button's accent (issue: LSNM "save buttons don't * stand out", 2026-08-19). * * The case-tab save buttons are `class="btn ocm-btn-primary"`. aurora.css * defines a bare `.btn { background: var(--surface-1); color: var(--text-1) }` * and is linked AFTER custom.css (the %%[aurora_assets]%% slot in * templates/default_aurora.html sits below the custom.css link). Both * selectors are a single class, so the tie broke on source order and Aurora's * neutral surface won: every Save on the case tabs rendered as a plain white * button, visually identical to Cancel. Admin screens were unaffected because * they use `.btn.btn-primary`, which is two classes and already outranks * `.btn`. * * Qualifying with `.btn` gives these the same two-class weight, so the accent * wins regardless of link order. Canonical tokens (not legacy aliases) so the * dark and high-contrast themes swap correctly; the hex fallbacks only apply * on the aurora_chrome=off path, where aurora.css is absent and there is no * theming to opt out of. Fallbacks are the computed values of the light-theme * accents and clear WCAG AA on white text (6.36:1 / 4.58:1 / 11.55:1); the * old #7386D5 measured 3.44:1 and never did. */ .btn.ocm-btn-primary { color: var(--text-on-accent, #fff); background-color: var(--accent-7, #005DBD); border-color: var(--accent-7, #005DBD); } .btn.ocm-btn-primary:hover, .btn.ocm-btn-primary:focus { color: var(--text-on-accent, #fff); background-color: var(--accent-6, #0076D8); border-color: var(--accent-6, #0076D8); } .btn.ocm-btn-primary:active, .btn.ocm-btn-primary.active { color: var(--text-on-accent, #fff); background-color: var(--accent-9, #00367C); border-color: var(--accent-9, #00367C); } /* Both rules now carry the same --accent-6 halo. (#374) The note that used * to sit here said the unqualified rule above "still carries the old #7386D5 * halo, which is correct while aurora_chrome is off and the button really is * that purple". That premise was wrong twice over: custom.css loads on the * aurora_chrome=off path too, so the two-class rule (and its hex fallbacks) * already governed the button in both worlds, and every one of the 70 * `ocm-btn-primary` call sites in cms/ also carries `btn` — so the * unqualified rule never won a cascade anywhere. It is kept, tokenised, to * avoid a behaviour change on a class that JS could still add on its own; * deleting it belongs to the legacy-view sweep (#375). * The rgba() line is the fallback for engines without color-mix(); without * it those users would lose the halo entirely. */ .btn.ocm-btn-primary:focus-visible { box-shadow: 0 0 0 0.25rem rgba(0, 118, 216, .4); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-6, #0076D8) 40%, transparent); } .form-control:focus, .form-select:focus { border-color: var(--accent-6, #0076D8); box-shadow: 0 0 0 0.2rem rgba(0, 118, 216, .25); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-6, #0076D8) 25%, transparent); } /* case notes text formatting styles. * * (#374) These two were bare `#ffff44` / `#ff7777` backgrounds with no * colour, so the text inside them was whatever the surrounding note * inherited. Under [data-theme="dark"] that is a light `--text-1`, which * left light text on a light highlighter — the highlight made the note * *less* readable than no highlight at all. Both halves are now set from a * paired token. Not the badge tints: those are pale washes (#ffff44 would * have become #ffe7bb), and a highlighter has to shout. --mark-* is a * dedicated pair in aurora.css — same marker colours in light, a dimmed * fill in dark, dark ink throughout. */ .yh {background-color: var(--mark-yellow-bg, #ffff44); color: var(--mark-yellow-fg, #000);} .ph {background-color: var(--mark-pink-bg, #ff7777); color: var(--mark-pink-fg, #000);} .lt {text-decoration: line-through;} .ul {text-decoration: underline;} /*-------------------Scrollbars----*/ p { /* #548: `font-size: 1.1em` was here. It is the single largest source of type sprawl in the product, because it is relative and it is on a container element, so it multiplies through everything nested in a paragraph. On the System Settings screen it produced four of the fifteen distinct font sizes on its own: 15.4px (14 x 1.1) for the paragraphs, 13.475px (x 0.875) for `small` inside them, 12.1275px (x 0.9) for `code` inside that, and 14.3px where a `p` sat inside 13px chrome. None of those sizes was authored anywhere. Paragraphs now render at the body size, which is what --text-base is for. */ font-weight: 300; line-height: 1.7em; /* a11y: was #999, which fails 4.5:1 contrast on the whitesmoke body background (2.61:1). #595959 is the lightest grey that passes AA at this font weight. */ color: var(--text-3, #55585F); } a, a:hover, a:focus { color: inherit; text-underline-offset: .25rem !important; text-decoration-thickness: .125rem !important; text-decoration-skip-ink: none !important; text-decoration-color: rgba(102, 102, 102, 0.5) !important; text-decoration-color: color-mix(in srgb, var(--text-3, #55585F) 50%, transparent) !important; text-decoration-style: dotted !important; } .navbar { padding: 15px 10px; background: var(--surface-1, #fff); border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } .navbar-btn { box-shadow: none; outline: none !important; border: none; } .line { width: 100%; height: 1px; border-bottom: 1px dashed var(--border-default, #D9DBDE); margin: 40px 0; } /* --------------------------------------------------- SIDEBAR STYLE ----------------------------------------------------- */ .wrapper { display: flex; width: 100%; align-items: stretch; perspective: 1500px; } #sidebar { min-width: 250px; max-width: 250px; background: var(--accent-8, #00499C); color: var(--text-on-accent, #fff); transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665); transform-origin: bottom left; } #sidebar.active { margin-left: -250px; transform: rotateY(100deg); } #sidebar .sidebar-header { padding: 20px; background: var(--accent-9, #00367C); } #sidebar ul.components { padding: 20px 0; border-bottom: 1px solid var(--accent-6, #0076D8); } #sidebar ul p { color: var(--text-on-accent, #fff); padding: 10px; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; /* a11y (#232): Bootstrap's default link color (#005dbd) was leaking through onto our #3a4b8c sidebar background (1.28:1, fails AA). Force the inherited white from #sidebar so links clear AAA. */ color: var(--text-on-accent, #fff); } #sidebar ul li a:hover { color: var(--accent-7, #005DBD); background: var(--surface-1, #fff); } #sidebar ul li.active > a, a[aria-expanded="true"] { color: var(--text-on-accent, #fff); background: var(--accent-9, #00367C); } a[data-toggle="collapse"] { position: relative; } .dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; background: var(--accent-9, #00367C); } /* The nested-list rule above paints a #6d7fcc blue pill on links, which bleeds onto the document file list (ul.pika_files is a nested ul). That left the Edit / Delete and file links as low-contrast dark text on blue (black-on-dark-blue in both themes). The document list manages its own link colours, so clear the inherited background and indent. */ ul.pika_files a { background: transparent !important; padding-left: 0 !important; font-size: inherit !important; } ul.CTAs { padding: 20px; } ul.CTAs a { text-align: center; font-size: 0.9em !important; display: block; border-radius: 5px; margin-bottom: 5px; } a.download { background: var(--surface-1, #fff); /* a11y: previous #7386D5 on white was 3.4:1, fails AA. #3a4b8c (matches the new sidebar palette) clears 7:1. */ color: var(--accent-8, #00499C); } a.article, a.article:hover { background: var(--accent-9, #00367C) !important; color: var(--text-on-accent, #fff) !important; } /* --------------------------------------------------- CONTENT STYLE ----------------------------------------------------- */ #content { width: 100%; padding: 20px; min-height: 100vh; transition: all 0.3s; } #sidebarCollapse { width: 40px; height: 40px; background: var(--surface-2, #F4F5F7); cursor: pointer; } #sidebarCollapse span { width: 80%; height: 2px; margin: 0 auto; display: block; background: var(--text-2, #3A3D44); transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375); transition-delay: 0.2s; } #sidebarCollapse span:first-of-type { transform: rotate(45deg) translate(2px, 2px); } #sidebarCollapse span:nth-of-type(2) { opacity: 0; } #sidebarCollapse span:last-of-type { transform: rotate(-45deg) translate(1px, -1px); } #sidebarCollapse.active span { transform: none; opacity: 1; margin: 5px auto; } .col-static-width { flex: 0 0 225px; } /* --------------------------------------------------- MEDIAQUERIES ----------------------------------------------------- */ @media (max-width: 768px) { .goaltexteditor { width: 100%; } .fivecolumns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } #sidebar { margin-left: -250px; transform: rotateY(90deg); } #sidebar.active { margin-left: 0; transform: none; } #sidebarCollapse span:first-of-type, #sidebarCollapse span:nth-of-type(2), #sidebarCollapse span:last-of-type { transform: none; opacity: 1; margin: 5px auto; } #sidebarCollapse.active span { margin: 0 auto; } #sidebarCollapse.active span:first-of-type { transform: rotate(45deg) translate(2px, 2px); } #sidebarCollapse.active span:nth-of-type(2) { opacity: 0; } #sidebarCollapse.active span:last-of-type { transform: rotate(-45deg) translate(1px, -1px); } } @media (max-width: 480px) { .fivecolumns { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } /* print styles */ @media print { body { background: white; color: black; margin: 0; padding: 0; width: 100%; } * { overflow: visible !important; } h1, h2, h3, h4, h5, h6, p, div { page-break-inside: avoid; } .no-print, .header, .footer, .sidebar { display: none; } img { max-width: 100%; height: auto; } .container { width: 100% !important; } } /* File list widget */ ul.pika_files { list-style: none; padding-left: 0; margin: 2px 0; } ul.pika_files li.directory_open > ul.pika_files { margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--accent-3, #92C9FF); } .pika-folder-crumb { display: inline-block; background: var(--accent-soft-bg, #DEF5FF); border-left: 3px solid var(--accent-7, #005DBD); padding: 1px 8px; border-radius: 0 3px 3px 0; margin-bottom: 3px; font-weight: 600; } .pika-folder-crumb i { color: var(--warning-6, #D29000); } .folder_actions { font-size: 0.85em; color: var(--text-3, #55585F); margin-left: 5px; } /* --------------------------------------------------- ACCESSIBILITY (issue #210 baseline) --------------------------------------------------- */ /* Bootstrap 4 used .sr-only; our chrome is on Bootstrap 5 which uses .visually-hidden. Provide both so older partials keep working and our own additions (e.g. the skip-link target label and the search field label) work even if the loaded Bootstrap build is missing the helper. */ .visually-hidden, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Same fallback for the reveal-on-focus variant, used by the Aurora topbar's real search form (label + input + named submit). Clipped like .visually-hidden until the element or any descendant takes focus, then it lays out normally. */ .visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Skip-to-content link: hidden until focused, then pinned to the top-left so a keyboard user can jump past the sidebar+navbar in one Tab. */ .ocm-skip-link { position: absolute; top: -40px; left: 0; background: var(--toast-bg, #000); color: var(--toast-fg, #fff) !important; padding: 8px 16px; z-index: 10000; text-decoration: none !important; /* #548: was `0 0 4px 0`, a corner combination no other element used. 4px is --radius-1; spelled out because custom.css loads with aurora_chrome off. */ border-radius: 4px; } .ocm-skip-link:focus, .ocm-skip-link:focus-visible { top: 0; outline: 3px solid var(--focus-ring, #FFBF47); outline-offset: 0; } /* Default focus ring. Bootstrap suppresses :focus on .navbar-btn (see .navbar-btn { outline: none !important }). Override for keyboard users so the sidebar toggle and other navbar buttons are visible on focus. */ :focus-visible { outline: 2px solid var(--focus-ring, #FFBF47); outline-offset: 2px; } .navbar-btn:focus-visible, .btn:focus-visible { outline: 3px solid var(--focus-ring, #FFBF47) !important; outline-offset: 2px; box-shadow: none; } /* Sidebar links: white-on-#7386D5 fails AA at 4.5:1 (it measures 3.44:1). Bumping to a darker blue covers the nav links and the OCM brand h5/h3 in the sidebar header. (#374) The two shades were #3a4b8c / #2f3f7a; they are now --accent-8 / --accent-9, which measure 8.64:1 and 11.54:1 against white — both a little better than the hexes they replace (8.19:1 and 9.94:1) and, unlike them, they still track the accent ramp when a box switches theme. The block below this one is what actually paints the sidebar; the earlier purple #sidebar rules are superseded on every property they share. */ #sidebar { background: var(--accent-8, #00499C); } #sidebar .sidebar-header { background: var(--accent-9, #00367C); } #sidebar ul.components { border-bottom-color: var(--accent-6, #0076D8); } #sidebar ul li.active > a, #sidebar a[aria-expanded="true"] { background: var(--accent-9, #00367C); } ul ul a { background: var(--accent-9, #00367C) !important; } a.article, a.article:hover { background: var(--accent-9, #00367C) !important; } #sidebar a:focus-visible { outline: 2px solid var(--focus-ring, #FFBF47); outline-offset: -2px; } /* Sidebar footer (sign-out) — inline style sets #6d7fcc which fails AA for the white text. Force a darker shade via our own class hook. */ #sidebar > footer { background: var(--accent-9, #00367C) !important; } /* a11y (#232): the sign-out anchor's inherits #005dbd from Bootstrap's link color (1.56:1 on #2f3f7a). Force white on every sidebar anchor + descendant span so contrast clears AAA. */ #sidebar a, #sidebar a span { color: var(--text-on-accent, #fff); } /* Issue #247 — pass WCAG AA contrast on outline buttons. Bootstrap 5.3's defaults render .btn-outline-info as #0dcaf0 text on white (3.5:1) and .btn-outline-warning as #ffc107 text on white (1.93:1) — both fail AA's 4.5:1 minimum for normal text. We darken the resting text + border to AA-passing shades while preserving the filled hover/active state (white text on the original brand colour already passes against the darker fill). • #0769a3 on #fff = 5.90:1 (AA pass) • #856404 on #fff = 5.49:1 (AA pass) The hover/active backgrounds keep the Bootstrap brand hues so the outline aesthetic and visual identity survive the fix. (#374) Those two hexes are gone. --info-8 / --info-9 were added to aurora.css for this: the ramp stopped at --info-6, which is only 3.63:1 on white, so moving onto the existing token would have quietly undone this very fix. The resting text and border use `--text-info` / `--text-warning`; the hover and active fills use `--info-8` / `--warning-8` and `--info-9` / `--warning-9`. They are split because the same colour cannot do both jobs across themes: a fill behind white text has to stay dark, but text on dark theme's near-black surface has to go light. --info-8 as text on that surface is 3.18:1 — which is what the hardcoded #0769a3 gave too, so dark theme has failed AA here since the theme shipped. --text-info swaps to the light end of the ramp on dark and fixes it. Measured: resting text 5.92:1 light / 13.32:1 dark / 7.94:1 HC, and 5.58:1 / 12.91:1 / 7.54:1 for warning. Fills 5.92:1 and 5.58:1, active fills 10.23:1 and 7.52:1. */ .btn-outline-info { --bs-btn-color: var(--text-info, #006C90); --bs-btn-border-color: var(--text-info, #006C90); --bs-btn-hover-color: var(--text-on-accent, #fff); --bs-btn-hover-bg: var(--info-8, #006C90); --bs-btn-hover-border-color: var(--info-8, #006C90); --bs-btn-focus-shadow-rgb: 7, 105, 163; --bs-btn-active-color: var(--text-on-accent, #fff); --bs-btn-active-bg: var(--info-9, #004665); --bs-btn-active-border-color: var(--info-9, #004665); --bs-btn-disabled-color: var(--text-info, #006C90); --bs-btn-disabled-border-color: var(--text-info, #006C90); color: var(--text-info, #006C90); border-color: var(--text-info, #006C90); } .btn-outline-info:hover, .btn-outline-info:focus { color: var(--text-on-accent, #fff); background-color: var(--info-8, #006C90); border-color: var(--info-8, #006C90); } .btn-outline-info:active, .btn-outline-info.active { color: var(--text-on-accent, #fff); background-color: var(--info-9, #004665); border-color: var(--info-9, #004665); } .btn-outline-warning { --bs-btn-color: var(--text-warning, #925C00); --bs-btn-border-color: var(--text-warning, #925C00); --bs-btn-hover-color: var(--text-on-accent, #fff); --bs-btn-hover-bg: var(--warning-8, #925C00); --bs-btn-hover-border-color: var(--warning-8, #925C00); --bs-btn-focus-shadow-rgb: 133, 100, 4; --bs-btn-active-color: var(--text-on-accent, #fff); --bs-btn-active-bg: var(--warning-9, #7A4A00); --bs-btn-active-border-color: var(--warning-9, #7A4A00); --bs-btn-disabled-color: var(--text-warning, #925C00); --bs-btn-disabled-border-color: var(--text-warning, #925C00); color: var(--text-warning, #925C00); border-color: var(--text-warning, #925C00); } .btn-outline-warning:hover, .btn-outline-warning:focus { color: var(--text-on-accent, #fff); background-color: var(--warning-8, #925C00); border-color: var(--warning-8, #925C00); } .btn-outline-warning:active, .btn-outline-warning.active { color: var(--text-on-accent, #fff); background-color: var(--warning-9, #7A4A00); border-color: var(--warning-9, #7A4A00); } /* Issue #249 (second-ring audit): Bootstrap default nav-link color #0d6efd against white tab background is 4.38:1 — fails WCAG 2.1 AA (4.5:1). Override to the same AA-passing blue used by .btn-outline-info (#0769a3 = 5.51:1 against white). Targets the unselected tabs in case_tabs and calendar_tabs. */ .nav-tabs .nav-link { color: var(--text-info, #006C90); } /* Issue #230 (Aurora polish — empty states): consistent shell for the "no rows match" / "nothing here yet" panels. Pattern documented in docs/aurora/microcopy.md §3. The shell is intentionally minimal — centred, light-grey background, max-width — so it reads as an intentional empty state rather than a half-rendered widget. The modifier --inline shrinks the shell to a single line for places like the command-palette dropdown where a full panel would dwarf the surrounding UI. */ .ocm-empty-state { margin: 1.5rem auto; padding: 1.75rem 1.5rem; max-width: 32rem; text-align: center; color: var(--text-3, #55585F); background: var(--surface-2, #F4F5F7); border: 1px solid var(--border-default, #D9DBDE); border-radius: 0.5rem; } .ocm-empty-state__description { margin: 0 0 1rem; /* #548: was 1rem (16px), one step off the type scale for no reason — an empty-state message is body copy. 0.875rem is --text-base; spelled out because custom.css loads with aurora_chrome off, when the Aurora token block does not exist. */ font-size: 0.875rem; color: var(--text-1, #050608); } .ocm-empty-state__actions { margin: 0; } .ocm-empty-state__actions .btn + .btn { margin-left: 0.5rem; } .ocm-empty-state--inline { margin: 0; padding: 0.75rem 1rem; max-width: none; text-align: left; background: transparent; border: 0; border-radius: 0; } /* --------------------------------------------------- Phase 6 — replace inline styles (issue #235) ---------------------------------------------------- Each rule below replaces a `style="..."` attribute that used to live in a template / PHP emitter. Bootstrap 5 utility classes were preferred where available; the rest got `ocm-` semantic classes so they can be tracked. The only inline styles that intentionally survive are templated values (`%%[open_closed_color]%%`) that are now CSS custom properties on the element — those will become Phase 7 nonce-eligible candidates if needed. */ /* Hover/help-icon affordance — replaces `style="cursor:pointer;"` sprinkled across `system-settings.html`, `system-users.html`. */ .ocm-pointer { cursor: pointer; } /* Inline help icon shown next to form labels. Was `style="display:inline;cursor:pointer;"` — `` is already inline, so the only useful bit is the cursor + a touch of padding so the tooltip target is bigger than the glyph. */ .ocm-help-icon { cursor: pointer; } /* Phone-mask field-pair widths. `style="width: 2em / 3.5em / 6em;"` on the area-code , `style="width: 7em / 10.5em / 11.2em;"` on the phone . Each template (case_contact_list, intake_contact_list, contact_list, contact_full, spousal_record) used slightly different widths historically. The classes below match each template's previous layout exactly. */ .ocm-area-code-narrow { width: 2em; } /* case_contact_list */ .ocm-area-code-medium { width: 3.5em; } /* intake / addressbook */ .ocm-area-code-wide { width: 6em; } /* contact_full */ .ocm-area-code-spousal { max-width: 5em; } /* spousal_record */ .ocm-phone-narrow { width: 7em; } /* intake / addressbook */ .ocm-phone-medium { width: 10.5em; } /* contact_full */ .ocm-phone-wide { width: 11.2em; } /* case_contact_list */ .ocm-phone-spousal { max-width: 12em; }/* spousal_record */ .ocm-cal-jump-input { width: 8em; } /* cal_week jump-to-date */ /* Eligibility-screen poverty result inputs. Was `style="width: 6.8em; text-align: right;"`. */ .ocm-elig-poverty { width: 6.8em; text-align: right; } /* Inline `` toggle glyphs in textFormat.html. Was `style="color: green"` / `style="color: red"`. Bootstrap's `text-success`/`text-danger` are too dark a green/red against the white panel background, so we mint our own bright variants that match the original literals. */ .ocm-tag-on { color: green; } .ocm-tag-off { color: red; } /* `subtemplates/about.html` repeated `text-decoration: underline` on every credits link. Move to a single class hook that any future credits-style page can re-use. */ .ocm-credits a, a.ocm-credits-link { text-decoration: underline; } /* `subtemplates/case-pb-enhanced.html` has 4 cards that highlight intake-source rules. Was inline `background-color: #ffff99` (the first three) and `#ffff66` (the last "matched" card). */ .ocm-pb-rule-card { background-color: var(--warning-1, #FFEFCD); } .ocm-pb-rule-matched { background-color: var(--warning-2, #FFDFA0); } /* The 'georgia, times, serif' italic banner used by the case_act / case-pb-enhanced quote blocks and pikaMisc / pika_cms PHP emitters. This is the class that wraps every case-note body, so it must size in rem: the per-user Text Size preference works by scaling the root (html.ocm-font-* in this file), and a px size here pinned notes at 14px while everything around them scaled (SCLO report, 2026-08-12). 0.875rem == 14px at the default root, so Medium is pixel-identical. */ .ocm-quote { font-family: georgia, times, serif; font-size: 0.875rem; } /* `pika_html_red_flag()` (`pika_cms.php`) emits a single thin-bordered span. The literal style was `line-height: 25px; border: 1px solid #999999; padding: 1px;`. */ .ocm-redflag-pill { line-height: 25px; border: 1px solid var(--border-strong, #9C9EA4); padding: 1px; } /* #274 — case-detail red-flag row. When 7+ flags, case.php emits * a
/ instead of a single

so the row stops * wrapping into two visual rows that dominate the page. */ .ocm-case-flags { margin-top: 8px; margin-bottom: 8px; } .ocm-case-flags__summary { display: inline-block; /* override default display: list-item */ list-style: none; /* drop the browser triangle */ padding: 5px 14px; border: 1px solid var(--danger-6, #c83030); border-radius: 9999px; /* #548: was 999px; 9999px is --radius-full */ background: color-mix(in oklch, var(--danger-3, #f4cccc) 30%, transparent); color: var(--danger-9, #7a1a1a); font-weight: 600; cursor: pointer; user-select: none; } .ocm-case-flags__summary::-webkit-details-marker { display: none; } .ocm-case-flags__summary::marker { content: ""; } .ocm-case-flags__summary:hover { background: color-mix(in oklch, var(--danger-3, #f4cccc) 50%, transparent); } .ocm-case-flags__list { margin-top: 8px; margin-bottom: 0; } .ocm-case-flags[open] > .ocm-case-flags__summary::after { content: " (click to collapse)"; font-weight: 400; font-size: 0.8em; opacity: 0.65; } /* #497 — shared flags/compliance status strip above both case layouts. */ .ocm-case-health-strip { margin: 8px 0 16px; padding: 12px 14px; border: 1px solid var(--border-default, #d7dce1); border-radius: 8px; background: var(--surface-1, #fff); } .ocm-case-health-strip > .ocm-case-flags { margin-top: 0; } .ocm-case-health-strip__compliance { display: grid; gap: 8px; } .ocm-case-health-strip__heading { margin: 2px 0 0; font-size: 1rem; } .ocm-case-health-strip__flag { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border-left: 4px solid; border-radius: 4px; } .ocm-case-health-strip__flag--info { border-color: var(--info-6, #287c9b); background: var(--badge-info-bg, #e7f5fa); } .ocm-case-health-strip__flag--warn { border-color: var(--warning-6, #c78318); background: var(--badge-warning-bg, #fff3d6); } .ocm-case-health-strip__flag--block { border-color: var(--danger-6, #c83030); background: var(--badge-danger-bg, #fbe5e5); } .ocm-case-health-strip__footer { margin-top: 2px; font-size: 0.875rem; } /* Megareport form — large recurring blocks. */ /* Run Report bar: sticky mode pins the slim submit bar to the * viewport bottom while the tall filter form scrolls, until it * settles into its natural spot above Load Saved Report. Applied per * user via megareport_sticky_options. Only the button bar is pinned: * pinning the whole options card covered the filter checkboxes * scrolling beneath it (LSNM 2026-08-17 follow-up). Short viewports * skip it. The card class carries an opaque background in both * themes; the shadow separates it from content scrolling beneath. */ @media (min-height: 600px) { .ocm-megareport-run-sticky { position: sticky; bottom: 0; z-index: 10; box-shadow: 0 -0.25rem 0.75rem rgba(0, 0, 0, 0.12); } } .ocm-megareport-field-pane { background-color: var(--surface-1, #ffffff); height: 50vh; overflow: auto; } .ocm-megareport-saved { background-color: var(--surface-1, #ffffff); height: 170px; border: 1px black solid; overflow: auto; border-radius: 3px; padding: 10px; } .ocm-megareport-pad-3 { padding: 3px; } .ocm-megareport-and { color: red; } .ocm-multiselect-bordered { border: 1px black solid; } /* `template_plugins/file_list.php` — wrapper div around the file-tree widget. Width / height are passed in as CSS custom properties when the caller specifies them (megareport's saved-reports panel, the document-storage list, etc.). */ .ocm-file-list-box { background-color: var(--surface-1, #ffffff); border: 1px black solid; overflow: auto; border-radius: 3px; padding: 10px; width: var(--ocm-flw, auto); height: var(--ocm-flh, auto); } /* `template_plugins/file_list.php` header-row cell padding. Phase 6 missed this single-quoted `style='…'` because the original audit regex looked for double-quoted attrs only; Phase 7 cleans it up alongside the other style-src tightening. */ .ocm-file-list-header-cell { padding-left: 20px; padding-top: 3px; } /* `subtemplates/documents.html` form-row cell padding. Phase 7 round-up — like the file-list header above, the original Phase 6 regex missed single-quoted `style='…'` so these four td cells carried inline style attrs through Phase 6. */ .ocm-document-form-cell { padding-left: 3px; padding-top: 3px; } /* `pl_discover_logo_img()` sidebar logo — inline style attr replaced with a class for strict CSP. */ .sidebar-logo { max-width: 100%; height: auto; margin-bottom: 8px; } /* `template_plugins/checkbox_list.php` — wrapper div around the checkbox list (megareport's relation_codes / field_list panes). */ .ocm-checkbox-list-box { background-color: var(--surface-1, #ffffff); overflow: auto; width: var(--ocm-cbw, auto); height: var(--ocm-cbh, auto); } /* `template_plugins/input_date_selector.php` — popup calendar div. */ .ocm-date-selector-popup { z-index: 3; clear: both; position: absolute; background-color: white; display: none; border: solid; border-width: 1px; } /* `subtemplates/system-fields.html` — first-column TH width. */ .ocm-th-180 { width: 180px; } /* `subtemplates/case_act.html` separator. */ .ocm-section-divider { border-top: 1px solid var(--border-strong, #9C9EA4); } /* `system-json-tabs.html` workspace + JSON-textarea tweaks. */ .ocm-jtb-workspace { min-height: 80px; display: none; } .ocm-json-small { font-size: 0.85em; } .ocm-json-tiny { font-size: 0.8em; } /* `case-litc.html` form-footer wrapper. */ .ocm-form-footer-clearleft { clear: both; float: left; } /* `system-users.html` QR-code tile. */ .ocm-qr-square { width: 256px; height: 256px; } /* `case-pb-enhanced.html` — `vertical-align: top` on the per-row . */ .ocm-tr-top { vertical-align: top; } /* Eligibility input-groups whose baseline alignment matters. */ .ocm-baseline { align-items: baseline; } /* `templates/default.html` chrome — sticky footer + content min-heights + the search box width. */ .ocm-default-footer { position: sticky; bottom: 0; text-align: center; background: var(--accent-9, #00367C); padding: 10px; } .ocm-default-footer-link { margin: 10px; color: white; text-decoration: underline; } .ocm-content-min-height { min-height: 97vh; padding: 0; } .ocm-main-min-height { min-height: 88vh; } .ocm-search-input { max-width: 175px; min-width: 100px; } /* `subtemplates/inc/header.php` (legacy fossil) chrome. Kept so that the file lints clean even though no live route includes it. */ .ocm-legacy-footer-abs { position: absolute; bottom: 0; text-align: center; } .ocm-search-input-legacy { max-width: 175px; } .ocm-min-height-88vh { min-height: 88vh; } /* `templates/login-form.html` — Aurora-aligned login layout (2026-05). * * The page is centred vertically on a calm tinted surface; the brand * block sits above a single card with the form + SSO button. No * neumorphism shadows; soft border + small drop instead. */ .ocm-login-bg { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .ocm-login-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .ocm-login-card-wrap { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; } .ocm-login-brand { text-align: center; margin: 0 0 4px; } .ocm-login-brand-name { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--text-1, #1f2937); } .ocm-login-brand-owner { font-size: 14px; color: var(--text-3, #6b7280); margin: 4px 0 0; } .ocm-login-card { padding: 28px 32px; } .ocm-login-heading { font-size: 18px; font-weight: 600; margin: 0 0 16px; color: var(--text-1, #1f2937); } .ocm-login-form { display: flex; flex-direction: column; gap: 14px; } .ocm-login-field .form-label { font-size: 13px; font-weight: 500; margin-bottom: 4px; color: var(--text-2, #374151); } .ocm-login-field .form-control { border-radius: var(--radius-2, 8px); border: 1px solid var(--border-subtle, #d1d5db); padding: 10px 12px; font-size: 14px; background: var(--surface-1, #ffffff); color: var(--text-1, #1f2937); transition: border-color 0.15s, box-shadow 0.15s; } .ocm-login-field .form-control:focus { outline: none; border-color: var(--accent-6, #2c5aa0); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-6, #2c5aa0) 22%, transparent); } .ocm-login-hint { font-size: 12px; color: var(--text-3, #6b7280); font-weight: 400; } .ocm-login-messages { font-size: 13px; color: var(--accent-9, #b45309); min-height: 0; } .ocm-login-messages:empty { display: none; } .ocm-login-submit { background: var(--accent-6, #2c5aa0); color: var(--text-on-accent, #fff); border: none; border-radius: var(--radius-2, 8px); padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; margin-top: 4px; } .ocm-login-submit:hover { background: var(--accent-7, #1e3f75); } .ocm-login-submit:active { background: var(--accent-8, #163057); } .ocm-login-notice { font-size: 11px; color: var(--text-3, #6b7280); text-align: center; margin: 8px 4px 0; line-height: 1.5; } .ocm-login-footer { font-size: 11px; color: var(--text-3, #9ca3af); text-align: center; margin: 0; } /* SSO button — Aurora outline-button style with a divider above so * "or sign in with Microsoft Entra ID" reads as a parallel option, * not an afterthought slapped under the password form. */ .ocm-login-sso { display: block; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-subtle, #e5e7eb); text-align: center; } .ocm-login-sso-label { display: block; font-size: 12px; color: var(--text-3, #6b7280); margin-bottom: 8px; } .ocm-login-sso-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 16px; border-radius: var(--radius-2, 8px); border: 1px solid var(--border-subtle, #d1d5db); background: var(--surface-1, #ffffff); color: var(--text-1, #1f2937); font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .ocm-login-sso-btn:hover { background: var(--surface-2, #f3f4f6); border-color: var(--border-strong, #9ca3af); text-decoration: none; color: var(--text-1, #1f2937); } .ocm-login-sso-btn .ocm-login-sso-icon { width: 18px; height: 18px; flex: 0 0 auto; } /* `inc/footer.php` p-margin reset (legacy). */ .ocm-footer-pinch { margin: 0; } /* `subtemplates/system-feeds.html`, `system-default_prefs.html`, `system-sms.html`, `password.html` — `padding:5px` on a wrapper

. */ .ocm-form-pad-5 { padding: 5px; } /* `system-default_prefs.html`, `password.html`, `system-sms.html` — `float:left;padding:2px / 5px` body column. */ .ocm-form-col-left { float: left; padding: 5px; } .ocm-form-col-left-2 { float: left; padding: 2px; } .ocm-form-col-right-500 { float: right; padding: 5px; width: 500px; } .ocm-form-footer-clear { clear: both; } .ocm-form-bar { float: left; margin: 4px; } /* `subtemplates/case_screen.html` — inline `background: #7386D5;` on the case-tab card. */ .ocm-case-tab-card { background: var(--accent-7, #005DBD); } /* `subtemplates/system-json-tabs.html`, `inc/header.php` — `padding:1em` col wrapper used by activityC.html. */ .ocm-pad-1em { padding: 1em; } /* `activityC.html` — `display:none` SMS reminders panel. */ .ocm-sms-reminders { display: none; } /* `activityC.html` SMS textarea. Was `style="resize: both; width: 100%;"`. */ .ocm-sms-extra-textarea { resize: both; width: 100%; } /* `subtemplates/alias.html` — `float:left;position:relative`. */ .ocm-col-relative { float: left; position: relative; } /* `home.html` — collapsed motd content. */ .ocm-hidden { display: none; } /* `app/lib/pl.php` — print-meta wrapper. Hidden on screen by default; the print stylesheet (cms/css/aurora-print.css) re-shows it inside an @media print { } block. Was inline `style="display:none"`. */ .print-meta { display: none; } /* `textFormat.html` — the floating popup. */ .ocm-textformat-popup { visibility: hidden; position: absolute; background-color: white; padding: 0.5em; text-align: right; } /* `app/lib/pl.php` — re-auth fatal/confirm-identity inline styles. The file emits a standalone HTML page so we keep most of those styles in PHP, but the small "error" banner and the cancel-link margin become reusable hooks. */ .ocm-reauth-error { /* (#374) --badge-danger-fg, not --danger-9: this is unfilled error text, * so it needs the rung that lightens on dark. See .ocm-oc-closed. */ color: var(--text-danger, #8A0314); margin: 8px 0; } .ocm-mt-20px { margin-top: 20px; } /* `subtemplates/case-elig.html` etc. — generic 20-pixel-top-spacer
. Bootstrap's `mt-3` is 16px; the templates were 20. We pick `mt-4` (24px) where the visual gap is forgiving and use `ocm-mt-20px` where the exact 20px matters. The bulk of the `style="margin-top:20px;"` hits in case-elig.html become `mt-4`. */ .ocm-row-spacer-20 { margin-top: 20px; } .ocm-row-spacer-10 { margin-top: 10px; } .ocm-row-spacer-5 { margin-top: 5px; } .ocm-margin-7 { margin: 7px; } .ocm-margin-3 { margin: 3px; } /* `inc/footer.php` (legacy) — paragraph margin reset. */ /* `case_list.html` open/closed badge — was `style="color: %%[open_closed_color]%%;"`. The colour is a per-row PHP value. Phase 6 fed it as a CSS custom property (`style="--ocm-oc-color: …"`); Phase 7 (#235) replaced the inline style attribute with a finite class set (the PHP only ever sets one of three colours), so the strict CSP no longer needs to whitelist inline-style attributes for this case. The custom-property fallback is kept so any caller that still emits `style="--ocm-oc-color: …"` keeps working. */ .ocm-open-closed-badge { color: var(--ocm-oc-color, inherit); } /* (#374) These are text-only badges — no fill — so they need a semantic *text* * token, not the raw --success-9 / --danger-9 rung. The rungs * are fixed dark greens and reds: correct on the light surface, but they do * not lighten under [data-theme="dark"], where --surface-1 goes to gray-10 * and the badge would sit at 1.8:1 — invisible. --text-danger / --text-success resolve to the * rung each theme can actually show on its own --surface-1. */ .ocm-open-closed-badge.ocm-oc-open { color: var(--text-success, #004A12); } .ocm-open-closed-badge.ocm-oc-closed { color: var(--text-danger, #8A0314); } .ocm-open-closed-badge.ocm-oc-walled { color: var(--text-3, #55585F); } /* Per-user text-size preference (Account Preferences → Text Size). The class comes from pl_font_size_class() and lands on — see templates/default.html and templates/default_aurora.html. It used to land on and re-declare a long list of px sizes for tr / input / th / h1 / .mycal / … , inherited verbatim from the v8 inline