/*fern-site-stylesheet*/@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/rebate-right.docs.buildwithfern.com/3100e775e8616cd2611beecfa23a4263d7037586789b43f035236a2e6fbd4c62/assets/fonts/Inter-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/rebate-right.docs.buildwithfern.com/7291b5970da2237441273c03b424a504b70b18f09791473fab99687dcc314720/assets/fonts/Inter-Variable-Italic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/rebate-right.docs.buildwithfern.com/3100e775e8616cd2611beecfa23a4263d7037586789b43f035236a2e6fbd4c62/assets/fonts/Inter-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/_fern-files/rebate-right.docs.buildwithfern.com/fdf61e20fd2c0108e0ea28da4daca0035205b4b7fc031a3974b865b704de160a/assets/fonts/DMSerifDisplay-Regular.woff2') format('woff2');
    font-weight: 999;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/_fern-files/rebate-right.docs.buildwithfern.com/18be452724bfdc236c074ca94a249a7f41a86752c7d04ab258ce9ed5651f6a7e/assets/fonts/JetBrainsMono-Variable.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 100vw;
  --logo-height: 30px;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Inter', 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #f4f6f9;
  --accent-2: #ecf1fa;
  --accent-3: #deeafc;
  --accent-4: #cde3ff;
  --accent-5: #b9d9ff;
  --accent-6: #a2caff;
  --accent-7: #85b8ff;
  --accent-8: #599eff;
  --accent-9: #003780;
  --accent-10: #174a95;
  --accent-11: #2266c9;
  --accent-12: #002e76;

  --accent-a1: #edf4ff74;
  --accent-a2: #e1ecff8c;
  --accent-a3: #d4e5ffba;
  --accent-a4: #cde3ff;
  --accent-a5: #b9d9ff;
  --accent-a6: #a2caff;
  --accent-a7: #85b8ff;
  --accent-a8: #599eff;
  --accent-a9: #003780;
  --accent-a10: #00398ce8;
  --accent-a11: #0150c2dd;
  --accent-a12: #002e76;

  --accent-contrast: #fff;
  --accent-surface: #e9f0fbcc;
  --accent-indicator: #003780;
  --accent-track: #003780;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(97.1% 0.0046 258.5);
      --accent-2: oklch(95.8% 0.0133 258.5);
      --accent-3: oklch(93.5% 0.0276 258.5);
      --accent-4: oklch(91% 0.0516 258.5);
      --accent-5: oklch(87.7% 0.0744 258.5);
      --accent-6: oklch(83.4% 0.0954 258.5);
      --accent-7: oklch(77.7% 0.123 258.5);
      --accent-8: oklch(70.2% 0.1685 258.5);
      --accent-9: oklch(35.5% 0.1343 258.5);
      --accent-10: oklch(42.1% 0.1343 258.5);
      --accent-11: oklch(52.6% 0.1685 258.5);
      --accent-12: oklch(32.4% 0.1343 258.5);

      --accent-a1: color(display-p3 0.9294 0.9569 1 / 0.455);
      --accent-a2: color(display-p3 0.8706 0.9137 1 / 0.455);
      --accent-a3: color(display-p3 0.7961 0.8745 1 / 0.546);
      --accent-a4: color(display-p3 0.7608 0.8549 1 / 0.728);
      --accent-a5: color(display-p3 0.6196 0.7765 1 / 0.637);
      --accent-a6: color(display-p3 0.4078 0.6353 1 / 0.546);
      --accent-a7: color(display-p3 0.0706 0.4157 1 / 0.455);
      --accent-a8: color(display-p3 0 0 1 / 0.364);
      --accent-a9: color(display-p3 0 0.1451 0.4392 / 0.92);
      --accent-a10: color(display-p3 0 0.1608 0.4941 / 0.848);
      --accent-a11: color(display-p3 0 0.2353 0.7059 / 0.784);
      --accent-a12: color(display-p3 0 0.1255 0.4118 / 0.94);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9176 0.9412 0.9804 / 0.8);
      --accent-indicator: oklch(35.5% 0.1343 258.5);
      --accent-track: oklch(35.5% 0.1343 258.5);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfdfc;
  --grayscale-2: #f9f9f8;
  --grayscale-3: #f1f0ef;
  --grayscale-4: #e9e8e6;
  --grayscale-5: #e2e1de;
  --grayscale-6: #dad9d6;
  --grayscale-7: #cfceca;
  --grayscale-8: #bcbbb5;
  --grayscale-9: #8d8d86;
  --grayscale-10: #82827c;
  --grayscale-11: #63635e;
  --grayscale-12: #21201c;

  --grayscale-a1: #55550003;
  --grayscale-a2: #25250007;
  --grayscale-a3: #20100010;
  --grayscale-a4: #1f150019;
  --grayscale-a5: #1f180021;
  --grayscale-a6: #19130029;
  --grayscale-a7: #19140035;
  --grayscale-a8: #1915014a;
  --grayscale-a9: #0f0f0079;
  --grayscale-a10: #0c0c0083;
  --grayscale-a11: #080800a1;
  --grayscale-a12: #060500e3;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8d8d86;
  --grayscale-track: #8d8d86;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.992 0.992 0.989);
      --grayscale-2: color(display-p3 0.977 0.977 0.973);
      --grayscale-3: color(display-p3 0.943 0.942 0.936);
      --grayscale-4: color(display-p3 0.913 0.912 0.903);
      --grayscale-5: color(display-p3 0.885 0.883 0.873);
      --grayscale-6: color(display-p3 0.854 0.852 0.839);
      --grayscale-7: color(display-p3 0.813 0.81 0.794);
      --grayscale-8: color(display-p3 0.738 0.734 0.713);
      --grayscale-9: color(display-p3 0.553 0.553 0.528);
      --grayscale-10: color(display-p3 0.511 0.511 0.488);
      --grayscale-11: color(display-p3 0.388 0.388 0.37);
      --grayscale-12: color(display-p3 0.129 0.126 0.111);

      --grayscale-a1: #55550003;
      --grayscale-a2: #25250007;
      --grayscale-a3: #20100010;
      --grayscale-a4: #1f150019;
      --grayscale-a5: #1f180021;
      --grayscale-a6: #19130029;
      --grayscale-a7: #19140035;
      --grayscale-a8: #1915014a;
      --grayscale-a9: #0f0f0079;
      --grayscale-a10: #0c0c0083;
      --grayscale-a11: #080800a1;
      --grayscale-a12: #060500e3;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.553 0.553 0.528);
      --grayscale-track: color(display-p3 0.553 0.553 0.528);
    }
  }
}


.dark {
  --accent-1: #1a2025;
  --accent-2: #20272c;
  --accent-3: #253139;
  --accent-4: #2a3841;
  --accent-5: #313e48;
  --accent-6: #394650;
  --accent-7: #45535d;
  --accent-8: #5d6b75;
  --accent-9: #e8f3fb;
  --accent-10: #dfeaf2;
  --accent-11: #a9b9c4;
  --accent-12: #e4eff7;

  --accent-a1: #ff32001a;
  --accent-a2: #ff660020;
  --accent-a3: #ffa10025;
  --accent-a4: #ffbc2d2a;
  --accent-a5: #ffc55531;
  --accent-a6: #ffd17639;
  --accent-a7: #ffe29e45;
  --accent-a8: #fff2c95d;
  --accent-a9: #edf7fffa;
  --accent-a10: #eff9feee;
  --accent-a11: #f5fffeb0;
  --accent-a12: #edf8fef5;

  --accent-contrast: #0d2433;
  --accent-surface: #40301480;
  --accent-indicator: #e8f3fb;
  --accent-track: #e8f3fb;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(24.1% 0.0135 239.1);
      --accent-2: oklch(26.9% 0.0143 239.1);
      --accent-3: oklch(30.5% 0.0226 239.1);
      --accent-4: oklch(33.1% 0.0239 239.1);
      --accent-5: oklch(35.6% 0.0239 239.1);
      --accent-6: oklch(38.7% 0.0239 239.1);
      --accent-7: oklch(43.5% 0.0239 239.1);
      --accent-8: oklch(51.9% 0.0239 239.1);
      --accent-9: oklch(95.8% 0.0159 239.1);
      --accent-10: oklch(93% 0.0159 239.1);
      --accent-11: oklch(77.6% 0.0239 239.1);
      --accent-12: oklch(94.7% 0.0159 239.1);

      --accent-a1: color(display-p3 1 0.2667 0 / 0.077);
      --accent-a2: color(display-p3 0.9961 0.502 0 / 0.102);
      --accent-a3: color(display-p3 1 0.7373 0 / 0.126);
      --accent-a4: color(display-p3 1 0.8196 0.2078 / 0.15);
      --accent-a5: color(display-p3 0.9961 0.8392 0.3686 / 0.179);
      --accent-a6: color(display-p3 1 0.8784 0.502 / 0.211);
      --accent-a7: color(display-p3 1 0.9294 0.651 / 0.26);
      --accent-a8: color(display-p3 1 0.9686 0.8118 / 0.357);
      --accent-a9: color(display-p3 0.9412 0.9725 1 / 0.974);
      --accent-a10: color(display-p3 0.949 0.9843 1 / 0.926);
      --accent-a11: color(display-p3 0.9686 1 0.9961 / 0.686);
      --accent-a12: color(display-p3 0.9451 0.9804 1 / 0.953);

      --accent-contrast: #0d2433;
      --accent-surface: color(display-p3 0.2275 0.1882 0.0863 / 0.5);
      --accent-indicator: oklch(95.8% 0.0159 239.1);
      --accent-track: oklch(95.8% 0.0159 239.1);
    }
  }
}


.dark {
  --grayscale-1: #121113;
  --grayscale-2: #1a191b;
  --grayscale-3: #232225;
  --grayscale-4: #2b292d;
  --grayscale-5: #323035;
  --grayscale-6: #3c393f;
  --grayscale-7: #49474e;
  --grayscale-8: #625f69;
  --grayscale-9: #6f6d78;
  --grayscale-10: #7c7a85;
  --grayscale-11: #b5b2bc;
  --grayscale-12: #eeeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f5f4f609;
  --grayscale-a3: #ebeaf814;
  --grayscale-a4: #eee5f81d;
  --grayscale-a5: #efe6fe25;
  --grayscale-a6: #f1e6fd30;
  --grayscale-a7: #eee9ff40;
  --grayscale-a8: #eee7ff5d;
  --grayscale-a9: #eae6fd6e;
  --grayscale-a10: #ece9fd7c;
  --grayscale-a11: #f5f1ffb7;
  --grayscale-a12: #fdfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6f6d78;
  --grayscale-track: #6f6d78;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.07 0.067 0.074);
      --grayscale-2: color(display-p3 0.101 0.098 0.105);
      --grayscale-3: color(display-p3 0.138 0.134 0.144);
      --grayscale-4: color(display-p3 0.167 0.161 0.175);
      --grayscale-5: color(display-p3 0.196 0.189 0.206);
      --grayscale-6: color(display-p3 0.232 0.225 0.245);
      --grayscale-7: color(display-p3 0.286 0.277 0.302);
      --grayscale-8: color(display-p3 0.383 0.373 0.408);
      --grayscale-9: color(display-p3 0.434 0.428 0.467);
      --grayscale-10: color(display-p3 0.487 0.48 0.519);
      --grayscale-11: color(display-p3 0.707 0.7 0.735);
      --grayscale-12: color(display-p3 0.933 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f5f4f609;
      --grayscale-a3: #ebeaf814;
      --grayscale-a4: #eee5f81d;
      --grayscale-a5: #efe6fe25;
      --grayscale-a6: #f1e6fd30;
      --grayscale-a7: #eee9ff40;
      --grayscale-a8: #eee7ff5d;
      --grayscale-a9: #eae6fd6e;
      --grayscale-a10: #ece9fd7c;
      --grayscale-a11: #f5f1ffb7;
      --grayscale-a12: #fdfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.434 0.428 0.467);
      --grayscale-track: color(display-p3 0.434 0.428 0.467);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(0, 55, 128, 1);
  --background: rgba(250, 248, 244, 1);
  --border: rgba(207, 207, 207, 1);
  --sidebar-background: rgba(250, 248, 244, 1);
  --header-background: rgba(250, 248, 244, 1);
  --card-background: rgba(250, 248, 244, 1);
  --theme-color: #faf8f4;
}

.dark {
  color-scheme: dark;
  --accent: rgba(232, 243, 251, 1);
  --background: rgba(0, 30, 69, 1);
  --border: rgba(26, 55, 102, 1);
  --sidebar-background: rgba(0, 30, 69, 1);
  --header-background: rgba(0, 30, 69, 1);
  --card-background: rgba(0, 30, 69, 1);
  --theme-color: #001e45;
}

/* ============================================================================
   RebateRight Docs — Fern theme overlay

   Targeted overrides for surfaces docs.yml can't reach. Card surfaces
   (incl. code-block backplates and table headers) inherit Paper via
   docs.yml's card-background — borders separate them, not background tint.
   We override here only for:
     - Shiki's inline <pre> background (inline styles beat external CSS)
     - Brand-canonical accent ramp and functional UI ramps
     - Text colour (Midnight on Paper, Paper on Midnight)
     - Card radius and tabular numerics
     - Table border colour
     - DM Serif Display for the home-page hero (via Fern-uploaded URL)
   ============================================================================ */

/* DM Serif Display — home-page hero title only.
   Brand serif boundary: DM Serif at Display L (56px) or XL (72px) only.
   The docs home page is the one legitimate hero moment in Docs. */
@font-face {
  font-family: 'DM Serif Display';
  src: url('https://files.buildwithfern.com/rebate-right.docs.buildwithfern.com/fdf61e20fd2c0108e0ea28da4daca0035205b4b7fc031a3974b865b704de160a/assets/fonts/DMSerifDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Scoped to the home page via a hidden marker in welcome.mdx —
   Fern doesn't emit a per-page slug attribute we can target, so the
   marker + :has() is the reliable hook.
   Spec mirrors the website hero (DM Serif Display 64/69, weight 400). */
body:has(.docs-home-marker) .fern-page-heading {
  font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  font-size: 64px;
  line-height: 69px;
  font-weight: 400;
}

/* Accent ramp — Royal on light, Sky on dark.
   Sky-as-primary on dark is a narrow exception (brand says Sky reserved)
   needed because Royal #0067AF fails contrast on Midnight #001E45. */
:root {
  --accent: #0067AF;
  --accent-9: #0067AF;
  --accent-10: #003780;
  --accent-11: #003780;
  --accent-12: #001E45;
  --accent-contrast: #FAF8F4;
}
.dark {
  --accent: #1296DF;
  --accent-9: #1296DF;
  --accent-10: #4FAFEA;
  --accent-11: #7EC1ED;
  --accent-12: #E8F3FB;
  --accent-contrast: #001E45;
}

/* In-prose content links — exact brand Royal on light (Navy on hover), Sky on
   dark, matching the website. Fern colours .fern-mdx-link from the alpha accent
   scale (--accent-a11), which the solid --accent overrides above don't reach. */
.fern-mdx-link { color: #0067AF; }
.fern-mdx-link:hover { color: #003780; }
.fern-mdx-link:focus-visible { color: #003780; outline: none;
}
.dark .fern-mdx-link { color: #1296DF; }
.dark .fern-mdx-link:hover { color: #4FAFEA; }
.dark .fern-mdx-link:focus-visible { color: #4FAFEA; outline: none;
}

/* Drop Fern's per-link external-link glyph (Lucide). In-text links read as plain
   underlined links — arrows are reserved for standalone CTAs, not running text
   (UX best practice; matches the website). */
.fern-mdx-link .external-link-icon { display: none; }

/* Functional UI colour pairs — brand colour-palette.md.
   Step 3 = subtle fill, 9 = solid, 11 = text/icon. */
:root {
  --red-3:    #FCEBEB; --red-9:    #B42424; --red-11:    #B42424;
  --orange-3: #FCF3DF; --orange-9: #B07A1A; --orange-11: #B07A1A;
  --amber-3:  #FCF3DF; --amber-9:  #B07A1A; --amber-11:  #B07A1A;
  --green-3:  #E8F1EB; --green-9:  #2A6E48; --green-11:  #2A6E48;
  --blue-3:   #EEF1F5; --blue-9:   #4A5B72; --blue-11:   #4A5B72;
}
.dark {
  --red-3:    #3A0B0B; --red-9:    #E08585; --red-11:    #F0A8A8;
  --orange-3: #2E1F08; --orange-9: #D9A85A; --orange-11: #E8C480;
  --amber-3:  #2E1F08; --amber-9:  #D9A85A; --amber-11:  #E8C480;
  --green-3:  #102A1B; --green-9:  #6FA988; --green-11:  #9DC4AE;
  --blue-3:   #1A2330; --blue-9:   #8A99AC; --blue-11:   #B6C2D2;
}

/* Body and heading text — Midnight on Paper, Paper on Midnight.
   Hierarchy from size and weight per brand, not colour — headings share
   the body stop. */
:root {
  --text-body: #001E45;
  --grayscale-12: #001E45;
}
.dark {
  --text-body: #FAF8F4;
  --grayscale-12: #FAF8F4;
}
.fern-page-heading, h1, h2, h3, h4, h5, h6 {
  color: var(--text-body);
}

/* Code block surface — Shiki applies background-color inline on <pre>,
   so !important is needed to pull it onto the unified Paper surface. */
pre,
pre.shiki {
  background-color: #FAF8F4 !important;
}
.dark pre,
.dark pre.shiki {
  background-color: #001E45 !important;
}

/* Card radius — brand 12px standard. */
.fern-card {
  border-radius: 12px;
}

/* Dark-mode sidebar active state — Fern's auto-derived ramp from Mist
   reads muddy over Midnight. Override with a Sky-tinted "light blue"
   fill, consistent with Sky as the dark-mode interactive accent. */
.dark .fern-sidebar-link[data-state="active"] {
  background-color: rgba(18, 150, 223, 0.18);
  color: #FAF8F4;
}

/* Table borders — Stone 20 on light, raised Midnight on dark. */
.fern-table-root td,
.fern-table-root th {
  border-color: #CFCFCF;
}
.dark .fern-table-root td,
.dark .fern-table-root th {
  border-color: #1A3766;
}

/* Tabular numerics in data contexts. */
.fern-table-root,
.fern-api-property-key,
.fern-api-property-meta {
  font-feature-settings: "tnum" 1;
}

/* Theme-aware architecture diagrams. SVGs are loaded via <img>, so page
   CSS can't reach inside to recolour them — instead we ship a light and a
   dark variant and swap which one is shown on Fern's .dark root toggle.
   Both are centred and width-capped so they don't balloon on wide screens. */
.diagram-light,
.diagram-dark {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.diagram-dark {
  display: none;
}
.dark .diagram-light {
  display: none;
}
.dark .diagram-dark {
  display: block;
}

/* Document preview — a rendered snapshot of a generated PDF, framed as a sheet
   of paper. The document has a fixed (non-theming) cream background, so we frame
   it with a border + soft shadow rather than recolour it, and cap the width so an
   A4 portrait reads as a sample, not a full-bleed image. Border hues match the
   table convention above (#CFCFCF light / #1A3766 dark). */
.doc-preview {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 1.5rem auto 0.75rem;
  border: 1px solid #CFCFCF;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 30, 69, 0.1);
}
.dark .doc-preview {
  border-color: #1A3766;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.doc-preview-caption {
  display: block;
  text-align: center;
  margin: 0 auto 1.5rem;
  font-size: 0.85rem;
  color: #5C5E64;
}
.dark .doc-preview-caption {
  color: #9BA1A9;
}

/* 404 page — brand law: a missing page is not an error. We swap Fern's warning
   triangle for the RebateRight symbol (brand mark in place of an error mark) and
   drop its untrue "we've been notified" line; Fern's smart page suggestions stay.
   Hooked on Fern's own 404 icon (the #404-border gradient) — same reliable :has()
   approach as the home hero — so it fails safe: if Fern renames the markup, the
   defaults simply return.
   The symbol is the canonical full-colour RR icon — the brand's light and dark
   variants, embedded and swapped on Fern's .dark root class (not the OS scheme),
   per the repo's theme-aware-SVG convention. The box's flex gap spaces it above
   the heading, where the triangle used to sit. */
.fern-main svg[stroke="url(#404-border)"] {
  display: none;
}
.fern-main:has(svg[stroke="url(#404-border)"]) h1 + p {
  display: none;
}
.fern-main div:has(> svg[stroke="url(#404-border)"])::before {
  content: "";
  display: block;
  width: 72px;
  height: 72px;
  background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgwMCA4MDAiIHdpZHRoPSI4MDAiIGhlaWdodD0iODAwIj4KCTwhLS0gUmViYXRlUmlnaHQgaWNvbiDigJQgY2Fub25pY2FsIHZlY3RvciBzb3VyY2UgKG5vIHRleHQpOyBlZGl0IGhlcmUuIC0tPgoJPGRlZnM+CgkJPGxpbmVhckdyYWRpZW50IGlkPSJnMSIgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xMi43MjEsODguMDcsOTIuNjk5LDEzLjM5LDczLjA3LDQ0MC42NzIpIj4KCQkJPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDA2N0FGIi8+CgkJCTxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwMzc4MCIvPgoJCTwvbGluZWFyR3JhZGllbnQ+CgkJPGxpbmVhckdyYWRpZW50IGlkPSJnMiIgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEyLjcyMSw4OC4wNywtOTIuNjk5LDEzLjM5LDcyNi45Myw0NDAuNjcyKSI+CgkJCTxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzAwNjdBRiIvPgoJCQk8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDM3ODAiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxtYXNrIGlkPSJjdXRvdXQtbWlkIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCI+CgkJCTxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI4MDAiIGhlaWdodD0iODAwIiBmaWxsPSIjZmZmZmZmIi8+CgkJCTxwYXRoIGQ9Im01NjYuNjQgNDQ0LjY5aC0zMzMuMmMtNDAuMjkgMC03Mi45NC0zMi42Ni03Mi45NC03Mi45NCAwLTQwLjI4IDMyLjY1LTcyLjk0IDcyLjk0LTcyLjk0aDMzMy4yYzQwLjI4IDAgNzIuOTQgMzIuNjYgNzIuOTQgNzIuOTQgMCA0MC4yOC0zMi42NiA3Mi45NC03Mi45NCA3Mi45NHoiIGZpbGw9IiMwMDAwMDAiLz4KCQk8L21hc2s+Cgk8L2RlZnM+Cgk8c3R5bGU+CgkJLmdsIHsgZmlsbDogdXJsKCNnMSkgfQoJCS5nciB7IGZpbGw6IHVybCgjZzIpIH0KCQkucmMgeyBmaWxsOiAjMDAzNzgwIH0KCTwvc3R5bGU+Cgk8ZyBpZD0iTGF5ZXIgMSIgbWFzaz0idXJsKCNjdXRvdXQtbWlkKSI+CgkJPHBhdGggaWQ9IkxlZy1MZWZ0IiAgICAgICAgY2xhc3M9ImdsIiBkPSJtMzgzLjk1IDU0Mi4wNmgtMjY5LjkzbDI2OS45My0yODQuMTJ6Ii8+CgkJPHBhdGggaWQ9IlItTGVmdCIgICAgICAgICAgY2xhc3M9InJjIiBkPSJtMzgzLjk1IDI1Ny45NGgtMTY4LjgxYy02My41MiAwLTExNS4wMSA1MS40OS0xMTUuMDEgMTE1LjAxIDAgNjMuNTIgNTEuNDkgMTE1LjAxIDExNS4wMSAxMTUuMDEgNTYgMCAxNjguODEtMTQuMDYgMTY4LjgxIDU0LjF6Ii8+CgkJPHBhdGggaWQ9IkhpZ2hsaWdodC1MZWZ0IiAgY2xhc3M9ImdsIiBkPSJtMjE1LjE0IDI1Ny45NGgxNjguODF2MTEuOTdoLTE2OC44MWMtNjEuNTEgMC0xMTEuNzQgNDguMjktMTE0Ljg2IDEwOS4wM3EtMC4xNS0yLjk4LTAuMTUtNS45OWMwLTYzLjUyIDUxLjQ5LTExNS4wMSAxMTUuMDEtMTE1LjAxeiIvPgoJCTxwYXRoIGlkPSJMZWctUmlnaHQiICAgICAgIGNsYXNzPSJnciIgZD0ibTQxNi4wNSA1NDIuMDZoMjY5LjkzbC0yNjkuOTMtMjg0LjEyeiIvPgoJCTxwYXRoIGlkPSJSLVJpZ2h0IiAgICAgICAgIGNsYXNzPSJyYyIgZD0ibTQxNi4wNSAyNTcuOTRoMTY4LjgxYzYzLjUyIDAgMTE1LjAxIDUxLjQ5IDExNS4wMSAxMTUuMDEgMCA2My41Mi01MS40OSAxMTUuMDEtMTE1LjAxIDExNS4wMS01NiAwLTE2OC44MS0xNC4wNi0xNjguODEgNTQuMXoiLz4KCQk8cGF0aCBpZD0iSGlnaGxpZ2h0LVJpZ2h0IiBjbGFzcz0iZ3IiIGQ9Im01ODQuODYgMjU3Ljk0aC0xNjguODF2MTEuOTdoMTY4LjgxYzYxLjUxIDAgMTExLjc0IDQ4LjI5IDExNC44NiAxMDkuMDNxMC4xNS0yLjk4IDAuMTUtNS45OWMwLTYzLjUyLTUxLjQ5LTExNS4wMS0xMTUuMDEtMTE1LjAxeiIvPgoJPC9nPgo8L3N2Zz4K") center / contain no-repeat;
}
.dark .fern-main div:has(> svg[stroke="url(#404-border)"])::before {
  background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgwMCA4MDAiIHdpZHRoPSI4MDAiIGhlaWdodD0iODAwIj4KCTwhLS0gUmViYXRlUmlnaHQgaWNvbiDigJQgY2Fub25pY2FsIHZlY3RvciBzb3VyY2UgKG5vIHRleHQpOyBlZGl0IGhlcmUuIC0tPgoJPGRlZnM+CgkJPGxpbmVhckdyYWRpZW50IGlkPSJnMSIgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0xMi43MjEsODguMDcsOTIuNjk5LDEzLjM5LDczLjA3LDQ0MC42NzIpIj4KCQkJPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjOEU4Rjk0Ii8+CgkJCTxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0ZBRjhGNCIvPgoJCTwvbGluZWFyR3JhZGllbnQ+CgkJPGxpbmVhckdyYWRpZW50IGlkPSJnMiIgeDI9IjEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEyLjcyMSw4OC4wNywtOTIuNjk5LDEzLjM5LDcyNi45Myw0NDAuNjcyKSI+CgkJCTxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzhFOEY5NCIvPgoJCQk8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGQUY4RjQiLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxtYXNrIGlkPSJjdXRvdXQtbWlkIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCI+CgkJCTxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI4MDAiIGhlaWdodD0iODAwIiBmaWxsPSIjZmZmZmZmIi8+CgkJCTxwYXRoIGQ9Im01NjYuNjQgNDQ0LjY5aC0zMzMuMmMtNDAuMjkgMC03Mi45NC0zMi42Ni03Mi45NC03Mi45NCAwLTQwLjI4IDMyLjY1LTcyLjk0IDcyLjk0LTcyLjk0aDMzMy4yYzQwLjI4IDAgNzIuOTQgMzIuNjYgNzIuOTQgNzIuOTQgMCA0MC4yOC0zMi42NiA3Mi45NC03Mi45NCA3Mi45NHoiIGZpbGw9IiMwMDAwMDAiLz4KCQk8L21hc2s+Cgk8L2RlZnM+Cgk8c3R5bGU+CgkJLnMwIHsgZmlsbDogdXJsKCNnMSkgfQoJCS5zMSB7IGZpbGw6ICNGQUY4RjQgfQoJCS5zMiB7IG9wYWNpdHk6IC41OyBmaWxsOiAjOEU4Rjk0IH0KCQkuczMgeyBmaWxsOiB1cmwoI2cyKSB9Cgk8L3N0eWxlPgoJPGcgaWQ9IkxheWVyIDEiIG1hc2s9InVybCgjY3V0b3V0LW1pZCkiPgoJCTxwYXRoIGlkPSJMZWctTGVmdCIgIGNsYXNzPSJzMCIgZD0ibTM4My45NSA1NDIuMDZoLTI2OS45M2wyNjkuOTMtMjg0LjEyeiIvPgoJCTxwYXRoIGlkPSJSLUxlZnQiICAgIGNsYXNzPSJzMSIgZD0ibTM4My45NSAyNTcuOTRoLTE2OC44MWMtNjMuNTIgMC0xMTUuMDEgNTEuNDktMTE1LjAxIDExNS4wMSAwIDYzLjUyIDUxLjQ5IDExNS4wMSAxMTUuMDEgMTE1LjAxIDU2IDAgMTY4LjgxLTE0LjA2IDE2OC44MSA1NC4xeiIvPgoJCTxwYXRoIGlkPSI1MC1MZWZ0IiAgIGNsYXNzPSJzMiIgZD0ibTIxNS4xNCAyNTcuOTRoMTY4LjgxdjExLjk3aC0xNjguODFjLTYxLjUxIDAtMTExLjc0IDQ4LjI5LTExNC44NiAxMDkuMDNxLTAuMTUtMi45OC0wLjE1LTUuOTljMC02My41MiA1MS40OS0xMTUuMDEgMTE1LjAxLTExNS4wMXoiLz4KCQk8cGF0aCBpZD0iTGVnLVJpZ2h0IiBjbGFzcz0iczMiIGQ9Im00MTYuMDUgNTQyLjA2aDI2OS45M2wtMjY5LjkzLTI4NC4xMnoiLz4KCQk8cGF0aCBpZD0iUi1SaWdodCIgICBjbGFzcz0iczEiIGQ9Im00MTYuMDUgMjU3Ljk0aDE2OC44MWM2My41MiAwIDExNS4wMSA1MS40OSAxMTUuMDEgMTE1LjAxIDAgNjMuNTItNTEuNDkgMTE1LjAxLTExNS4wMSAxMTUuMDEtNTYgMC0xNjguODEtMTQuMDYtMTY4LjgxIDU0LjF6Ii8+CgkJPHBhdGggaWQ9IjUwLVJpZ2h0IiAgY2xhc3M9InMyIiBkPSJtNTg0Ljg2IDI1Ny45NGgtMTY4LjgxdjExLjk3aDE2OC44MWM2MS41MSAwIDExMS43NCA0OC4yOSAxMTQuODYgMTA5LjAzcTAuMTUtMi45OCAwLjE1LTUuOTljMC02My41Mi01MS40OS0xMTUuMDEtMTE1LjAxLTExNS4wMXoiLz4KCTwvZz4KPC9zdmc+Cg==") center / contain no-repeat;
}

/* Explorers — the searchable trees on Provider Atlas and Eligibility check coverage,
   generated by docs/atlas/build.py and docs/coverage/build.py and driven by
   explorer.js. They live here, not inline in the page, because the hosted docs send a
   Content-Security-Policy that blocks inline <style> and <script>. The search bar stays
   invisible until explorer.js runs, so it never shows when it can't work. It keeps its
   space meanwhile: the script runs only after the page hydrates, and the tree shouldn't
   jump when the bar appears. */
.rr-explorer {
  --rx-text: #001E45; --rx-navy: #003780; --rx-royal: #0067AF; --rx-mist: #E8F3FB;
  --rx-paper: #FAF8F4; --rx-paper-dark: #F0EDE6; --rx-stone-60: #5C5E64; --rx-stone-40: #8E8F94;
  --rx-stone-20: #CFCFCF; --rx-stone-05: #F1EFEC;
  --rx-cred-bg: #DCEFFB; --rx-cred-fg: #0067AF; --rx-status-bg: #EEF1F5; --rx-status-fg: #4A5B72;
  --rx-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238E8F94' stroke-width='1.5'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E");
  margin: 1.25rem 0 1.5rem;
  padding: 18px 20px 26px;
  border: 1px solid #CFCFCF;
  border-radius: 12px;
  color: var(--rx-text);
  font-size: 15px;
  line-height: 1.5;
}
.dark .rr-explorer {
  --rx-text: #EAF1F8; --rx-navy: #B7D3F0; --rx-royal: #8FBEEA; --rx-mist: #0E2A4E;
  --rx-paper: #001E45; --rx-paper-dark: #12305C; --rx-stone-60: #93A2B4; --rx-stone-40: #7A8798;
  --rx-stone-20: #26436F; --rx-stone-05: #0E2A4E;
  --rx-cred-bg: #0E2A4E; --rx-cred-fg: #8FBEEA; --rx-status-bg: #12305C; --rx-status-fg: #A7B6C8;
  --rx-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237A8798' stroke-width='1.5'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E");
  border-color: #1A3766;
}
.rr-explorer-bar {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 4px 0 12px;
  visibility: hidden;
}
html[data-rr-explorer] .rr-explorer-bar { visibility: visible; }
.rr-explorer-q {
  flex: 1 1 300px; max-width: 420px;
  font: inherit; font-size: 14px; padding: 8px 12px 8px 34px;
  border: 1px solid var(--rx-stone-20); border-radius: 8px; outline: none;
  background: var(--rx-paper) var(--rx-search) 12px center / 15px 15px no-repeat;
  color: var(--rx-text);
}
.rr-explorer-q:focus { border-color: var(--rx-royal); box-shadow: 0 0 0 3px rgba(0, 103, 175, 0.14); }
/* Fern hides the native clear button on every search input; the explorer keeps it. */
input[type=search].rr-explorer-q::-webkit-search-cancel-button { display: revert; }
.rr-explorer .tools { display: flex; gap: 2px; }
.rr-explorer .tbtn {
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--rx-royal);
  background: none; border: none; cursor: pointer; padding: 5px 9px; border-radius: 6px;
}
.rr-explorer .tbtn:hover { background: var(--rx-mist); }
.rr-explorer .tbtn:focus-visible { background: var(--rx-mist); outline: none;
}
.rr-explorer .sep { color: var(--rx-stone-20); align-self: center; }
.rr-explorer .hint { color: var(--rx-stone-40); font-size: 12.5px; margin: 0 0 10px 2px; }
.rr-explorer details { margin: 1px 0; border-radius: 8px; }
.rr-explorer summary {
  cursor: pointer; padding: 8px; border-radius: 8px; list-style: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.rr-explorer summary::-webkit-details-marker { display: none; }
.rr-explorer summary:hover { background: var(--rx-mist); }
.rr-explorer summary:focus-visible { background: var(--rx-mist); outline: none;
}
.rr-explorer .twist {
  flex: 0 0 auto; width: 14px; height: 14px; transition: transform 0.13s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8F94' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.rr-explorer details[open] > summary > .twist { transform: rotate(90deg); }
.rr-explorer .count {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px;
  color: var(--rx-stone-60); background: var(--rx-stone-05); border-radius: 20px; padding: 1px 9px;
}
.rr-explorer .hidden { display: none !important; }
.rr-explorer-empty { display: none; color: var(--rx-stone-40); font-size: 13px; padding: 14px 7px; margin: 0; }
.rr-explorer-empty.shown { display: block; }
/* Coverage: one level of MBS categories, each a list of items. */
.rr-explorer .cat { font-weight: 600; color: var(--rx-navy); font-size: 14px; }
.rr-explorer .catname { color: var(--rx-stone-60); font-size: 13.5px; }
.rr-explorer-coverage .count { margin-left: auto; }
.rr-explorer .rows { margin: 2px 0 6px 27px; border-left: 1.5px solid var(--rx-paper-dark); padding-left: 6px; }
.rr-explorer details:hover > .rows { border-left-color: var(--rx-stone-20); }
.rr-explorer details:focus-within > .rows { border-left-color: var(--rx-stone-20); outline: none;
}
.rr-explorer .item { display: flex; align-items: baseline; gap: 12px; padding: 5px 8px; border-radius: 7px; }
.rr-explorer .item:hover { background: var(--rx-mist); }
.rr-explorer .item:focus-visible { background: var(--rx-mist); outline: none;
}
.rr-explorer .num {
  flex: 0 0 62px; font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 600; color: var(--rx-royal); text-decoration: none;
}
.rr-explorer .num:hover { text-decoration: underline; }
.rr-explorer .num:focus-visible { text-decoration: underline; outline: none;
}
.rr-explorer .desc { color: var(--rx-text); font-size: 13.5px; }
/* Atlas: a deep recognition tree, so rows sit tighter. */
.rr-explorer-atlas summary { padding: 5px 7px; gap: 8px; min-height: 30px; }
.rr-explorer .kids { margin-left: 21px; border-left: 1.5px solid var(--rx-paper-dark); padding-left: 14px; }
.rr-explorer details:hover > .kids { border-left-color: var(--rx-stone-20); }
.rr-explorer details:focus-within > .kids { border-left-color: var(--rx-stone-20); outline: none;
}
.rr-explorer .leaf {
  padding: 4px 7px 4px 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  border-radius: 8px; min-height: 28px;
}
.rr-explorer .leaf:hover { background: var(--rx-mist); }
.rr-explorer .leaf:focus-visible { background: var(--rx-mist); outline: none;
}
.rr-explorer .name { font-size: 14px; color: var(--rx-text); }
.rr-explorer .name-class { font-weight: 600; color: var(--rx-navy); font-size: 15px; }
.rr-explorer .tag {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 20px;
}
.rr-explorer .tag-cred { color: var(--rx-cred-fg); background: var(--rx-cred-bg); }
.rr-explorer .tag-status { color: var(--rx-status-fg); background: var(--rx-status-bg); }

/* Reliability — response-time panels. Two groups of two figures, on a shared
   grid so the medians sit directly above each other: the whole point of the
   section is the comparison, and alignment does that without extra words.
   Colour encodes whose time it is — Navy where Services Australia is in the
   loop, Royal where we answer alone. Surfaces stay unified (border, not tint),
   matching card-background in docs.yml. */
.rr-perf {
  border: 1px solid #CFCFCF;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 1rem;
}
.rr-perf-head {
  padding: 1rem 1.5rem 0.9rem;
  border-bottom: 1px solid #CFCFCF;
  border-left: 4px solid var(--rr-edge);
}
.rr-perf-head strong { display: block; font-size: 1.05rem; letter-spacing: -0.01em; }
.rr-perf-head span { display: block; font-size: 0.85rem; opacity: 0.72; margin-top: 0.2rem; }
.rr-perf-nums { display: grid; grid-template-columns: 1fr 1fr; }
.rr-perf-solo { grid-template-columns: 1fr; }
.rr-perf-num { padding: 1.5rem; border-right: 1px solid #CFCFCF; }
.rr-perf-num:last-child { border-right: none; }
.rr-perf-num b {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--rr-edge);
  font-variant-numeric: tabular-nums;
}
.rr-perf-num b i { font-style: normal; font-size: 1.2rem; font-weight: 600; }
.rr-perf-num em {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.68;
  margin-top: 0.75rem;
}
.rr-perf-num span { display: block; font-size: 0.85rem; opacity: 0.72; margin-top: 0.3rem; }
/* Band variant: the RTO cases are one question with one answer, so the label
   sits beside the figure instead of above a half-empty row. */
/* Stretch, not centre: the head carries the 4px accent edge, so it has to run
   the full height of the card or the edge reads as a floating stub inside the
   rounded corner. Content is centred inside it instead. */
.rr-perf-band { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; align-items: stretch; }
.rr-perf-band .rr-perf-head,
.rr-perf-band .rr-perf-num { display: flex; flex-direction: column; justify-content: center; }
.rr-perf-band .rr-perf-head { border-bottom: none; padding: 1.15rem 0.5rem 1.15rem 1.5rem; }
/* Fixed figure column, left-aligned: every case reads down a single edge, so
   0 / 4.5s / 4.7min line up across the three cards. The single figure fills the
   column rather than inheriting the two-up track, which would shrink it to
   min-content and wrap the label. */
.rr-perf-band .rr-perf-nums { grid-template-columns: 1fr; }
.rr-perf-band .rr-perf-num { padding: 1.15rem 1.5rem; text-align: left; border-right: none; }
.rr-perf-band .rr-perf-num em { margin-top: 0.35rem; }
.rr-sa { --rr-edge: #003780; }
.rr-rr { --rr-edge: #0067AF; }
.dark .rr-perf, .dark .rr-perf-head, .dark .rr-perf-num { border-color: #1A3766; }
.dark .rr-sa { --rr-edge: #7EC1ED; }
.dark .rr-rr { --rr-edge: #1296DF; }
@media (max-width: 640px) {

  .rr-perf-band { grid-template-columns: 1fr; }
  .rr-perf-band .rr-perf-head { border-bottom: 1px solid #CFCFCF; }
  .dark .rr-perf-band .rr-perf-head { border-bottom-color: #1A3766; }
  .rr-perf-nums { grid-template-columns: 1fr; }
  .rr-perf-num { border-right: none; border-bottom: 1px solid #CFCFCF; }
  .rr-perf-num:last-child { border-bottom: none; }
  .dark .rr-perf-num { border-bottom-color: #1A3766; }

}

/* Clickable cards get a CTA arrow. Fern adds .interactive only to cards that carry an href,
   so this marks exactly the ones that go somewhere and leaves static cards alone. Arrows are
   this repo's affordance for standalone CTAs, per the inline-link rule above. In flow rather
   than absolutely positioned, so it can never sit on top of a long title. */
.fern-card.interactive::after {
  content: "→";
  display: block;
  text-align: right;
  margin-top: 12px;
  font-size: 18px;
  line-height: 1;
  opacity: 0.55;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.fern-card.interactive:hover::after {
  opacity: 1;
  transform: translateX(3px);
}
.fern-card.interactive:focus-visible::after {
  opacity: 1;
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {

  .fern-card.interactive::after,
  .fern-card.interactive:hover::after {
    transition: none;
    transform: none;
  }
.fern-card.interactive:focus-visible::after {
    transition: none;
    transform: none;
  }

}