/* Claira's colour themes.
 *
 * Served from /theme.css to every portal page. The pages are standalone by
 * design -- there is no bundler and each carries its own <style> -- so four
 * palettes copied into twelve files would be some 1,500 lines that drift the
 * first time anybody edits one. This is the one place a colour is decided.
 *
 * HOW IT WINS. Each page declares the light palette on a bare `:root`, which
 * has specificity (0,1,0). Every rule here is `:root[data-theme="..."]`, which
 * is (0,2,0) and therefore wins wherever it applies, regardless of the order
 * the stylesheets load in. Nothing here has to be !important and nothing
 * depends on this file arriving last.
 *
 * "System" is the absence of the attribute: the page's own light palette plus
 * its `prefers-color-scheme: dark` block, exactly as before this file existed.
 * So a reader who never touches the control sees precisely what they saw
 * before, which is the right default for a product people are mid-task in.
 *
 * WHAT A PALETTE MUST DO. Every one of the 31 variables is redefined in every
 * theme. A partial palette inherits the rest from the light one, and the
 * result is illegible in a way that is obvious on one screen and invisible on
 * another -- a test enforces completeness rather than trusting a reviewer to
 * count.
 */

/* --- Light ------------------------------------------------------------- */
/* The warm paper the product was designed in. Declared explicitly so that
 * choosing it holds even when the operating system asks for dark. */
:root[data-theme="light"] {
  color-scheme: light;
  --rail: #e9e1d3; --rail-raised: #ffffff; --rail-ink: #3d3125;
  --rail-ink-strong: #16150f; --rail-line: #d3c8b4; --rail-accent: #6b4a0f;
  --rail-label: #5f574a; --rail-dim: #6b6255;
  --amber: #b54708; --amber-tint: #fef0c7; --amber-dot: #f79009;
  --good-dot: #12b76a; --bad-dot: #d92d20; --neutral-mark: #a8a294;
  --ink: #16150f; --ink-soft: #454034;
  --paper: #fbfaf7; --paper-raised: #ffffff;
  --line: #e5e0d5; --line-strong: #d0c9b9;
  --gold: #a8761f; --gold-ink: #6b4a0f; --gold-tint: #f2e6ce;
  --teal: #067a52; --teal-tint: #d1fadf;
  --danger: #b42318; --danger-tint: #fee4e2;
  --muted: #767163; --code-bg: #f4f1e9;
  --shadow: rgba(18, 28, 46, 0.08);
  --cta-bg: var(--ink); --cta-fg: var(--paper);
}

/* --- Dark -------------------------------------------------------------- */
/* Warm rather than blue-black, so it reads as the same product with the
 * lights off. The tints are darkened versions of their light counterparts
 * rather than the same colour at low opacity, which would muddy on a screen
 * that is already dark. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --rail: #201a14; --rail-raised: #2a2219; --rail-ink: #cfc5b4;
  --rail-ink-strong: #f0ebe1; --rail-line: #3a3026; --rail-accent: #e6c37a;
  --rail-label: #9b9384; --rail-dim: #8a8172;
  --amber: #f0a355; --amber-tint: #3a2a12; --amber-dot: #f79009;
  --good-dot: #34d399; --bad-dot: #f87171; --neutral-mark: #6b6255;
  --ink: #f0ebe1; --ink-soft: #c8bfb0;
  --paper: #17130f; --paper-raised: #201a14;
  --line: #33291f; --line-strong: #453a2c;
  --gold: #d9a441; --gold-ink: #f0d9a8; --gold-tint: #3a2e18;
  --teal: #34d399; --teal-tint: #10312a;
  --danger: #f87171; --danger-tint: #3d1512;
  --muted: #9a917f; --code-bg: #221c15;
  --shadow: rgba(0, 0, 0, 0.45);
  --cta-bg: var(--gold); --cta-fg: #17130f;
}

/* --- Slate ------------------------------------------------------------- */
/* The same layout with the warmth taken out: a cool neutral for people who
 * find the paper tone tiring over a full day of claims. */
