/* SPDX-FileCopyrightText: 2026 The Royal College of Paediatrics and Child Health SPDX-License-Identifier: LGPL-3.0-or-later */ /* ============================================================ NPEWS Chart UI - Styles Colour tokens follow spec/npews-scoring.md and spec/escalation.md ============================================================ */ /* --- Design tokens ----------------------------------------- */ :root { /* Interim screen palette sampled from the web-rendered NHS PDF; see issue #5. */ --band-white: #ffffff; --band-yellow: #fff8ae; --band-orange: #fcc88e; --band-pink: #f9cbd7; /* Escalation level colours */ --esc-low: #1d70b8; --esc-low-text: #ffffff; --esc-medium: #ffdd00; --esc-medium-text: #0b0c0c; --esc-high: #f47738; --esc-high-text: #ffffff; --esc-emergency: #d4351c; --esc-emergency-text: #ffffff; /* Chart chrome */ --chart-bg: #f8f8f8; --chart-border: #b1b4b6; --chart-grid: #dee0e2; --chart-line: #0b0c0c; --chart-dot: #0b0c0c; --chart-dot-r: 5px; --chart-skip-stroke: #b1b4b6; /* Chart structure labels (DOM cells, not canvas). Themeable chrome - see the "Optional chrome themes" block below. Defaults match the NHS paper chart. */ --section-label-bg: #003087; /* col 1, deep NHS navy */ --param-label-bg: #005eb8; /* col 2, NHS blue */ --param-label-bg-cat: #004f9f; /* col 2, categorical rows (slightly darker) */ /* UI chrome */ --page-bg: #f3f2f1; --surface: #ffffff; --border: #b1b4b6; --text-primary: #0b0c0c; --text-secondary: #505a5f; --focus-ring: #ffdd00; /* Typography Default: Lato (close to Frutiger - load via Google Fonts or self-host). Implementers with a Frutiger license can override this single variable: :root { --font: 'Frutiger', 'Frutiger LT Std', Lato, sans-serif; } */ --font: 'Lato', 'Noto Sans', 'Liberation Sans', sans-serif; --font-mono: 'Noto Sans Mono', 'Liberation Mono', monospace; } /* --- Optional chrome themes ------------------------------------------------ Themes restyle ONLY the chart *chrome*: the frame, section/parameter label cells, trend line/dots and background/border/text tokens. They deliberately NEVER override the clinically-mandated PEWS band (--band-*) or escalation (--esc-*) colours. The canvas reads custom properties from document.documentElement at render time, so the theme class is applied to . Default (no class) = the NHS palette defined in :root. Adding a theme here must not touch --band-* / --esc-*. */ html.theme-rcpch { --page-bg: #f3f3f3; /* RCPCH lightest grey */ --surface: #ffffff; --border: #d9d9d9; /* RCPCH light grey */ --text-primary: #191919; /* RCPCH charcoal dark */ --text-secondary: #4d4d4d; /* RCPCH charcoal */ --focus-ring: #11a7f2; /* RCPCH bright blue */ --section-label-bg: #0d0d58; /* RCPCH dark blue */ --param-label-bg: #3366cc; /* RCPCH strong blue */ --param-label-bg-cat: #2b57ad; --chart-line: #0d0d58; --chart-dot: #0d0d58; --chart-grid: #e4e4ef; --chart-bg: #fbfbfd; } html.theme-slate { --page-bg: #e8eaed; --surface: #ffffff; --border: #b3b3b3; /* RCPCH mid grey */ --text-primary: #191919; --text-secondary: #4d4d4d; --focus-ring: #ffdd00; /* keep NHS yellow for contrast vs dark chrome */ --section-label-bg: #191919; /* charcoal dark */ --param-label-bg: #4d4d4d; /* charcoal */ --param-label-bg-cat: #3f3f3f; --chart-line: #191919; --chart-dot: #191919; --chart-grid: #d9d9d9; --chart-bg: #f7f7f7; } html.theme-midnight { --page-bg: #191919; /* dark frame, light chart interior */ --surface: #262a2e; --border: #4d4d4d; --text-primary: #f3f3f3; --text-secondary: #b3b3b3; --focus-ring: #11a7f2; --section-label-bg: #0d0d58; /* RCPCH dark blue */ --param-label-bg: #12406b; --param-label-bg-cat: #0e3358; --chart-line: #0d0d58; /* dark line stays legible on the light chart */ --chart-dot: #0d0d58; --chart-grid: #dee0e2; --chart-bg: #f8f8f8; /* chart stays light so pastel bands read true */ } /* --- Reset & base ------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); font-size: 16px; color: var(--text-primary); background: var(--page-bg); min-height: 100vh; } a { color: inherit; } button { cursor: pointer; font-family: inherit; } /* --- Layout ------------------------------------------------- */ .app-layout { display: flex; flex-direction: column; min-height: 100vh; } /* The custom element is a drop-in host for .app-layout. Custom elements default to display:inline, which would collapse the chart, so give it block layout and let it fill (and shrink within) its container. */ npews-chart { display: block; width: 100%; min-width: 0; } .main-content { flex: 1; padding: 0 0 5rem; /* space for sticky footer */ } /* --- Sticky patient and escalation status ------------------ */ .chart-status { position: sticky; top: 0; z-index: 100; } .patient-header { background: var(--surface); border-bottom: 3px solid var(--text-primary); padding: 0; } .patient-header__inner { padding: 0.75rem 1rem; max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; } .patient-header__name { font-size: 1.125rem; font-weight: 700; flex: 1 0 100%; } @media (min-width: 640px) { .patient-header__name { flex: 0 0 auto; } } .patient-header__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.875rem; color: var(--text-secondary); } .patient-header__meta span { white-space: nowrap; } .patient-header__meta strong { color: var(--text-primary); } /* --- Escalation banner ------------------------------------- */ .escalation-banner { padding: 0.75rem 1rem; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem 1rem; border-left: 6px solid transparent; border-bottom: 1px solid var(--border); font-weight: 600; min-height: 4rem; } .escalation-banner--normal { background: var(--surface); color: var(--text-primary); border-left-color: var(--border); } .escalation-banner--low { background: var(--esc-low); color: var(--esc-low-text); border-color: #13477a; } .escalation-banner--medium { background: var(--esc-medium); color: var(--esc-medium-text); border-color: #b38f00; } .escalation-banner--high { background: var(--esc-high); color: var(--esc-high-text); border-color: #b35420; } .escalation-banner--emergency { background: var(--esc-emergency); color: var(--esc-emergency-text); border-color: #7a1910; } .escalation-banner__level { font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.05em; } .escalation-banner__score { font-size: 2rem; font-weight: 800; min-width: 3ch; text-align: center; background: rgba(0,0,0,0.15); padding: 0 0.5rem; border-radius: 4px; } .escalation-banner__action { font-weight: 400; font-size: 0.9375rem; flex: 1 1 auto; min-width: 0; } .escalation-banner__reason { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 700; margin-left: auto; text-align: right; white-space: nowrap; } @media (max-width: 699px) { .escalation-banner { flex-wrap: wrap; } .escalation-banner__action, .escalation-banner__reason { flex: 1 0 100%; margin-left: 0; text-align: left; white-space: normal; } } /* --- Toolbar ----------------------------------------------- */ .toolbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.5rem 1rem; } .toolbar__inner { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .toolbar__group { display: flex; flex-wrap: wrap; gap: 0.25rem 0.65rem; align-items: center; } .toolbar__label { font-size: 0.8125rem; color: var(--text-secondary); margin-right: 0.25rem; } .toolbar__range-link { color: var(--text-primary); font-size: 0.8125rem; line-height: 1.5; padding: 0.15rem 0.1rem; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .toolbar__range-link:hover { text-decoration-thickness: 2px; } .toolbar__range-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .toolbar__range-link--active { font-weight: 800; text-decoration-thickness: 3px; } .toolbar__spacer { flex: 1; } .toolbar__chart-identifier { color: var(--text-primary); font-size: 1.5rem; font-weight: 800; line-height: 1; margin-left: auto; white-space: nowrap; } /* --- Charts container -------------------------------------- */ .charts-layout { max-width: 1400px; margin: 0 auto; padding: 0.75rem 1rem; } /* ============================================================ Chart grid - three-column CSS grid. Col 1 (40px): vertical section label (Airway, Circulation, etc.) Col 2 (180px): parameter label (name, unit, description) Col 3 (1fr): chart canvas Each row is one parameter; all three cells share the row height automatically - no JS sync needed. Section cells use grid-row: span N to cover their group. ============================================================ */ .chart-grid { display: grid; grid-template-columns: 40px 180px 1fr; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } /* --- Section label cell (column 1) ------------------------ */ .chart-grid__section { background: var(--section-label-bg); /* deep NHS navy */ color: #ffffff; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.10); overflow: hidden; } .chart-grid__section--time { border-bottom: none; } .chart-grid__section-text { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; white-space: nowrap; } /* --- Label cell (column 1) --------------------------------- */ .chart-grid__label { background: var(--param-label-bg); /* NHS blue */ color: #ffffff; display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; padding: 0.6rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); overflow: hidden; } .chart-grid__label--categorical { background: var(--param-label-bg-cat); /* slightly darker blue for categorical rows */ justify-content: center; padding: 0 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .chart-grid__label-title { font-size: 1rem; font-weight: 700; line-height: 1.2; } .chart-grid__label-title--cat { font-size: 0.6875rem; font-weight: 600; opacity: 0.9; } .chart-grid__label-unit { font-size: 0.6875rem; opacity: 0.8; font-family: var(--font-mono); } .chart-grid__label-desc { font-size: 0.7rem; line-height: 1.3; opacity: 0.95; } .chart-grid__label-codes { font-size: 0.65rem; margin-top: 0.15rem; font-family: var(--font-mono); opacity: 0.9; } /* --- Canvas cell (column 2) -------------------------------- */ .chart-grid__cell { position: relative; background: var(--surface); border-bottom: 1px solid var(--border); overflow: hidden; } .chart-grid__cell--categorical { border-bottom: 1px solid rgba(0, 0, 0, 0.08); } /* Time axis row - dedicated label strip below all chart rows */ .chart-grid__label--time { background: var(--param-label-bg-cat); border-bottom: none; } .chart-grid__cell--time { background: #f8f8f8; border-top: 1px solid var(--border); border-bottom: none; overflow: visible; /* allow labels to slightly overflow if needed */ } /* --last helper: removes the bottom border on the final row */ .chart-grid__cell--last { border-bottom: none; } /* Remove bottom border on last row of each column (fallback) */ .chart-grid__label:last-of-type, .chart-grid__cell:last-of-type { border-bottom: none; } canvas.chart-canvas { display: block; width: 100%; } /* --- Observation value overlay tooltip --------------------- */ .obs-tooltip { position: absolute; background: rgba(11,12,12,0.88); color: #fff; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 3px; pointer-events: none; white-space: nowrap; z-index: 50; display: none; } /* --- PEWS total score row (canvas, inside chart grid) ------ */ .chart-grid__section--pews { background: var(--section-label-bg); border-bottom: none; } .chart-grid__label--pews { background: var(--param-label-bg); color: #ffffff; display: flex; flex-direction: column; justify-content: center; padding: 0.4rem 0.5rem; border-bottom: none; } .chart-grid__cell--pews { background: var(--surface); border-bottom: none; } /* --- Time axis row - dedicated label strip below all chart rows */ /* (formerly .time-axis standalone block) */ /* --- Sticky footer ----------------------------------------- */ .sticky-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--surface); border-top: 3px solid var(--text-primary); padding: 0.5rem 1rem; } .sticky-footer__inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .sticky-footer__score-label { font-size: 0.875rem; color: var(--text-secondary); } .sticky-footer__score { font-size: 1.75rem; font-weight: 800; min-width: 3ch; } .sticky-footer__escalation { font-size: 0.9375rem; font-weight: 700; padding: 0.2rem 0.75rem; border-radius: 3px; } .sticky-footer__escalation--low { background: var(--esc-low); color: var(--esc-low-text); } .sticky-footer__escalation--medium { background: var(--esc-medium); color: var(--esc-medium-text); } .sticky-footer__escalation--high { background: var(--esc-high); color: var(--esc-high-text); } .sticky-footer__escalation--emergency { background: var(--esc-emergency); color: var(--esc-emergency-text); } .sticky-footer__time { font-size: 0.8125rem; color: var(--text-secondary); margin-left: auto; } .sticky-footer__reason { font-size: 0.8125rem; font-weight: 700; } /* --- Skip marker ------------------------------------------- */ .skip-marker { font-size: 0.6875rem; color: var(--text-secondary); font-style: italic; } /* --- Shared band legend (above chart area) ----------------- */ .shared-legend { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.35rem 1rem; } .shared-legend__inner { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.25rem; font-size: 0.8125rem; } .shared-legend__label { font-weight: 600; color: var(--text-secondary); margin-right: 0.25rem; } /* --- Legend ------------------------------------------------ */ .legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.75rem; padding: 0.4rem 0.75rem; border-top: 1px solid var(--border); background: #fafafa; } .legend__item { display: flex; align-items: center; gap: 0.3rem; } .legend__swatch { width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.2); flex-shrink: 0; } .legend__swatch--white { background: var(--band-white); } .legend__swatch--yellow { background: var(--band-yellow); } .legend__swatch--orange { background: var(--band-orange); } .legend__swatch--pink { background: var(--band-pink); } /* --- Responsive -------------------------------------------- */ @media (max-width: 480px) { .patient-header__inner { flex-direction: column; align-items: flex-start; } .toolbar__inner { flex-direction: column; align-items: flex-start; } .sticky-footer__inner { gap: 0.5rem; } .sticky-footer__time { margin-left: 0; width: 100%; } } /* ============================================================ Layout modes - scoped to data-layout on Chart canvas heights are controlled by JS (getChartHeight). Everything else - spacing, font size, panel width - lives here. ============================================================ */ /* --- Landscape (default) ----------------------------------- */ /* Charts are full-width, taller, generous padding. */ body[data-layout="landscape"] .legend { padding: 0.4rem 0.75rem; font-size: 0.75rem; } /* --- Portrait (sidebar / narrow-window) -------------------- */ body[data-layout="portrait"] .chart-grid { grid-template-columns: 30px 150px 1fr; } body[data-layout="portrait"] .chart-grid__label-title { font-size: 1rem; } body[data-layout="portrait"] .chart-grid__label-desc { font-size: 0.65rem; } body[data-layout="portrait"] .chart-grid__label-codes { font-size: 0.6rem; } body[data-layout="portrait"] .legend { padding: 0.25rem 0.5rem; font-size: 0.6875rem; gap: 0.3rem 0.75rem; } body[data-layout="portrait"] .patient-header__meta { font-size: 0.8125rem; } body[data-layout="portrait"] .toolbar__inner { flex-wrap: wrap; gap: 0.35rem; } /* --- Mobile ------------------------------------------------ */ body[data-layout="mobile"] .chart-grid { grid-template-columns: 24px 110px 1fr; } body[data-layout="mobile"] .chart-grid__label { padding: 0.3rem 0.3rem; } body[data-layout="mobile"] .chart-grid__label-title { font-size: 0.875rem; } body[data-layout="mobile"] .chart-grid__label-desc { font-size: 0.6rem; line-height: 1.2; } body[data-layout="mobile"] .chart-grid__label-codes { font-size: 0.55rem; } body[data-layout="mobile"] .legend { display: none; /* hide legend on mobile to save space */ } body[data-layout="mobile"] .patient-header__inner { flex-direction: column; align-items: flex-start; gap: 0.2rem; } body[data-layout="mobile"] .patient-header__meta { font-size: 0.75rem; } body[data-layout="mobile"] .toolbar__inner { flex-wrap: wrap; gap: 0.25rem; } body[data-layout="mobile"] .sticky-footer__score { font-size: 1.375rem; } /* --- Lock: hide the layout toggle when implementer sets */ /* data-lock-layout on */