/* Petrol blue and clear cyan: the calm, trusted palette of a public health record system */
[data-md-color-scheme="default"] {
  --signal: #0a6b7c;
  --signal-soft: rgba(10, 107, 124, 0.08);
  --headline: #14252b;
  --line: rgba(20, 37, 43, 0.12);
  --md-primary-fg-color: #0b4f5c;
  --md-primary-fg-color--light: #12606f;
  --md-primary-fg-color--dark: #083d47;
  --md-accent-fg-color: #0a6b7c;
  --md-typeset-a-color: #0a6b7c;
  --md-default-bg-color: #ffffff;
  --md-default-fg-color--light: #5f7177;
  --on-signal: #ffffff;
}
[data-md-color-scheme="slate"] {
  --signal: #5cc6d6;
  --signal-soft: rgba(92, 198, 214, 0.10);
  --headline: #e7f0f2;
  --line: rgba(220, 236, 240, 0.12);
  --md-primary-fg-color: #0b4f5c;
  --md-primary-fg-color--light: #12606f;
  --md-primary-fg-color--dark: #083d47;
  --md-accent-fg-color: #5cc6d6;
  --md-typeset-a-color: #5cc6d6;
  --md-default-bg-color: #0e1719;
  --md-code-bg-color: #132124;
  --on-signal: #0b2a30;
}

/* Body text two sizes down from the theme default */
.md-typeset { font-size: 0.7rem; }
.md-typeset h1 { font-size: 1.75em; color: var(--headline); }

/* Header and tabs */
.md-header, .md-tabs { background-color: var(--md-primary-fg-color); }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--signal); }
.md-header__button.md-logo svg { fill: #ffffff; }
.md-tabs__link--active, .md-tabs__link:hover { color: #ffffff; opacity: 1; }
.md-search__form { background: rgba(255,255,255,.14); }

/* Headings */
.md-typeset h1, .md-typeset h2 { font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.md-typeset h2 { border-top: 1px solid var(--line); padding-top: 1.2rem; }

/* Homepage hero */
.mcd-hero { padding: 1.6rem 0 0.4rem; }
.mcd-hero .eyebrow {
  font-family: var(--md-code-font-family);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--signal); margin: 0 0 0.8rem;
}
.md-typeset .mcd-hero h1 {
  font-size: clamp(1.7rem, 5.4vw, 2.6rem); line-height: 1.08; font-weight: 700;
  color: var(--headline); margin: 0 0 0.5rem; max-width: 22ch;
}
.md-typeset .mcd-hero .sub {
  font-size: 0.95rem; font-weight: 500; color: var(--signal); margin: 0 0 1rem;
}
.mcd-hero .lede { font-size: 0.85rem; line-height: 1.65; max-width: 64ch; opacity: 0.88; }
.mcd-hero .md-button { margin: 0.3rem 0.4rem 0.3rem 0; }
.md-typeset .mcd-hero .md-button--primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.md-typeset .mcd-hero .md-button--primary:hover { filter: brightness(1.08); color: var(--on-signal); }
.md-typeset .mcd-hero .md-button:not(.md-button--primary) { color: var(--signal); border-color: var(--signal); background: transparent; }
.md-typeset .mcd-hero .md-button:not(.md-button--primary):hover { background: var(--signal-soft); color: var(--signal); }

/* Stat strip */
.mcd-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 1.8rem 0 0.6rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.mcd-stats div { padding: 1rem 1rem 1rem 0; min-width: 0; }
.mcd-stats div + div { border-left: 1px solid var(--line); padding-left: 1rem; }
.mcd-stats strong {
  display: block; font-family: var(--md-code-font-family);
  font-size: 1.2rem; color: var(--signal); font-variant-numeric: tabular-nums;
}
.mcd-stats span { font-size: 0.66rem; line-height: 1.4; opacity: 0.75; }
@media (max-width: 520px) {
  .mcd-stats div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}

/* Labels */
.md-typeset .mcd-label {
  font-family: var(--md-code-font-family); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--signal); display: block; margin-bottom: 0.2rem;
}

/* Guide cards */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--md-default-bg-color); transition: border-color 0.2s ease;
}
.md-typeset .grid.cards > ul > li:hover { border-color: var(--signal); box-shadow: none; }
.md-typeset .grid.cards .lg { color: var(--signal); }

/* Change log */
.mcd-log { list-style: none; padding: 0; margin: 1rem 0; border-left: 2px solid var(--line); }
.md-typeset .mcd-log li { position: relative; margin: 0 0 1.1rem; padding-left: 1.2rem; }
.md-typeset .mcd-log li::before {
  content: ""; position: absolute; left: -7px; top: 0.35rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--md-default-bg-color); border: 2px solid var(--signal);
}
.mcd-log .date { font-family: var(--md-code-font-family); font-size: 0.72rem; letter-spacing: 0.06em; opacity: 0.8; }
.mcd-tag {
  display: inline-block; margin-left: 0.5rem; padding: 0 0.45rem; border-radius: 3px;
  font-family: var(--md-code-font-family); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--signal-soft); color: var(--signal); vertical-align: 1px;
}

/* Before and after notice */
.mcd-notice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.mcd-notice > div { border: 1px solid var(--line); border-radius: 6px; padding: 0.9rem 1rem; min-width: 0; }
.mcd-notice > div.after { border-color: var(--signal); background: var(--signal-soft); }
.md-typeset .mcd-notice p { margin: 0.4rem 0 0; font-size: 0.7rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }