/* docs/stylesheets/extra.css */
.utterances {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 2rem auto;
  /* give it at least 400px of space */
  min-height: 400px;
}
.utterances-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}


/* ============================================================
   Nexus EMR site brand — aligned with the Nexus EMR frontend's
   WELLSTAR Stardust theme (frontend/angular-lib/projects/common/
   stardust-core/.../themes/stardust.theme.css). Light = WELLSTAR
   blue on warm clay; dark = warm navy-clay.
   ============================================================ */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #1462b3;          /* --ws-blue-600 (primary) */
  --md-primary-fg-color--light: #2f7fd1;   /* --ws-blue-500 */
  --md-primary-fg-color--dark: #0d3f73;    /* --ws-blue-900 */
  --md-accent-fg-color: #10518f;           /* --ws-blue-700 (hover) */
  --md-accent-fg-color--transparent: #1462b31f;
  --md-typeset-a-color: #1462b3;
  --md-default-bg-color: #fffefa;          /* --clay-0 */
  --md-default-fg-color: #1c2b4a;          /* --clay-950 */
  --md-default-fg-color--light: #424c5e;   /* --clay-700 */
  --md-default-fg-color--lighter: #8a8f99; /* --clay-500 */
  --md-code-bg-color: #f2efe9;             /* --clay-100 */
  --md-typeset-table-color: #e2dcd4;       /* --clay-200 */
  --nexus-flag-bg: #e3eefb;                /* --ws-blue-100 */
  --nexus-flag-fg: #10518f;                /* --ws-blue-700 */
  --nexus-json-key: #10518f;
  --nexus-json-str: #1f9d62;               /* --green-600 */
  --nexus-json-num: #c98a17;               /* --amber-600 */
  --nexus-guide: #424c5e;                  /* --clay-700: text-toned, distinct from row rules */
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1f6fc2;          /* dark --primary */
  --md-primary-fg-color--light: #2f7fd1;
  --md-primary-fg-color--dark: #0d3f73;
  --md-accent-fg-color: #5a9be0;
  --md-accent-fg-color--transparent: #5a9be01f;
  --md-typeset-a-color: #5a9be0;
  --md-default-bg-color: #151d30;          /* dark --clay-50 */
  --md-default-fg-color: #eef2f8;          /* dark --clay-950 */
  --md-default-fg-color--light: #b7c2d6;   /* dark --clay-700 */
  --md-default-fg-color--lighter: #7585a3; /* dark --clay-500 */
  --md-code-bg-color: #202c45;             /* dark --clay-100 */
  --md-typeset-table-color: #2d3b5b;       /* dark --clay-200 */
  --md-footer-bg-color: #10182a;
  --nexus-flag-bg: #213a63;                /* dark --ws-blue-100 */
  --nexus-flag-fg: #9cc2f0;                /* dark --accent-foreground */
  --nexus-json-key: #9cc2f0;
  --nexus-json-str: #2cb178;               /* dark --green-600 */
  --nexus-json-num: #e0a63a;
  --nexus-guide: #b7c2d6;                  /* dark --clay-700: text-toned */
}

/* --- FHIR reference tables (generated by TypedFhir ig-docs) --- */
.fhir-meta { font-size: .72rem; margin: 0 0 1em 0; }
.fhir-meta th { text-align: left; padding: .25em 1.2em .25em 0; font-weight: 700; white-space: nowrap; vertical-align: top; }
.fhir-meta td { padding: .25em 0; }

/* linked, colorized example JSON */
.fhir-json { font-size: .7rem; line-height: 1.5; overflow-x: auto; background: var(--md-code-bg-color); border-radius: .2em; padding: .8em 1em; }
.fhir-json .fj-k { color: var(--nexus-json-key); }
.fhir-json .fj-s { color: var(--nexus-json-str); }
.fhir-json .fj-n { color: var(--nexus-json-num); }
.fhir-json a { text-decoration: underline; }

.fhir-diff { font-size: .7rem; width: 100%; border-collapse: collapse; }
.fhir-diff th { text-align: left; }
.fhir-diff td, .fhir-diff th { padding: .35em .6em; vertical-align: top; border-bottom: 1px solid var(--md-typeset-table-color, #e0e0e0); }
.fhir-diff td.el { font-family: var(--md-code-font-family, ui-monospace, monospace); white-space: nowrap; font-weight: 600; }
.fhir-flag { display: inline-block; padding: 0 .35em; border-radius: .2em; font-size: .85em; font-weight: 700; background: var(--nexus-flag-bg, #e3eefb); color: var(--nexus-flag-fg, #10518f); }

/* type cells (API reference): a `Foo?` / `x | None` type must never wrap mid-token */
.fhir-diff td.ty { white-space: nowrap; }

/* flags are links now (click through to the R4 conformance definitions) — keep the badge look */
a.fhir-flag, a.fhir-flag:hover { text-decoration: none; cursor: help; }

/* inherited-from-base facets in the differential view; binding code previews */
.fhir-diff .inh { opacity: .55; }
.fhir-diff a.fhir-card { color: inherit; text-decoration: none; cursor: help; white-space: nowrap; }
.vs-preview { color: var(--md-default-fg-color--lighter); }

/* Connected element-tree guides: absolutely positioned full-height strips in the name
   cell (text glyphs can't span variable-height padded rows). gv = ancestor continuation,
   gt = ├ (elbow + vertical continues), gl = └ (vertical stops at the elbow). The elbow's
   horizontal stub sits at the first text line (~cell padding + half a line). */
.fhir-diff td.el { position: relative; }
.fhir-diff td.el .nm { display: inline-block; }
.fhir-diff i.gv, .fhir-diff i.gt, .fhir-diff i.gl {
  position: absolute; top: 0; bottom: 0; width: 0.55rem; pointer-events: none;
}
.fhir-diff i.gv, .fhir-diff i.gt { border-left: 1px solid var(--nexus-guide, #d3cdc4); }
.fhir-diff i.gt::after, .fhir-diff i.gl::after {
  content: ""; position: absolute; left: 0; top: 0; height: 0.78rem; width: 0.55rem;
  border-bottom: 1px solid var(--nexus-guide, #d3cdc4);
}
.fhir-diff i.gl::before {
  content: ""; position: absolute; left: 0; top: 0; height: 0.78rem;
  border-left: 1px solid var(--nexus-guide, #d3cdc4);
}

/* ─────────────── FSH source highlighting (see ts/src/ig-docs/fsh-highlight.ts) ───────────────
   MkDocs ships no FSH lexer, so the FSH tab is tokenized by the generator and styled here.
   Colours are drawn from the Material palette variables so they follow light/dark, and are
   chosen so the two things a reader scans for -- codes and canonicals -- are the most legible
   tokens on the page. Comments are deliberately NOT dimmed to near-invisible: in this IG the
   comments carry the reasoning. */
pre.fsh {
  background: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  padding: .7rem .9rem;
  border-radius: .2rem;
  overflow-x: auto;
  font-size: .74rem;
  line-height: 1.5;
}
pre.fsh code { background: none; padding: 0; font-size: inherit; }
.fsh-comment { color: var(--md-default-fg-color--light); font-style: italic; }
.fsh-decl    { color: var(--md-primary-fg-color); font-weight: 600; }
.fsh-kw      { color: var(--md-accent-fg-color); font-weight: 500; }
.fsh-string  { color: #2e7d32; }
.fsh-code    { color: #ad1457; font-weight: 600; }
.fsh-url     { color: #0277bd; text-decoration: underline dotted; text-underline-offset: 2px; }
.fsh-caret   { color: #6a1b9a; }
.fsh-alias   { color: #ef6c00; }
.fsh-card    { color: var(--md-default-fg-color--light); font-weight: 600; }
.fsh-star    { color: var(--md-default-fg-color--lighter); }
.fsh-punct   { color: var(--md-default-fg-color--light); }

/* Dark scheme: the fixed hues above go muddy on a dark ground, so lift them. */
[data-md-color-scheme="slate"] .fsh-string { color: #9ccc65; }
[data-md-color-scheme="slate"] .fsh-code   { color: #f48fb1; }
[data-md-color-scheme="slate"] .fsh-url    { color: #81d4fa; }
[data-md-color-scheme="slate"] .fsh-caret  { color: #ce93d8; }
[data-md-color-scheme="slate"] .fsh-alias  { color: #ffb74d; }

/* Element details -- the per-element full definition, target of the element-name links in the
   tables. Standard IG Publisher puts this on a separate -definitions.html page; ours is a tab,
   so the blocks need to read as distinct records rather than as one long wall. */
.fhir-diff td.el a.el-ref { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.fhir-diff td.el a.el-ref:hover { color: var(--md-accent-fg-color); }
.el-detail { margin: 1.1rem 0; padding-top: .3rem; border-top: 1px solid var(--md-typeset-table-color, #e0e0e0); }
/* scroll-margin so an anchored jump does not tuck the heading under the sticky header */
.el-detail { scroll-margin-top: 4rem; }
.el-detail h4 { margin: .2rem 0 .45rem; font-size: .82rem; }
.el-detail h4 code { font-size: inherit; }
table.el-facets { font-size: .72rem; width: 100%; border-collapse: collapse; }
table.el-facets th { text-align: left; vertical-align: top; white-space: nowrap;
  width: 8.5rem; padding: .18em .6em .18em 0; font-weight: 600; opacity: .72; }
table.el-facets td { vertical-align: top; padding: .18em 0; }
/* "has comments" marker in the description cell -- a small circled i that jumps to Details.
   Deliberately quiet: it appears on many rows, so it must read as a hint, not a warning. */
a.cmt-ref { display: inline-block; width: .95em; height: .95em; line-height: .95em; margin-left: .3em;
  text-align: center; font-style: italic; font-size: .82em; font-weight: 700; text-decoration: none;
  border: 1px solid currentColor; border-radius: 50%; opacity: .55; vertical-align: baseline; }
a.cmt-ref:hover { opacity: 1; color: var(--md-accent-fg-color); }

/* Tab bar as LINKS, one page per tab (see sdPages in ig-docs). Deliberately plain anchors rather
   than a component: nothing but pymdownx parses `/// tab |`, and the component equivalents need
   MDX, where our raw element-table HTML becomes a JSX error. Links render anywhere. */
p.tabctx { display: none; }   /* the leaf label; kept in the DOM for search context, not shown */
nav.tabstrip { display: flex; flex-wrap: wrap; gap: .15rem; margin: .7rem 0 0;
  border-bottom: 2px solid var(--md-typeset-table-color, #e0e0e0); }
nav.tabstrip a { padding: .32rem .75rem; font-size: .78rem; text-decoration: none; line-height: 1.5;
  border: 1px solid transparent; border-bottom: none; border-radius: 3px 3px 0 0; color: var(--md-default-fg-color--light); }
nav.tabstrip a:hover { color: var(--md-accent-fg-color); background: var(--md-code-bg-color, #f5f5f5); }
nav.tabstrip a.cur { background: var(--md-code-bg-color, #f5f5f5); font-weight: 600;
  border-color: var(--md-typeset-table-color, #e0e0e0); color: var(--md-default-fg-color); }
nav.tabstrip.sub { border-bottom-width: 1px; margin-top: 0; }
nav.tabstrip.sub a { font-size: .72rem; padding: .22rem .6rem; }

/* ── Candidate-build banner (docs/theme/main.html) ────────────────────────────────────────────
   Shown only when the IG version ends in -candidate.

   NOT the brand ramp. Every other coloured surface here is WELLSTAR blue, so a warning painted in
   the brand colour reads as chrome and stops being seen after the first page -- and this one has
   to survive being scrolled past on all 988 of them. Literal colours rather than palette tokens
   for the same reason: the palette flips with the light/dark toggle, and this must read as a
   warning in both, so it does not participate in the toggle at all.

   Material sizes .md-banner__inner with md-grid, so the row aligns with the header and content
   columns rather than running edge to edge. */
.md-banner { background: #7d1d21; }
.md-banner .md-banner__inner { margin: 0 auto; }

.nexus-candidate {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .5rem 0;
  font-size: .68rem;
  line-height: 1.55;
  color: #fbe3e3;
}
.nexus-candidate__icon {
  flex: 0 0 auto;
  width: .95rem;
  height: .95rem;
  fill: #ff9d9d;
  position: relative;
  top: .16rem;
}
.nexus-candidate__text { display: block; }
.nexus-candidate__label {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  margin-right: .12rem;
}
.nexus-candidate__version {
  /* Reset Material's inline-code chrome: inside a solid warning bar its pale background and
     brand-tinted text both fight the bar. */
  background: rgba(255, 255, 255, .14);
  color: #fff;
  padding: .05rem .3rem;
  border-radius: .12rem;
  font-size: .95em;
  box-shadow: none;
}
.nexus-candidate__body { color: #f2cccc; }

/* Narrow screens: the sentence is the first thing to go, but the label and version -- the part
   that actually identifies the artifact -- stay. */
@media screen and (max-width: 44.9375em) {
  .nexus-candidate { font-size: .64rem; gap: .4rem; }
  .nexus-candidate__body { display: none; }
}

/* ============================================================
   Header / drawer source row: repository + release feed
   (see docs/theme/partials/source.html)
   ============================================================
   Material sizes `.md-header__source` as a fixed 11.7rem slot holding ONE block-level
   `.md-source`, and it hides or shows that slot -- and the drawer's `.md-nav__source` -- across
   three breakpoints. This row sits INSIDE those containers rather than restyling them, so all of
   that responsive logic still applies unchanged and none of it is restated here. */
.nexus-source {
  display: flex;
  align-items: center;
}
/* The repository name is the one that can run long, so it is the one that yields: it keeps
   Material's ellipsis (`.md-source__repository` is `overflow:hidden;text-overflow:ellipsis`),
   which needs `min-width:0` to engage on a flex item. */
.nexus-source > .md-source {
  flex: 0 1 auto;
  min-width: 0;
}
/* "RSS" is three characters and never worth truncating; it holds its width and the repository
   name gives way first. Each anchor's icon already carries a .6rem left margin of its own, so
   the two sit apart without a gap here. */
.nexus-source > .nexus-source__feed {
  flex: 0 0 auto;
}
/* Material caps the label at `calc(100% - 1.2rem)` of ITS ANCHOR, which is right when the anchor
   is a block filling the whole 11.7rem slot and wrong when it is a flex item shrink-wrapped to its
   own content: the cap then bites 1.2rem out of the text it was sizing, and both labels ellipsis
   ("G..." / "R...") inside a slot with 90px to spare. Released only within this row, where the
   flex line does the fitting instead. */
.nexus-source .md-source__repository {
  max-width: none;
}