:root[data-theme="slate"] {
  color-scheme: light;
  --rail: #e3e7ec; --rail-raised: #ffffff; --rail-ink: #38414c;
  --rail-ink-strong: #131a21; --rail-line: #c8d0d9; --rail-accent: #1f4d7a;
  --rail-label: #55606c; --rail-dim: #626d79;
  --amber: #a85a10; --amber-tint: #fdf0d8; --amber-dot: #e08c1a;
  --good-dot: #0f9d69; --bad-dot: #c8322a; --neutral-mark: #98a2ad;
  --ink: #131a21; --ink-soft: #3c4652;
  --paper: #f7f9fb; --paper-raised: #ffffff;
  --line: #e1e6eb; --line-strong: #c8d0d9;
  --gold: #1f6fae; --gold-ink: #1f4d7a; --gold-tint: #dcecf8;
  --teal: #0b7a63; --teal-tint: #d2f5ec;
  --danger: #b0281f; --danger-tint: #fde3e1;
  --muted: #68727d; --code-bg: #eef2f6;
  --shadow: rgba(19, 26, 33, 0.09);
  --cta-bg: var(--ink); --cta-fg: var(--paper);
}

/* --- High contrast ----------------------------------------------------- */
/* Not a style. Black on white with saturated state colours, for a clinic
 * workstation with a poor monitor in a bright room, and for anyone who cannot
 * read the muted greys the other palettes use for secondary text. Nothing in
 * it is lower than about 7:1 against its background, and the greys that carry
 * meaning elsewhere are replaced rather than merely darkened. */
:root[data-theme="contrast"] {
  color-scheme: light;
  --rail: #ffffff; --rail-raised: #ffffff; --rail-ink: #000000;
  --rail-ink-strong: #000000; --rail-line: #000000; --rail-accent: #7a3c00;
  --rail-label: #000000; --rail-dim: #333333;
  --amber: #8a3800; --amber-tint: #ffe9c7; --amber-dot: #8a3800;
  --good-dot: #005c36; --bad-dot: #9b0000; --neutral-mark: #444444;
  --ink: #000000; --ink-soft: #1a1a1a;
  --paper: #ffffff; --paper-raised: #ffffff;
  --line: #000000; --line-strong: #000000;
  --gold: #7a3c00; --gold-ink: #5a2c00; --gold-tint: #ffeccc;
  --teal: #005c36; --teal-tint: #cdf3e2;
  --danger: #9b0000; --danger-tint: #ffd9d6;
  --muted: #333333; --code-bg: #f0f0f0;
  --shadow: rgba(0, 0, 0, 0.35);
  --cta-bg: #000000; --cta-fg: #ffffff;
}

/* --- the control itself ------------------------------------------------- */
/* Injected into the sidebar by theme.js. Styled here so the twelve pages do
 * not each need a copy. */
.theme-group {
  /* Space above it, because the nav scrolls: with the last journey link
     resting directly against this label the control read as another step in
     the claim journey rather than a setting. */
  margin: 16px 0 14px;
  padding: 0 18px;
}
.theme-group .nav-group-label { margin-bottom: 5px; }
.theme-group .nav-group-label + select + .nav-group-label { margin-top: 12px; }
.theme-group select {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 14px;
  border: 1px solid var(--rail-line);
  background: var(--rail-raised);
  color: var(--rail-ink);
  cursor: pointer;
}
.theme-group select:hover { border-color: var(--rail-accent); }
.theme-group select:focus-visible {
  outline: 2px solid var(--rail-accent);
  outline-offset: 1px;
}

/* --- Clinical ----------------------------------------------------------- */
/* A deep navy rail against white working area: the shape most clinical and
 * financial software uses, and the one a practice manager will recognise as
 * business software rather than as a design. The accent moves from gold to a
 * medical blue, which is what carries the "professional" read more than the
 * background does. */
/* Claira Health (17 October; the owner: "add a theme that matches this logo
 * and fonts for Claira health and make it default for now"). The company
 * site's own palette: warm paper, slate ink, the logo's blue for the accent,
 * its teal, gold and red, and a light menu like the site's. */
