/* OrthoWiki — editorial clinical reference theme.
   Built on top of mkdocs-material. Brand language from
   CQ Hand + Upper Limb (DESIGN_BRIEF.md): brand orange/pink
   gradient + Brandon Grotesque body, paired with Newsreader
   serif for display headings. */

/* -------------------------------------------------------- */
/* Brand fonts                                              */
/* -------------------------------------------------------- */

@font-face {
  font-family: "Brandon Grotesque";
  src: url("fonts/Brandon_reg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brandon Grotesque";
  src: url("fonts/Brandon_med.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brandon Grotesque";
  src: url("fonts/Brandon_bld.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------- */
/* Brand tokens                                             */
/* -------------------------------------------------------- */

:root,
[data-md-color-scheme="default"] {
  --ow-orange:       #db3808;
  --ow-orange-light: #e85a2f;
  --ow-orange-dark:  #b82e06;
  --ow-pink:         #da155c;
  --ow-pink-light:   #e8437d;
  --ow-pink-dark:    #b8104d;
  --ow-teal:         #3c958a;
  --ow-green:        #4e653a;

  --ow-ink:          #1a1a1a;
  --ow-ink-soft:     #4a4a4a;
  --ow-ink-mute:     #767676;
  --ow-rule:         #e7e3df;
  --ow-rule-soft:    #f0ece7;
  --ow-bg:           #fbf8f4;
  --ow-bg-card:     #ffffff;
  --ow-bg-warm:      #f6efe6;

  --ow-gradient: linear-gradient(135deg, var(--ow-orange) 0%, var(--ow-pink) 100%);
  --ow-gradient-soft: linear-gradient(
    135deg,
    rgba(219, 56, 8, 0.08) 0%,
    rgba(218, 21, 92, 0.08) 100%
  );

  --ow-display: "Newsreader", "Source Serif Pro", Georgia, serif;
  --ow-sans:    "Brandon Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --ow-mono:    "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* mkdocs-material palette overrides */
  --md-primary-fg-color:        var(--ow-ink);
  --md-primary-fg-color--light: var(--ow-ink-soft);
  --md-primary-fg-color--dark:  #000;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color:         var(--ow-orange);
  --md-accent-fg-color--transparent: rgba(219, 56, 8, 0.10);

  --md-default-bg-color:        var(--ow-bg);
  --md-default-fg-color:        var(--ow-ink);
  --md-default-fg-color--light: var(--ow-ink-soft);
  --md-default-fg-color--lighter: var(--ow-ink-mute);
  --md-default-fg-color--lightest: var(--ow-rule);

  --md-typeset-color:           var(--ow-ink);
  --md-typeset-a-color:         var(--ow-orange);

  --md-code-bg-color:           #f4ede2;
  --md-code-fg-color:           #6c2f08;

  --md-footer-bg-color:         var(--ow-ink);
  --md-footer-bg-color--dark:   #0d0d0d;
  --md-footer-fg-color:         #cfcbc6;
  --md-footer-fg-color--light:  #908b85;
  --md-footer-fg-color--lighter: #5a5651;
}

[data-md-color-scheme="slate"] {
  --ow-bg:           #131210;
  --ow-bg-card:      #1c1b18;
  --ow-bg-warm:      #1f1d18;
  --ow-ink:          #f4ede2;
  --ow-ink-soft:     #cfcbc6;
  --ow-ink-mute:     #908b85;
  --ow-rule:         #2e2c28;
  --ow-rule-soft:    #232220;

  --md-default-bg-color:        var(--ow-bg);
  --md-default-fg-color:        var(--ow-ink);
  --md-default-fg-color--light: var(--ow-ink-soft);
  --md-default-fg-color--lighter: var(--ow-ink-mute);
  --md-typeset-color:           var(--ow-ink);
  --md-typeset-a-color:         var(--ow-orange-light);

  --md-code-bg-color:           #28241d;
  --md-code-fg-color:           #f0c8a8;

  --md-primary-fg-color:        #0a0a0a;
}

/* -------------------------------------------------------- */
/* Typography                                               */
/* -------------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset,
.md-content,
.md-nav,
.md-header,
.md-footer,
.md-tabs {
  font-family: var(--ow-sans);
  font-feature-settings: "ss01", "tnum";
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--ow-display);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ow-ink);
}

.md-typeset h1 {
  font-size: 2.5rem;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 1.6rem;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.md-typeset h2 {
  font-size: 1.5rem;
  line-height: 1.18;
  margin-top: 2.6rem;
  padding-top: 0.85rem;
  position: relative;
  border-top: none;
}

/* Brand-orange tick instead of a full-width rule between sections —
   gives each H2 a quiet editorial marker without dividing the page
   into hard slabs. */
.md-typeset h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.2rem;
  height: 2px;
  background: var(--ow-gradient);
  border-radius: 1px;
  opacity: 0.95;
}

.md-typeset h2:first-of-type {
  margin-top: 0.4rem;
  padding-top: 0;
}

.md-typeset h2:first-of-type::before {
  display: none;
}

.md-typeset h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin-top: 1.6rem;
  font-weight: 600;
}

.md-typeset {
  font-size: 0.82rem;       /* ≈14.5px — readable, journal-tight */
  line-height: 1.65;
}

.md-typeset p,
.md-typeset li {
  color: var(--ow-ink-soft);
}

.md-typeset a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(219, 56, 8, 0.4);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.md-typeset a:hover {
  color: var(--ow-pink);
  text-decoration-color: var(--ow-pink);
}

.md-typeset code {
  font-family: var(--ow-mono);
  font-size: 0.84em;
  padding: 0.08em 0.36em;
  border-radius: 3px;
}

/* -------------------------------------------------------- */
/* Header                                                   */
/* -------------------------------------------------------- */

.md-header {
  background: var(--ow-bg);
  color: var(--ow-ink);
  box-shadow: none;
  border-bottom: 1px solid var(--ow-rule);
  position: relative;
}

.md-header[data-md-state="shadow"] {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* Diagonal brand stripe — single signature gesture */
.md-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: var(--ow-gradient);
  opacity: 0.92;
}

.md-header__title {
  font-family: var(--ow-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 1rem;
}

.md-header__topic > .md-ellipsis,
.md-header__title .md-header__topic .md-ellipsis {
  font-family: var(--ow-display);
  font-style: italic;
  letter-spacing: -0.005em;
}

.md-header__button.md-logo {
  margin-right: 0.4rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.4rem;
  width: auto;
}

.md-search__form {
  background-color: var(--ow-bg-warm);
  border: 1px solid var(--ow-rule);
  border-radius: 999px;
}

.md-search__form:hover,
.md-search__form:focus-within {
  border-color: var(--ow-orange);
  background-color: #ffffff;
}

[data-md-color-scheme="slate"] .md-search__form {
  background-color: #232220;
  border-color: #2e2c28;
}

/* Search dropdown panel */
.md-search__output {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background: var(--ow-bg-card);
}

.md-search-result__meta {
  background: var(--ow-bg-warm);
  color: var(--ow-ink-mute);
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-top: none;
  border-bottom: 1px solid var(--ow-rule);
}

.md-search-result__article {
  background: var(--ow-bg-card);
  border-bottom: 1px solid var(--ow-rule);
  padding: 0.4rem 0.8rem 0.5rem;
}

.md-search-result__article:hover,
.md-search-result__article:focus {
  background: var(--ow-bg-warm);
}

.md-search-result__title {
  font-family: var(--ow-display);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--ow-ink);
  letter-spacing: -0.005em;
}

.md-search-result__teaser {
  font-family: var(--ow-sans);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ow-ink-soft);
}

.md-search-result__teaser mark,
.md-search-result__title mark {
  background: rgba(219, 56, 8, 0.12);
  color: var(--ow-orange-dark);
  padding: 0 0.12em;
  border-radius: 2px;
}

[data-md-color-scheme="slate"] .md-search-result__teaser mark,
[data-md-color-scheme="slate"] .md-search-result__title mark {
  background: rgba(232, 90, 47, 0.18);
  color: var(--ow-orange-light);
}

/* Tabs (For Clinicians / For Patients) */
.md-tabs {
  background: var(--ow-bg);
  color: var(--ow-ink);
  border-bottom: 1px solid var(--ow-rule);
}

.md-tabs__link {
  font-family: var(--ow-sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.005em;
  opacity: 0.65;
  margin-top: 0;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid transparent;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.md-tabs__link:hover {
  opacity: 1;
  color: var(--ow-orange);
}

.md-tabs__link--active {
  opacity: 1;
  color: var(--ow-orange);
  border-bottom-color: var(--ow-orange);
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background: var(--ow-bg);
  color: var(--ow-ink);
  border-bottom-color: var(--ow-rule);
}

/* -------------------------------------------------------- */
/* Sidebar nav                                              */
/* -------------------------------------------------------- */

.md-nav__title {
  font-family: var(--ow-display);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: -0.005em;
  color: var(--ow-ink);
}

.md-nav__link {
  color: var(--ow-ink-soft);
  font-size: 0.74rem;
  line-height: 1.4;
  padding-block: 0.32rem;
}

.md-nav__link:hover {
  color: var(--ow-orange);
}

.md-nav__link--active,
.md-nav__link--active:focus,
.md-nav__link--active:hover {
  color: var(--ow-orange);
  font-weight: 600;
}

/* -------------------------------------------------------- */
/* Body content                                             */
/* -------------------------------------------------------- */

.md-main__inner {
  margin-top: 0.8rem;
}

.md-content__inner {
  padding-top: 0.4rem;
}

.md-content__inner > h1:first-child + p {
  font-family: var(--ow-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--ow-ink-soft);
  margin-bottom: 1.6rem;
  border-left: 2px solid var(--ow-orange);
  padding-left: 1rem;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--ow-rule);
  border-radius: 6px;
  font-size: 0.78rem;
}

.md-typeset table:not([class]) th {
  background: var(--ow-bg-warm);
  color: var(--ow-ink);
  font-family: var(--ow-sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.7rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ow-rule);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: var(--ow-rule-soft);
}

/* -------------------------------------------------------- */
/* Footer                                                   */
/* -------------------------------------------------------- */

.md-footer {
  background: var(--ow-ink);
}

.md-footer-meta {
  background: #0a0a0a;
  font-size: 0.72rem;
}

.md-footer__title,
.md-footer__direction {
  font-family: var(--ow-sans);
}

/* Page-end disclaimer (rendered above the dark footer band on every
   page). Drop the body-text size so it reads as fine print. */

/* The disclaimer's `.md-grid` wrapper inherits a wider max-width than
   `.md-content__inner`, so the text was extending ~16px past the
   content edges on both sides. Add explicit horizontal padding to
   shrink the inner column so it lines up with the body text + home
   `__below` paragraphs above it. */
.orthowiki-disclaimer {
  padding: 0.6rem 16px 0.4rem;
  text-align: left;
}

.orthowiki-disclaimer .md-typeset {
  font-size: 0.6rem;
  line-height: 1.55;
  color: var(--ow-ink-mute);
  text-align: left;
  max-width: none;
}

.orthowiki-disclaimer .md-typeset p {
  margin: 0.2rem 0;
  color: inherit;
  text-align: left;
}

.orthowiki-disclaimer .md-typeset strong {
  color: var(--ow-ink-soft);
}

[data-md-color-scheme="slate"] .orthowiki-disclaimer .md-typeset {
  color: var(--ow-ink-mute);
}

[data-md-color-scheme="slate"] .orthowiki-disclaimer .md-typeset strong {
  color: var(--ow-ink-soft);
}

/* -------------------------------------------------------- */
/* Audience chooser (home page)                             */
/* -------------------------------------------------------- */

.ow-home {
  display: block;
  margin: 0 auto;
  max-width: 64rem;
}

.ow-home__hero {
  display: block;
  padding: 1.4rem 0 1.2rem;
  border-bottom: 1px solid var(--ow-rule);
}

.ow-home__eyebrow {
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ow-orange);
  margin: 0 0 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.ow-home__eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 2px;
  background: var(--ow-gradient);
  border-radius: 1px;
}

.ow-home__title {
  font-family: var(--ow-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  color: var(--ow-ink);
  margin: 0 0 0.4rem;
}

.ow-home__title em {
  font-style: italic;
  color: var(--ow-orange);
}

.ow-home__lede {
  font-family: var(--ow-display);
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.45;
  color: var(--ow-ink-soft);
  margin: 0;
  max-width: 28rem;
}

.ow-home__byline {
  font-family: var(--ow-sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ow-ink-mute);
  margin: 0;
}

.ow-home__byline strong {
  color: var(--ow-ink);
  font-weight: 600;
}

/* Metric strip */
.ow-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 1rem 0 1.2rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ow-rule);
}

