/* Chart demonstration: a generic record application shell (fictional; deliberately not modelled on any real product).
   Uses the shared tokens from /static/clockworks.css. Clinical density: 14px base, compact rows, tabular numerals.
   At 1024px and wider the shell fills the window with no page scroll; each pane scrolls on its own. */

.ch-body { background: var(--bg); font-size: var(--fs-sm); line-height: 1.45; }
.ch-app { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh; overflow: hidden; }
.ch-app--census { grid-template-rows: auto minmax(0, 1fr) auto; }
.ch-muted { color: var(--text-2); }
.ch-small { font-size: var(--fs-xs); }
.ch-num, .ch-mrn { font-variant-numeric: tabular-nums; font-feature-settings: var(--num); }
.ch-mrn { letter-spacing: .01em; }
.ch-inline { display: inline; margin: 0; }

/* ------------------------------------------------------------------ top bar (the host record system) */
.ch-top { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: 0 var(--sp-4); background: #20262e; color: #e9edf1;
  border-bottom: 1px solid #0e1216; font-size: var(--fs-sm); }
.ch-system { color: #fff; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); letter-spacing: -.01em; }
.ch-system-mark { width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, #8fa3b8 0 50%, #5d7086 50% 100%); }
.ch-facility { color: #c3ccd5; padding-left: var(--sp-3); border-left: 1px solid #47515c; }
.ch-demo { background: #fef0d9; color: #6b3a00; border-radius: var(--r-pill); padding: 1px var(--sp-2); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.ch-topnav { margin-left: auto; display: flex; gap: var(--sp-1); }
.ch-topnav a { color: #e9edf1; text-decoration: none; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); }
.ch-topnav a:hover, .ch-topnav a[aria-current="page"] { background: #343c46; }
.ch-top :focus-visible { outline-color: #9cc7f0; }
.ch-user { position: relative; }
.ch-user > summary { list-style: none; display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); min-height: 32px; }
.ch-user > summary::-webkit-details-marker { display: none; }
.ch-user > summary:hover { background: #343c46; }
.ch-user-ava { width: 24px; height: 24px; border-radius: 50%; background: #5d7086; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: var(--fs-xs); }
.ch-user-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-user-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 17rem; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-3); padding: var(--sp-1); }
.ch-user-who { padding: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-1); border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm); }
.ch-user-who span { color: var(--text-2); font-size: var(--fs-xs); }
.ch-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; font: inherit; color: var(--text); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); text-decoration: none; cursor: pointer; }
.ch-menu-item:hover { background: var(--surface-3); }

/* ------------------------------------------------------------------ patient banner */
.ch-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); padding: var(--sp-2) var(--sp-4); background: var(--surface);
  border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 20; }
.ch-banner-id { display: flex; align-items: center; gap: var(--sp-3); min-width: 15rem; }
.ch-ava svg { width: 24px; height: 24px; }
.ch-ava { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); display: grid; place-items: center; font-weight: 600; flex: none;
  border: 1px solid var(--border-soft); }