:root[data-theme="claira"] {
  color-scheme: light;
  --rail: #f4f0e9; --rail-raised: #ffffff; --rail-ink: #334155;
  --rail-ink-strong: #0f172a; --rail-line: #e8e2d7; --rail-accent: #0a6cf0;
  --rail-label: #556274; --rail-dim: #556274;
  --amber: #b45309; --amber-tint: #fef3c7; --amber-dot: #e8b341;
  --good-dot: #0fa37f; --bad-dot: #d92d20; --neutral-mark: #94a3b8;
  --ink: #0f172a; --ink-soft: #334155;
  --paper: #faf8f4; --paper-raised: #ffffff;
  --line: #e8e2d7; --line-strong: #d9d1c3;
  --gold: #0a6cf0; --gold-ink: #0757c4; --gold-tint: #e6f0fe;
  --teal: #0f766e; --teal-tint: #d5f5ef;
  --danger: #b42318; --danger-tint: #fee4e2;
  --muted: #5a6a7e; --code-bg: #f4f0e9;
  --shadow: rgba(15, 23, 42, 0.08);
  --cta-bg: #0a6cf0; --cta-fg: #ffffff;
}

:root[data-theme="clinical"] {
  color-scheme: light;
  --rail: #12304d; --rail-raised: #1a3f63; --rail-ink: #c3d4e3;
  --rail-ink-strong: #ffffff; --rail-line: #234a70; --rail-accent: #7cc0f5;
  --rail-label: #8fa9be; --rail-dim: #7d95aa;
  --amber: #a85f00; --amber-tint: #fff2dc; --amber-dot: #d98a00;
  --good-dot: #1f8a5c; --bad-dot: #c53030; --neutral-mark: #9aa7b4;
  --ink: #0f172a; --ink-soft: #334155;
  --paper: #f7fafc; --paper-raised: #ffffff;
  --line: #e3e8ee; --line-strong: #cbd5e1;
  --gold: #0f5aa8; --gold-ink: #0b447f; --gold-tint: #e3f0fc;
  --teal: #0a6b5c; --teal-tint: #d7f2ee;
  --danger: #b3261e; --danger-tint: #fdeaea;
  --muted: #55636f; --code-bg: #eef2f7;
  --shadow: rgba(15, 39, 64, 0.10);
  --cta-bg: #0f5aa8; --cta-fg: #ffffff;
}

/* --- Midnight ----------------------------------------------------------- */
/* The second dark theme, and cool where the first is warm. Navy and steel
 * rather than brown, for anyone who finds the warm dark too soft for a screen
 * full of money. */
:root[data-theme="midnight"] {
  color-scheme: dark;
  --rail: #0a111c; --rail-raised: #131d2c; --rail-ink: #a8bacd;
  --rail-ink-strong: #eaf1f8; --rail-line: #1f2d40; --rail-accent: #6fb3f0;
  --rail-label: #90a3b6; --rail-dim: #8194a8;
  --amber: #f0a84e; --amber-tint: #3a2a14; --amber-dot: #f0a84e;
  --good-dot: #3ddc97; --bad-dot: #ff7b7b; --neutral-mark: #5a6b7e;
  --ink: #eaf1f8; --ink-soft: #b9c7d6;
  --paper: #0d1420; --paper-raised: #151f30;
  --line: #1e2b3c; --line-strong: #2d3f56;
  --gold: #6fb3f0; --gold-ink: #a9d3f8; --gold-tint: #16293d;
  --teal: #3ddc97; --teal-tint: #0e2e26;
  --danger: #ff7b7b; --danger-tint: #3a1519;
  --muted: #9aabbd; --code-bg: #121c2a;
  --shadow: rgba(0, 0, 0, 0.50);
  --cta-bg: #3d8fd6; --cta-fg: #061019;
}

/* --- The Claira Health logo (17 October) ------------------------------- */
/* The owner: "use actual Claira health logo" from the company site: the Ch
 * mark, then "Claira" heavy and "Health" light, in Plus Jakarta Sans, as the
 * site sets it (.brand there). It replaced the stacked text lockup chosen on
 * 5 October. Everywhere the name is drawn: the menu, sign-in, the documents. */
.wm { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; line-height: 1; vertical-align: middle; }
.wm-logo, .brand .wm-logo { height: 26px; width: auto; flex: none; display: inline-block; vertical-align: middle; }
:root .wm-name { white-space: nowrap; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800;
  letter-spacing: -0.02em; color: inherit; }
:root .wm-name .wm-health, :root .wm .wm-health { display: inline; margin: 0; font-family: inherit; font-size: 1em;
  font-weight: 400; letter-spacing: -0.02em; text-transform: none; color: var(--muted); }
:root nav.toc .brand { display: flex; align-items: center; gap: 8px; font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 800; letter-spacing: -0.02em; }
:root nav.toc .brand .wm-health { display: inline; margin: 0; font-family: inherit; font-size: 1em; font-weight: 400;
  letter-spacing: -0.02em; text-transform: none; color: var(--rail-dim, var(--muted)); }
:root[data-brand] aside.sidebar .wm-health { color: var(--rail-label); }

/* --- Fonts and text size (16 October) ------------------------------------ */
/* The CEO: the screens read as technical. The owner chose Source Serif for
 * headings -- a patient's name, the one sentence that matters -- and Inter for
 * everything else, labels included (the typewriter labels were the most
 * technical-looking thing on the screen). Every screen's CSS names these three
 * variables, never a font; the wordmark keeps its own (above). Each person may
 * choose another font and a text size in the sidebar (theme.js), including the
 * clinic view, which otherwise offers no pickers: text size is for reading,
 * not decoration. Plain `:root` here, and no page declares these variables,
 * so the order the stylesheets load in does not matter. */
:root {
  /* Claira Health's own type since 17 October, the company site's: Plus
     Jakarta Sans for headings and text. (Source Serif 4 headings with Inter
     text, the owner's choice of 16 October, until then.) */
  --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-label: var(--font-body);
}
:root[data-font="clear"] { --font-head: var(--font-body); }
:root[data-font="plex"] {
  --font-head: "IBM Plex Sans", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-label: "IBM Plex Mono", monospace;
}
:root[data-font="classic"] {
  --font-head: "Newsreader", Georgia, serif; --font-body: "Newsreader", Georgia, serif;
  --font-label: "IBM Plex Mono", monospace;
}
:root[data-font="legible"] {
  --font-head: "Atkinson Hyperlegible", system-ui, sans-serif; --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
}
/* Text size scales the whole screen, as the browser's own zoom does, because
 * the screens are laid out in pixels; it is kept per person. */
:root[data-size="sm"] body { zoom: 0.92; }
:root[data-size="lg"] body { zoom: 1.12; }
:root[data-size="xl"] body { zoom: 1.25; }
/* The sidebar's text-size switch: the segmented control (below). */
.theme-group + .theme-group { margin-top: 0; }
.theme-group .nav-group-label + select + .seg { margin-top: 0; }
.theme-group select + .nav-group-label { margin-top: 12px; }
.theme-group .size-pick.seg { display: flex; flex-wrap: nowrap; width: 100%; background: var(--rail-line); }
.theme-group .size-pick.seg button { flex: 1; min-width: 0; padding: 5px 0; color: var(--rail-ink); }
.theme-group .size-pick.seg button[aria-pressed="true"] { background: var(--rail-raised); color: var(--rail-ink-strong); }

/* --- The segmented control (16 October) ---------------------------------- */
/* The CEO: App2's Owner / Front desk / Clinician / Biller "doesn't look like
 * selection options". The owner chose the segmented control: the choices sit
 * in one shared track and the chosen one is lifted out of it as a raised
 * button, so it reads at once as "pick one of these". Any group of
 * aria-pressed buttons with class `seg` (a `seg` without buttons is a bar
 * segment on AR follow-up, and keeps its own look), `a2-days` or `a2-chips` gets it. */
