/* Clause opener (job CX1, 6 Oct 2026). Uses the page's own colours, so light and dark follow the page. */
a.cx, button.cx { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--sea, #003399); text-underline-offset: 3px; cursor: pointer; }
button.cx { background: none; border: 0; padding: 0; margin: 0; font: inherit; }
a.cx:hover, button.cx:hover { color: var(--sea, #003399); text-decoration-style: solid; }
a.cx:focus-visible, button.cx:focus-visible, .cx-panel :focus-visible { outline: 2px solid var(--sea, #003399); outline-offset: 2px; border-radius: 2px; }
a.cx[aria-expanded="true"], button.cx[aria-expanded="true"] { color: var(--sea, #003399); text-decoration-style: solid; }

.cx-panel { --cx-bg: var(--surface-2, #f7f9fd); --cx-ink: var(--ink, #0e1a33); --cx-ink2: var(--ink-2, #3a4660); --cx-rule: var(--rule, #dce2ee); --cx-accent: var(--sea, #003399); --cx-soft: var(--sea-soft, #e8eef9);
  display: block; box-sizing: border-box; margin: .7rem 0; padding: .75rem 1rem 1rem; background: var(--cx-bg); color: var(--cx-ink); border: 1px solid var(--cx-accent); border-radius: 8px;
  font: 15px/1.5 var(--display, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif); text-align: left; text-indent: 0; white-space: normal; }
.cx-panel * { box-sizing: border-box; }
.cx-panel h4, .cx-panel p, .cx-panel ol, .cx-panel li, .cx-panel header, .cx-panel footer { margin: 0; padding: 0; border: 0; background: none; text-transform: none; letter-spacing: 0; text-indent: 0; }
.cx-panel li { display: list-item; list-style: none; }
.cx-row > td { padding: 0 !important; border: 0 !important; background: none !important; }
.cx-panel .cx-h { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; justify-content: space-between; margin: 0 0 .4rem; }
.cx-panel .cx-trail { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 0; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--cx-ink2); }
.cx-trail li + li::before { content: "\203A"; margin: 0 .45rem; color: var(--cx-ink2); }
.cx-trail li[aria-current] { font-weight: 600; color: var(--cx-ink); }
.cx-crumb { background: none; border: 0; padding: 0; font: inherit; color: var(--cx-accent); text-decoration: underline; cursor: pointer; }
.cx-tools { display: flex; gap: .4rem; }
.cx-panel .cx-title { margin: .1rem 0 .15rem; font: 600 16px/1.3 var(--display, system-ui, sans-serif); color: var(--cx-ink); }
.cx-title:focus { outline: none; }
.cx-panel .cx-src { margin: 0 0 .5rem; font: 13px/1.5 var(--display, system-ui, sans-serif); color: var(--cx-ink2); }
.cx-src a, .cx-note a { color: var(--cx-accent); }
.cx-panel .cx-note { margin: 0 0 .5rem; padding: .4rem .6rem; font: 13px/1.5 var(--display, system-ui, sans-serif); background: var(--cx-soft); border-left: 3px solid var(--cx-accent); color: var(--cx-ink); }
.cx-panel .cx-note[hidden] { display: none; }
.cx-text { position: relative; max-height: 50vh; overflow: auto; padding: .6rem .8rem; background: var(--ground, #fff); border: 1px solid var(--cx-rule); border-radius: 6px;
  font: 15px/1.6 var(--body, Georgia, "Times New Roman", serif); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cx-ink); }
.cx-panel.cx-tall .cx-text { max-height: none; }
.cx-text a.cx, .cx-text button.cx { color: var(--cx-accent); }
.cx-hl { background: var(--cx-soft); box-shadow: -4px 0 0 var(--cx-accent); }
.cx-f { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .7rem; }
.cx-b { display: inline-block; padding: .35rem .8rem; font: 600 13px/1.2 var(--display, system-ui, sans-serif); color: var(--cx-accent); background: transparent; border: 1px solid var(--cx-accent); border-radius: 6px; cursor: pointer; text-decoration: none; }
.cx-b:hover { background: var(--cx-soft); }
.cx-b[hidden] { display: none; }
.cx-panel .cx-live { font: 13px/1.4 var(--display, system-ui, sans-serif); color: var(--cx-ink2); }
.cx-plain { margin-left: .2rem; }

.cx-side { position: fixed; z-index: 2147482000; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); margin: 0; border-radius: 0; border-width: 0 0 0 2px; overflow: auto; box-shadow: -8px 0 24px rgba(0, 0, 0, .25); }
.cx-sheet { position: fixed; z-index: 2147482000; left: 0; right: 0; bottom: 0; max-height: 78vh; margin: 0; border-radius: 14px 14px 0 0; border-width: 2px 0 0; overflow: auto; box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.cx-side .cx-text, .cx-sheet .cx-text { max-height: none; }
.cx-side .cx-h, .cx-sheet .cx-h { position: sticky; top: -.75rem; background: var(--cx-bg); padding: .5rem 0; margin-top: -.5rem; z-index: 1; }
@media (max-width: 720px) { .cx-b { padding: .55rem .9rem; font-size: 14px; min-height: 40px; } .cx-crumb { display: inline-flex; align-items: center; min-height: 36px; padding: .3rem 0; } }
@media print { .cx-panel { display: none !important; } a.cx, button.cx { text-decoration: none; } }
.cx-panel .cx-share[hidden] { display: none; }
.cx-panel a.cx-share { text-decoration: none; display: inline-block; }