.ch-pname { font-size: var(--fs-lg); margin: 0; line-height: 1.2; letter-spacing: -.015em; font-weight: 700; }
.ch-psub { margin: 0; color: var(--text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ch-facts { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: var(--sp-1) 0; margin: 0; flex: 1; min-width: 0; }
.ch-facts > div { padding: 0 var(--sp-4); border-left: 1px solid var(--border-soft); min-width: 0; }
.ch-facts dt { font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ch-facts dd { margin: 0; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-fact-allergy.is-present dd { color: var(--flag-hi); font-weight: 700; }

/* ------------------------------------------------------------------ chart tabs */
.ch-tabs { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 var(--sp-3); }
.ch-tabs ul { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; overflow-x: auto; }
.ch-tabs a { display: flex; align-items: center; gap: var(--sp-2); min-height: 38px; padding: 0 var(--sp-3); text-decoration: none; color: var(--text-2); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ch-tabs a:hover { color: var(--text); background: var(--surface-2); }
.ch-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--primary); font-weight: 600; }
.ch-tabs a.ch-tab-off { color: var(--text-2); font-style: italic; }
.ch-tabcount { background: var(--surface-3); border-radius: var(--r-pill); padding: 0 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }

/* ------------------------------------------------------------------ work area: main pane + docked companion */
.ch-work { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: 0; }
.ch-work--collapsed { grid-template-columns: minmax(0, 1fr) 44px; }
.ch-main { min-width: 0; min-height: 0; overflow: auto; position: relative; }
.ch-main:focus { outline: none; }
.ch-main--notes { overflow: hidden; }
.ch-pane { padding: var(--sp-3) var(--sp-4) var(--sp-5); }
.ch-pane--center { display: grid; place-items: center; min-height: 100%; }
.ch-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-3); }
.ch-toolbar-title { font-size: var(--fs-base); margin: 0; }
.ch-toolbar p { margin: 0; }
.ch-legend { margin-left: auto !important; color: var(--text-2); font-size: var(--fs-xs); display: flex; gap: var(--sp-2); align-items: center; }
.ch-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--text); font-size: var(--fs-sm); min-height: 28px; }
.ch-toggle-box { width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); display: inline-grid; place-items: center; }
.ch-toggle[aria-pressed="true"] .ch-toggle-box { background: var(--primary); border-color: var(--primary); }
.ch-toggle[aria-pressed="true"] .ch-toggle-box::after { content: ""; width: 7px; height: 4px; border-left: 2px solid var(--on-primary); border-bottom: 2px solid var(--on-primary); transform: rotate(-45deg) translate(1px, -1px); }
.ch-callout { display: flex; gap: var(--sp-2); align-items: baseline; border: 1px solid var(--border-soft); border-left: 3px solid var(--border); background: var(--surface-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); margin: var(--sp-3) 0; }
.ch-callout--mark { border-left-color: #b88a00; background: color-mix(in srgb, var(--mark-bg) 35%, var(--surface)); }
.ch-foot { margin: var(--sp-2) 0 0; }

/* notices: a toast in the main pane */
.ch-toast { position: sticky; top: var(--sp-2); z-index: 15; margin: var(--sp-2) var(--sp-4) 0; display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between;
  background: var(--info-bg); color: var(--info-fg); border: 1px solid color-mix(in srgb, var(--info-fg) 35%, transparent); border-left: 4px solid var(--info-fg);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-weight: 500; }
.ch-toast-x { background: none; border: 0; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; min-width: 28px; min-height: 28px; border-radius: var(--r-sm); }

/* ------------------------------------------------------------------ dense grids (census, labs, problems, meds) */
.ch-gridwrap { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); overflow: auto; }
.ch-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; font-feature-settings: var(--num); }
.ch-grid th, .ch-grid td { padding: 6px var(--sp-3); border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: middle; }
.ch-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ch-grid tbody th[scope="row"] { font-weight: 600; }
.ch-grid tbody tr:hover > * { background: var(--surface-2); }
.ch-grid .ch-grouprow > th { background: var(--surface-3); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); padding: 4px var(--sp-3); }
.ch-grid .ch-grouprow:hover > th { background: var(--surface-3); }
.ch-row-muted > * { color: var(--text-2); }
.ch-plink { font-weight: 600; text-decoration: none; }
.ch-plink:hover { text-decoration: underline; }
.ch-census { min-height: 0; overflow: auto; padding: var(--sp-4) var(--sp-5); }
.ch-census-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.ch-census-head h1 { font-size: var(--fs-xl); margin: 0 0 2px; }
.ch-census-head p { margin: 0; }
.ch-census-tools { display: flex; gap: var(--sp-3); align-items: center; }
.ch-census-table th[scope="row"] { white-space: nowrap; }
.ch-census-table th[scope="row"] .ch-small { display: block; font-weight: 400; }
.ch-pstatus { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; padding: 1px var(--sp-2); border-radius: var(--r-pill); border: 1px solid var(--border-soft); }
.ch-pstatus::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ch-pstatus--active { color: var(--info-fg); background: var(--info-bg); }
.ch-pstatus--chronic { color: var(--text); background: var(--surface-3); }
.ch-pstatus--resolved { color: var(--text-2); background: transparent; border-style: dashed; }
.ch-pstatus--resolved::before { background: transparent; border: 1px solid currentColor; }
.ch-pstatus--held { color: var(--risk-fg); background: var(--risk-bg); }