.ow-stats__item {
  padding: 0.1rem 1rem;
  border-left: 1px solid var(--ow-rule);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.ow-stats__item:first-child {
  border-left: none;
  padding-left: 0;
}

.ow-stats__num {
  font-family: var(--ow-display);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 500;
  color: var(--ow-ink);
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

.ow-stats__label {
  font-family: var(--ow-sans);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ow-ink-mute);
}

/* What's New feed page (and per-region feed pages) */
.ow-feed {
  display: block;
  margin: 0 auto;
  max-width: 64rem;
}

/* mkdocs-material's `.md-typeset` rules out-specify a single class —
   same trap as .ow-jump__list above. !important keeps the pill row
   horizontal and overrides the typeset list margins. */
.md-typeset .ow-feed__pills,
.ow-feed__pills {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.4rem !important;
  padding: 0 !important;
}

.ow-feed__pill {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  font-family: var(--ow-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ow-ink);
  background: var(--ow-bg-card);
  border: 1px solid var(--ow-rule);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.ow-feed__pill:hover,
.ow-feed__pill:focus-visible {
  color: var(--ow-orange);
  border-color: var(--ow-orange);
}

.ow-feed__pill--active {
  color: #fff !important;
  background: var(--ow-gradient) !important;
  border-color: transparent !important;
}

.ow-feed__pill--active:focus-visible {
  outline: 2px solid var(--ow-orange);
  outline-offset: 2px;
}

.ow-feed__month {
  font-family: var(--ow-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ow-ink-mute);
  margin: 1.6rem 0 0.7rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--ow-rule);
}

/* Defeat the global brand-orange tick that .md-typeset h2::before adds —
   the month heading already has a bottom border and shouldn't carry
   a second editorial marker. */
.ow-feed__month::before {
  content: none;
}

.ow-feed__group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin: 0 0 0.4rem;
}

@media (min-width: 50rem) {
  .ow-feed__group {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.9rem;
  }
}

.ow-feed__card {
  position: relative;
  display: block;
  padding: 0.85rem 1rem 0.95rem 1.2rem;
  background: var(--ow-bg-card);
  border: 1px solid var(--ow-rule);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ow-feed__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--ow-gradient);
  transition: height 0.25s ease;
}

.ow-feed__card:hover {
  transform: translateY(-1px);
  border-color: var(--ow-ink);
  box-shadow: 0 10px 20px -16px rgba(26, 26, 26, 0.25);
}

.ow-feed__card:hover::before {
  height: 100%;
}

.ow-feed__card-kicker {
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ow-orange);
  margin: 0 0 0.2rem;
}

.ow-feed__card-month {
  font-family: var(--ow-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ow-ink);
  margin: 0 0 0.3rem;
}

.ow-feed__card-themes {
  font-family: var(--ow-display);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--ow-ink-soft);
  margin: 0;
}

/* Audience cards */
.ow-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 0 0 1.4rem;
}

@media (min-width: 50rem) {
  .ow-cards {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

.ow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 6rem;
  padding: 1rem 1.2rem 0.95rem;
  background: var(--ow-bg-card);
  border: 1px solid var(--ow-rule);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ow-card::before {
  /* Diagonal accent bar in the top-left corner */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--ow-gradient);
  transition: height 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.ow-card:hover {
  transform: translateY(-2px);
  border-color: var(--ow-ink);
  box-shadow: 0 18px 40px -24px rgba(26, 26, 26, 0.25);
}

.ow-card:hover::before {
  height: 100%;
}

.ow-card--surgeon {
  background:
    linear-gradient(180deg, var(--ow-bg-card) 0%, var(--ow-bg-warm) 100%);
}

.ow-card--patient {
  background: var(--ow-bg-warm);
  color: var(--ow-ink-soft);
}

.ow-card__kicker {
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ow-orange);
  margin: 0 0 0.4rem;
}


.ow-card__title {
  font-family: var(--ow-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ow-ink);
  margin: 0 0 0.4rem;
}

.ow-card__title em {
  font-style: italic;
}

.ow-card__body {
  font-family: var(--ow-display);
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ow-ink-soft);
  margin: 0 0 0.6rem;
  max-width: 32ch;
}

.ow-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ow-orange);
  margin-top: auto;
}

.ow-card__cta::after {
  content: "→";
  font-weight: 400;
  transition: transform 0.2s ease;
}

.ow-card:hover .ow-card__cta::after {
  transform: translateX(4px);
}

.ow-card__badge {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ow-ink-mute);
  background: var(--ow-bg-card);
  border: 1px solid var(--ow-rule);
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
}

/* Hide mkdocs's default H1 on the home page — we render our own. */
.md-content__inner > h1.ow-home__title-stub {
  display: none;
}

/* -------------------------------------------------------- */
/* 404 page                                                 */
/* -------------------------------------------------------- */

.ow-404 {
  max-width: 44rem;
  margin: 1.4rem auto 4rem;
}

.ow-404 .ow-home__title {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
}

.ow-404 .ow-home__lede {
  max-width: 36rem;
  margin-top: 0.6rem;
}

/* -------------------------------------------------------- */
/* References list (synthesis topic pages)                  */
/* -------------------------------------------------------- */

/* `## References` is rendered with a `[N]` paragraph per reference.
   Tighten the type and add a hanging indent so the numbers line up
   like a journal bibliography. */
.md-typeset h2[id="references"] ~ p {
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ow-ink-soft);
  margin: 0.35rem 0;
  text-indent: -1.6rem;
  padding-left: 1.6rem;
}

.md-typeset h2[id="references"] ~ p a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Highlight the targeted reference when an in-text citation jumps
   to it. The `id` lives on the `<strong>` produced by attr_list, so
   target-styling lights up the bracket prefix; we also tint the
   paragraph background briefly so it's easier to find on the page. */
.md-typeset .md-content :target,
.md-typeset h2[id="references"] ~ p strong:target {
  background: rgba(219, 56, 8, 0.12);
  border-radius: 3px;
  padding: 0 0.2em;
  scroll-margin-top: 4.5rem;
}

.md-typeset h2[id="references"] ~ p:has(strong:target) {
  background: linear-gradient(
    90deg,
    rgba(219, 56, 8, 0.06) 0%,
    rgba(219, 56, 8, 0.0) 60%
  );
  border-radius: 4px;
}

/* In-text citation marker `[N]` — small brand-orange link, no
   underline by default, tighter line-height so a row of `[1, 2, 3]`
   doesn't push line spacing around. */
.md-typeset a.ow-cite {
  color: var(--ow-orange);
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.72em;
  line-height: 1;
  vertical-align: 0.12em;
  text-decoration: none;
  padding: 0 0.05em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.md-typeset a.ow-cite:hover {
  color: var(--ow-pink);
  border-bottom-color: var(--ow-pink);
}

[data-md-color-scheme="slate"] .md-typeset a.ow-cite {
  color: var(--ow-orange-light);
}

/* -------------------------------------------------------- */
/* Featured banner card (audience landing)                  */
/* -------------------------------------------------------- */

.md-typeset .ow-feature,
.ow-feature {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.2rem 1.4rem;
  padding: 1.2rem 1.4rem 1.1rem 1.6rem;
  margin: 1.4rem 0 1.6rem;
  background: linear-gradient(135deg, var(--ow-bg-card) 0%, var(--ow-bg-warm) 100%);
  border: 1px solid var(--ow-rule);
  border-radius: 4px;
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.ow-feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--ow-gradient);
  opacity: 0.95;
  z-index: 1;
}

/* Invisible <a> that stretches over the card so the whole banner is
   clickable. Placed last so it's on top of the inline content for
   click capture. The inner spans stay non-interactive and inherit
   styling from the card. */
.ow-feature__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-indent: -9999px;
  overflow: hidden;
}

.ow-feature:hover {
  border-color: var(--ow-ink);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -24px rgba(26, 26, 26, 0.25);
}

