/* Design system shared by every page (site, chart demonstration, core pages). - Tokens: colour, spacing scale, type scale, radius, elevation, as CSS custom properties on :root. - Typeface: Inter 4.0 (SIL Open Font License 1.1, see /static/fonts/OFL.txt), bundled locally as Latin subsets; the content security policy allows no external hosts. Falls back to the platform UI font. - Accessible (WCAG 2.2 AA): every text/background pair listed in the token comments meets 4.5:1 (body text) or 3:1 (large text, UI boundaries, focus ring); tests/test_design_tokens.py recomputes them. Status is never colour alone. - Light and dark themes; [data-theme] (set by the theme toggle) wins over the operating-system preference. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/Inter-Regular.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/Inter-Italic.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/Inter-Medium.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/Inter-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/Inter-Bold.woff2") format("woff2"); } /* Token values follow the interface research guide (grade-based contrast logic; verified ratios in the comments and in tests/test_design_tokens.py). Borders carry structure; the only shadow is the modal dialog's. */ :root { color-scheme: light; /* surfaces */ --bg: #f0f0f0; /* sunken page */ --surface: #ffffff; /* paper */ --surface-2: #f7f7f8; --surface-3: #eceef0; --border: #71767a; /* 4.59:1 on surface: inputs and card edges (1.4.11) */ --border-soft: #dfe1e2; /* decorative dividers only */ --border-strong: #3d4551; /* text */ --text: #1b1b1b; /* 17.2:1 on surface */ --text-2: #565c65; /* 6.7:1 on surface, 5.9:1 on bg */ --text-3: #565c65; --link: #005ea2; /* 6.7:1 on surface */ /* accent (links, primary button) */ --primary: #005ea2; /* white text on it 6.7:1 */ --primary-hover: #1a4480; /* 9.6:1 */ --primary-soft: #e7f2f8; --on-primary: #ffffff; --accent: var(--primary); --accent-text: var(--on-primary); --focus: #0050d8; /* 6.7:1; 2px ring, 2px offset */ /* product states: amber is the strongest; always icon + word + colour */ --look: #8a4b00; --look-bg: #fef0d9; --look-line: #c05600; /* 6.05:1 text on bg; edge 4.09:1 */ --look-solid: #8a4b00; --on-look-solid: #ffffff; /* count badges: 6.6:1 */ --agree: #1e6b52; --agree-bg: #e3f2ec; /* 5.54:1 */ --nocheck: #3d4551; --nocheck-bg: #eef0f3; /* 8.48:1 */ --na: #565c65; /* outlined, dashed border */ --critical: #b50909; /* only when echoing the record system's own critical flag; never a product judgement */ /* generic feedback (core pages) */ --danger: #b50909; --danger-text: #ffffff; --ok-bg: var(--agree-bg); --ok-fg: var(--agree); --risk-bg: #fef0d9; --risk-fg: #6b3a00; --bad-bg: #f8e1de; --bad-fg: #8b0a03; --info-bg: #e7f2f8; --info-fg: #1a4480; --neutral-bg: var(--nocheck-bg); --neutral-fg: var(--nocheck); --banner-bg: #3d2e00; --banner-fg: #fff6d6; --sim-bg: #6b3a00; --sim-fg: #fff6d6; --mark-bg: #ffe396; --mark-fg: #1b1b1b; /* the record's own result flags (chart demonstration) */ --flag-hi: #b50909; --flag-hi-bg: #fbeceb; --flag-lo: #1a4480; --flag-lo-bg: #e7f2f8; /* data visualisation */ --series-1: #005ea2; --series-2: #c05600; --series-3: #1e6b52; --spark: #3d4551; --band: #e7f2f8; --grid: #e6e8ea; --axis: #565c65; /* spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* type scale 12/14/16/18/20/24/32/44 (12 only for timestamps and source labels; 14 minimum for a clinical value) */ --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: .875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-4xl: 2.75rem; --lh-tight: 1.25; --lh-base: 1.5; --lh-read: 1.65; /* radius and elevation */ --r-sm: 4px; --r-md: 6px; --r-lg: 6px; --r-xl: 6px; --r-pill: 999px; --radius: var(--r-md); --shadow-1: none; --shadow-2: none; --shadow-3: 0 8px 24px rgb(0 0 0 / 18%); /* the signing dialog (and menus) only */ --shadow: none; --font: "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --num: "tnum" 1, "zero" 1, "ss02" 1; --ease: cubic-bezier(.2, .7, .2, 1); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; --bg: #16191d; --surface: #22262b; --surface-2: #1c2025; --surface-3: #2d3238; --border: #8d9297; --border-soft: #3a4047; --border-strong: #c6cace; --text: #f0f0f0; --text-2: #a9aeb1; --text-3: #a9aeb1; --link: #73b3e7; --primary: #73b3e7; --primary-hover: #97c7ee; --primary-soft: #1d3346; --on-primary: #0b1d2c; --focus: #73b3e7; --look: #ffbe2e; --look-bg: #3a2b0c; --look-line: #ffbe2e; --look-solid: #ffbe2e; --on-look-solid: #1b1b1b; --look-solid: #ffbe2e; --on-look-solid: #1b1b1b; --agree: #5fc4a0; --agree-bg: #133228; --nocheck: #c6cace; --nocheck-bg: #2d3238; --na: #a9aeb1; --critical: #ff8d84; --danger: #ff8d84; --danger-text: #2a0b0b; --risk-bg: #3a2b0c; --risk-fg: #ffd27a; --bad-bg: #3d1716; --bad-fg: #ffb4ae; --info-bg: #1d3346; --info-fg: #a9cff2; --banner-bg: #ffd77a; --banner-fg: #1e1600; --sim-bg: #ffd77a; --sim-fg: #1e1600; --mark-bg: #6f5600; --mark-fg: #fff6d6; --flag-hi: #ff8d84; --flag-hi-bg: #3a1715; --flag-lo: #9cc7f0; --flag-lo-bg: #1d3346; --series-1: #73b3e7; --series-2: #ffbe2e; --series-3: #5fc4a0; --spark: #c6cace; --band: #24384a; --grid: #3a4047; --axis: #a9aeb1; --shadow-3: 0 12px 32px rgb(0 0 0 / 60%); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #16191d; --surface: #22262b; --surface-2: #1c2025; --surface-3: #2d3238; --border: #8d9297; --border-soft: #3a4047; --border-strong: #c6cace; --text: #f0f0f0; --text-2: #a9aeb1; --text-3: #a9aeb1; --link: #73b3e7; --primary: #73b3e7; --primary-hover: #97c7ee; --primary-soft: #1d3346; --on-primary: #0b1d2c; --focus: #73b3e7; --look: #ffbe2e; --look-bg: #3a2b0c; --look-line: #ffbe2e; --look-solid: #ffbe2e; --on-look-solid: #1b1b1b; --agree: #5fc4a0; --agree-bg: #133228; --nocheck: #c6cace; --nocheck-bg: #2d3238; --na: #a9aeb1; --critical: #ff8d84; --danger: #ff8d84; --danger-text: #2a0b0b; --risk-bg: #3a2b0c; --risk-fg: #ffd27a; --bad-bg: #3d1716; --bad-fg: #ffb4ae; --info-bg: #1d3346; --info-fg: #a9cff2; --banner-bg: #ffd77a; --banner-fg: #1e1600; --sim-bg: #ffd77a; --sim-fg: #1e1600; --mark-bg: #6f5600; --mark-fg: #fff6d6; --flag-hi: #ff8d84; --flag-hi-bg: #3a1715; --flag-lo: #9cc7f0; --flag-lo-bg: #1d3346; --series-1: #73b3e7; --series-2: #ffbe2e; --series-3: #5fc4a0; --spark: #c6cace; --band: #24384a; --grid: #3a4047; --axis: #a9aeb1; --shadow-3: 0 12px 32px rgb(0 0 0 / 60%); } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-base)/var(--lh-base) var(--font); font-feature-settings: "cv05", "cv08"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } h1, h2, h3, h4 { line-height: var(--lh-tight); margin: 0 0 var(--sp-2); letter-spacing: -.011em; font-weight: 600; } h1 { font-size: var(--fs-2xl); letter-spacing: -.02em; font-weight: 700; } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } p { margin: 0 0 var(--sp-3); } code, pre, kbd, .cw-mono { font-family: var(--mono); font-size: .875em; } code { background: var(--surface-3); border-radius: var(--r-sm); padding: .05em .3em; } pre { white-space: pre-wrap; word-break: break-word; } pre code { background: none; padding: 0; } small { font-size: var(--fs-sm); } hr { border: 0; border-top: 1px solid var(--border-soft); margin: var(--sp-5) 0; } table, .cw-num, .cw-value { font-variant-numeric: tabular-nums; font-feature-settings: var(--num); } q { quotes: "“" "”" "‘" "’"; } .cw-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cw-skip { position: absolute; left: var(--sp-2); top: -60px; background: var(--primary); color: var(--on-primary); padding: var(--sp-2) var(--sp-3); z-index: 100; border-radius: var(--r-md); font-weight: 600; } .cw-skip:focus { top: var(--sp-2); } /* ------------------------------------------------------------------ site shell */ .cw-banner { background: var(--banner-bg); color: var(--banner-fg); padding: .4rem 1rem; font-weight: 600; text-align: center; font-size: var(--fs-md); } .cw-header { background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(1.4) blur(8px); } .cw-header-inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--sp-5); min-height: 60px; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; } .cw-brand { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.02em; color: var(--text); text-decoration: none; display: inline-flex; gap: .55rem; align-items: center; } .cw-brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); color: var(--on-primary); display: inline-grid; place-items: center; flex: none; } .cw-brand-mark svg { width: 18px; height: 18px; } .cw-brand svg { width: 18px; height: 18px; } .cw-demo-mark { background: var(--risk-bg); color: var(--risk-fg); border: 1px solid color-mix(in srgb, var(--risk-fg) 30%, transparent); border-radius: var(--r-pill); padding: .1rem .6rem; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; letter-spacing: .01em; } .cw-nav { margin-left: auto; } .cw-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; } .cw-nav > ul > li > a, .cw-more summary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .75rem; border-radius: var(--r-md); color: var(--text-2); text-decoration: none; font-weight: 500; font-size: var(--fs-md); cursor: pointer; } .cw-nav > ul > li > a:hover, .cw-more summary:hover { background: var(--surface-3); color: var(--text); } .cw-nav a[aria-current="page"] { color: var(--text); background: var(--surface-3); font-weight: 600; } .cw-more { position: relative; } .cw-more summary { list-style: none; } .cw-more summary::-webkit-details-marker { display: none; } .cw-more summary::after { content: ""; width: .45em; height: .45em; margin-left: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); } .cw-more-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: var(--sp-1); min-width: 16rem; display: block !important; z-index: 40; } .cw-more-menu li { display: block; } .cw-more-menu a, .cw-more-menu .cw-linkbtn { display: block; padding: .5rem .75rem; text-align: left; width: 100%; border-radius: var(--r-md); color: var(--text); text-decoration: none; font-size: var(--fs-md); } .cw-more-menu a:hover, .cw-more-menu .cw-linkbtn:hover { background: var(--surface-3); } .cw-more-sep { border-top: 1px solid var(--border-soft); margin: var(--sp-1) 0; } .cw-linkbtn { background: none; border: 0; color: var(--link); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; } .cw-more-menu .cw-linkbtn { text-decoration: none; } main { max-width: 1240px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-7); } .cw-footer { max-width: 1240px; margin: 0 auto; padding: var(--sp-5) var(--sp-5) var(--sp-6); color: var(--text-2); font-size: var(--fs-sm); border-top: 1px solid var(--border-soft); } .cw-footer p { margin: 0 0 var(--sp-2); max-width: 110ch; } @media (max-width: 720px) { .cw-header-inner { padding: var(--sp-2) var(--sp-4); } main { padding: var(--sp-5) var(--sp-4) var(--sp-6); } .cw-footer { padding: var(--sp-4); } .cw-nav { margin-left: 0; width: 100%; } } /* ------------------------------------------------------------------ components */ .cw-notice { border: 1px solid var(--border-soft); background: var(--info-bg); color: var(--info-fg); border-left: 4px solid var(--info-fg); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); margin: 0 0 var(--sp-4); font-weight: 500; } .cw-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-1); margin-bottom: var(--sp-4); } .cw-grid-2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-4); } .cw-grid-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); } @media (max-width: 860px) { .cw-grid-2 { grid-template-columns: minmax(0, 1fr); } } .cw-muted { color: var(--text-2); } .cw-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } /* buttons and forms */ .cw-btn { font: inherit; font-size: var(--fs-md); font-weight: 600; line-height: 1.2; border-radius: var(--r-md); padding: .55rem 1rem; border: 1px solid var(--primary); background: var(--primary); color: var(--on-primary); cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none; box-shadow: var(--shadow-1); transition: background-color .15s var(--ease), border-color .15s var(--ease); } .cw-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .cw-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border); } .cw-btn--secondary:hover { background: var(--surface-3); border-color: var(--border-strong); } .cw-btn--danger { background: var(--danger); border-color: var(--danger); color: var(--danger-text); } .cw-btn[disabled] { opacity: .55; cursor: not-allowed; } .cw-btn--small { min-height: 32px; padding: .3rem .7rem; font-size: var(--fs-sm); } label { font-weight: 600; display: block; margin-bottom: var(--sp-1); font-size: var(--fs-md); } .cw-hint { font-weight: 400; color: var(--text-2); font-size: var(--fs-sm); } input[type=text], input[type=date], input[type=search], input:not([type]), select, textarea { font: inherit; font-size: var(--fs-md); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: .5rem .65rem; width: 100%; min-height: 40px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent); } input[type=file] { font: inherit; font-size: var(--fs-md); } textarea { min-height: 12rem; line-height: var(--lh-read); } fieldset { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); } legend { font-weight: 600; padding: 0 var(--sp-1); font-size: var(--fs-md); } .cw-field-row { margin-bottom: var(--sp-3); } details > summary { cursor: pointer; } /* tables */ .cw-table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); } .cw-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); } .cw-table caption { text-align: left; padding: var(--sp-3) var(--sp-4); font-weight: 600; color: var(--text); } .cw-table th, .cw-table td { padding: .55rem var(--sp-4); border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: top; } .cw-table thead th { background: var(--surface-2); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); } .cw-table tbody tr:last-child > * { border-bottom: 0; } .cw-table tbody tr:hover { background: var(--surface-2); } .cw-num { text-align: right; font-variant-numeric: tabular-nums; } /* badges */ .cw-badge { display: inline-flex; align-items: center; gap: .3rem; border-radius: var(--r-pill); padding: .1rem .55rem; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; border: 1px solid currentColor; } .cw-badge-icon { font-size: .9em; } .cw-badge--on_time, .cw-badge--approved { background: var(--ok-bg); color: var(--ok-fg); } .cw-badge--at_risk { background: var(--risk-bg); color: var(--risk-fg); } .cw-badge--breached, .cw-badge--rejected { background: var(--bad-bg); color: var(--bad-fg); } .cw-badge--neutral, .cw-badge--open, .cw-badge--snoozed { background: var(--neutral-bg); color: var(--neutral-fg); } .cw-clock-detail { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-top: .15rem; } .cw-flag { display: inline-block; background: var(--risk-bg); color: var(--risk-fg); border-radius: var(--r-sm); padding: 0 .35rem; font-size: var(--fs-sm); margin: .1rem .2rem 0 0; } /* priority breakdown */ .cw-priority summary { cursor: pointer; font-variant-numeric: tabular-nums; font-weight: 700; } .cw-priority table { font-size: var(--fs-sm); margin-top: .3rem; } /* cited fields */ .cw-fields { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); margin: 0; } .cw-fields dt { font-weight: 600; } .cw-fields dd { margin: 0; } .cw-cite-meta { font-size: var(--fs-sm); color: var(--text-2); } .cw-cite-source { background: var(--surface-2); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); white-space: pre-wrap; font-size: var(--fs-md); margin-top: .3rem; } .cw-cite-mark { background: var(--mark-bg); color: var(--mark-fg); padding: 0 .1rem; border-radius: 2px; outline: 1px solid currentColor; } .cw-notfound { display: inline-flex; gap: .3rem; align-items: center; font-weight: 700; color: var(--bad-fg); background: var(--bad-bg); border-radius: var(--r-sm); padding: 0 .4rem; } .cw-doc { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); white-space: pre-wrap; font-family: var(--mono); font-size: var(--fs-sm); max-height: 28rem; overflow: auto; } /* metric tiles */ .cw-tile { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-1); } .cw-tile--sim { border: 2px dashed var(--sim-bg); } .cw-tile-name { font-size: var(--fs-md); display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; color: var(--text-2); } .cw-tile-value { font-size: var(--fs-2xl); font-weight: 700; margin: .2rem 0; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .cw-tile-sub { color: var(--text-2); font-size: var(--fs-sm); margin: 0; } .cw-sim-badge { background: var(--sim-bg); color: var(--sim-fg); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; border-radius: var(--r-sm); padding: .05rem .4rem; } .cw-obs-badge { background: var(--neutral-bg); color: var(--neutral-fg); font-size: var(--fs-xs); font-weight: 700; border-radius: var(--r-sm); padding: .05rem .4rem; } .cw-sim-note { font-size: var(--fs-sm); border-left: 4px solid var(--sim-bg); padding-left: var(--sp-2); margin: var(--sp-2) 0 0; } /* charts */ .cw-figure { margin: 0 0 var(--sp-4); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); } .cw-figure figcaption { font-weight: 600; margin-bottom: var(--sp-2); } .cw-chart { width: 100%; height: auto; display: block; } .cw-chart .cw-grid { stroke: var(--grid); stroke-width: 1; } .cw-chart .cw-axis { fill: var(--axis); font-size: 11px; font-family: var(--font); } .cw-chart .cw-direct-label { fill: var(--text); font-size: 12px; font-weight: 600; font-family: var(--font); } .cw-chart .cw-halo { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; } .cw-chart .cw-target { stroke: var(--axis); stroke-dasharray: 2 3; stroke-width: 1; } .cw-chart path.cw-series { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .cw-chart .cw-series-1 { stroke: var(--series-1); } .cw-chart .cw-series-2 { stroke: var(--series-2); } .cw-chart .cw-series-3 { stroke: var(--series-3); } .cw-chart path.cw-series--sim { stroke-dasharray: 6 4; } .cw-chart circle.cw-dot { stroke: var(--surface); stroke-width: 2; } .cw-chart circle.cw-series-1 { fill: var(--series-1); } .cw-chart circle.cw-series-2 { fill: var(--series-2); } .cw-chart circle.cw-series-3 { fill: var(--series-3); } .cw-chart .cw-bar { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; } .cw-chart .cw-bar--sim { fill: var(--series-2); } .cw-chart .cw-bar:hover, .cw-chart circle.cw-dot:hover { filter: brightness(1.15); } .cw-legend { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-md); } .cw-swatch { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: .35rem; vertical-align: middle; } .cw-swatch-1 { background: var(--series-1); } .cw-swatch-2 { background: var(--series-2); } .cw-swatch-3 { background: var(--series-3); } .cw-swatch--sim { background: repeating-linear-gradient(90deg, var(--series-2) 0 6px, transparent 6px 10px); } .cw-chart-table summary { cursor: pointer; font-size: var(--fs-md); margin-top: var(--sp-2); } /* audit */ .cw-hash { font-family: var(--mono); font-size: var(--fs-xs); } .cw-chain-ok { color: var(--ok-fg); background: var(--ok-bg); } .cw-chain-bad { color: var(--bad-fg); background: var(--bad-bg); } /* draft editor */ .cw-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); } .cw-locked { border: 1px dashed var(--border); border-radius: var(--radius); padding: var(--sp-3); background: var(--surface-2); } @media (max-width: 560px) { .cw-fields { grid-template-columns: minmax(0, 1fr); } .cw-fields dd { margin-bottom: var(--sp-2); } } @media (forced-colors: active) { .cw-badge, .cw-sim-badge, .cw-notfound, .cw-cite-mark, .cw-demo-mark, .cw-btn { border: 1px solid CanvasText; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } @media print { body { background: #fff; color: #000; } .cw-header, .cw-footer, .cw-actions, .cw-skip, .cw-more { display: none !important; } .cw-card, .cw-table-wrap { box-shadow: none; } a { color: inherit; } } /* ================================================================================================================== Generic, reusable components (for any screen built on the core: coder views, worklists, library browser). Conventions: plain semantic markup + these classes; status always icon + word + colour; no inline styles. ================================================================================================================== */ /* Data table:
with
,
, numeric cells .cw-num; row states: tr.is-selected, tr.is-muted. Sticky header inside a scrolling wrap. */ .cw-datatable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); background: var(--surface); } .cw-datatable caption { text-align: left; padding: var(--sp-3) var(--sp-4); font-weight: 600; caption-side: top; } .cw-datatable th, .cw-datatable td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: top; min-height: 44px; } .cw-datatable thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); white-space: nowrap; } .cw-datatable tbody th[scope="row"] { font-weight: 600; } .cw-datatable tbody tr:hover > * { background: var(--surface-2); } .cw-datatable tr.is-selected > * { background: var(--primary-soft); } .cw-datatable tr.is-muted > * { color: var(--text-2); } .cw-datatable--compact th, .cw-datatable--compact td { padding: var(--sp-1) var(--sp-2); } .cw-datatable a { font-weight: 500; } /* Filter bar: