/* eSkribes brand theme — overrides Radzen's "standard-base" theme variables per MIGRATION-PROMPT.md
   §8. Goal: "precise and clinical" — tight geometry, restrained colour, generous whitespace.
   --signal is an accent only, never text on a light background. --mist is never a text colour. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* Brand tokens */
    --ink: #0B1418;
    --petrol: #0B5563;
    --signal: #17B8A6;
    --slate: #4A5A5E;
    --mist: #93A3A6;
    --line: #DCE4E5;
    --paper: #FAFBFB;
    --alert: #B23A31;

    /* Radzen theme variable overrides */
    --rz-primary: var(--petrol);
    --rz-primary-light: #14707F;
    --rz-primary-lighter: rgba(11, 85, 99, 0.12);
    --rz-primary-dark: #083F4A;
    --rz-primary-darker: #052B33;
    --rz-on-primary: #FFFFFF;
    --rz-on-primary-lighter: var(--petrol);

    --rz-secondary: var(--signal);
    --rz-secondary-light: #35C7B7;
    --rz-secondary-lighter: rgba(23, 184, 166, 0.14);
    --rz-secondary-dark: #12907F;
    --rz-secondary-darker: #0E756A;

    --rz-danger: var(--alert);
    --rz-danger-light: #C24B42;
    --rz-danger-lighter: rgba(178, 58, 49, 0.12);
    --rz-danger-dark: #8E2E27;
    --rz-danger-darker: #74251F;

    --rz-body-background-color: var(--paper);
    --rz-text-title-color: var(--ink);
    --rz-text-color: var(--ink);
    --rz-text-secondary-color: var(--slate);
    --rz-text-tertiary-color: var(--slate);
    --rz-text-font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --rz-base-300: var(--line);
    --rz-base-400: var(--mist);

    /* Tight geometry over Radzen's default floating-card look: a thin defining line instead of a
       heavier shadow. Radius is left at Radzen's own 4px default — already restrained. */
    --rz-card-shadow: 0 1px 2px 0 rgba(11, 20, 24, 0.06);
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* MRNs, timestamps, codes, and dollar amounts get the mono face per §8. */
.mono {
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

/* Radzen's own link color is untouched by the --rz- token overrides above; without this every
   plain <a> (e.g. "Forgot your password?") renders in the browser's default blue. */
a {
    color: var(--petrol);
}

a:hover {
    color: var(--signal);
}

.rz-card {
    border: 1px solid var(--line);
}

/* --- App shell (MainLayout) ---
   Rebuilt from MasterPage.master's two RadMenus: rmMain (Home/Patient/Provider/Billing/Admin) is
   now a collapsible icon sidebar rather than a top bar (Radzen's own top-menu padding/font-size
   read as bulky at this app's information density); rmRight (Profile/Help/Logout) stays a small
   top-right menu, since those aren't "main menu" items. */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    --app-sidebar-width: 68px;
    --app-sidebar-width-expanded: 216px;
    flex: 0 0 var(--app-sidebar-width);
    width: var(--app-sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: #FFFFFF;
    overflow: hidden;
    transition: width 0.15s ease;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
}

/* Expanded state is driven purely by the --pinned class now, with no :hover fallback — a hover
   rule here previously masked the toggle's own click: the cursor is necessarily still over the
   sidebar right after clicking it (that's how you clicked it), so a `:hover`-driven expand made
   the click look like it did nothing until the mouse moved away. flex-basis (not just width) must
   be overridden too — the base rule's `flex: 0 0 <width>` shorthand otherwise wins the sizing. */
.app-sidebar--pinned {
    flex-basis: var(--app-sidebar-width-expanded);
    width: var(--app-sidebar-width-expanded);
}

/* Collapsed: hide labels/the pin toggle outright instead of letting them clip mid-word — a
   half-visible "Pati" reads as broken, not as a deliberate icon-only state. The pin toggle itself
   hides too: there's no room for it next to just the mark icon; clicking the mark/menu re-expands. */
.app-sidebar:not(.app-sidebar--pinned) .app-sidebar__wordmark,
.app-sidebar:not(.app-sidebar--pinned) .app-sidebar__pin,
.app-sidebar:not(.app-sidebar--pinned) .rz-navigation-item-text,
.app-sidebar:not(.app-sidebar--pinned) .rz-navigation-item-icon-children {
    display: none;
}

.app-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem;
    white-space: nowrap;
    flex: none;
}

.app-sidebar__mark-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: none;
    border: none;
    border-radius: 4px;
    padding: 4px;
    margin: -4px;
    cursor: pointer;
}

.app-sidebar__mark-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.app-sidebar__mark {
    width: 24px;
    height: 24px;
    flex: none;
    pointer-events: none;
}

.app-sidebar__wordmark {
    font-weight: 600;
    font-size: 1rem;
    flex: 1 1 auto;
}

.app-sidebar__menu {
    flex: 1 1 auto;
    overflow-y: auto;
}

.app-sidebar__pin {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    padding: 0;
    cursor: pointer;
    font-size: 1.125rem;
}

.app-sidebar__pin:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.1);
}

/* Radzen's own dark RadzenPanelMenu defaults already suit a dark sidebar reasonably well; just
   tie the background/hover colors to the brand tokens instead of Radzen's stock greys. */
.app-sidebar__menu {
    --rz-panel-menu-item-background-color: transparent;
    --rz-panel-menu-item-hover-background-color: rgba(255, 255, 255, 0.08);
    --rz-panel-menu-item-active-background-color: rgba(255, 255, 255, 0.14);
    --rz-panel-menu-item-active-indicator: var(--signal);
    --rz-panel-menu-item-border: none;
    --rz-panel-menu-font-weight: 500;
    --rz-panel-menu-icon-color: #FFFFFF;
    font-size: 0.8125rem;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.5rem 1.5rem;
    background: #FFFFFF;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 90;
}

/* Which practice this circuit is looking at. margin-right:auto rather than changing the header's
   justify-content, so the existing right-aligned items keep the layout they already had. */
.app-header__practice {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    margin-right: auto;
    min-width: 0;
}

.app-header__practice-name {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--petrol);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header__practice-address {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On a narrow viewport the address is the first thing worth losing — the name is what identifies
   the practice, and the header still has a menu and a user chip to fit. */
@media (max-width: 900px) {
    .app-header__practice-address { display: none; }
}

@media (max-width: 640px) {
    .app-header__practice { display: none; }
}

.app-header__nav.rz-navigation-menu {
    background: transparent;
    --rz-menu-top-item-padding-block: 0.35rem;
    --rz-menu-top-item-padding-inline: 0.5rem;
    --rz-menu-item-padding-block: 0.35rem;
    --rz-menu-item-padding-inline: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.app-header__user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-header__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rz-primary-lighter);
    color: var(--petrol);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
    width: 100%;

    /* width:100% plus 1.5rem of padding made this 48px wider than its parent on every page --
       the exact overflow measured in the browser. Nothing here sets a global box-sizing, so the
       padding was being added to the 100% rather than counted inside it. The symptom was content
       clipped off the right edge, which looked like a wide table rather than a layout bug. */
    box-sizing: border-box;

    /* The content area's own text size. This has to be a real font-size, not only the Radzen
       tokens below it: those tokens govern Radzen's OWN components, so a bare text node -- and the
       chart is full of them, every Physical Exam finding label is `<RadzenColumn>@Label</...>` --
       inherited from <body> instead, which has no size set and so fell back to the browser's 16px.
       That put three sizes on one row: a 16px label beside a 14px dropdown beside 13px RadzenText.
       14px matches the inputs and .rz-label, which is the pairing the rest of the app already uses. */
    font-size: 0.875rem;

    /* Slightly smaller than Radzen's defaults across the dashboard content area — a page title at
       28-40px and 14px body text read as oversized for this app's density. */
    --rz-text-h4-font-size: clamp(1.5rem, 2.2vw, 2rem);
    --rz-text-h6-font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    --rz-body-font-size: 0.8125rem;
    --rz-text-subtitle2-font-size: 0.8125rem;
    --rz-text-body2-font-size: 0.8125rem;
    --rz-text-caption-font-size: 0.6875rem;
}

/* --- Auth pages (login/set-password/reset-password/login-verify): a centered card, since these
   render as static SSR outside the normal dashboard layout's data density. --- */

/* AuthLayout's wrapper. The pages that stand outside a session -- sign in, set a password, redeem
   a reset link -- carry no sidebar and no header, so nothing else gives the page its height. The
   login screen brings its own full-bleed .login-split; this only has to stop the smaller card
   screens floating at the top of an otherwise empty viewport. */

.auth-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.auth-shell {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}

/* The way out of an auth screen. Every one of these pages is a dead end without it: there is no
   navigation chrome on the login shell, so the only exits were the back button and the URL bar. */

.auth-back {
    display: block;
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color, #57676d);
}

.auth-back:hover, .auth-back:focus-visible { text-decoration: underline; }

.auth-card__logo {
    display: block;
    height: 28px;
    margin: 0 auto 1.75rem;
}

/* "I no longer have my authenticator app" on ResetPassword.razor. A checkbox with a two-line
   explanation beside it, so the destructive option reads as the exception it is rather than as
   another field. */

.reset-reenroll {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 1rem 0 0.25rem;
    cursor: pointer;
    line-height: 1.35;
}