.ow-feature__text {
  display: grid;
  gap: 0.3rem;
}

.ow-feature__kicker {
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ow-orange);
}

.ow-feature__title {
  font-family: var(--ow-display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ow-ink);
}

.ow-feature__body {
  font-family: var(--ow-display);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ow-ink-soft);
  max-width: 44ch;
}

.ow-feature__cta {
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ow-orange);
  white-space: nowrap;
}

.ow-feature__cta::after {
  content: " →";
  transition: transform 0.2s ease;
  display: inline-block;
}

.ow-feature:hover .ow-feature__cta::after {
  transform: translateX(4px);
}

@media (max-width: 36rem) {
  .md-typeset .ow-feature,
  .ow-feature {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

[data-md-color-scheme="slate"] .ow-feature {
  background: linear-gradient(135deg, var(--ow-bg-card) 0%, #221f1a 100%);
}

/* -------------------------------------------------------- */
/* Region + audience card grids                             */
/* -------------------------------------------------------- */

.md-typeset .ow-grid,
.ow-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.7rem;
  margin: 1.4rem 0 2rem;
  list-style: none !important;
  padding: 0 !important;
}

@media (min-width: 50rem) {
  .md-typeset .ow-grid,
  .ow-grid {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.85rem;
  }
}

.ow-grid--regions {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.ow-grid__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.95rem 1rem 0.9rem;
  background: var(--ow-bg-card);
  border: 1px solid var(--ow-rule);
  border-radius: 4px;
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.ow-grid__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--ow-gradient);
  transition: height 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.ow-grid__card:hover {
  border-color: var(--ow-ink);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -22px rgba(26, 26, 26, 0.25);
}

.ow-grid__card:hover::before {
  height: 100%;
}

.ow-grid__title {
  font-family: var(--ow-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ow-ink);
}

.ow-grid__summary {
  font-family: var(--ow-sans);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ow-ink-mute);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ow-grid--regions .ow-grid__summary {
  font-family: var(--ow-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ow-ink-mute);
  -webkit-line-clamp: 1;
}

.ow-grid__cta {
  margin-top: auto;
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ow-orange);
}

[data-md-color-scheme="slate"] .ow-grid__card {
  background: var(--ow-bg-card);
}

[data-md-color-scheme="slate"] .ow-grid__card:hover {
  border-color: var(--ow-orange-light);
}

/* -------------------------------------------------------- */
/* Dark-mode card surface tweaks                            */
/* -------------------------------------------------------- */

[data-md-color-scheme="slate"] .ow-card {
  background: var(--ow-bg-card);
}

[data-md-color-scheme="slate"] .ow-card--surgeon {
  background: linear-gradient(180deg, var(--ow-bg-card) 0%, #221f1a 100%);
}

[data-md-color-scheme="slate"] .ow-card--patient {
  background: #1a1815;
}

[data-md-color-scheme="slate"] .ow-jump__list a,
[data-md-color-scheme="slate"] .ow-card__badge {
  background: var(--ow-bg-card);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border-color: var(--ow-rule);
}

/* -------------------------------------------------------- */
/* Patient handout — circular PDF icon next to topic title  */
/* -------------------------------------------------------- */

.md-typeset h1 .ow-handout-icon,
.md-typeset .ow-handout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 2rem;
  height: 2rem;
  margin: 0 0 0.25rem 0.6rem;
  font-family: var(--ow-sans);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--ow-orange);
  background: #ffffff;
  border: 1.5px solid var(--ow-orange);
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  /* Counteract the H1's typography — the title is in display serif at
     ~2rem; without these resets the icon would inherit those values. */
  text-transform: none;
  font-style: normal;
}

.md-typeset h1 .ow-handout-icon:hover,
.md-typeset h1 .ow-handout-icon:focus,
.md-typeset .ow-handout-icon:hover,
.md-typeset .ow-handout-icon:focus {
  background: var(--ow-orange);
  color: #ffffff;
}

/* Evidence-PDF button — a labelled PILL. The round "PDF" icon style can't fit
   a word, so override only the circle geometry; the orange outline + hover are
   inherited from .ow-handout-icon. Source order (after) wins on equal specificity. */
.md-typeset h1 .ow-evidence-icon,
.md-typeset .ow-evidence-icon {
  width: auto;
  border-radius: 1rem;
  padding: 0 0.55rem;
  gap: 0.25rem;
}

/* -------------------------------------------------------- */
/* Patient page footer (standardised across patient tree)   */
/* -------------------------------------------------------- */

.md-typeset .ow-patient-footer {
  margin: 2.4rem 0 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ow-rule);
  display: grid;
  gap: 0.45rem;
}

.md-typeset .ow-patient-footer p {
  margin: 0;
  font-family: var(--ow-sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ow-ink-soft);
}

.md-typeset .ow-patient-footer__reviewed {
  font-size: 0.72rem;
  color: var(--ow-ink-mute);
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------- */
/* Collapsed references list (patient pages)                */
/* -------------------------------------------------------- */

.md-typeset details.ow-references {
  margin: 1.4rem 0 1.6rem;
  border: 1px solid var(--ow-rule);
  border-radius: 4px;
  padding: 0.45rem 0.9rem;
  background: var(--ow-bg-warm);
}

.md-typeset details.ow-references > summary {
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ow-ink-mute);
  cursor: pointer;
  list-style: none;
  padding: 0.2rem 0;
}

