/* Shared theme tokens for the two project tools.
 *
 * The tools arrived with opposite native palettes — the Kinderanästhesie card is
 * light on #ECEFF3, the Notarzt algorithm is dark on #0A0C0E — so both were
 * mapped onto one token set. Light is the Kinderanästhesie palette extended;
 * dark is the Notarzt palette extended. Each tool now renders in either.
 *
 * The semantic colours (danger / warn / ok / the severity ramp) are NOT
 * mechanical inversions. They carry clinical meaning, so each has a hand-picked
 * pair that keeps its hue recognisable and stays ≥4.5:1 against the surface it
 * actually sits on in that theme.
 */

:root {
  color-scheme: light;

  /* surfaces, from page backdrop inward */
  --bg: #ECEFF3;
  --surface: #FFFFFF;
  --surface-2: #FBFCFD;
  --surface-3: #F7F9FB;
  --surface-4: #F2F4F7;
  --surface-5: #EDF0F4;

  /* text, most to least prominent */
  --ink: #111418;
  --ink-2: #3D444A;
  --ink-3: #6B7278;
  --ink-4: #9AA4AD;

  /* hairlines, then the heavy structural frames the card design is built on */
  --line: #E2E6EA;
  --line-2: #C9CED4;
  --line-3: #B9C0C7;
  --rule: #111418;

  /* solid "this one is selected" fill, and what reads on top of it */
  --fill-strong: #111418;
  --on-fill-strong: #FFFFFF;

  --accent: #1B4DE4;
  --accent-2: #0F3F74;
  --accent-soft: #2B7FD4;

  --danger: #D8271B;
  --danger-2: #8F1C14;
  --danger-3: #7A1A13;
  --danger-soft: #C0261C;
  --danger-bg: #FDECEB;
  --danger-bg-2: #FFFAFA;

  --warn: #8F5A05;

  --ok: #12735A;
  --ok-2: #0D5B47;
  --ok-bg: #F8FDFB;

  --alert: #C2410C;
  --alert-2: #9A3412;
  --alert-line: #FED7AA;
  --alert-bg: #FFF7ED;

  /* decision-tree rows */
  --sel-bg: #E4EAF3;
  --on-sel: #111418;
  --sel-border: #6B7278;
  --row-bg: #FFFFFF;
  --row-bg-deep: #FBFCFD;
  --rail: #D6DBE1;
  --tone-ki: #6D28D9;

  /* time-criticality ramp: seconds -> merely urgent */
  --tier-10: #C1121F;
  --tier-9: #C2410C;
  --tier-8: #B45309;
  --tier-7: #7A5C00;
  --tier-6: #4D7C0F;
  --tier-5: #12735A;

  --scrollbar: #C9CED4;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0A0C0E;
  --surface: #14191D;
  --surface-2: #111519;
  --surface-3: #0D1013;
  --surface-4: #101418;
  --surface-5: #0E1216;

  --ink: #E6EAED;
  --ink-2: #C3CCD2;
  --ink-3: #8D979E;
  --ink-4: #6D787F;

  --line: #1E242A;
  --line-2: #262D33;
  --line-3: #333C44;
  --rule: #3A444C;

  --fill-strong: #E6EAED;
  --on-fill-strong: #0D1013;

  --accent: #7FD4FF;
  --accent-2: #B8E8FF;
  --accent-soft: #7FD4FF;

  --danger: #FF5A4D;
  --danger-2: #FF8F85;
  --danger-3: #FFB3AC;
  --danger-soft: #A83226;
  --danger-bg: #1F1412;
  --danger-bg-2: #17100F;

  --warn: #FF9F0A;

  --ok: #4CC38A;
  --ok-2: #7EE0B0;
  --ok-bg: #111A17;

  --alert: #FF6A2B;
  --alert-2: #FFB38A;
  --alert-line: #3A2318;
  --alert-bg: #1A1210;

  --sel-bg: #182028;
  --on-sel: #FFFFFF;
  --sel-border: #4C5C68;
  --row-bg: #131A1F;
  --row-bg-deep: #0E1216;
  --rail: #232A30;
  --tone-ki: #C98BFF;

  --tier-10: #FF3B30;
  --tier-9: #FF6A2B;
  --tier-8: #FF9F0A;
  --tier-7: #FFD60A;
  --tier-6: #9AD34A;
  --tier-5: #4CC38A;

  --scrollbar: #2B333A;
}

/* Repainting a whole clinical table in one frame reads as a glitch, so the
   toggle crossfades. The transition is armed only for the ~260ms around the
   switch (see kfSetTheme) — leaving it on permanently would put a 220ms fade
   on every hover in a 2000-row decision tree. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme-anim],
  :root[data-theme-anim] * {
    transition: background-color 220ms ease, border-color 220ms ease,
      color 220ms ease, fill 220ms ease !important;
  }
}

/* ---- KF chrome -------------------------------------------------------- */
/* The site's floating nav pill is marketing furniture; these two pages are
   tools, so they get a flat application bar instead. It is deliberately not
   sticky: both tools have their own sticky header, and two stacked sticky
   bars fight for the same 60 pixels. */

.kf-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 clamp(14px, 3vw, 26px);
  min-height: 52px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.kf-bar a {
  color: var(--ink-3);
  text-decoration: none;
}
.kf-bar a:hover {
  color: var(--ink);
}
.kf-bar-mark {
  font-family: Archivo, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
}
.kf-bar-crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.kf-bar-crumbs span {
  color: var(--ink-4);
}
.kf-bar-here {
  color: var(--ink) !important;
  letter-spacing: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kf-bar-spacer {
  flex: 1 1 auto;
}
.kf-bar-ctl {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.kf-lang {
  position: relative;
  display: flex;
  align-items: center;
}
.kf-lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: none;
  flex-direction: column;
  min-width: 136px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.45);
  z-index: 60;
}
.kf-lang-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 9px 11px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.kf-lang-menu button:hover {
  background: var(--surface-4);
}
.kf-lang-menu [data-lang-tick] {
  color: var(--accent);
}

/* The theme control, shared by both tools. */
[data-theme-toggle],
.kf-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  padding: 6px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}
[data-theme-toggle]:hover,
.kf-pill:hover {
  border-color: var(--rule);
  color: var(--ink);
}
[data-theme-toggle] svg {
  display: block;
}

/* A draft dose calculator says so on every screen, not only in the header. */
.kf-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px clamp(14px, 3vw, 26px);
  background: var(--danger-bg);
  border-bottom: 1px solid var(--danger-soft);
  color: var(--danger-2);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
}
.kf-note strong {
  color: var(--danger);
}

/* support.js pins #dc-root to 100% height for standalone tool pages; with a
   bar above it that would overflow the viewport by exactly the bar. */
#dc-root {
  height: auto !important;
}
[data-theme-toggle] [data-theme-icon="dark"] {
  display: none;
}
:root[data-theme="dark"] [data-theme-toggle] [data-theme-icon="dark"] {
  display: block;
}
:root[data-theme="dark"] [data-theme-toggle] [data-theme-icon="light"] {
  display: none;
}

/* Printing is always onto white paper, in either theme. */
@media print {
  :root,
  :root[data-theme="dark"] {
    color-scheme: light;
  }
}