.reset-reenroll input[type="checkbox"] {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

.reset-reenroll small {
    display: block;
    margin-top: 0.25rem;
    color: var(--rz-text-tertiary-color, #6b7a80);
}

/* --- Login page split-screen (see Login.razor for why: legacy Login.aspx had this same clinical
   photo filling the right side of the page) --- */

.login-split {
    display: flex;
    min-height: 100vh;
}

.login-split__image {
    flex: 1 1 45%;
    background: url('img/login-hero.jpg') center center / cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.login-split__overlay {
    width: 100%;
    padding: 2.5rem;
    background: linear-gradient(180deg, rgba(11, 20, 24, 0) 0%, rgba(11, 20, 24, 0.75) 100%);
}

.login-split__logo {
    height: 24px;
    display: block;
    margin-bottom: 0.75rem;
}

.login-split__tagline {
    color: #FFFFFF;
    font-size: 1.0625rem;
    margin: 0;
    max-width: 26ch;
}

.login-split__form {
    flex: 1 1 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-split__mobile-logo {
    display: none;
}

@media (max-width: 860px) {
    .login-split__image {
        display: none;
    }

    .login-split__mobile-logo {
        display: block;
        height: 28px;
        margin: 0 auto 1.75rem;
    }
}

/* Form labels.
   Radzen styles its inputs to 14px but leaves RadzenLabel at whatever the document inherits, which
   here is the 16px body size. So every label rendered two pixels larger than the box beneath it, and
   larger than every other piece of chrome on the page -- the tabs at 14px, the navigation at 13px,
   the card headings at 11.5px. It reads as a different font even though the family is the same
   IBM Plex Sans throughout; size is what the eye actually caught.

   Set here rather than per page because all 133 RadzenLabels in the application had it, not just the
   two the practice happened to be looking at: the patient search fields and the Show Completed /
   Show Cancelled checkboxes on the dashboard. */
.rz-label {
    font-size: 0.875rem;
}

/* Native <select> — the auth pages render as static SSR (no SignalR circuit yet, needed for
   HttpContext.SignInAsync), so RadzenDropDown's JS-driven popup can't be used here. Restyled to
   match .rz-textbox as closely as a native control allows, rather than left at the OS default. */
select.rz-textbox {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234A5A5E' d='M8 11 3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 0.9rem;
    padding-right: 2rem;
}

/* --- Patient Card dialog (Home.aspx's pnlPatientInfo + its adjacent action menus) --- */

.patient-card {
    min-width: 900px;
    max-width: 1150px;
}

.patient-card__layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

/* Was flex: 1 1 68% beside a 240px menu column. The actions moved to a bar across the top, so the
   demographics grid, the insurance table and the ledger get the whole width -- the ledger in
   particular has up to eight money columns and was being squeezed into two thirds of the card. */
.patient-card__main {
    flex: 1 1 100%;
    min-width: 0;
    max-height: 78vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* The action bar. Sticky, because the card body scrolls to 78vh and a biller reading the ledger at
   the bottom should not have to scroll back up to reach Accept Payment.

   z-index 10, and the exact number matters. Being sticky with a z-index makes this bar a stacking
   context, so an open dropdown inside it cannot outrank the bar however high its own z-index goes --
   the panel asks for 3 and gets capped at the bar's. Radzen's data grids give their sticky thead
   z-index 2, and those grids come after the bar in the DOM, so at an equal 2 the header won on
   document order and painted straight through the menu: on chart 2365 the Insurance and Patient
   Ledger header rows cut across the Forms list and hid "Confidentiality of Substance Abuse".
   Ten clears the header with room for Radzen to raise its own value without this breaking again. */
.patient-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    background: var(--rz-base-background-color, #fff);
    border-bottom: 1px solid var(--line);
}

/* Pushes the dropdowns away from the two buttons, so "what I came here to do" and "everything else"
   read as two things rather than one row of seven. Collapses to nothing when the bar wraps. */
.patient-card__actions-spacer {
    flex: 1 1 1rem;
    min-width: 0;
}

.patient-card__menu {
    background: transparent;
}

/* Radzen's menu bar carries its own background and padding for a page header; inside a dialog it
   should read as part of the button row. */
.patient-card__menu .rz-menu,
.patient-card__menu.rz-menu {
    background: transparent;
    padding: 0;
    box-shadow: none;
}

/* The dropdown panels themselves. Forms holds twelve items across a submenu, so a sensible width
   stops the longer consent names -- "Voluntary Care Patient Consent Form" -- from wrapping to three
   lines. */
.patient-card__menu .rz-navigation-menu {
    min-width: 15rem;
    /* Radzen expands a submenu inline rather than flying it out, so Forms with Behavioral Health open
       is thirteen rows -- enough to run off the bottom of the screen from a dialog that already sits
       partway down it. Capped and scrolled instead of clipped. */
    max-height: 60vh;
    overflow-y: auto;
}

.patient-card__header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.patient-card__photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--line);
    flex: none;
    background: var(--paper);
}

.patient-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
}

.patient-card__field {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.patient-card__field-label {
    font-size: 0.6875rem;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.patient-card__field-value {
    font-size: 0.8125rem;
}

/* --- Patient Files dialog (Home.aspx's Patient Files/Images popup) --- */

.patient-files {
    min-width: 780px;
    max-height: 80vh;
    overflow-y: auto;
}

.patient-files__upload {
    display: inline-block;
}

.patient-files__download-link {
    display: inline-flex;
    align-items: center;
}

.patient-files__preview {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.patient-files__preview-body {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: var(--paper, #fafafa);
    border: 1px solid var(--line);
    border-radius: 4px;
    transition: height 0.15s ease;
}

.patient-files__preview--expanded .patient-files__preview-body {
    height: 500px;
}

.patient-files__preview-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.patient-files__preview-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* --- EMR Patient Chart (Home.aspx's "View Chart" -> EMR/*.aspx's 13-tab RadTabStrip) --- */

/* Fourteen tabs, each carrying a completion mark, exceed the strip on a laptop. Scrolling rather
   than wrapping onto a second row, because a strip that reflows moves tabs under the pointer -- but
   scrolling is now the LAST resort, not the first: see the sizing rules at the end of this file,
   where the tabs give up padding and then label width before the strip gives up and scrolls. */
.patient-chart__tabs .rz-tabview-nav {
    flex-wrap: nowrap;
    overflow-x: auto;

    /* overflow-y MUST be stated. Setting one axis to auto computes a `visible` on the other axis to
       `auto` as well, so this strip was a scroll container vertically too -- and its buttons measure
       41.6px inside a 41px box, which is enough to paint a full-height vertical scrollbar in a 41px
       bar, on every tab, scrolling six tenths of a pixel. Hidden clips that fraction and nothing
       else; the horizontal axis still scrolls when the tabs genuinely do not fit. */
    overflow-y: hidden;
    scrollbar-width: thin;
}

.patient-chart__header {
    display: flex;
    gap: 1rem;
    /* Top-aligned since the summary beside the photo is now several lines of visit detail rather
       than a name and a date of birth -- centring it against a 64px photo left the first line
       floating below the top of the picture. */
    align-items: flex-start;
    margin-bottom: 1rem;
}

/* Takes the rest of the row, so a long allergy list wraps within the header rather than pushing
   the strip wider than the tabs beneath it. */
.patient-chart__summary {
    flex: 1;
    min-width: 0;
}

.patient-chart__photo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--line);
    flex: none;
    background: var(--paper);
}


/* ============================================================================================
   Design tokens — radius, elevation, rhythm
   ============================================================================================
   Added because the app had one border-radius and one hairline everywhere, which is what made a
   dense screen read as a stack of identical boxes. These are deliberately few. The brand's own
   words are "the palette is deliberately narrow, because restraint is what reads as clinical",
   and the same argument applies to depth and geometry: three elevations, not eight. */
:root {
    --r-sm: 6px;
    --r-md: 10px;   /* cards, inputs */
    --r-lg: 14px;   /* page-level surfaces */
    --r-pill: 999px;

    /* Shadows tinted with Ink rather than neutral black, so depth sits in the same colour world
       as everything else instead of greying it out. */
    --shadow-sm: 0 1px 2px rgba(11, 20, 24, 0.05);
    --shadow-md: 0 1px 3px rgba(11, 20, 24, 0.06), 0 4px 12px rgba(11, 20, 24, 0.04);
    --shadow-lg: 0 2px 6px rgba(11, 20, 24, 0.07), 0 12px 28px rgba(11, 20, 24, 0.06);
}

/* ============================================================================================
   Dashboard
   ============================================================================================ */

/* --- page heading ------------------------------------------------------------------------- */
.dash-greeting {
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 0.15rem;
}

.dash-date {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.8rem;
    color: var(--slate);
    margin: 0 0 1.5rem;
}

/* --- the summary strip ---------------------------------------------------------------------
   The counts were the answer to "what is happening today" and they were buried inside H6
   headings as "(3)". Pulled out so the number is the first thing read. */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-sm);
}

.dash-stat {
    background: #FFFFFF;
    padding: 1.15rem 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: relative;
    transition: background 120ms ease;
}

.dash-stat:hover { background: #FCFDFD; }

.dash-stat__value {
    /* Mono, per the brand: "tabular figures align in columns". Four counts in a row that do not
       line up is exactly what that instruction is guarding against. */
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.dash-stat__label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--slate);
}

/* Zero is not a failure, so it is quieted rather than coloured. A dashboard that shouts about an
   empty afternoon teaches people to stop reading it. */
.dash-stat--zero .dash-stat__value { color: var(--mist); }

/* One accent, on the count that needs action. Signal is an accent only, per the brand. */
.dash-stat--attention {
    background: linear-gradient(to bottom, rgba(23, 184, 166, 0.05), #FFFFFF 60%);
}

.dash-stat--attention .dash-stat__value { color: var(--petrol); }

.dash-stat--attention::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--signal);
}

/* --- section cards ------------------------------------------------------------------------ */
.dash-card {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: 1.15rem 1.25rem 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;

    /* How many rows a card shows before it scrolls. Ten, matching the Action List grid's PageSize
       below it, so the whole dashboard has one answer to "how long is a list". */
    --dash-rows-visible: 10;

    /* Measured, not guessed: CSS cannot count children, so the cap has to be ten times a row's
       height, and a queue row rendered 56.2px on a 16px root (a name, a meta line, and two
       ExtraSmall buttons). 3.5rem is 56px. A row whose patient name wraps to two lines is 76px, so
       a card full of long names shows eight or nine rather than ten -- the point of the cap is that
       38 rows do not become a 2,345px card, not that the tenth row is exactly at the fold. */
    --dash-row-height: 3.5rem;
}

/* A deficiency row is one line -- a name and a date, no meta line and no buttons -- and measured
   38.6px. 2.4rem is 38.4px. */
.dash-card--attention {
    --dash-row-height: 2.4rem;
}

/* The scrolling list itself.
   flex: 1 1 auto with min-height: 0 is what lets it actually shrink inside the flex-column card;
   without min-height: 0 a flex item refuses to go below its content height and the cap does nothing.
   The card head sits outside this element, so it stays put while the rows move under it. */
.dash-card__rows {
    flex: 1 1 auto;
    min-height: 0;
    /* The half-rem is not slack. Ten rows of exactly 3.5rem is 560px against a measured 56.2px row,
       which lands the tenth row a fraction short and shows nine -- and the extra sliver of the
       eleventh row that this leaves visible is the clearest possible signal that the list continues
       past the fold. */
    max-height: calc(var(--dash-row-height) * var(--dash-rows-visible) + 0.5rem);
    overflow-y: auto;

    /* Full bleed. The rows' separators ran edge to edge via a negative margin on .dash-row; that
       margin now belongs here instead, because a negative margin on a child of a scroll container
       overflows it sideways and earns a horizontal scrollbar nobody asked for. */
    margin: 0 -1.25rem;

    /* Reserve the scrollbar's width whether or not this particular card needs one, so a card that
       scrolls and a card that does not are the same width inside. Three cards side by side with one
       of them 15px narrower is exactly the misalignment this pass is fixing. */
    scrollbar-gutter: stable;
}

/* The bleed moved to the container; a negative margin here would now overflow it. */
.dash-card__rows .dash-row {
    margin: 0;
}

/* A visible scrollbar, not an overlay one.
   The whole point of the cap is that the list carries on past the tenth row, and a scrollbar that
   only fades in once you have already started scrolling cannot say so -- the count in the card head
   reads 36 while ten rows show, and nothing in between explains the gap. Thin and quiet, but there.
   Only a list that actually overflows draws one. */
.dash-card__rows {
    scrollbar-width: thin;
    scrollbar-color: var(--mist) transparent;
}

.dash-card__rows::-webkit-scrollbar {
    width: 8px;
}

.dash-card__rows::-webkit-scrollbar-track {
    background: transparent;
}

.dash-card__rows::-webkit-scrollbar-thumb {
    background: var(--mist);
    border-radius: 4px;
}

.dash-card__rows::-webkit-scrollbar-thumb:hover {
    background: var(--slate);
}

/* Shown only when a list is longer than the cap. Quiet -- it is a footnote, not a control -- but it
   is the one part of the overflow that is guaranteed to be painted: a scrollbar can be an overlay
   the browser only draws mid-scroll, and this cannot. */
.dash-card__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    margin: 0 -1.25rem;
    padding: 0.45rem 1.25rem 0;
    border-top: 1px solid var(--line);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mist);
}

.dash-card__more-icon {
    font-size: 0.95rem;
    line-height: 1;
}

/* Every one of the eight sections was an H6, so nothing led. A quieter label with the count moved
   out to its own chip lets the content be the loudest thing in the card. */
.dash-card__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--line);
}

.dash-card__title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
}

.dash-card__count {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--petrol);
    background: var(--rz-primary-lighter);
    border-radius: var(--r-pill);
    padding: 0.1rem 0.5rem;
    margin-left: auto;
}

.dash-card__count--zero {
    color: var(--mist);
    background: rgba(147, 163, 166, 0.12);
}

/* --- rows --------------------------------------------------------------------------------- */
/* Replaces an inline "border-bottom: 1px solid #eee" repeated on every row. Negative margins let
   the hover highlight run to the card edge, which reads as a list rather than bordered blocks. */
.dash-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.25rem;
    margin: 0 -1.25rem;
    border-bottom: 1px solid var(--line);
    transition: background 100ms ease;
}

.dash-row:last-child { border-bottom: none; }
.dash-row:hover { background: var(--paper); }

.dash-row__main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* One line per name, ellipsised if it does not fit.
   These rows sit three-abreast, so each card is about 440px wide on a 1700px screen, and a patient
   name that wraps there turns a 56px row into a 76px one. That was two problems at once: rows of
   two different heights beside each other, and only seven of the intended ten fitting inside the
   cap. The full name is on the anchor's title and on the card the row opens. */
.dash-row__name {
    font-weight: 500;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

/* The link truncates. The tag beside it must not: on the Checked in card that tag is the "No
   vitals" alert, which is the one thing on the card somebody has to act on. */
.dash-row__name > a,
.dash-row__name > .rz-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-row__name > .dash-tag {
    flex: 0 0 auto;
}

/* Same reasoning: "Room 4 · Jennifer Whitmore-Castellanos" would wrap and take the row with it. */
.dash-row__meta {
    font-size: 0.78rem;
    color: var(--slate);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The appointment time, now on the meta line rather than in a column of its own. Mono and tabular
   so the times still line up down the card, and darker than the rest of the meta line because it is
   the part somebody scans for. */
.dash-row__meta-time {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.dash-row__meta-sep {
    color: var(--mist);
    padding: 0 0.15rem;
}

/* Times, chart numbers, amounts — the brand names these specifically for mono. */
.dash-row__data {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--slate);
    white-space: nowrap;
}

.dash-row__actions { display: flex; gap: 0.35rem; flex-shrink: 0; }

/* Telemedicine was flagged with inline red on the patient's name. Alert is reserved for denials
   and errors in the brand, so a neutral chip carries it instead. */
.dash-tag {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: var(--r-sm);
    background: var(--rz-secondary-lighter);
    color: var(--rz-secondary-darker);
    white-space: nowrap;
}

.dash-tag--alert { background: var(--rz-danger-lighter); color: var(--rz-danger-dark); }

/* --- empty states -------------------------------------------------------------------------- */
/* "Nothing scheduled." as plain caption text reads like a page that failed to load. Centred, with
   air around it, it reads as a deliberate answer. */
.dash-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--mist);
}

.dash-empty__icon { font-size: 1.35rem; opacity: 0.55; }
.dash-empty__text { font-size: 0.85rem; }

/* --- patient search ------------------------------------------------------------------------ */
.dash-search {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 1.35rem 1.5rem 1.25rem;
    margin-bottom: 1.75rem;
}