.md-typeset details.ow-references > summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 0.4rem;
  transition: transform 0.2s ease;
}

.md-typeset details.ow-references[open] > summary::before {
  transform: rotate(90deg);
}

.md-typeset details.ow-references ol.ow-references__list {
  margin: 0.6rem 0 0.4rem 1.2rem;
  padding: 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ow-ink-soft);
}

.md-typeset details.ow-references li {
  margin-bottom: 0.45rem;
}

/* -------------------------------------------------------- */
/* Print stylesheet (Cmd+P → clean A4 handout)              */
/* -------------------------------------------------------- */

@media print {
  /* Strip browser chrome + site navigation. */
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-search,
  .md-footer,
  .orthowiki-disclaimer,
  .md-skip,
  .md-content__button {
    display: none !important;
  }

  /* Force the brand stripe to a thin top rule. */
  .md-header::after { display: none; }

  body, .md-main, .md-content, .md-content__inner {
    background: #fff !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  .md-typeset {
    font-size: 11pt;
    line-height: 1.45;
    color: #000;
  }

  .md-typeset h1 {
    font-size: 22pt;
    margin-top: 0;
    page-break-after: avoid;
  }
  .md-typeset h2 {
    font-size: 14pt;
    margin-top: 1.2em;
    page-break-after: avoid;
    border-top: 1px solid #ccc !important;
    padding-top: 0.4em;
  }
  .md-typeset h2::before { display: none; }
  .md-typeset h3 {
    font-size: 12pt;
    page-break-after: avoid;
  }

  /* Print URL after every external link so the paper version is
     useful — patients can type the URL in later. */
  .md-typeset a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  /* Force `<details>` open in print so references aren't hidden. */
  details, details.ow-references {
    border: 1px solid #ccc !important;
    background: #fff !important;
    page-break-inside: avoid;
  }
  details > *,
  details[open] > * {
    display: block !important;
  }
  details > summary {
    list-style: none;
    font-weight: 600;
  }
  details > summary::before { display: none; }

  .ow-cite {
    color: #000 !important;
    font-weight: 600;
  }

  @page {
    size: A4;
    margin: 18mm 16mm 20mm 16mm;
  }
}

/* Patient anatomy figures (hero + inline). The figure caption gives
   plain-language context; the credit line is the legal attribution and
   stays visually subordinate but readable. */
.md-typeset figure.ow-figure {
  margin: 1.5rem auto;
  max-width: 36rem;
  text-align: center;
}

.md-typeset figure.ow-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.md-typeset figure.ow-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--md-default-fg-color--light, #555);
  text-align: center;
}

.md-typeset figure.ow-figure .ow-figure__caption {
  display: block;
  font-style: italic;
}

.md-typeset figure.ow-figure .ow-figure__credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--lighter, #888);
}

.md-typeset figure.ow-figure .ow-figure__credit-source,
.md-typeset figure.ow-figure .ow-figure__credit-version {
  font-size: inherit;
  color: inherit;
}

.md-typeset figure.ow-figure .ow-figure__credit-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  /* Caption icons inherit color/orange from .ow-licence-icon. The
     credit row sits below the caption text in muted grey, so giving
     the icons their own color keeps them legible without overpowering. */
  color: var(--ow-orange);
}

@media print {
  .md-typeset figure.ow-figure {
    page-break-inside: avoid;
  }
  .md-typeset figure.ow-figure img {
    box-shadow: none;
  }
}

/* mkdocs-material renders ¶ permalink anchors next to every heading,
   visible on hover. They're useful for dev docs (copy anchor URL) but
   distracting on a patient site — they appear when the mouse passes
   near the heading and look like editing marks. Hide them everywhere
   on the site. */
.md-typeset .headerlink {
  display: none !important;
}

/* Patient region landing — placeholder block for sections without
   content yet (e.g. "How your shoulder works" before anatomy pages
   land). Visually quiet so it doesn't compete with populated grids
   above and below it. */
.md-typeset p.ow-coming-soon {
  margin: 0.5rem 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--md-default-fg-color--lightest, #ddd);
  background: var(--md-code-bg-color, #f6f6f6);
  color: var(--md-default-fg-color--light, #555);
  font-style: italic;
  border-radius: 0 4px 4px 0;
}

/* Sticky theme TOC at top of monthly digest page */
.ow-theme-toc {
  position: sticky;
  top: var(--md-header-height, 3rem);
  z-index: 5;
  margin: 0.6rem 0 1rem;
  padding: 0.55rem 0.6rem;
  background: var(--ow-bg);
  border-top: 1px solid var(--ow-rule);
  border-bottom: 1px solid var(--ow-rule);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.md-typeset .ow-theme-toc ul,
.ow-theme-toc ul {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 0.35rem;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

.md-typeset .ow-theme-toc li,
.ow-theme-toc li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.md-typeset .ow-theme-toc li::before,
.md-typeset .ow-theme-toc li::marker {
  content: none !important;
  display: none !important;
}

.ow-theme-toc a {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  font-family: var(--ow-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ow-ink-soft);
  background: var(--ow-bg-card);
  border: 1px solid var(--ow-rule);
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ow-theme-toc a:hover,
.ow-theme-toc a:focus-visible {
  color: var(--ow-orange);
  border-color: var(--ow-orange);
}

/* About page */
.ow-about {
  display: block;
  margin: 0 auto;
  max-width: 48rem;
  padding: 1.4rem 0;
}

.ow-about__hero {
  margin-bottom: 1rem;
}

.ow-about__eyebrow {
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ow-orange);
  margin: 0 0 0.5rem;
}

.ow-about__title {
  font-family: var(--ow-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
  margin: 0;
}

.ow-about__body {
  margin-top: 1.4rem;
  font-family: var(--ow-display);
  line-height: 1.55;
  color: var(--ow-ink-soft);
}

.ow-about__body p {
  margin: 0 0 0.9rem;
}

.ow-about__body a {
  color: var(--ow-orange);
}

/* Region pill row used ONLY by the 404 page (overrides/404.html).
   Was previously also on the home page; the home redesign in
   2026-05-09 dropped it from /, but 404.html still depends on
   these styles. Don't delete unless 404.html stops using them. */
.ow-jump {
  margin: 0 0 1.4rem;
}

.ow-jump__title {
  font-family: var(--ow-sans);
  font-weight: 600;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ow-ink-mute);
  margin: 0 0 0.55rem;
}

/* mkdocs-material's `.md-typeset ul/li` rules out-specify a single
   class; force a higher-specificity selector and !important so our
   pill row stays horizontal. */
.md-typeset .ow-jump__list,
.ow-jump__list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.45rem 0.5rem;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.md-typeset .ow-jump__list li,
.ow-jump__list li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
}

.md-typeset .ow-jump__list li::before,
.ow-jump__list li::before,
.md-typeset .ow-jump__list li::marker {
  content: none !important;
  display: none !important;
}

.ow-jump__list a {
  display: inline-block;
  font-family: var(--ow-sans);
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--ow-ink);
  background: var(--ow-bg-card);
  border: 1px solid var(--ow-rule);
  border-radius: 999px;
  padding: 0.34rem 0.85rem;
  text-decoration: none;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.ow-jump__list a:hover {
  color: var(--ow-orange);
  border-color: var(--ow-orange);
  background: #ffffff;
}

/* 3-up home card row */
.ow-home__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 0 0 1.4rem;
}

@media (min-width: 50rem) {
  .ow-home__cards {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }
}

.ow-home__card--whatsnew {
  position: relative;
  background: var(--ow-bg-card);
}

.ow-home__card--whatsnew::before {
  /* Permanent gradient stripe — distinguishes WN from audience cards */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--ow-gradient);
}

/* Footer strip on home */
.ow-home__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0 0;
  border-top: 1px solid var(--ow-rule);
  font-family: var(--ow-sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ow-ink-mute);
}

.ow-home__footer a {
  color: var(--ow-ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.ow-home__footer a:hover,
.ow-home__footer a:focus-visible {
  color: var(--ow-orange);
}

.ow-home__footer-sep {
  color: var(--ow-rule);
}


/* CC BY-NC 4.0 licence modal (opens from /about page) */
.ow-licence {
  width: min(80ch, 92vw);
  max-height: 85vh;
  padding: 0;
  border: 1px solid var(--ow-rule);
  border-radius: 6px;
  background: var(--ow-bg-card);
  color: var(--ow-ink);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.ow-licence::backdrop {
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(2px);
}

.ow-licence__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--ow-rule);
  background: var(--ow-bg-warm);
}

.ow-licence__heading {
  font-family: var(--ow-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ow-ink);
  margin: 0;
}

.ow-licence__close {
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--ow-sans);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ow-ink-soft);
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.ow-licence__close:hover,
.ow-licence__close:focus-visible {
  color: var(--ow-orange);
  background: var(--ow-bg-card);
  border-color: var(--ow-rule);
  outline: none;
}

.ow-licence__body {
  max-height: calc(85vh - 3.2rem);
  overflow-y: auto;
  padding: 1.2rem 1.4rem 1.4rem;
}

.ow-licence__pre {
  font-family: var(--ow-display);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ow-ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
}

/* ---- CC licence: icons + modal document styling ---- */

/* Inline CC icon — rendered via CSS mask so the SVG glyph picks up
   currentColor (which falls back to the link color, brand orange). */
.ow-licence-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  margin: 0 0.05em;
  background-color: currentColor;
  color: var(--ow-orange);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

[data-md-color-scheme="slate"] .ow-licence-icon {
  color: var(--ow-orange-light);
}

.ow-licence-icon--lg {
  width: 1.6rem;
  height: 1.6rem;
  vertical-align: middle;
}