/* labs grid */
.ch-gridwrap--labs { max-height: none; }
.ch-labs th, .ch-labs td { padding: 5px 10px; }
.ch-labs .ch-labs-test { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 15rem; border-right: 1px solid var(--border-soft); }
.ch-labs thead .ch-labs-test { z-index: 3; background: var(--surface-2); }
.ch-labs .ch-grouprow > th { position: sticky; left: 0; }
.ch-labs-col { min-width: 6.5rem; }
.ch-coldate { display: block; color: var(--text); text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.ch-coltime { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ch-labs-trend { width: 120px; color: var(--spark); }
.ch-spark { display: block; overflow: visible; }
.ch-labs-ref, .ch-labs-unit { color: var(--text-2); white-space: nowrap; font-size: var(--fs-xs); }
.ch-cell { font-size: var(--fs-sm); white-space: nowrap; }
.ch-cell--H, .ch-cell--L { font-weight: 700; }
.ch-cell--H { color: var(--flag-hi); background: var(--flag-hi-bg); }
.ch-cell--L { color: var(--flag-lo); background: var(--flag-lo-bg); }
.ch-grid tbody tr:hover > .ch-cell--H { background: var(--flag-hi-bg); }
.ch-grid tbody tr:hover > .ch-cell--L { background: var(--flag-lo-bg); }
.ch-flag { display: inline-flex; align-items: center; gap: 1px; font-size: var(--fs-xs); font-weight: 700; }
.ch-flag--H { color: var(--flag-hi); }
.ch-flag--L { color: var(--flag-lo); }
.ch-nil { color: var(--border); }
.ch-row-sel > th, .ch-row-sel > td { box-shadow: inset 0 1px 0 #b88a00, inset 0 -1px 0 #b88a00; }
.ch-row-sel > .ch-labs-test { background: color-mix(in srgb, var(--mark-bg) 45%, var(--surface)); box-shadow: inset 3px 0 0 #b88a00, inset 0 1px 0 #b88a00, inset 0 -1px 0 #b88a00; }
.ch-cell--sel { outline: 2px solid #b88a00; outline-offset: -2px; }
.ch-fromside { display: inline-flex; gap: 3px; font-size: var(--fs-xs); color: var(--text); background: var(--mark-bg); color: var(--mark-fg); border-radius: var(--r-sm); padding: 0 5px; margin-left: 4px; }
.ch-unit { color: var(--text-2); font-size: var(--fs-xs); font-weight: 400; }

/* ------------------------------------------------------------------ notes tab */
.ch-notes { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100%; min-height: 0; }
.ch-notelist { border-right: 1px solid var(--border-soft); background: var(--surface-2); overflow: auto; min-height: 0; }
.ch-listhead { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-3) var(--sp-3) var(--sp-2); position: sticky; top: 0; background: var(--surface-2); z-index: 2; }
.ch-listhead h2 { font-size: var(--fs-sm); margin: 0; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.ch-daylabel { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-1); position: sticky; top: 36px; background: var(--surface-2); z-index: 1; }
.ch-notelist ul { list-style: none; margin: 0 var(--sp-2) var(--sp-1); padding: 0; display: grid; gap: 2px; }
.ch-nl { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); text-decoration: none; color: var(--text); border: 1px solid transparent; background: transparent; }
.ch-nl:hover { background: var(--surface); border-color: var(--border-soft); }
.ch-nl[aria-current="true"] { background: var(--surface); border-color: var(--border); box-shadow: inset 3px 0 0 var(--primary); }
.ch-nl--draft { background: color-mix(in srgb, var(--look-bg) 55%, transparent); }
.ch-nl-top { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: flex-start; }
.ch-nl-title { font-weight: 600; line-height: 1.3; }
.ch-nl-sub { display: block; font-size: var(--fs-xs); color: var(--text-2); margin-top: 2px; }
.ch-nl--superseded .ch-nl-title { text-decoration: line-through; color: var(--text-2); }
.ch-state { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; padding: 0 6px; border-radius: var(--r-sm);
  border: 1px solid var(--border-soft); color: var(--text-2); background: var(--surface); line-height: 1.5; }
.ch-state--draft { color: var(--look); background: var(--look-bg); border-color: var(--look-line); }
.ch-state--signed { color: var(--agree); border-color: color-mix(in srgb, var(--agree) 40%, transparent); }
.ch-state--lg { font-size: var(--fs-sm); padding: 1px var(--sp-2); }
.ch-note { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; background: var(--surface); }
.ch-note-head { padding: var(--sp-3) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--border-soft); }
.ch-note-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.ch-note-titlerow h2 { font-size: var(--fs-xl); margin: 0; letter-spacing: -.015em; }
.ch-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin: 0; }
.ch-meta dt { font-size: var(--fs-xs); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.ch-meta dd { margin: 0; font-size: var(--fs-sm); }
.ch-notebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.ch-notebar form { margin: 0; }
.ch-note-scroll { overflow: auto; padding: var(--sp-4) var(--sp-5) var(--sp-6); min-height: 0; }
.ch-notetext { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-base); line-height: var(--lh-read); max-width: 74ch; color: var(--text); }
.ch-visitdx { margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--surface-2); max-width: 74ch; }
.ch-visitdx h3 { font-size: var(--fs-sm); margin: 0 0 var(--sp-1); }
.ch-visitdx ul { margin: 0; padding-left: 1.1rem; }
.ch-visitdx p { margin: 0; }
.ch-editform { display: grid; gap: var(--sp-2); max-width: 80ch; height: 100%; grid-template-rows: auto auto minmax(16rem, 1fr) auto; }
.ch-editform label, .ch-editform p { margin: 0; }
.ch-editor { width: 100%; height: 100%; min-height: 16rem; font: inherit; font-size: var(--fs-base); line-height: var(--lh-read); padding: var(--sp-3) var(--sp-4); resize: vertical; }
.ch-editbar { display: flex; gap: var(--sp-2); }

/* note highlights from the companion */
mark.xc-stmt { background: var(--mark-bg); color: var(--mark-fg); box-shadow: inset 0 -2px 0 currentColor; border-radius: 2px; padding: 0 1px; }
mark.xc-unread { background: transparent; color: inherit; outline: 2px dashed var(--look-line); outline-offset: 1px; font-weight: 600; }
mark.xc-mentioned { background: transparent; color: inherit; text-decoration: underline dotted; }
mark.xc-flash { outline: 3px solid var(--focus); outline-offset: 2px; animation: ch-flash 1s var(--ease); }
@keyframes ch-flash { from { background: color-mix(in srgb, var(--focus) 30%, var(--mark-bg)); } to { background: var(--mark-bg); } }

/* ------------------------------------------------------------------ cover sheet */
.ch-cover { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-content: start; }
.ch-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); min-width: 0; }
.ch-card-h { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-soft); }
.ch-card-link { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--fs-xs); }
.ch-plain { list-style: none; margin: 0; padding: 0; }
.ch-plain li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 5px 0; border-bottom: 1px solid var(--border-soft); align-items: baseline; }
.ch-plain li:last-child { border-bottom: 0; }
.ch-plain li > span:last-child { text-align: right; }
.ch-allergy { color: var(--flag-hi); font-weight: 600; }
.ch-kv { margin: var(--sp-2) 0 0; display: flex; justify-content: space-between; }
.ch-mini { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-feature-settings: var(--num); }
.ch-mini th, .ch-mini td { padding: 4px 6px; border-bottom: 1px solid var(--border-soft); text-align: left; font-size: var(--fs-sm); }
.ch-mini thead th { font-size: var(--fs-xs); color: var(--text-2); font-weight: 600; }
.ch-mini tbody th { font-weight: 500; }
.ch-vitals { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--sp-3); margin: 0; }
.ch-vitals dt { font-size: var(--fs-xs); color: var(--text-2); }
.ch-vitals dd { margin: 0; font-size: var(--fs-base); font-weight: 600; font-variant-numeric: tabular-nums; }
.ch-offtab { max-width: 30rem; }

/* ------------------------------------------------------------------ signing dialog */
.ch-scrim { position: fixed; inset: 0; background: rgb(14 18 22 / 55%); z-index: 80; }
.ch-modal { position: fixed; inset: 0; margin: auto; z-index: 90; width: min(34rem, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); color: var(--text); box-shadow: var(--shadow-3); overflow: auto; font-size: var(--fs-sm); }
.ch-modal::backdrop { background: rgb(14 18 22 / 55%); }
.ch-modal-head { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4) var(--sp-5) var(--sp-2); }
.ch-modal-head h2 { font-size: var(--fs-lg); margin: 0; }
.ch-modal-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--look-bg); color: var(--look); display: grid; place-items: center; border: 1px solid var(--look-line); flex: none; }
.ch-modal-body { padding: 0 var(--sp-5) var(--sp-3); }
.ch-modal-list { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: grid; gap: var(--sp-2); }
.ch-modal-list li { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-soft); border-left: 3px solid var(--look-line); border-radius: var(--r-sm); }
.ch-modal-list .xc-status { justify-self: start; }
.ch-modal-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; }
.ch-chk { color: var(--primary); font-size: .8em; }
.ch-modal-list q { font-style: italic; }
.ch-modal-form { display: grid; gap: var(--sp-1); }
.ch-modal-form label { margin-top: var(--sp-2); }
.ch-modal-foot { display: flex; gap: var(--sp-2); justify-content: flex-end; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-soft); background: var(--surface-2); }

/* ------------------------------------------------------------------ status bar */
.ch-status { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); align-items: center; justify-content: space-between; min-height: 26px; padding: 2px var(--sp-4);
  background: var(--surface-2); border-top: 1px solid var(--border-soft); color: var(--text-2); font-size: var(--fs-xs); }
.ch-status-r { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1279px) {
  .ch-work { grid-template-columns: minmax(0, 1fr) 320px; }
  .ch-notes { grid-template-columns: 250px minmax(0, 1fr); }
  .ch-cover { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-facility { display: none; }
  .ch-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ch-facts > div { padding: 0 var(--sp-3); }
  .ch-banner-id { min-width: 0; }
  .ch-status > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
  .ch-status { flex-wrap: nowrap; }
}
@media (max-width: 1100px) {
  .ch-notes { grid-template-columns: 220px minmax(0, 1fr); }
  .ch-note-head, .ch-note-scroll { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
@media (max-width: 1023px) {
  .ch-app { height: auto; min-height: 100vh; overflow: visible; }
  .ch-work, .ch-work--collapsed { grid-template-columns: 1fr; }
  .ch-main, .ch-main--notes { overflow: visible; }
  .ch-notes { grid-template-columns: 1fr; height: auto; }
  .ch-notelist { max-height: 16rem; border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .ch-cover { grid-template-columns: 1fr; }
  .ch-user-name { display: none; }
}
@media print {
  .ch-app { height: auto; overflow: visible; display: block; }
  .ch-top, .ch-tabs, .ch-notelist, .ch-notebar, .ch-status, .xc-bar, .ch-toast { display: none !important; }
  .ch-work { display: block; }
  .ch-main, .ch-note-scroll { overflow: visible; }
}
@media (forced-colors: active) { .ch-state, .ch-pstatus, .ch-flag, .ch-demo { border: 1px solid CanvasText; } .ch-row-sel > * { outline: 2px solid Highlight; } }
/* the shell's panes are not page-width columns: undo the site's main-column rule */
.ch-app main { max-width: none; margin: 0; padding: 0; }
.ch-app main.ch-census { padding: var(--sp-4) var(--sp-5); }
.ch-card--wide { grid-column: span 2; }
.ch-card--full { grid-column: 1 / -1; }
.ch-plain--notes li { justify-content: flex-start; }
.ch-plain--notes li > a { min-width: 14rem; font-weight: 500; }
.ch-vitals dd { white-space: nowrap; }
@media (max-width: 1279px) { .ch-card--wide { grid-column: 1 / -1; } }
@media (max-width: 1023px) { .ch-card--wide, .ch-card--full { grid-column: auto; } }
/* allergies are never truncated */
.ch-fact-allergy dd { white-space: normal; overflow: visible; }
@media (max-width: 1279px) { .ch-fact-allergy { grid-column: span 2; } }
.ch-menu-sep { border-top: 1px solid var(--border-soft); margin: var(--sp-1) 0; }
.ch-menu-label { margin: 0; padding: var(--sp-1) var(--sp-3) 0; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.ch-menu-item--staff { display: flex !important; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.ch-menu-tag { font-size: var(--fs-xs); font-weight: 600; padding: 0 var(--sp-1); border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--border); color: var(--text-2); }