.seg:has(> button), .a2-days, .a2-chips {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 0; border-radius: 14px;
  background: var(--line); overflow: visible; max-width: 100%;
}
.seg:has(> button) button, .a2-days button, .a2-chips button, .size-pick button {
  font: inherit; font-family: var(--font-body); font-size: 13px; font-weight: 500; line-height: 1.2;
  padding: 6px 13px; border: 0; border-radius: 14px; background: transparent; color: var(--ink-soft); cursor: pointer;
}
.seg:has(> button) button:hover, .a2-days button:hover, .a2-chips button:hover, .size-pick button:hover { color: var(--ink); background: var(--paper); }
.seg:has(> button) button[aria-pressed="true"], .a2-days button[aria-pressed="true"], .a2-chips button[aria-pressed="true"],
.size-pick button[aria-pressed="true"] {
  background: var(--paper-raised); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px var(--shadow, rgba(22, 21, 15, 0.18)), 0 0 0 1px var(--line-strong);
}
.seg:has(> button) button:focus-visible, .a2-days button:focus-visible, .a2-chips button:focus-visible, .size-pick button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 1px;
}
.seg-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }


/* The compact menu (theme.js buildMenu, 16 October): Home and the screen in
   view, until "Show full menu" opens the rest. */
.compact-nav { flex: 0 0 auto; gap: 1px; }
:root.menu-compact nav.side-nav:not(.compact-nav) { display: none; }
:root:not(.menu-compact) .compact-nav { display: none; }
.side-nav .menu-toggle { margin: 8px 10px 0; align-self: flex-start; background: transparent; cursor: pointer;
  border: 1px solid var(--rail-line, var(--line)); border-radius: 14px; padding: 5px 10px;
  font: 600 11.5px var(--font-body); color: var(--rail-ink, var(--ink)); }
.side-nav .menu-toggle:hover { background: var(--rail-raised, var(--paper-raised)); }
.side-nav .menu-toggle:focus-visible { outline: 2px solid var(--rail-accent, var(--gold)); outline-offset: 2px; }

/* --- the control panel, top right (16 October; the CEO) ------------------- */
.cp-top { position: fixed; top: 12px; right: 16px; z-index: 160; display: flex; gap: 8px; align-items: center; }
.cp-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line-strong, var(--line)); border-radius: 999px; background: var(--paper-raised, #fff);
  color: var(--ink); cursor: pointer; box-shadow: 0 1px 3px var(--shadow, rgba(0,0,0,.08)); }
.cp-button:hover, .cp-button[aria-expanded="true"] { border-color: var(--gold); }
.cp-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cp-panel { position: fixed; z-index: 200; width: 300px; max-width: calc(100vw - 16px); padding: 14px 16px 12px;
  background: var(--paper-raised, #fff); color: var(--ink); border: 1px solid var(--line-strong, var(--line));
  border-radius: 14px; box-shadow: 0 14px 34px var(--shadow, rgba(0,0,0,.18)); font: 13.5px/1.4 var(--font-body); }
.cp-title { font: 600 15px var(--font-head); margin: 0 0 10px; }
.cp-title.sub { font-size: 13.5px; margin: 14px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Each label right beside its control: no gap to hunt across (the CEO). */
.cp-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 10px; margin: 0 0 9px; }
.cp-label { font-weight: 600; font-size: 12.5px; color: var(--ink-soft, var(--ink)); }
.cp-row select { width: 100%; font: inherit; font-size: 13px; padding: 6px 9px; border-radius: 14px;
  border: 1px solid var(--line-strong, var(--line)); background: var(--paper, #fff); color: var(--ink); }
.cp-row .seg { display: flex; width: 100%; }
.cp-row .seg button { flex: 1; min-width: 0; padding: 5px 0; }
.cp-note { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.cp-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cp-swatch { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper, #fff); color: var(--ink); font: 12px var(--font-body); }
.cp-swatch[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); font-weight: 600; }
.cp-swatch[disabled] { opacity: .5; cursor: default; }
.cp-swatch-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.15); }
.sw-claira { background: #e9e1d3; } .sw-navy { background: #13294b; } .sw-teal { background: #0f3d3e; }
.sw-plum { background: #3a1f3d; } .sw-forest { background: #1f3a2b; } .sw-clay { background: #f4e6dc; }
/* The page's own top-right controls make room for the two round buttons. */
@media (min-width: 861px) {
  main .head .controls, main > .filters:first-of-type { margin-right: 88px; }
  aside.advice { padding-top: 58px; }
}

/* --- the menu that hides itself (16 October; the CEO) ---------------------- */
.nav-ico { display: inline-flex; flex: none; width: 18px; height: 18px; margin-right: 2px; opacity: .85; }
.side-nav a.current .nav-ico { opacity: 1; }
.rail-pin { display: none; }
@media (min-width: 861px) {
  :root.menu-rail .shell { padding-left: 60px; }
  :root.menu-rail aside.sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; width: 60px; z-index: 150;
    overflow: hidden; transition: width .16s ease, box-shadow .16s ease; }
  :root.menu-rail aside.sidebar:hover, :root.menu-rail aside.sidebar:focus-within {
    width: 252px; box-shadow: 8px 0 28px rgba(0, 0, 0, .18); }
  :root.menu-rail aside.sidebar .side-nav { overflow-x: hidden; }
  :root.menu-rail aside.sidebar .side-nav a { white-space: nowrap; }
  :root.menu-rail aside.sidebar:not(:hover):not(:focus-within) .side-nav { overflow: hidden; scrollbar-width: none; }
  :root.menu-rail aside.sidebar:not(:hover):not(:focus-within) :is(.nav-group-label, .phase-n, .soon, .who, .menu-toggle,
    .side-nav a.nav-sub, .rail-pin, .brand-link .wm-name) { visibility: hidden; }
  :root.menu-rail aside.sidebar:not(:hover):not(:focus-within) .side-nav a.nav-sub { display: none; }

  :root.menu-rail aside.sidebar .brand-link { position: relative; }
  .rail-pin { display: inline-flex; align-items: center; gap: 6px; margin: -8px 20px 10px; padding: 3px 8px; border-radius: 999px;
    border: 1px solid var(--rail-line, var(--line)); background: transparent; color: var(--rail-label, var(--muted));
    font: 600 11px var(--font-body); cursor: pointer; align-self: flex-start; }
  .rail-pin[aria-pressed="true"] { color: var(--rail-accent, var(--gold)); border-color: var(--rail-accent, var(--gold)); }
  .rail-pin::after { content: "Keep open"; }
  .rail-pin[aria-pressed="true"]::after { content: "Kept open"; }
}

/* --- the practice's own look: the menu (16 October; the CEO) ---------------
   Whole sets, each with readable contrast, chosen per clinic; later in this
   file than the themes so a clinic's menu wins over the reader's theme. */
:root[data-brand="navy"] { --rail: #13294b; --rail-raised: #1d3a66; --rail-ink: #c9d6ea; --rail-ink-strong: #ffffff;
  --rail-line: #2a4672; --rail-accent: #8ec5ff; --rail-label: #9fb2cc; --rail-dim: #8aa0bd; }
:root[data-brand="teal"] { --rail: #0f3d3e; --rail-raised: #175556; --rail-ink: #c4e3e1; --rail-ink-strong: #ffffff;
  --rail-line: #1f5c5d; --rail-accent: #7fe0d2; --rail-label: #98c4c0; --rail-dim: #85b2ae; }
:root[data-brand="plum"] { --rail: #3a1f3d; --rail-raised: #4f2b53; --rail-ink: #e3cfe5; --rail-ink-strong: #ffffff;
  --rail-line: #5a3460; --rail-accent: #f0a8e8; --rail-label: #c4a6c8; --rail-dim: #b294b6; }
:root[data-brand="forest"] { --rail: #1f3a2b; --rail-raised: #2b4f3b; --rail-ink: #cfe3d5; --rail-ink-strong: #ffffff;
  --rail-line: #335a43; --rail-accent: #a6e3b4; --rail-label: #a6c4ae; --rail-dim: #93b39c; }
:root[data-brand="clay"] { --rail: #f4e6dc; --rail-raised: #ffffff; --rail-ink: #4a2f22; --rail-ink-strong: #2a1810;
  --rail-line: #e0c9b8; --rail-accent: #9a4a1f; --rail-label: #6d4f3e; --rail-dim: #6d4f3e; }
/* The refined menu is drawn on the page's own paper; a practice's colour
   reaches it here, so both designs carry the practice's menu. */
:root[data-brand] aside.sidebar { background: var(--rail); color: var(--rail-ink); border-right-color: var(--rail-line); }
:root[data-brand] aside.sidebar .brand-link, :root[data-brand] aside.sidebar .wm-name { color: var(--rail-ink-strong); }
:root[data-brand] aside.sidebar .side-nav a { color: var(--rail-ink); }
:root[data-brand] aside.sidebar .side-nav a:hover { color: var(--rail-ink-strong); background: var(--rail-raised); }
:root[data-brand] aside.sidebar .side-nav a.current { color: var(--rail-ink-strong); background: var(--rail-raised); border-left-color: var(--rail-accent); }
:root[data-brand] aside.sidebar :is(.nav-group-label, .phase-n) { color: var(--rail-label); }
:root[data-brand] aside.sidebar .who, :root[data-brand] aside.sidebar .who b, :root[data-brand] aside.sidebar .who a { color: var(--rail-ink); }


/* --- one shape for every edge (the CEO, 17 October: "all edges should match")
   Boxes: 14px corners everywhere (the pass over every screen's CSS). Controls
   -- menus, buttons, fields, switches -- the View as bar's round ends, so a
   menu beside the bar is the same shape as the bar. Repeated :root raises
   these over the screens' own control rules without !important. */
:root:root:root :is(select, button, input[type="text"], input[type="date"], input[type="email"], input[type="number"],
  input[type="search"], input[type="password"], .a2-btn, .seg, .a2-days, .a2-chips, .fold-toggle) { border-radius: 999px; }
:root:root:root :is(.seg, .a2-days, .a2-chips) > button { border-radius: 999px; }
:root:root:root textarea { border-radius: 14px; }
:root:root:root :is(.cp-swatch, .alerts-item) { border-radius: 14px; }

/* --- the practice's space at the top of the menu (17 October; the CEO) --- */
.practice-slot { display: flex; align-items: center; gap: 10px; margin: 0 14px 6px; padding: 8px 10px; min-height: 52px;
  box-sizing: border-box; border-radius: 14px; background: var(--rail-raised, var(--paper)); border: 1px solid var(--rail-line, var(--line)); }
.practice-slot.empty { border-style: dashed; background: transparent; }
.practice-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px;
  border-radius: 14px; overflow: hidden; background: var(--rail-accent, var(--gold)); color: var(--rail, #fff);
  font: 700 14px var(--font-head); letter-spacing: .02em; }
.practice-mark.has-logo { background: #fff; }
.practice-mark img { width: 100%; height: 100%; object-fit: contain; }
.practice-slot.empty .practice-mark { background: transparent; color: var(--rail-label, var(--muted)); border: 1px dashed var(--rail-line, var(--line)); }
.practice-slot-name { font: 600 13px/1.25 var(--font-head); color: var(--rail-ink-strong, var(--ink)); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.practice-slot.empty .practice-slot-name { color: var(--rail-label, var(--muted)); font-weight: 500; }
/* Claira Health beneath the practice, smaller: the practice's menu, with Claira Health. */
aside.sidebar.has-practice .brand-link { padding-top: 0; padding-bottom: 12px; transform: scale(.82); transform-origin: left center; }
aside.sidebar { padding-top: 14px; }
@media (min-width: 861px) {
  :root.menu-rail aside.sidebar:not(:hover):not(:focus-within) .practice-slot { margin: 0 9px 6px; padding: 4px; border-color: transparent; background: transparent; }
  :root.menu-rail aside.sidebar:not(:hover):not(:focus-within) .practice-slot-name { visibility: hidden; }
}
.cp-logo { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cp-logo input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cp-logo-pick, .cp-logo-remove { font: 600 12px var(--font-body); padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong, var(--line)); background: var(--paper, #fff); color: var(--ink); }
.cp-logo input[type="file"]:focus-visible + .cp-logo-pick { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 861px) {
  :root.menu-rail aside.sidebar:not(:hover):not(:focus-within) .brand-link { padding-left: 9px; padding-right: 0; }
}