.ow-licence-icon--cc   { -webkit-mask-image: url(/assets/cc/cc.svg);   mask-image: url(/assets/cc/cc.svg); }
.ow-licence-icon--by   { -webkit-mask-image: url(/assets/cc/by.svg);   mask-image: url(/assets/cc/by.svg); }
.ow-licence-icon--nc   { -webkit-mask-image: url(/assets/cc/nc.svg);   mask-image: url(/assets/cc/nc.svg); }
.ow-licence-icon--sa   { -webkit-mask-image: url(/assets/cc/sa.svg);   mask-image: url(/assets/cc/sa.svg); }
.ow-licence-icon--nd   { -webkit-mask-image: url(/assets/cc/nd.svg);   mask-image: url(/assets/cc/nd.svg); }
.ow-licence-icon--zero { -webkit-mask-image: url(/assets/cc/zero.svg); mask-image: url(/assets/cc/zero.svg); }
.ow-licence-icon--pd   { -webkit-mask-image: url(/assets/cc/pd.svg);   mask-image: url(/assets/cc/pd.svg); }

/* Trigger link: tighten icon spacing, hide underline behind icons */
.ow-licence-link {
  display: inline;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.ow-licence-link span {
  margin-left: 0.25em;
  border-bottom: 1px solid currentColor;
}

.ow-licence-link:hover span,
.ow-licence-link:focus-visible span {
  border-bottom-color: var(--ow-orange);
  color: var(--ow-orange);
}

/* Home page footer: just the icons, no span */
.ow-home__footer-licence {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  margin-left: 0.1rem;
}

/* ---- Modal heading: icon row before the title ---- */

.ow-licence__heading {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ow-licence__heading .ow-licence-icon {
  width: 1.4rem;
  height: 1.4rem;
  vertical-align: middle;
}

.ow-licence__heading > span {
  margin-left: 0.4rem;
}

/* ---- Modal body: legend table + parsed licence document ---- */

.ow-licence__legend {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-family: var(--ow-sans);
  font-size: 0.85rem;
  color: var(--ow-ink-soft);
}

.ow-licence__legend td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--ow-rule);
  vertical-align: middle;
}

.ow-licence__legend td:first-child {
  width: 2.4rem;
  text-align: center;
}

.ow-licence__legend td strong {
  color: var(--ow-ink);
  font-weight: 600;
  margin-right: 0.4rem;
}

.ow-licence__legend tr:last-child td {
  border-bottom: none;
}

/* The parsed licence document (between hrs) */
.ow-licence__doc {
  font-family: var(--ow-display);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ow-ink);
}

.ow-licence__title {
  font-family: var(--ow-display);
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 500;
  text-align: center;
  color: var(--ow-ink);
  margin: 0 0 1rem;
}

.ow-licence__rule {
  border: 0;
  height: 1px;
  background: var(--ow-rule);
  margin: 1.4rem 0;
}

.ow-licence__section {
  font-family: var(--ow-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--ow-ink);
  margin: 1.4rem 0 0.6rem;
}

.ow-licence__subheading {
  /* sub-heading inside the doc (e.g. "Using Creative Commons Public Licenses") */
  font-family: var(--ow-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ow-ink);
  margin: 1rem 0 0.4rem;
}

.ow-licence__p {
  text-align: justify;
  hyphens: auto;
  margin: 0 0 0.7rem;
}

.ow-licence__indent {
  text-align: justify;
  hyphens: auto;
  margin: 0 0 0.7rem;
  text-indent: -1.4em;
  padding-left: 1.4em;
}

.ow-licence__pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: var(--ow-display);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ow-ink);
  background: transparent;
  border: none;
  padding: 0 0 0 0.4rem;
  margin: 0 0 0.6rem;
}

/* Exercise cards (rehabilitation protocols). Injected as raw HTML by
   wiki_publisher/exercises.py; mirrors the .ow-figure treatment but in a
   responsive card grid. */
.md-typeset .ow-exercises {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.md-typeset .ow-exercise {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--md-default-fg-color--lightest, #e3e0db);
  border-radius: 0.4rem;
  overflow: hidden;
  background: var(--md-default-bg-color, #fff);
}
.md-typeset .ow-exercise__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 11rem;              /* LOCKED media box — uniform across cards */
  background: #faf8f4;
}
.md-typeset .ow-exercise__media img {
  max-width: 100%;
  max-height: 10.5rem;
  height: auto;
}
.md-typeset .ow-exercise__body {
  padding: 0.7rem 0.85rem 0.85rem;
}
.md-typeset .ow-exercise__name {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  /* Mode-adaptive: dark ink in light mode, light cream in dark mode. (Was
     --md-primary-fg-color, which the slate scheme sets to near-black #0a0a0a
     → invisible on the dark card.) */
  color: var(--md-default-fg-color);
}
.md-typeset .ow-exercise__instructions {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  line-height: 1.5;
}
.md-typeset .ow-exercise__dose {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
}
/* Licence/credit now sits directly under the image (outside the body's
   padding), so it carries its own horizontal padding to align. */
.md-typeset .ow-exercise__credit {
  margin: 0.3rem 0 0.1rem;
  padding: 0 0.85rem;
  font-size: 0.66rem;
  opacity: 0.65;
}

/* Pagefind search box — slim bar at the top of page content. */
.ow-search {
  margin: 0 0 1.5rem;
  max-width: 38rem;
}
.ow-search .pagefind-ui__search-input {
  font-size: 0.95rem;
}
/* Match the OrthoWiki accent for the focus ring + result links. */
.ow-search .pagefind-ui {
  --pagefind-ui-primary: var(--md-primary-fg-color, #7a1f2b);
  --pagefind-ui-font: inherit;
}