.dash-search__title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 0.9rem;
}

/* Radzen's inputs inherit the app radius so the form does not look bolted on. */
.dash-search .rz-textbox,
.dash-search .rz-dropdown,
.dash-search .rz-datepicker { border-radius: var(--r-sm); }

/* --- the tabbed worklist ------------------------------------------------------------------- */
.dash-worklist {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 1.1rem 1.25rem 1.25rem;
}

/* ============================================================================================
   Dashboard colour — areas distinguished by hue, not decorated with it
   ============================================================================================
   The brand palette is two tones and one accent, deliberately: "restraint is what reads as
   clinical". So rather than introduce new brand colours, each area gets a tint derived from the
   stage a patient is at, and colour is applied to the *edge and the figure* — never to a whole
   card ground, which is what makes an app look like a toy rather than a tool.

   The sequence is the clinic's own day: scheduled -> checked in -> discharged. Reading left to
   right, the hue warms as the visit progresses, so the three queues are distinguishable at a
   glance without anyone having to read the headings. */
:root {
    --stage-scheduled: #0B5563;   /* Petrol — the brand primary. Waiting to arrive. */
    --stage-active:    #17B8A6;   /* Signal — in the building, being seen. */
    --stage-done:      #4A5A5E;   /* Slate — finished, receding. */
    --stage-attention: #B23A31;   /* Alert — the only colour that asks for action. */

    --tint-scheduled: rgba(11, 85, 99, 0.06);
    --tint-active:    rgba(23, 184, 166, 0.07);
    --tint-done:      rgba(74, 90, 94, 0.05);
    --tint-attention: rgba(178, 58, 49, 0.06);
}

/* --- the summary strip ----------------------------------------------------------------------
   A coloured rule along the top of each figure. Thin enough to be a signal rather than a block,
   and it sits above the number so the eye picks up the colour and the figure together. */
.dash-stat { border-top: 3px solid transparent; }

.dash-stat--scheduled { border-top-color: var(--stage-scheduled); background: linear-gradient(to bottom, var(--tint-scheduled), #FFFFFF 55%); }
.dash-stat--active    { border-top-color: var(--stage-active);    background: linear-gradient(to bottom, var(--tint-active), #FFFFFF 55%); }
.dash-stat--done      { border-top-color: var(--stage-done);      background: linear-gradient(to bottom, var(--tint-done), #FFFFFF 55%); }
.dash-stat--attention { border-top-color: var(--stage-attention); background: linear-gradient(to bottom, var(--tint-attention), #FFFFFF 55%); }

.dash-stat--scheduled .dash-stat__value { color: var(--stage-scheduled); }
.dash-stat--active    .dash-stat__value { color: var(--rz-secondary-darker); }
.dash-stat--done      .dash-stat__value { color: var(--stage-done); }
.dash-stat--attention .dash-stat__value { color: var(--stage-attention); }

/* On zero the figure is quieted but the colour is NOT: the rule and the tint identify which area
   you are looking at, and that has to hold whether the queue has forty patients or none. Muting
   the whole tile on an empty morning would mean the page loses its structure exactly when there is
   least else to orient by. Only the number recedes. */
.dash-stat--zero .dash-stat__value { color: var(--mist); }

/* The old accent rail is replaced by the stage colours above. */
.dash-stat--attention::before { display: none; }

/* --- section cards --------------------------------------------------------------------------
   A left edge rather than a top border, so a column of cards reads as a set of tracks. The card
   ground stays white: colour identifies the area, it does not fill it. */
.dash-card { border-left: 3px solid var(--line); }

.dash-card--scheduled { border-left-color: var(--stage-scheduled); }
.dash-card--active    { border-left-color: var(--stage-active); }
.dash-card--done      { border-left-color: var(--stage-done); }
.dash-card--attention { border-left-color: var(--stage-attention); }

/* The heading takes the same hue, which is what actually ties the card to its figure in the strip
   above — the two are the only coloured things in the card. */
.dash-card--scheduled .dash-card__title { color: var(--stage-scheduled); }
.dash-card--active    .dash-card__title { color: var(--rz-secondary-darker); }
.dash-card--done      .dash-card__title { color: var(--stage-done); }
.dash-card--attention .dash-card__title { color: var(--stage-attention); }

.dash-card--scheduled .dash-card__count { color: var(--stage-scheduled); background: var(--tint-scheduled); }
.dash-card--active    .dash-card__count { color: var(--rz-secondary-darker); background: var(--tint-active); }
.dash-card--done      .dash-card__count { color: var(--stage-done); background: var(--tint-done); }
.dash-card--attention .dash-card__count { color: var(--stage-attention); background: var(--tint-attention); }

.dash-card__count--zero { color: var(--mist) !important; background: rgba(147, 163, 166, 0.12) !important; }

/* --- the two working surfaces ---------------------------------------------------------------
   Search and the worklist are tools rather than stages, so they take the brand primary as a top
   rule instead of joining the stage sequence. */
.dash-search   { border-top: 3px solid var(--petrol); }
.dash-worklist { border-top: 3px solid var(--petrol); }

.dash-search__title { color: var(--petrol); }

/* --- rows ------------------------------------------------------------------------------------
   Hover picks up the area's own tint, so moving down a column reinforces which list you are in. */
.dash-card--scheduled .dash-row:hover { background: var(--tint-scheduled); }
.dash-card--active    .dash-row:hover { background: var(--tint-active); }
.dash-card--done      .dash-row:hover { background: var(--tint-done); }
.dash-card--attention .dash-row:hover { background: var(--tint-attention); }

/* ============================================================================================
   Patient Chart — the dashboard's surfaces, applied to the chart
   ============================================================================================
   The dashboard settled what a section looks like in this application: a white card on paper,
   titled by a small uppercase slate label with a rule under it, one accent where something needs
   attention, and figures in mono so columns line up. The chart answered none of that. Fourteen
   tabs of dense clinical forms rendered onto one flat white sheet; 77 fieldsets drawn as a hairline
   box with a legend set in ordinary body text; three levels of tab strip each styled differently,
   the innermost wrapping "X-Ray Order" onto three lines. Nothing here is a new idea — it is the
   dashboard's own tokens and shapes, pointed at the chart's vocabulary.

   Deliberately CSS only. The chart is 30-odd components over 77 fieldsets and 124 grids; expressing
   this as markup would mean touching every one of them and would leave the next tab free to
   disagree. */

/* --- the patient header ---------------------------------------------------------------------
   Legacy's dlInfo strip, and until now the only thing on the page with no surface at all: five
   lines of run-on text sitting directly on the page background above the tabs. It is the chart's
   summary strip, so it gets what the dashboard's summary strip has — a card, and a single rule of
   accent along the top. */
.patient-chart__header {
    /* Light yellow rather than the white every other card on the page uses: this one is not a card
       of content, it is which patient the content belongs to, and a clinician moving between charts
       needs that to register before they read a word of it. The border warms to match, so the card
       does not read as a white box with yellow spilled in it. */
    background: #FFFBEA;
    border: 1px solid #EADFBE;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    position: relative;
}

/* Everything in the strip centres, not only the progress lines -- "No open visit." sits beside
   those rather than inside them and would otherwise stay left while the rest moved.

   The photo stays in the flow. Taking it out of the flow would centre the text on the card rather
   than on the space beside the photo, but a 64px picture absolutely placed in a card whose height
   comes from two lines of text hangs out of the bottom of it. In the flow it hides itself when a
   patient has no photo -- which is the common case, and then the text is centred on the card
   anyway; when there is one, the text centres beside it. */
.patient-chart__header .patient-chart__summary {
    text-align: center;
}

.patient-chart__header::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--petrol);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* --- the tab strip ---------------------------------------------------------------------------
   Radzen's default is a folder-tab look: a grey rail with the selected tab punched out of it in
   white. That reads as a different application to the dashboard's flat cards, and with fourteen
   tabs the rail is the loudest object on the page. Underlined tabs on paper instead — the label is
   the tab, and the selected one is marked in the same petrol used for every other "you are here"
   in the app. */
.patient-chart__tabs > .rz-tabview-nav {
    background: transparent;
    border-bottom: 1px solid var(--line);
    gap: 0.15rem;
    padding: 0;
}

.patient-chart__tabs > .rz-tabview-nav > li {
    background: transparent;
    border: none;
    margin: 0;
}

.patient-chart__tabs > .rz-tabview-nav > li > button {
    background: var(--tab-tint, transparent);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    padding: 0.6rem 0.85rem;
    color: var(--tab-ink, var(--slate));
    font-size: 0.8125rem;
    font-weight: 500;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.patient-chart__tabs > .rz-tabview-nav > li > button:hover {
    border-bottom-color: var(--tab-ink, var(--line));
}

/* The one you are on is filled with its own ink and reversed out. Tinting it a shade deeper than
   its neighbours was not enough to find at a glance once all fourteen carry a wash -- with every
   tab coloured, "which is selected" needs a different move, not a stronger version of the same
   one. Each ink is dark enough to hold white text at this size. */
.patient-chart__tabs > .rz-tabview-nav > li.rz-tabview-selected > button {
    background: var(--tab-ink, var(--petrol));
    color: #FFFFFF;
    font-weight: 600;
    border-bottom-color: var(--tab-ink, var(--petrol));
}

/* On the filled tab the tick goes white with the label. Green on a dark ground is the one place
   this mark reads badly, and it is the tab whose status matters least -- you are already in that
   section and can see what is in it. */
.patient-chart__tabs > .rz-tabview-nav > li.rz-tabview-selected .chart-tab-title__mark {
    color: inherit;
}

/* --- the chart sections, each in its own colour ---------------------------------------------
   Fourteen sections in one strip, all in the same grey, is fourteen words to read before you know
   where you are. The body systems on Physical Exam and CC/HPI/ROS already carry a hue each, and
   the order types now do too; this is the same idea one level up, so a section is recognisable by
   its colour before its name is read.

   Hues follow the palette the panels use, so a section's tab and its content agree: Physical Exam
   takes the Respiratory blue, Orders the amber its Custom type wears, Procedures the rose. The
   selected tab fills with its wash, which is what makes the strip and the card below it read as
   one thing.

   Set as variables on the list item, so the four rules above cover every state and adding a
   section is one line. Radzen renders this nav, so nth-child is the only handle -- the order is
   PatientChart.razor's, top to bottom. */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(1)  { --tab-ink: #2C6E7F; --tab-tint: #EDF4F7; }  /* Vital Signs */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(2)  { --tab-ink: #6B4E8F; --tab-tint: #F4EFFA; }  /* History */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(3)  { --tab-ink: #2F7A57; --tab-tint: #ECF6F0; }  /* CC/HPI/ROS */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(4)  { --tab-ink: #2C5F97; --tab-tint: #EBF3FC; }  /* Physical Exam */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(5)  { --tab-ink: #8A5A22; --tab-tint: #FBF4E8; }  /* Orders */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(6)  { --tab-ink: #A03A48; --tab-tint: #FBEEF0; }  /* Procedures */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(7)  { --tab-ink: #55636E; --tab-tint: #F0F2F4; }  /* Lab */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(8)  { --tab-ink: #5B4B94; --tab-tint: #EFEDF9; }  /* Diagnoses */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(9)  { --tab-ink: #9A5B2A; --tab-tint: #FDF3EB; }  /* Treatment */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(10) { --tab-ink: #3F7268; --tab-tint: #EEF5F2; }  /* Instructions */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(11) { --tab-ink: #8A3F63; --tab-tint: #F8EFF4; }  /* Discharge */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(12) { --tab-ink: #45557F; --tab-tint: #EEF1F8; }  /* Files */
.patient-chart__tabs > .rz-tabview-nav > li:nth-child(13) { --tab-ink: #0B5563; --tab-tint: #E9F1F3; }  /* Chart Note */

/* The panel is the card.
   The first pass made it paper and gave each fieldset a card of its own, which is wrong for this
   page: most of a chart tab's content is not in a fieldset at all -- Vital Signs is thirty bare
   inputs -- so that left the form floating on the background with only the one Sleep group on a
   surface. A chart tab IS the section, so the tab body is the card and everything in it is a
   subsection of that. The nav's own bottom rule serves as the card's top edge; a border-top here
   as well would draw the line twice.

   Specificity is deliberate: Radzen's `.rz-tabview-top > .rz-tabview-panels` sets the radius at the
   same weight as a two-class selector, so this has to carry the element's own `.rz-tabview` to win
   the geometry rather than relying on theme.css merely being loaded later. */
.patient-chart__tabs.rz-tabview > .rz-tabview-panels {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: 1.35rem 1.5rem 1.5rem;
}

.patient-chart__tabs.rz-tabview > .rz-tabview-panels > .rz-tabview-panel {
    padding: 0;
}

/* --- nested tab strips -----------------------------------------------------------------------
   Second and third level ("Recent Encounter / History / Charts", the ten exam systems, the ten
   order categories). Quieter than the top strip by a step, because they are a control inside a
   section rather than the page's own navigation — and never wrapping: the order categories were
   rendering "X-Ray Order" over three lines and standing the whole strip up 60px tall. */
.patient-chart__tabs .rz-tabview-panel .rz-tabview-nav {
    background: transparent;
    border-bottom: 1px solid var(--line);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    gap: 0.1rem;
    padding: 0;
}

.patient-chart__tabs .rz-tabview-panel .rz-tabview-nav > li {
    background: transparent;
    border: none;
    margin: 0;
}

/* The body-system titles -- General Appearance, HEENT, Neck -- are 14px, the same as the findings
   they sit above. They were 12px against 14px content and a 13px strip above them, which is three
   sizes down one page: the family was always IBM Plex Sans, so what read as "a different font" was
   size and weight.

   Hierarchy is carried by weight and the accent underline instead of by size, which is what lets all
   three levels agree.

   The strip is its own container so the padding can respond to ITS width rather than the page's. It
   has to: the ten exam systems sit in an 825px column beside the note panel, and at 12px they filled
   it exactly -- 14px needs ~16% more, which without this would have handed back the scrollbar that
   was just removed. Ten tabs means twenty padding edges, so the step from 0.7rem to 0.2rem is worth
   ~160px, and 701px of label plus 64px of padding fits 825px with room to spare. */
.patient-chart__tabs .rz-tabview-panel .rz-tabview {
    container-type: inline-size;
}

.patient-chart__tabs .rz-tabview-panel .rz-tabview-nav > li > button {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.4rem 0.7rem;
    color: var(--slate);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Widest first; equal specificity, so source order is what makes the narrowest win. */
@container (max-width: 1000px) {
    .patient-chart__tabs .rz-tabview-panel .rz-tabview-nav > li > button { padding: 0.4rem 0.45rem; }
}

@container (max-width: 900px) {
    .patient-chart__tabs .rz-tabview-panel .rz-tabview-nav > li > button { padding: 0.4rem 0.3rem; }
}

@container (max-width: 840px) {
    .patient-chart__tabs .rz-tabview-panel .rz-tabview-nav > li > button { padding: 0.4rem 0.2rem; }
}

.patient-chart__tabs .rz-tabview-panel .rz-tabview-nav > li.rz-tabview-selected > button {
    color: var(--petrol);
    font-weight: 600;
    border-bottom-color: var(--petrol);
}

.patient-chart__tabs .rz-tabview-panel .rz-tabview-panels {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 1rem 0 0;
}

/* --- fieldsets become subsections ------------------------------------------------------------------
   The chart's one sectioning device, 77 of them, drawn until now as a hairline rectangle with the
   legend notched into the top border. Inside the tab's card they keep the label and drop the
   rectangle, because a card drawn on a card reads as clutter. The legend gets the
   .dash-card__title treatment: uppercase, letterspaced, slate, with the rule under it running the
   full width of the card rather than stopping at the width of the word.

   `float: left; width: 100%` is what turns a <legend> into a block that spans its fieldset — a
   legend is not a normal flow box and will not take a full-width border any other way. The content
   after it then has to clear, which is what the wrapper rule does. */
.patient-chart .rz-fieldset {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.patient-chart .rz-fieldset > .rz-fieldset-legend {
    float: left;
    width: 100%;
    margin: 0 0 0.85rem;
    padding: 0 0 0.7rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
}

/* Radzen puts a toggle control inside the legend on a collapsible fieldset; its icon must not
   inherit the label's letterspacing. */
.patient-chart .rz-fieldset > .rz-fieldset-legend .rzi {
    letter-spacing: normal;
    font-size: 0.9rem;
    vertical-align: -0.1em;
}

.patient-chart .rz-fieldset > .rz-fieldset-content-wrapper {
    clear: both;
}

/* A fieldset that follows content rather than opening the tab takes a rule above it, so two
   sections running down one card are separated rather than only spaced — Sleep
   inside Vital Signs, a system inside the exam. It keeps the label and drops the surface. */
.patient-chart .rz-fieldset + .rz-fieldset,
.patient-chart .rz-fieldset:not(:first-child) {
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}

/* --- section headings ------------------------------------------------------------------------
   The chart labels a section three ways — a Subtitle2, an H6, or bold body text — and all three
   rendered as ordinary prose competing with the clinical text beside them. One treatment, the same
   one the dashboard cards use for their heads. */
.patient-chart .rz-text-subtitle1,
.patient-chart .rz-text-subtitle2,
.patient-chart h6.rz-text-h6 {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 0.5rem;
}

/* --- data grids ------------------------------------------------------------------------------
   124 of them. The header row was body-sized text in ink, the same weight as the data underneath,
   so nothing separated the two. Same small uppercase label as everything else that titles a list. */
.patient-chart .rz-grid-table thead th,
.patient-chart .rz-datatable thead th {
    background: var(--paper);
}

/* The cell is not where the label lives. Radzen wraps a column's title in
   `span.rz-column-title > span.rz-column-title-content`, and .rz-column-title sets its own
   font-size, weight and `text-transform: none` -- so styling the <th> alone inherits down and is
   then overridden, which is a rule that computes exactly as intended and paints nothing. Verified
   with elementFromPoint over the painted header rather than by reading the <th>'s computed style. */
.patient-chart .rz-grid-table thead th .rz-column-title,
.patient-chart .rz-grid-table thead th .rz-column-title-content,
.patient-chart .rz-datatable thead th .rz-column-title,
.patient-chart .rz-datatable thead th .rz-column-title-content {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--slate);
}

/* Times, chart numbers and amounts, per the brand. A clinical grid is mostly columns of figures
   and they belong in the tabular face wherever they land. */
.patient-chart td .mono,
.patient-chart td.mono {
    font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* --- the note panels -------------------------------------------------------------------------
   Every clinical tab has one: the Physical Exam Note, the Order Note, the assembled Chart Note.
   They carry the tab's actual output and had no surface, so they read as a caption floating beside
   the form rather than as the thing the form produces. */
.patient-chart .exam-note,
.patient-chart .chart-note-panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1.1rem 1.25rem;
}

/* --- the chart header's patient menu ---------------------------------------------------------
   Under the visit level in the same top-right cell, as legacy stacks them. */
.patient-chart .patient-menu__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #FFFFFF;
    color: var(--petrol);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.patient-chart .patient-menu__label:hover {
    border-color: var(--petrol);
}

/* Radzen's profile menu draws a chevron and an avatar slot this does not want. */
.patient-chart .patient-menu__root .rz-navigation-item-icon,
.patient-chart .patient-menu__root .rz-profile-menu-user {
    display: none;
}

/* --- the patient communication log ------------------------------------------------------------
   Legacy's rdLog dock: one dock per type, opened from its own menu item. One dialog here with the
   type along the top, because a patient's history is rarely all in the log you happened to open. */
.patient-log {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.patient-log__types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.6rem;
}

.patient-log__type {
    appearance: none;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #FFFFFF;
    padding: 0.3rem 0.7rem;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--slate);
    cursor: pointer;
}

/* Excludes the selected button. Without the :not, hover set the text to petrol over the selected
   button's petrol fill and its label disappeared under the pointer -- the same way the N/P toggle's
   hover once ate its pressed state. */
.patient-log__type:not(.patient-log__type--on):hover {
    border-color: var(--petrol);
    color: var(--petrol);
}

.patient-log__type--on {
    background: var(--petrol);
    border-color: var(--petrol);
    color: #FFFFFF;
    font-weight: 600;
}

/* What belongs in the log you are looking at. "General" and "Staff" do not say it on their own,
   and an entry filed in the wrong log is an entry nobody reads. */
.patient-log__about {
    margin: 0;
    color: var(--slate);
    font-size: 0.8125rem;
}

.patient-log__entries {
    max-height: 42vh;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    padding: 0.5rem 0.65rem;
}

.patient-log__empty {
    margin: 0.25rem 0;
    color: var(--mist);
    font-style: italic;
}

.patient-log__entry + .patient-log__entry {
    border-top: 1px solid var(--line);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
}

.patient-log__meta {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--slate);
}

.patient-log__who {
    font-weight: 600;
}

/* Preserves the line breaks somebody typed -- a log entry is often a short list. */
.patient-log__text {
    white-space: pre-wrap;
    line-height: 1.45;
    margin-top: 0.15rem;
}

.patient-log__add-foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.patient-log__notify {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* A group target fans out to an action item per person, which is worth saying before the click. */
.patient-log__notify-warning {
    color: #8A5A22;
    font-size: 0.75rem;
}

.patient-log__count {
    margin-left: auto;
    color: var(--mist);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.patient-log__count--over {
    color: var(--alert);
    font-weight: 600;
}

/* --- Patient Medications ----------------------------------------------------------------------
   EMR/Meds.aspx: the patient's whole medication record, outside any one visit. */
.patient-medications {
    max-width: 68rem;
}

.patient-medications__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.patient-medications__head > div:first-child {
    margin-right: auto;
}

.patient-medications__about {
    color: var(--slate);
    margin-bottom: 1rem;
}

.patient-medications__row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.patient-medications__med {
    flex: 1;
    min-width: 0;
}

/* The dose line and the directions -- quieter than the drug's own name. */
.patient-medications__sig {
    color: var(--slate);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.patient-medications__refill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0;
}

.patient-medications__refill + .patient-medications__refill {
    border-top: 1px solid var(--line);
}

.patient-medications__refill-head {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.patient-medications__refill-kind {
    font-weight: 600;
}

.patient-medications__refill-when {
    color: var(--slate);
    font-size: 0.75rem;
}

.patient-medications__refill-med {
    flex: 1;
    min-width: 0;
}

/* --- a list shown a few rows at a time -------------------------------------------------------
   The medication grids' pager. Quiet: it is a way through a list, not part of the record. */
.paged-rows__foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    font-size: 0.8125rem;
}

/* "1-5 of 167" -- on a list this long the count is the useful half. */
.paged-rows__range {
    color: var(--slate);
    font-variant-numeric: tabular-nums;
}

.paged-rows__size {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    color: var(--slate);
}

/* --- the chart header's visit level -----------------------------------------------------------
   Legacy's right-hand cell of the info strip. Positioned out of the flow so it cannot push the
   patient's details around as the strip grows a line, and given the strip a relative origin to
   hang off. Green and bold, as legacy has it -- this is the one number on the strip that is a
   conclusion rather than an observation. */
.patient-chart .chart-progress {
    position: relative;
    /* Room for the aside, and tall enough that it cannot be clipped by a short strip. */
    padding-right: 8.5rem;
    min-height: 5.25rem;
}

/* The visit level and the patient menu, stacked in one cell at the top right. */
.patient-chart .chart-progress__aside {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}

.patient-chart .chart-progress__visit-level {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

.patient-chart .chart-progress__visit-level-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
}

.patient-chart .chart-progress__visit-level-value {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1E7B4D;
}

@container (max-width: 620px) {
    .patient-chart .chart-progress {
        padding-right: 0;
        min-height: 0;
    }

    /* Back into the flow when there is no room beside the details. */
    .patient-chart .chart-progress__aside {
        position: static;
        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* --- Treatment: a previous visit's plan note -------------------------------------------------
   Read-only, beside the list of visits that have one -- Treatment.aspx's rpvPreviousEncounters.
   Rendered as text rather than as markup: the column holds whatever CKEditor saved, and this is
   the one place in the chart that shows another encounter's content. */
.patient-chart .prior-plan-note {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    padding: 0.75rem 0.9rem;
    min-height: 300px;
    max-height: 360px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* --- Discharge: the patient-education references ---------------------------------------------
   Legacy's three links under a rule at the foot of the notes tab. Quiet: they are a reference
   shelf, not part of the form, and the clinician goes looking for them rather than passing
   through them. */
.patient-chart .discharge-education {
    border-top: 1px solid var(--line);
    margin-top: 1.25rem;
    padding-top: 1rem;
    font-size: 0.8125rem;
}

.patient-chart .discharge-education__title {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 0.5rem;
}

.patient-chart .discharge-education__row {
    display: flex;
    gap: 0.4rem;
    padding: 0.15rem 0;
    flex-wrap: wrap;
}

.patient-chart .discharge-education__label {
    color: var(--slate);
}

/* --- Discharge: the four restriction groups -------------------------------------------------
   Boxed together and set apart from the three return-to-work rows above them, because they only
   have meaning under the third of those rows -- and were hidden entirely until it was chosen,
   which is worse than showing them. */
.patient-chart .discharge-restrictions {
    border-top: 1px solid var(--line);
    margin-top: 1rem;
    padding-top: 1rem;
}

/* --- Orders: the fourteen order types ------------------------------------------------------
   The Physical Exam gives every body system a wash and an ink, and CC/HPI/ROS reuses them, so a
   clinician learns one mapping and reads it on three tabs. Orders has the same problem twice over:
   fourteen types across three kinds of panel, and "Lab Order" and "Outside Lab Order" are one word
   apart in a strip of fourteen titles.

   The hues are shared with the exam where the meaning matches -- Lab takes the petrol that General
   Appearance uses, X-Ray the Respiratory blue -- and the five vendor labs sit next to each other in
   a related range, because what distinguishes them from each other matters less than that they are
   all send-outs.

   Set as variables on the element rather than as fifty-six single-purpose rules: the few rules that
   read them cover every state, and adding a type means one line. */
/* The fallbacks live in the var() calls, not in a declaration of their own: a
   ".patient-chart .order-type { --ord-tint: transparent }" rule outranks a bare
   ".order-type--lab" on specificity, so every panel came out colourless. */
.patient-chart .order-type {
    background: var(--ord-tint, transparent);
    border-radius: var(--r-sm);
    padding: 0.9rem 1rem 1rem;
}

/* In-house */
.order-type--lab        { --ord-tint: #EDF4F7; --ord-ink: #2C6E7F; }
.order-type--xray       { --ord-tint: #EBF3FC; --ord-ink: #2C5F97; }
.order-type--supply     { --ord-tint: #F0F2F4; --ord-ink: #55636E; }
.order-type--injection  { --ord-tint: #FBEEF0; --ord-ink: #A03A48; }
.order-type--vaccine    { --ord-tint: #ECF6F0; --ord-ink: #2F7A57; }
.order-type--custom     { --ord-tint: #FBF4E8; --ord-ink: #8A5A22; }

/* Sent out of the office */
.order-type--outside    { --ord-tint: #FDF3EB; --ord-ink: #9A5B2A; }
.order-type--outsidelab { --ord-tint: #F8EFF4; --ord-ink: #8A3F63; }

/* The vendor labs, in one related range */
.order-type--millennium { --ord-tint: #F4EFFA; --ord-ink: #6B4E8F; }
.order-type--pathgroup  { --ord-tint: #EDEFFA; --ord-ink: #4A548C; }
.order-type--mercy      { --ord-tint: #EFEDF9; --ord-ink: #5B4B94; }
.order-type--quest      { --ord-tint: #EBEFF7; --ord-ink: #3F5A85; }
.order-type--solaris    { --ord-tint: #F1EEF6; --ord-ink: #63528B; }
.order-type--compunet   { --ord-tint: #EEF1F8; --ord-ink: #45557F; }

/* Section labels inside a type pick up its ink, so a long panel stays anchored to it. */
.patient-chart .order-type .rz-fieldset > .rz-fieldset-legend,
.patient-chart .order-type .rz-text-subtitle2 {
    color: var(--ord-ink, var(--ink));
}

/* The panel is the coloured card, so the tab set around it gives up its gutter -- otherwise the
   card floats in white space. Scoped to .order-types so every other nested tab set in the chart
   keeps its padding; those panels are white on white and need the breathing room. */
.patient-chart__tabs .order-types > .rz-tabview-panels,
.patient-chart__tabs .order-types > .rz-tabview-panels > .rz-tabview-panel {
    padding: 0;
}

/* The strip: each tab wears its own type's colour, so the navigation and the panel below it are
   the same thing twice. Radzen renders this nav, so nth-child is the only handle -- the order is
   FlatCategoryIds, then TreeCategoryIds, then VendorOnlyCategories, as OrdersTab renders them. */
.order-types > .rz-tabview-nav > li:nth-child(1)  { --ord-tint: #EDF4F7; --ord-ink: #2C6E7F; }  /* Lab */
.order-types > .rz-tabview-nav > li:nth-child(2)  { --ord-tint: #EBF3FC; --ord-ink: #2C5F97; }  /* X-Ray */
.order-types > .rz-tabview-nav > li:nth-child(3)  { --ord-tint: #F0F2F4; --ord-ink: #55636E; }  /* Supply */
.order-types > .rz-tabview-nav > li:nth-child(4)  { --ord-tint: #FBEEF0; --ord-ink: #A03A48; }  /* Injection */
.order-types > .rz-tabview-nav > li:nth-child(5)  { --ord-tint: #ECF6F0; --ord-ink: #2F7A57; }  /* Vaccine */
.order-types > .rz-tabview-nav > li:nth-child(6)  { --ord-tint: #FBF4E8; --ord-ink: #8A5A22; }  /* Custom */
.order-types > .rz-tabview-nav > li:nth-child(7)  { --ord-tint: #FDF3EB; --ord-ink: #9A5B2A; }  /* Outside Order */
.order-types > .rz-tabview-nav > li:nth-child(8)  { --ord-tint: #F8EFF4; --ord-ink: #8A3F63; }  /* Outside Lab */
.order-types > .rz-tabview-nav > li:nth-child(9)  { --ord-tint: #F4EFFA; --ord-ink: #6B4E8F; }  /* Millennium */
.order-types > .rz-tabview-nav > li:nth-child(10) { --ord-tint: #EDEFFA; --ord-ink: #4A548C; }  /* PathGroup */
.order-types > .rz-tabview-nav > li:nth-child(11) { --ord-tint: #EFEDF9; --ord-ink: #5B4B94; }  /* Mercy */
.order-types > .rz-tabview-nav > li:nth-child(12) { --ord-tint: #EBEFF7; --ord-ink: #3F5A85; }  /* Quest */
.order-types > .rz-tabview-nav > li:nth-child(13) { --ord-tint: #F1EEF6; --ord-ink: #63528B; }  /* Solaris */
.order-types > .rz-tabview-nav > li:nth-child(14) { --ord-tint: #EEF1F8; --ord-ink: #45557F; }  /* CompuNet */

.patient-chart__tabs .order-types > .rz-tabview-nav > li > button {
    background: var(--ord-tint, transparent);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    color: var(--ord-ink, var(--ink));
}

/* Fourteen titles is two more than the widest strip elsewhere in the chart, and at the shared
   padding they overran the nav by a couple of pixels -- enough to clip CompuNet. Tighter here
   only; the exam's ten and the vendor panels keep the roomier spacing. */
.patient-chart__tabs .order-types > .rz-tabview-nav > li > button {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}

@container (max-width: 1000px) {
    .patient-chart__tabs .order-types > .rz-tabview-nav > li > button {
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }
}

@container (max-width: 860px) {
    .patient-chart__tabs .order-types > .rz-tabview-nav > li > button {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
        font-size: 0.8125rem;
    }
}

/* Filled and reversed out, as the chart strip above does it -- except this one keeps its wash
   rather than taking the ink, because the panel directly below it is that same wash and the two
   are meant to read as one surface. The ink goes to the label, the weight and the rule under it. */
.patient-chart__tabs .order-types > .rz-tabview-nav > li.rz-tabview-selected > button {
    background: var(--ord-tint, transparent);
    color: var(--ord-ink, var(--ink));
    font-weight: 700;
    border-bottom-color: var(--ord-ink, var(--ink));
}

/* Unselected types are washed back, so the selected one is the only tab at full strength. */
.patient-chart__tabs .order-types > .rz-tabview-nav > li:not(.rz-tabview-selected) > button {
    opacity: 0.72;
}

/* --- Orders: the catalogue, in columns -------------------------------------------------------
   A wrapping row of checkboxes wraps on whatever fits, so no two orders share a left edge and a
   catalogue of eighty is read as ragged rows. Columns give every order the same edge to run down,
   and break-inside keeps a sub-category whole rather than splitting its orders across two.

   Same shape as the CC/HPI/ROS systems checklist, and for the same reason: the column count adapts
   to the width instead of being fixed, because the categories are wildly uneven. */
.patient-chart .order-list {
    columns: 3 14rem;
    column-gap: 1.25rem;
}

/* The threshold is the width this list is really given -- two thirds of the chart row, about
   820px -- not the row's own width. Set at 900px it matched always, so the three-column rule above
   never once applied. */
@container (max-width: 620px) {
    .patient-chart .order-list {
        columns: 2 12rem;
    }
}

.patient-chart .order-list__group {
    break-inside: avoid;
    margin-bottom: 0.6rem;
}

.patient-chart .order-list__group-title {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.3rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid rgba(11, 20, 24, 0.08);
    color: var(--ord-ink, var(--ink));
    font-weight: 600;
    font-size: 0.8125rem;
}

/* One order per line, checkbox then name, so the names align. A long name wraps under itself
   rather than pushing the checkbox out of the column. */
.patient-chart .order-list__item {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.1rem 0;
    white-space: normal;
}

/* --- Orders: what has been ordered this visit -----------------------------------------------
   Legacy's dlOrders, in the side panel. Same card and same field stack as the Procedures tab's
   ordered list -- it is the same job, so it should not look like a different one. Each entry
   carries its order type's wash, which is what ties it back to the tab it came from. */
.patient-chart .placed-order {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.patient-chart .placed-order__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.patient-chart .placed-order__title {
    margin-right: auto;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
}

.patient-chart .placed-order__empty {
    color: var(--mist);
    font-style: italic;
}

.patient-chart .placed-order__item {
    background: var(--ord-tint, transparent);
    border-radius: var(--r-sm);
    padding: 0.6rem 0.7rem;
}

.patient-chart .placed-order__item + .placed-order__item {
    margin-top: 0.6rem;
}

/* The order, then its type in the type's own ink -- the two things a reader needs to tell one
   entry from the next. */
.patient-chart .placed-order__name {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.patient-chart .placed-order__category {
    margin-left: auto;
    flex: none;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ord-ink, var(--ink));
}

.patient-chart .placed-order__field + .placed-order__field {
    margin-top: 0.4rem;
}

.patient-chart .placed-order__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 0.15rem;
}

.patient-chart .placed-order__value {
    display: block;
    line-height: 1.4;
}

.patient-chart .placed-order__none {
    color: var(--mist);
    font-style: italic;
}

.patient-chart .placed-order__foot {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(11, 20, 24, 0.08);
}

.patient-chart .placed-order__completed {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: auto;
}

/* --- CC/HPI/ROS: what the visit has recorded ------------------------------------------------
   The right-hand column of legacy's CCHPIROS.aspx: two sections, HPI then ROS, each under its
   own heading. Wearing the chart's card, which the Procedures tab's ordered list also uses. */
.patient-chart .cc-entries {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.patient-chart .cc-entries__group + .cc-entries__group {
    border-top: 1px solid var(--line);
    margin-top: 0.9rem;
    padding-top: 0.9rem;
}

/* Legacy's largeBold — bold 13pt, which against its 8pt body text made these two headings the
   loudest thing in the panel. Scaled to this stylesheet's rhythm rather than copied in points:
   1.25rem over a 0.875rem panel is the same jump. The eyebrow style these once wore made them
   read as column labels; they are the note's two section titles. */
.patient-chart .cc-entries__title {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    /* Centred over the section, as legacy centred it -- the entries beneath stay left-aligned. */
    text-align: center;
    margin-bottom: 0.6rem;
}

.patient-chart .cc-entries__empty {
    color: var(--mist);
    font-style: italic;
}

.patient-chart .cc-entries__item + .cc-entries__item {
    margin-top: 0.4rem;
}

.patient-chart .cc-entries__line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Takes the slack, so the remove control sits at the right edge of every row. */
.patient-chart .cc-entries__name {
    flex: 1;
    min-width: 0;
}

/* A complaint from the systems list opens its properties. It is a <button>, because an anchor
   with an empty href navigates — so it has to be talked back out of looking like one. */
.patient-chart button.cc-entries__name {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    color: var(--petrol);
    cursor: pointer;
}

.patient-chart button.cc-entries__name:hover,
.patient-chart button.cc-entries__name:focus-visible {
    text-decoration: underline;
}

/* The two statements the checkboxes above produce — legacy's lblROS10 and lblROS, which sat here
   in the ROS section rather than beside the boxes. */
.patient-chart .cc-entries__baseline {
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Legacy's (-) link, which is how an entry came off the list there too. */
.patient-chart .cc-entries__remove {
    flex: none;
    color: var(--alert);
    font-weight: 600;
    cursor: pointer;
}

/* What the grids gave two columns to — the recorded detail and the onset — as one quiet line. */
.patient-chart .cc-entries__detail {
    padding-left: 0.15rem;
    color: var(--slate);
    font-size: 0.8125rem;
}

/* --- CC/HPI/ROS: a symptom's properties, in a dialog ----------------------------------------
   Legacy's pnlDetails, which sat at the bottom of a page whose systems checklist already fills the
   screen. The form has no frame of its own here; the dialog's title bar names the complaint. */
.cc-detail > * + * {
    margin-top: 0.25rem;
}

/* Chest Pain's form is the tall one -- nine modifying factors, a scale and thirteen properties.
   Cap the dialog and let it scroll rather than letting it run off the bottom of the viewport. */
.rz-dialog-content:has(.cc-detail) {
    max-height: min(78vh, 900px);
    overflow-y: auto;
}

/* --- CC/HPI/ROS: negative or positive -------------------------------------------------------
   Legacy's N/P pair, as two toggle buttons. Green for the negative finding and red for the
   positive one, which is the Physical Exam's convention for the same question — and the pressed
   one is filled rather than tinted, so which state is recorded survives a reader who cannot
   separate the two hues. */
.patient-chart .np-toggle {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: #FFFFFF;
}

.patient-chart .np-toggle__option {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.2rem 0.5rem;
    min-width: 1.7rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease;
}

.patient-chart .np-toggle__option + .np-toggle__option {
    border-left: 1px solid var(--line);
}

/* Unpressed: the letter in its colour, on white. */
.patient-chart .np-toggle__option--negative { color: var(--petrol); }
.patient-chart .np-toggle__option--positive { color: var(--alert); }

/* Excludes the pressed one: :hover adds a pseudo-class, so without this it outranks the filled
   state and the button a clinician has just clicked goes pale under the cursor. */
.patient-chart .np-toggle__option:hover:not(:disabled):not(.np-toggle__option--on) {
    background: var(--wash, #F7F9FA);
}

.patient-chart .np-toggle__option--negative.np-toggle__option--on {
    background: var(--petrol);
    color: #FFFFFF;
}

.patient-chart .np-toggle__option--positive.np-toggle__option--on {
    background: var(--alert);
    color: #FFFFFF;
}

.patient-chart .np-toggle__option:disabled {
    cursor: default;
    opacity: 0.6;
}

/* The same choice on the Add ROS panel, under its fields. */
.patient-chart .ros-add__np {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.1rem;
}

.patient-chart .ros-add__np-label {
    font-size: 0.75rem;
    color: var(--slate);
}

/* --- CC/HPI/ROS: the systems checklist ------------------------------------------------------
   Legacy's four side-by-side RadTreeViews, which is how a clinician saw all 127 symptoms at once
   and read across systems rather than paging through them one at a time.

   Columns rather than four fixed lists: the systems are wildly uneven — GI has 22 symptoms and
   Injury has 3 — so a column count that adapts keeps the block roughly square at any width, and
   break-inside keeps a system whole rather than splitting its symptoms across two columns. */
.patient-chart .ros-tree {
    columns: 4 15rem;
    column-gap: 1rem;
}

@container (max-width: 900px) {
    .patient-chart .ros-tree {
        columns: 2 15rem;
    }
}

/* The wash and ink the Physical Exam gives each body system, so the same area reads the same on
   both tabs. Injury and GU have no exam counterpart: Injury takes the rose that the exam could not
   use next to its abnormal-red, and GU the green. */
.patient-chart .ros-tree__system {
    --ros-tint: transparent;
    --ros-ink: var(--ink);

    break-inside: avoid;
    background: var(--ros-tint);
    border-radius: var(--r-sm);
    padding: 0.5rem 0.6rem 0.6rem;
    margin-bottom: 0.75rem;
}

.patient-chart .ros-tree__system--constitutional { --ros-tint: #EDF4F7; --ros-ink: #2C6E7F; }
.patient-chart .ros-tree__system--eyeent         { --ros-tint: #F4EFFA; --ros-ink: #6B4E8F; }
.patient-chart .ros-tree__system--injury         { --ros-tint: #FBEEF0; --ros-ink: #A03A48; }
.patient-chart .ros-tree__system--chest          { --ros-tint: #EBF3FC; --ros-ink: #2C5F97; }
.patient-chart .ros-tree__system--gi             { --ros-tint: #FBF4E8; --ros-ink: #8A5A22; }
.patient-chart .ros-tree__system--gu             { --ros-tint: #ECF6F0; --ros-ink: #2F7A57; }
.patient-chart .ros-tree__system--msk            { --ros-tint: #EDEFFA; --ros-ink: #4A548C; }
.patient-chart .ros-tree__system--skin           { --ros-tint: #FDF3EB; --ros-ink: #9A5B2A; }
.patient-chart .ros-tree__system--neuro          { --ros-tint: #F8EFF4; --ros-ink: #8A3F63; }
.patient-chart .ros-tree__system--psych          { --ros-tint: #EEF5F2; --ros-ink: #3F7268; }

/* The system's name, in its own ink — a heading for the symptoms under it, not a control. */
.patient-chart .ros-tree__title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.35rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid rgba(11, 20, 24, 0.08);
    color: var(--ros-ink);
    font-weight: 600;
    font-size: 0.8125rem;
}

/* Indented under the system, as a tree's children are. */
.patient-chart .ros-tree__item {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.1rem 0 0.1rem 0.75rem;
    white-space: normal;
}

.patient-chart .ros-tree__foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--line);
}

/* How many are marked, so the two Add buttons say what they will act on. */
.patient-chart .ros-tree__count {
    margin-right: auto;
    color: var(--slate);
    font-size: 0.8125rem;
}

/* --- the action items badge ------------------------------------------------------------------
   Legacy's Alert.aspx: orange underlined text on the dark bar, between the two menus. Kept in the
   same place and given the same job, but drawn as a count rather than as the string
   "Action Items:7" — the number is the thing being read, and it is what changes. */
.action-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.25rem 0.5rem 0.25rem 0.6rem;
    border: 1px solid rgba(196, 122, 30, 0.35);
    border-radius: 999px;
    background: #FFF6E8;
    color: #8A5A22;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.action-badge:hover {
    background: #FDEBCF;
}

/* The count carries the weight; the words only say what it counts. */
.action-badge__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #C47A1E;
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}

/* --- the structured procedure notes ---------------------------------------------------------
   I/D Abscess and Laceration Repair, in a dialog rather than legacy's floating dock. A label
   column and a field column, which is the two-cell table legacy laid them out in; the labels are
   short and the fields are long, so a fixed label column keeps the answers in one line down the
   form the way the exam rows do. */
.action-notes {
    font-size: 0.875rem;
}

/* Saved Actions, at the top of the form: a doctor who has a template reaches for it before
   answering anything. Set apart from the questions below it, because it is a tool for the form
   rather than another field of it — the same treatment the saved-text picker gets. */
.saved-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px dashed var(--line);
}

.saved-actions__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
}

.saved-actions__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.saved-actions__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.saved-actions__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Legacy's (-) link. Kept as a per-row control so a template can be removed from the list it is
   listed in, rather than needing a screen of its own. */
.saved-actions__delete {
    flex: none;
    color: var(--alert);
    cursor: pointer;
    font-weight: 600;
}

.saved-actions__error {
    color: var(--alert);
    font-size: 0.8125rem;
}

/* The consent line is the one thing legacy centres and reddens, because it is a legal statement
   rather than a finding. Kept prominent, without the shout. */
.action-notes__consent {
    background: var(--wash, #F7F9FA);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.9rem;
    font-weight: 600;
}

.action-notes__row {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: start;
    column-gap: 0.75rem;
    padding: 0.3rem 0;
}

.action-notes__label {
    color: var(--slate);
    padding-top: 0.35rem;
}

/* Legacy's red required labels. The Save button also refuses without them, so the colour is a
   hint rather than the only warning. */
.action-notes__label--required {
    color: var(--alert);
    font-weight: 600;
}

.action-notes__field {
    min-width: 0;
}

.action-notes__stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.action-notes__inline,
.action-notes__wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* The five suture fields, which only apply when the wound was closed with sutures. Indented under
   the closure choice they belong to, and dimmed rather than hidden when it is something else --
   hiding them would make the form jump as the closure choice changes. */
.action-notes__sutures {
    margin-left: 9.25rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--line);
}

.action-notes__sutures--off {
    opacity: 0.55;
}

.action-notes__foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

/* --- ordering a procedure from a category tab -----------------------------------------------
   The list, then the instructions that go with the one picked, then Routine/Stat and Order. Two
   columns for the list, as legacy's RepeatColumns="2" — twenty procedures down one column pushed
   the Order button below the fold. */
.patient-chart .cpt-order__list {
    margin-bottom: 1rem;
}

/* Two columns, as legacy's RepeatColumns="2" — twenty procedures down a single column pushed the
   Order button below the fold. The list is asked for horizontally, so Radzen renders a wrapping
   flex row; giving each item half the width turns that row into two columns. */
.patient-chart .cpt-order__list > .rz-stack {
    column-gap: 2rem;
    row-gap: 0.1rem;
}

.patient-chart .cpt-order__list > .rz-stack > .rz-radio-btn {
    flex: 0 0 calc(50% - 1rem);
}

.patient-chart .cpt-order__instructions {
    max-width: 34rem;
}

.patient-chart .cpt-order__foot {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.9rem;
}

/* Stat in red, as legacy's CssClass="RD" on radS. Keyed on the item's aria-label, which Radzen
   sets from the item text and is the only stable hook on a list it renders itself. Colour is not
   the only signal — the word still says "Stat". */
.patient-chart .cpt-order__foot .rz-radio-btn[aria-label="Stat"] .rz-radiobutton-label {
    color: var(--alert);
    font-weight: 600;
}

/* --- the visit's ordered procedures ---------------------------------------------------------
   Legacy's dlOrders, in the side panel above the note panel and wearing the same card so the
   column reads as one thing. Each procedure is a block, and each of its fields gets the panel's
   full width down the page rather than a column of a grid — Instructions holds 255 characters and
   the panel is a third of the row. */
.patient-chart .ordered-cpt {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.patient-chart .ordered-cpt__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* The same treatment the note panel's heading and the card titles get. */
.patient-chart .ordered-cpt__title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
}

.patient-chart .ordered-cpt__empty {
    color: var(--mist);
    font-style: italic;
    margin: 0;
}

/* A rule between procedures rather than around each: they are a list, and a card per procedure
   inside a card is the clutter the chart theme set out to remove. */
.patient-chart .ordered-cpt__item + .ordered-cpt__item {
    border-top: 1px solid var(--line);
    margin-top: 0.9rem;
    padding-top: 0.9rem;
}

.patient-chart .ordered-cpt__name {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* A note that the structured form was filled in — not the note itself, which is prose in the
   field below. Quiet: it is a status line, not a finding. */
.patient-chart .ordered-cpt__action-notes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: var(--slate);
    font-size: 0.75rem;
    font-style: italic;
    margin-bottom: 0.5rem;
}

/* Legacy's "Procedure Note:" link, which reopens the results form to finish the order. */
.patient-chart .ordered-cpt__complete {
    color: var(--petrol);
    font-style: normal;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

/* An order with no code yet is not billable. Said in words, next to the link that fixes it. */
.patient-chart .ordered-cpt__pending {
    color: var(--alert);
    font-style: normal;
    font-weight: 600;
}

.patient-chart .ordered-cpt__field + .ordered-cpt__field {
    margin-top: 0.5rem;
}

.patient-chart .ordered-cpt__label {
    display: block;
    font-size: 0.75rem;
    color: var(--slate);
    margin-bottom: 0.15rem;
}

.patient-chart .ordered-cpt__value {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.patient-chart .ordered-cpt__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.7rem;
}

.patient-chart .ordered-cpt__completed {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    white-space: nowrap;
}

/* --- the saved-text picker -------------------------------------------------------------------
   Sits under the note box it fills, on four different tabs. Set apart from that box so it reads as
   a tool for the field rather than as another field. */
.patient-chart .template-picker {
    border-top: 1px dashed var(--line);
    padding-top: 0.6rem;
    margin-top: 0.1rem;
}

/* --- the tab strip fits, and only scrolls when it truly cannot ------------------------------
   Two things made a fourteen-tab strip scroll on every screen but one.

   The tabs are a fixed 1,351px: measured 114+94+127+138+68+95+49+112+113+124+54+86+55+91 plus
   Radzen's 2.4px gaps, and nothing in them could shrink. And `.app-content` caps every page at
   1400px and centres it, which leaves 1,352px inside its padding — so the strip cleared by one
   pixel at 1920 and scrolled at every narrower width, gaining 15px at 1600. A scrollbar to
   recover 15px, with 226px of empty page either side of it.

   The chart opts out of the reading-width cap, because it is a dense fourteen-section workspace
   rather than a column of prose, and then the tabs give up padding before the strip gives up and
   scrolls. `:has()` keeps this in CSS rather than plumbing a layout flag through the page; where
   it is unsupported nothing changes and the strip behaves as it did. */
.app-content:has(.patient-chart) {
    max-width: none;
}

.patient-chart__tabs > .rz-tabview-nav {
    /* Radzen's 2.4px gap is 31px across thirteen joins. The buttons' own padding separates them. */
    gap: 0;
}

.patient-chart__tabs > .rz-tabview-nav > li {
    flex: 0 1 auto;
    min-width: 0;
    /* A <button> sizes to its own max-content and is not a flex item of the list item, so shrinking
       the li alone left the button hanging out of it -- the strip still scrolled by the last few
       pixels. Making the li a flex container is what puts the button under flex control. */
    display: flex;
}

/* Padding is what gives first, and it gives a lot: thirteen tabs times two sides means every
   0.1rem of padding is ~42px of strip. 0.85rem down to 0.28rem recovers ~250px, which covers a
   pinned sidebar at 1366. */
/* Padding shrinks; the label never does. Letting the label shrink too measured fine and looked
   awful: flex distributes a shortfall in proportion to size, so a 58px deficit at 1366 took ~4px
   from every tab, and 4px off a 22px word turned "Lab" into "L..." while "Physical Exam" lost
   nothing a reader would notice. Short labels are the ones that cannot afford it, so nothing is
   taken from any of them.

   The steps below key on the STRIP's width, not the viewport's. A viewport measurement cannot answer
   this: pinning the sidebar open costs 148px, so 1366 has either 1,250px or 1,102px of strip
   depending on a toggle no media query or vw unit can see -- the first attempt used
   clamp(..., 0.62vw, ...) and the vw term governed, which is why lowering its floor changed nothing.
   The thirteen labels plus their completion marks measure ~906px (Plan's tab has gone -- the plan
   note lives under Treatment, where legacy has it), so the width needed is 906 + 26 x padding, and
   each step below is the widest padding that still fits. Under ~1,010px the
   strip genuinely has no room left and scrolls, which is the one case where scrolling is right. */
.patient-chart__tabs {
    container-type: inline-size;
}

.patient-chart__tabs > .rz-tabview-nav > li > button {
    flex: 0 0 auto;
    padding: 0.6rem 0.85rem;
    white-space: nowrap;
}

/* Widest first: these carry equal specificity, so source order is what makes the narrowest win. */
@container (max-width: 1318px) {
    .patient-chart__tabs > .rz-tabview-nav > li > button { padding: 0.6rem 0.5rem; }
}

@container (max-width: 1161px) {
    .patient-chart__tabs > .rz-tabview-nav > li > button { padding: 0.6rem 0.34rem; }
}

@container (max-width: 1089px) {
    .patient-chart__tabs > .rz-tabview-nav > li > button { padding: 0.6rem 0.24rem; }
}

@container (max-width: 1045px) {
    .patient-chart__tabs > .rz-tabview-nav > li > button { padding: 0.6rem 0.16rem; }
    .patient-chart__tabs > .rz-tabview-nav .chart-tab-title { gap: 0; }
}

/* Only past that does the label shorten — still better than a strip that hides tabs off-screen,
   and the full name stays in the tooltip. The completion mark is never dropped: which sections
   are done is the reason the mark exists. */
/* The gap between the completion mark and the label is worth ~18px across the strip, which is
   most of what the narrowest laptop still needs. The mark itself stays: which sections are done is
   the reason it exists. */
.patient-chart__tabs > .rz-tabview-nav .chart-tab-title {
    gap: 0.12rem;
}

/* Radzen's success green, so "this section has something in it" reads as the same done as every
   other green in the app -- and so it survives the tab wearing its own section's colour. Smaller
   than the label beside it: it is a mark, not a second word. */
.patient-chart__tabs > .rz-tabview-nav .chart-tab-title__mark {
    flex: none;
    color: var(--rz-success, #17A24A);
    font-size: 0.875rem;
    line-height: 1;
}

/* --- the saved-text picker's items ----------------------------------------------------------
   Edit and delete sit beside each note's title inside the dropdown, which is where legacy put
   them. The row itself is the insert target, so the two icons stop their own clicks from
   propagating; these styles only make them look and size like controls rather than like text. */
.template-picker__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.template-picker__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-picker__actions {
    flex: none;
    display: inline-flex;
    gap: 0.15rem;
}

.template-picker__action {
    font-size: 1rem;
    line-height: 1;
    padding: 0.15rem;
    border-radius: var(--r-sm);
    color: var(--mist);
    cursor: pointer;
    transition: color 100ms ease, background 100ms ease;
}

.template-picker__action:hover {
    color: var(--petrol);
    background: var(--rz-primary-lighter);
}

.template-picker__action--danger:hover {
    color: var(--alert);
    background: var(--rz-danger-lighter);
}

/* The closed picker always reads as its placeholder; see ValueTemplate in TemplatePicker. */
.template-picker__value {
    color: var(--mist);
}

/* --- Physical Exam answers -------------------------------------------------------------------
   The No/Yes pair and the L/R/B sides, as exclusive checkboxes rather than a dropdown -- legacy's
   own control, and what the clinicians asked to keep. Both labels stay visible so the recorded
   state is legible without opening anything. */
.exam-answer {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.exam-answer__option {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    white-space: nowrap;
}

/* Legacy's GN/RD green and red, as a tint on the label rather than the shout it used. Colour is
   never the only signal: the word beside the box says which state it is. */
.exam-answer__option--negative > span {
    color: var(--petrol);
}

.exam-answer__option--positive > span {
    color: var(--alert);
}

/* --- Physical Exam one-of-several answers ----------------------------------------------------
   A segmented toggle group, per the resolution recorded in MIGRATION-ISSUES.md for legacy's
   RadSlider grading scales. Every one of these enums has at most four real options, so the whole
   scale is visible on the row and choosing is one click rather than open-scan-pick. */
.exam-choice {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: #FFFFFF;
}

.exam-choice__option {
    appearance: none;
    border: none;
    border-left: 1px solid var(--line);
    background: transparent;

    /* 0.6rem each side put General Appearance's three-option Distress scale at 355px, which did not
       fit the space before the notes. 0.45rem gives back 24px across three options and costs
       nothing legible. */
    padding: 0.3rem 0.45rem;
    font: inherit;
    color: var(--slate);
    cursor: pointer;
    white-space: nowrap;
    transition: background 100ms ease, color 100ms ease;
}

.exam-choice__option:first-child {
    border-left: none;
}

.exam-choice__option:hover:not(:disabled) {
    background: var(--paper);
    color: var(--ink);
}

/* The selected segment carries the same petrol the rest of the app uses for "this one". */
.exam-choice__option--on {
    background: var(--petrol);
    color: #FFFFFF;
}

.exam-choice__option--on:hover:not(:disabled) {
    background: var(--rz-primary-light);
    color: #FFFFFF;
}

.exam-choice__option:disabled {
    cursor: default;
    color: var(--mist);
}

.exam-choice__option--on:disabled {
    background: var(--mist);
    color: #FFFFFF;
}

/* --- Physical Exam finding row ---------------------------------------------------------------
   One line per finding, on four columns that are the same in every row of a panel: the label, the
   answer, the L/R/B sides, and the note.

   Flex is what made the answers ragged. Sized to its own content and pushed along by whatever came
   before it, each answer landed at a different x -- Musculoskeletal had eleven distinct left edges
   and Skin spread its groups over 654px, so nothing read as a column. Only the note lined up, and
   only because it was pinned to the right.

   Grid with fixed tracks fixes the x. Each row is its own grid container, so the tracks can only
   agree if they are stated rather than derived from content -- hence the widths are constants, and
   the constants come from measuring every group in all ten panels rather than from taste:

       checkbox pair   99-187px, except Psych at 284   -> 12rem, and 18.5rem on Psych
       L/R/B sides     120px everywhere                -> 7.5rem
       note            unchanged, already a column     -> 15rem

   The label is a fixed track, not the one that takes the slack. Letting the label absorb the slack
   did give a column, but it put that column halfway across the card -- the answers sat at x=523
   with empty label beside them. The slack now sits between the sides and the note instead, so the
   label is only as wide as the longest label needs (205px measured, "Tympanic Membrane
   Perforation"), the answers sit just after it, and the notes stay pinned right where they were.

   Answers are left-aligned in their track rather than centred, because what should form the
   visible column is the checkboxes, and centring "No/Yes" against "Normal/Abnormal" would align
   their text centres while leaving the boxes staggered. */
.exam-system {
    --exam-label-w: 13rem;
    --exam-answer-w: 12rem;

    /* 7.5rem was the width three L/R/B checkboxes needed. The L/R/BL segmented group that replaced
       them measures 79px, and holding 120px open for it pushed HEENT's row 9px past the card's
       edge -- the notes spilled outside the wash. */
    --exam-sides-w: 5.25rem;

    /* 15rem left General Appearance's Distress scale 7px short of the space before the notes, so a
       three-option group wrapped onto two lines. This is the smallest reduction that fits it. */
    --exam-note-w: 14.5rem;
}

/* Psych's pairs are the widest in the exam -- "Communicative"/"Non-communicative" measures 284px.
   The track is set from that rather than letting the pair overrun the sides and note columns. It
   costs nothing: Psych records no laterality, so the width comes out of the sides track below. */
.exam-system--psych { --exam-answer-w: 18.5rem; }

/* The label track, per panel, set to that panel's own longest label so the answers sit as far left
   as they can without breaking a label onto two lines. A shared 13rem made GI/GU, Skin and Psych
   hold open 60-80px of empty label they never use.

   Seven of the ten are at their floor: one long label each -- "Tympanic Membrane Perforation" at
   206px on HEENT, "Jugular Venous Distention (JVD)" at 202px on Neck, "Regular Rate and Rhythm
   (RRR)" at 199px on CV -- sets the width for the whole panel. Their answers cannot move further
   left unless those labels are allowed to wrap. */
.exam-system--ga    { --exam-label-w: 12.25rem; }  /* Not in Apparent Distress (NAD)  195px */
.exam-system--heent { --exam-label-w: 13.25rem; }  /* Tympanic Membrane Perforation   206px */
.exam-system--neck  { --exam-label-w: 13rem; }     /* Jugular Venous Distention (JVD) 202px */
.exam-system--resp  { --exam-label-w: 12.75rem; }  /* Retraction / Accessory Muscles  197px */
.exam-system--cv    { --exam-label-w: 12.75rem; }  /* Regular Rate and Rhythm (RRR)   199px */
.exam-system--gigu  { --exam-label-w: 8.75rem; }   /* Hepatosplenomegaly              134px */
.exam-system--msk   { --exam-label-w: 12.75rem; }  /* Paraspinal Tenderness/Spasms    197px */
.exam-system--neuro { --exam-label-w: 12.75rem; }  /* Quadriceps / Knee Jerk (L2-L4)  196px */
/* Skin also tightens its answer track. Its widest pair is "Normal/Abnormal" at 167px, and the
   panel's qualifiers now sit in the cell straight after the answer -- with the shared 12rem track
   there was 25px of empty track between a "No/Yes" and the scale qualifying it. */
.exam-system--skin  { --exam-label-w: 9.5rem; --exam-answer-w: 10.75rem; }  /* Yellowish Discoloration 146px */
.exam-system--psych { --exam-label-w: 8.5rem; }    /* Rapid and Pressured             130px */

/* A panel with no laterality anywhere reclaims the sides track instead of holding a gap open in
   every row. Asked of the panel rather than hardcoded per system, so it stays true if a finding
   gains or loses its sides. */
.exam-system:not(:has(.exam-answer--sides)) { --exam-sides-w: 0rem; }

.exam-finding {
    display: grid;
    grid-template-columns:
        var(--exam-label-w) var(--exam-answer-w) var(--exam-sides-w) minmax(0, 1fr) var(--exam-note-w);
    align-items: center;
    column-gap: 0.6rem;
    margin-bottom: 0.25rem;
}

/* Placed by class, not by source order: a row without sides, or without a note, must leave that
   track empty rather than sliding the next cell into it -- which is what would break the column
   on the many rows that have no laterality. */
.exam-finding__label {
    grid-column: 1;
    min-width: 0;
}

.exam-finding__note {
    grid-column: 5;
}

/* One more control belonging to the finding itself rather than qualifying it -- the o'clock
   position beside a tear or a hemorrhoid. It sits in the slack, right of the answer and clear of
   the note. */
.exam-finding__trailing {
    grid-column: 4;
    justify-self: stretch;
    min-width: 0;
}

/* The answer pair and the L/R/B sides never wrap -- that wrap was an earlier reported problem. */
.exam-answer {
    grid-column: 2;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

/* Holds the L/R/BL group. Not an .exam-answer any more -- the three checkboxes it used to hold
   were, the segmented group that replaced them brings its own layout. */
.exam-answer--sides {
    grid-column: 3;
    display: inline-flex;
    align-items: center;
}

/* Segmented groups split into two cases, measured rather than assumed.

   A group that shares its row with a note fits the answer track: the widest of those is 182px on
   CV ("No/Systolic/Diastolic"), inside the 12rem the pairs already get, so it uses .exam-answer and
   columns up with the checkboxes.

   A group with no note on its row does not fit -- Distress is 355px, the edema extents 238px, the
   prostate findings 272px -- so it takes the answer track plus everything right of it. It still
   STARTS on the answer column, which is the point: the left edge is shared with every checkbox
   pair in the panel, and only the ragged right end differs. This is also the cell for the groups
   that are a row of their own, qualifying the finding above them -- Skin's eight pruritic scales
   sat at the panel's left margin and were the 654px of spread measured there.

   It stops at the note column rather than running to the row's end: a group that carried on under
   the notes read as crossing them, and where the row had a note of its own the two collided. Every
   one of these now ends where the notes begin. */
.exam-finding__wide {
    grid-column: 2 / 5;
    justify-self: start;
    min-width: 0;

    /* justify-self: start sizes the cell to its content, so a cluster wider than the space before
       the notes would simply overflow across them -- HEENT's PERRLA row did exactly that. Capped,
       it wraps within its own columns instead, which is what "before the note boxes" means. */
    max-width: 100%;
}

/* Capping the cell is only half of it: a Radzen stack does not wrap by default and writes
   flex-wrap inline, so the cluster inside kept its single line and overflowed the cap anyway --
   PERRLA's row still reached 140px past the notes. Every one of these stacks now carries
   Wrap="FlexWrap.Wrap" in its own markup, which is the only place that can beat the inline style. */

/* Same idea one column over: a laterality group standing in for the L/R/B checkboxes. It starts on
   the sides column, where those checkboxes are, and runs right -- "Left/Right/Bilateral" spelled
   out is wider than the 7.5rem the three boxes need. Musculoskeletal's joint rows are all of these. */
.exam-finding__sides {
    grid-column: 3 / 5;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
}

/* Findings run to the wash's edges whether or not they sit in a subsection. Radzen insets a
   fieldset's content by 20px, and Musculoskeletal is the one panel that mixes rows inside its
   fieldsets with rows outside them -- so its four columns each landed at two x positions, 20px
   apart, and the notes jogged with them. A subsection here is marked by its legend and the rule
   under it, never by an indent, so the inset was buying nothing and costing the column. */
.exam-system .rz-fieldset-content {
    padding-inline: 0;
}

/* The L or R marking one side of a paired finding -- the deep tendon reflexes. Fixed width so the
   two grades below each other start at the same x rather than at the width of the letter. */
.exam-side {
    display: inline-block;
    width: 0.85rem;
    color: var(--slate);
}

/* A checkbox and the word beside it, as one unit. They were loose siblings in the clusters that
   qualify a finding, so when a cluster wrapped it broke between them -- GI/GU's quadrants left
   LLQ's box at the end of one line and the word "LLQ" at the start of the next, which reads as the
   box belonging to LUQ. 58 of these across six panels. */
.exam-check {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

/* One spine segment: its box, its name and its side, held together so the three segments wrap as
   units rather than breaking a label away from the side it belongs to. */
.exam-spine-segment {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

/* "type note" as a hint rather than a label: lower case, and grey so it reads as a prompt for an
   empty box instead of as content. */
.exam-finding__note input::placeholder,
.exam-note-box::placeholder {
    color: var(--mist);
    text-transform: lowercase;
    opacity: 1;
}

/* The panels' hand-rolled rows -- 25 of them across eight panels -- do not go through ExamFinding,
   so they missed its fixed note width entirely and sat half a row wide beside 240px neighbours.
   Trachea Midline on Neck was the visible one. Same width, same right edge. */
.exam-note-box {
    max-width: 15rem;
    margin-left: auto;
    display: block;
}

/* ============================================================================================
   Physical Exam — a colour per body system
   ============================================================================================
   Ten systems, ten pastels: a wash behind the detail and the same hue, darkened to stay legible,
   on the system's own title. The point is orientation — ten near-identical grids of checkboxes
   look alike, and colour tells a clinician which one they are in without reading the strip.

   Deliberately quiet. These are pastels because the row already spends colour where it means
   something: the green/red on No/Yes and petrol on a chosen segment. A saturated panel would
   compete with the only two colours here that carry clinical meaning.

   The titles are tinted by position rather than by class because Radzen renders the nav itself and
   the ten tabs are a fixed, ordered list. If a system is ever inserted or reordered, these
   nth-child rules move with the position and not with the system — the wash does follow the
   system, since that comes from the panel's own class. */
.exam-system {
    --sys-tint: transparent;
    --sys-ink: var(--ink);

    background: var(--sys-tint);

    /* Square at the top, rounded at the bottom: the wash runs up under the tab strip and meets the
       selected tab, which carries the same tint. The two then read as one shape — the tab is the
       card's tab — rather than as a coloured button floating above a coloured box. */
    border-radius: 0 0 var(--r-md) var(--r-md);

    /* Only inner padding. The gutter that used to sit outside this element belonged to the tab
       panel around it and drew a white frame between the strip and the wash; the wash now goes to
       its container's edges and the container has none. */
    padding: 0.9rem 1rem;
}

/* The frame removed: Radzen's own tab-panel padding (20px) plus the inner-tabs rule's 1rem top gap
   were the white space around the coloured card. Scoped to .exam-systems so every other nested tab
   set in the chart keeps its gutter — those panels are white on white and need the breathing room. */
.patient-chart__tabs .exam-systems > .rz-tabview-panels {
    padding: 0;
}

.patient-chart__tabs .exam-systems > .rz-tabview-panels > .rz-tabview-panel {
    padding: 0;
}

/* Section labels inside a system pick up its hue, so a long panel stays anchored to it. */
.exam-system .rz-fieldset > .rz-fieldset-legend,
.exam-system .rz-text-subtitle2 {
    color: var(--sys-ink);
}

.exam-system--ga    { --sys-tint: #EDF4F7; --sys-ink: #2C6E7F; }
.exam-system--heent { --sys-tint: #F4EFFA; --sys-ink: #6B4E8F; }
.exam-system--neck  { --sys-tint: #ECF6F0; --sys-ink: #2F7A57; }
.exam-system--resp  { --sys-tint: #EBF3FC; --sys-ink: #2C5F97; }
.exam-system--cv    { --sys-tint: #F0F2F4; --sys-ink: #55636E; }
.exam-system--gigu  { --sys-tint: #FBF4E8; --sys-ink: #8A5A22; }
.exam-system--msk   { --sys-tint: #EDEFFA; --sys-ink: #4A548C; }
.exam-system--neuro { --sys-tint: #F8EFF4; --sys-ink: #8A3F63; }
.exam-system--skin  { --sys-tint: #FDF3EB; --sys-ink: #9A5B2A; }
.exam-system--psych { --sys-tint: #EEF5F2; --sys-ink: #3F7268; }

/* The strip: each tab wears its own system's colour, so the navigation and the panel below it
   are the same thing twice. The tint is the panel's wash, which is what makes the selected tab
   read as continuous with the detail under it.

   Set as variables on the list item rather than as twenty single-purpose rules: the two rules
   that read them then cover both states, and adding a system means one line, not four. The
   position coupling stays -- Radzen renders this nav, so nth-child is the only handle. */
.exam-systems > .rz-tabview-nav > li:nth-child(1) { --sys-tint: #EDF4F7; --sys-ink: #2C6E7F; }  /* General Appearance */
.exam-systems > .rz-tabview-nav > li:nth-child(2) { --sys-tint: #F4EFFA; --sys-ink: #6B4E8F; }  /* HEENT */
.exam-systems > .rz-tabview-nav > li:nth-child(3) { --sys-tint: #ECF6F0; --sys-ink: #2F7A57; }  /* Neck */
.exam-systems > .rz-tabview-nav > li:nth-child(4) { --sys-tint: #EBF3FC; --sys-ink: #2C5F97; }  /* Respiratory */
.exam-systems > .rz-tabview-nav > li:nth-child(5) { --sys-tint: #F0F2F4; --sys-ink: #55636E; }  /* CV */
.exam-systems > .rz-tabview-nav > li:nth-child(6) { --sys-tint: #FBF4E8; --sys-ink: #8A5A22; }  /* GI/GU */
.exam-systems > .rz-tabview-nav > li:nth-child(7) { --sys-tint: #EDEFFA; --sys-ink: #4A548C; }  /* Musculoskeletal */
.exam-systems > .rz-tabview-nav > li:nth-child(8) { --sys-tint: #F8EFF4; --sys-ink: #8A3F63; }  /* Neuro */
.exam-systems > .rz-tabview-nav > li:nth-child(9) { --sys-tint: #FDF3EB; --sys-ink: #9A5B2A; }  /* Skin */
.exam-systems > .rz-tabview-nav > li:nth-child(10) { --sys-tint: #EEF5F2; --sys-ink: #3F7268; }  /* Psych */

/* Prefixed with .patient-chart__tabs to match the specificity of the generic nested-tab rules
   further up this file; without it those repaint the tab slate and petrol again. */
.patient-chart__tabs .exam-systems > .rz-tabview-nav > li > button {
    background: var(--sys-tint);
    color: var(--sys-ink);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.patient-chart__tabs .exam-systems > .rz-tabview-nav > li > button:hover {
    color: var(--sys-ink);
    filter: brightness(0.97);
}

/* Selected: same hue, stated harder — the wash is already its background, so weight and the
   underline carry the selection rather than a colour change. */
.patient-chart__tabs .exam-systems > .rz-tabview-nav > li.rz-tabview-selected > button {
    color: var(--sys-ink);
    border-bottom-color: var(--sys-ink);
    font-weight: 600;
}

/* Ten tinted buttons touching edge to edge read as one striped bar rather than as ten tabs, and at
   the widths this strip actually gets there is no room for the gap to do the work on its own. So
   each tab is also outlined: a gap to break the run, and a hairline so the break is legible even
   where two neighbouring tints are close in value. The line is the ink at low alpha rather than a
   grey, so it belongs to the tab it encloses. */
/* Prefixed to outrank the generic nested-strip rule above, which sets gap: 0.1rem and padding: 0 —
   1.6px is not a break, it is a hairline of white in a striped bar. */
.patient-chart__tabs .exam-systems > .rz-tabview-nav {
    gap: 4px;
    padding-inline: 2px;
}

.patient-chart__tabs .exam-systems > .rz-tabview-nav > li > button {
    border: 1px solid rgba(11, 20, 24, 0.08);
    border-bottom-width: 2px;
}

/* The selected tab drops its bottom corners and its bottom edge: it is continuous with the wash
   below it, which is the same tint, so a rounded corner there would draw a seam across the join. */
.patient-chart__tabs .exam-systems > .rz-tabview-nav > li.rz-tabview-selected > button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


.exam-systems > .rz-tabview-nav > li:nth-child(1).rz-tabview-selected > button { color: #2C6E7F; border-bottom-color: #2C6E7F; }
.exam-systems > .rz-tabview-nav > li:nth-child(2).rz-tabview-selected > button { color: #6B4E8F; border-bottom-color: #6B4E8F; }
.exam-systems > .rz-tabview-nav > li:nth-child(3).rz-tabview-selected > button { color: #2F7A57; border-bottom-color: #2F7A57; }
.exam-systems > .rz-tabview-nav > li:nth-child(4).rz-tabview-selected > button { color: #2C5F97; border-bottom-color: #2C5F97; }
.exam-systems > .rz-tabview-nav > li:nth-child(5).rz-tabview-selected > button { color: #55636E; border-bottom-color: #55636E; }
.exam-systems > .rz-tabview-nav > li:nth-child(6).rz-tabview-selected > button { color: #8A5A22; border-bottom-color: #8A5A22; }
.exam-systems > .rz-tabview-nav > li:nth-child(7).rz-tabview-selected > button { color: #4A548C; border-bottom-color: #4A548C; }
.exam-systems > .rz-tabview-nav > li:nth-child(8).rz-tabview-selected > button { color: #8A3F63; border-bottom-color: #8A3F63; }
.exam-systems > .rz-tabview-nav > li:nth-child(9).rz-tabview-selected > button { color: #9A5B2A; border-bottom-color: #9A5B2A; }
.exam-systems > .rz-tabview-nav > li:nth-child(10).rz-tabview-selected > button { color: #3F7268; border-bottom-color: #3F7268; }

/* The note box and the segmented groups sit on the wash, so they keep a white ground of their own
   rather than letting the tint show through and muddy the input. */
.exam-system .rz-textbox,
.exam-system .exam-choice {
    background: #FFFFFF;
}

/* ============================================================================================
   Claims work queue -- one wash and one ink per work list.

   Eleven lists stacked in a single column, most holding the same shape of row: a patient and a date
   of service. Legacy's panel bar gave every heading the same grey, so finding "Pending Paper Claims"
   among them meant reading each one in turn. Same problem the Physical Exam solves for body systems
   and the Orders tab for its fourteen types, so it gets the same answer and the same pastel family --
   washes light enough to carry small text, inks dark enough to read on white.

   Keyed by the slug in ClaimQueueDisplay, not by position: this list's order is ClaimJobTypes
   .DisplayOrder and lists with no work are not rendered at all, so nth-child would colour the wrong
   heading the moment a queue emptied. */
.queue-group--unprocessed { --queue-tint: #EDF4F7; --queue-ink: #2C6E7F; }  /* the main inbox */
.queue-group--unsigned    { --queue-tint: #FBEEF0; --queue-ink: #A03A48; }  /* legacy coloured this red */
.queue-group--secondary   { --queue-tint: #F0F2F4; --queue-ink: #55636E; }  /* never implemented */
.queue-group--eob         { --queue-tint: #ECF6F0; --queue-ink: #2F7A57; }  /* money has arrived */
.queue-group--paid        { --queue-tint: #FBF4E8; --queue-ink: #8A5A22; }
.queue-group--zero        { --queue-tint: #FDF3EB; --queue-ink: #9A5B2A; }
.queue-group--electronic  { --queue-tint: #EBF3FC; --queue-ink: #2C5F97; }  /* going out */
.queue-group--sent        { --queue-tint: #EEF1F8; --queue-ink: #45557F; }  /* gone out */
.queue-group--paper       { --queue-tint: #F4EFFA; --queue-ink: #6B4E8F; }
.queue-group--reports     { --queue-tint: #F8EFF4; --queue-ink: #8A3F63; }
.queue-group--search      { --queue-tint: #EBEFF7; --queue-ink: #3F5A85; }