/* fonts.css */
/*
 * Self-hosted web fonts (the content-security policy allows fonts from this
 * origin only). Inter (UI, tabular figures via font-variant-numeric) and
 * JetBrains Mono (identifiers). Both SIL Open Font License 1.1 - see
 * public/fonts/*.txt. Variable fonts, Latin + Latin Extended subsets; the
 * unicode ranges are the ones Google Fonts ships for the same subsets.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/jbmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/jbmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* tokens.css */
/*
 * Design tokens. Names are roles, not shades: --oe-bg is the page ground,
 * --oe-surface a card, --oe-surface-2 an inset or raised block, --oe-hover /
 * --oe-pressed the interactive states, --oe-fg / --oe-fg-2 / --oe-muted the
 * three text levels. The neutral ramp keeps the Tokyo Night hue (dark) and a
 * cool grey (light); --oe-primary is the ONE accent and belongs to the primary
 * action, the selected tab, links and the focus ring. success / warning /
 * danger / info are status colours only. Theme = data-theme="dark|light" on
 * <html> (set by ThemeProvider); with no attribute prefers-color-scheme decides.
 */
:root {
  color-scheme: dark;

  --oe-bg: #1a1b26;
  --oe-surface: #1f2231;
  --oe-surface-2: #272b3d;
  --oe-hover: #2a2f43;
  --oe-pressed: #313752;
  --oe-border: #2d3346;
  --oe-border-strong: #3b4261;
  --oe-fg: #c8d0ee;
  --oe-fg-2: #a9b1d6;
  --oe-muted: #8c95b3;

  --oe-primary: #7aa2f7;
  --oe-success: #9ece6a;
  --oe-info: #7dcfff;
  --oe-warning: #e0af68;
  --oe-danger: #f7768e;
  --oe-secondary: #bb9af7;
  --oe-neutral: #565f89;
  --oe-orange: #ff9e64;

  --oe-on-accent: #1a1b26;

  /* Text-grade variants: identical to the base colours in dark, darkened in
     light so warning / info / orange text meets 4.5:1 on white. */
  --oe-warning-text: var(--oe-warning);
  --oe-info-text: var(--oe-info);
  --oe-orange-text: var(--oe-orange);

  /* soft (tinted) variants for pills, banners and row tints */
  --oe-soft-mix: 22%;
  --oe-primary-soft: color-mix(in srgb, var(--oe-primary) var(--oe-soft-mix), var(--oe-bg));
  --oe-success-soft: color-mix(in srgb, var(--oe-success) var(--oe-soft-mix), var(--oe-bg));
  --oe-info-soft: color-mix(in srgb, var(--oe-info) var(--oe-soft-mix), var(--oe-bg));
  --oe-warning-soft: color-mix(in srgb, var(--oe-warning) var(--oe-soft-mix), var(--oe-bg));
  --oe-danger-soft: color-mix(in srgb, var(--oe-danger) var(--oe-soft-mix), var(--oe-bg));
  --oe-secondary-soft: color-mix(in srgb, var(--oe-secondary) var(--oe-soft-mix), var(--oe-bg));
  --oe-neutral-soft: color-mix(in srgb, var(--oe-neutral) var(--oe-soft-mix), var(--oe-bg));
  --oe-orange-soft: color-mix(in srgb, var(--oe-orange) var(--oe-soft-mix), var(--oe-bg));

  /* The Portfolio's four status bands (2026-10-02): a row's colour is its
     status, so each band has its own hue (the yellow a bright lemon, apart
     from the amber warning and the orange), a tint a little stronger than
     the soft mix, and the full colour for the row's edge stripe. */
  --oe-band-green: var(--oe-success);
  --oe-band-yellow: #f0dc50;
  --oe-band-orange: var(--oe-orange);
  --oe-band-red: var(--oe-danger);
  --oe-band-mix: 26%;
  --oe-band-green-soft: color-mix(in srgb, var(--oe-band-green) var(--oe-band-mix), var(--oe-bg));
  --oe-band-yellow-soft: color-mix(in srgb, var(--oe-band-yellow) var(--oe-band-mix), var(--oe-bg));
  --oe-band-orange-soft: color-mix(in srgb, var(--oe-band-orange) var(--oe-band-mix), var(--oe-bg));
  --oe-band-red-soft: color-mix(in srgb, var(--oe-band-red) var(--oe-band-mix), var(--oe-bg));

  /* Dark elevation is lightness, not shadow; only overlays cast one. */
  --oe-shadow: 0 12px 32px rgb(0 0 0 / 45%);

  /* type + spacing scale (Inter and JetBrains Mono are self-hosted: theme/fonts.css) */
  --oe-font:
    Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --oe-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
  --oe-text-xs: 0.75rem;
  --oe-text-sm: 0.875rem;
  --oe-text-md: 1rem;
  --oe-text-lg: 1.25rem;
  --oe-text-xl: 1.5rem;
  --oe-space-1: 4px;
  --oe-space-2: 8px;
  --oe-space-3: 12px;
  --oe-space-4: 16px;
  --oe-space-5: 24px;
  --oe-radius: 10px;
  --oe-radius-sm: 6px;
  --oe-radius-xs: 4px;
  --oe-radius-pill: 999px;
  --oe-tap: 44px;
}

:root[data-theme='light'] {
  color-scheme: light;

  --oe-bg: #f4f5f8;
  --oe-surface: #ffffff;
  --oe-surface-2: #eceef3;
  --oe-hover: #e8ebf1;
  --oe-pressed: #dde1ea;
  --oe-border: #dadee7;
  --oe-border-strong: #c4cad7;
  --oe-fg: #171a23;
  --oe-fg-2: #3e4556;
  --oe-muted: #5f6779;

  --oe-primary: #2f6fed;
  --oe-success: #1f8a5b;
  --oe-info: #0d9fc2;
  --oe-warning: #d29c1a;
  --oe-danger: #c93b4e;
  --oe-secondary: #6b7385;
  --oe-neutral: #8a92a6;
  --oe-orange: #e8741c;

  --oe-on-accent: #ffffff;
  --oe-warning-text: #7a5a00;
  --oe-info-text: #0a6e80;
  --oe-orange-text: #a84a00;
  --oe-soft-mix: 16%;
  --oe-band-yellow: #d4b000;
  --oe-band-mix: 24%;
  --oe-shadow: 0 12px 32px rgb(23 26 35 / 14%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --oe-bg: #f4f5f8;
    --oe-surface: #ffffff;
    --oe-surface-2: #eceef3;
    --oe-hover: #e8ebf1;
    --oe-pressed: #dde1ea;
    --oe-border: #dadee7;
    --oe-border-strong: #c4cad7;
    --oe-fg: #171a23;
    --oe-fg-2: #3e4556;
    --oe-muted: #5f6779;

    --oe-primary: #2f6fed;
    --oe-success: #1f8a5b;
    --oe-info: #0d9fc2;
    --oe-warning: #d29c1a;
    --oe-danger: #c93b4e;
    --oe-secondary: #6b7385;
    --oe-neutral: #8a92a6;
    --oe-orange: #e8741c;

    --oe-on-accent: #ffffff;
    --oe-warning-text: #7a5a00;
    --oe-info-text: #0a6e80;
    --oe-orange-text: #a84a00;
    --oe-soft-mix: 16%;
    --oe-band-yellow: #d4b000;
    --oe-band-mix: 24%;
    --oe-shadow: 0 12px 32px rgb(23 26 35 / 14%);
  }
}

/*
 * Accessible colours (Settings > Positive and negative colours): positive
 * becomes blue and negative orange, both already in the palette, for
 * red-green colour vision deficiency. Applied as data-colors on <html>
 * (`lib/colors.ts`); every soft variant follows through color-mix.
 */
:root[data-colors='accessible'] {
  --oe-success: #79c0ff;
  --oe-danger: #ff9e64;
  /* the red band keeps its own hue: the orange band already has the orange */
  --oe-band-red: #d982c7;
}

:root[data-theme='light'][data-colors='accessible'] {
  --oe-success: #1f5fd0;
  --oe-danger: #c2500a;
  --oe-band-red: #a3367f;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme])[data-colors='accessible'] {
    --oe-success: #1f5fd0;
    --oe-danger: #c2500a;
    --oe-band-red: #a3367f;
  }
}

/* brand.css */
/*
 * The brand surface: the always-dark panel the sign-in page and the landing
 * page's bands are built on (the product's own face, whatever the app theme).
 * One definition so the two screens stay one product. Text inside it uses the
 * fixed inks below; any card placed on it is an opaque --oe-surface so the
 * theme's status colours render on their own ground.
 */
.oe-brand {
  --auth-ink: #e7eaf1;
  --auth-ink-2: #aeb6c7;
  --auth-line: rgb(255 255 255 / 7%);
  --brand-line: #7aa2f7;
  --brand-up: #9ece6a;
  --brand-down: #f7768e;
  --brand-ground: #0f111a;
  position: relative;
  overflow: hidden;
  color: var(--auth-ink);
  background:
    radial-gradient(720px 480px at 50% 30%, rgb(122 162 247 / 16%), transparent 65%),
    radial-gradient(520px 320px at 100% 100%, rgb(158 206 106 / 12%), transparent 60%),
    linear-gradient(170deg, #0f111a 0%, #161927 55%, #1a1b26 100%);
}

/* A faint grid across the whole surface: the paper the chart is drawn on. */
.oe-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--auth-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--auth-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(closest-side at 50% 45%, #000 40%, transparent 100%);
  pointer-events: none;
}

/* learn.css */
/*
 * Learn Options: the library's own styles, on the app's tokens. Served after
 * fonts.css, tokens.css and brand.css as ONE file (optionedge/learn/styles.py).
 *
 * Colours are tokens only - a test refuses a hex colour here - so the pages
 * follow the theme and the accessible colour choice with the app.
 * Reading comes first: an 18 px text in lines of about 70 characters,
 * headings that never skip a level, and nothing that needs a script to be
 * read.
 *
 * The measure is a length in rem, not in ch: 1ch is the width of "0", and in
 * Inter a line of 70ch holds about 100 letters (measured in a browser). At
 * 18 px, 35rem holds about 70.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* An anchor, and anything that takes the focus, stops below the header. */
  scroll-padding-top: 5.5rem;
}

body.oe-learn {
  --oe-measure: 35rem;
  --oe-gutter: 1rem;

  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--oe-bg);
  color: var(--oe-fg);
  font-family: var(--oe-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* The defaults weigh nothing (:where), so every rule after them wins
   without being forced. They once outweighed the spacing of the text, and
   the paragraphs of an article stood with no space between them. */
:where(.oe-learn) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre) {
  margin: 0;
}

:where(.oe-learn) :where(h1, h2, h3, h4) {
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

:where(.oe-learn) a {
  color: var(--oe-primary);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

:where(.oe-learn) a:hover {
  text-decoration-thickness: 2px;
}

.oe-learn :focus-visible {
  outline: 2px solid var(--oe-primary);
  outline-offset: 2px;
  border-radius: var(--oe-radius-xs);
}

:where(.oe-learn) :where(img, svg) {
  max-width: 100%;
}

.oe-skip {
  position: absolute;
  left: var(--oe-gutter);
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  border-radius: var(--oe-radius-sm);
  background: var(--oe-primary);
  color: var(--oe-on-accent);
  font-weight: 600;
  text-decoration: none;
}

.oe-skip:focus {
  top: 0.5rem;
}

/* --- widths ---------------------------------------------------------------- */
.oe-wrap {
  position: relative;
  width: min(100% - 2 * var(--oe-gutter), 72rem);
  margin-inline: auto;
}

.oe-wrap--narrow {
  width: min(100% - 2 * var(--oe-gutter), 40rem);
}

/* The text, a gap, "On this page". */
.oe-wrap--article {
  width: min(100% - 2 * var(--oe-gutter), 56rem);
}

.oe-main {
  flex: 1 0 auto;
  padding-bottom: 4rem;
}

.oe-main:focus {
  outline: none;
}

.oe-main--list,
.oe-main--glossary,
.oe-main--article,
.oe-main--missing {
  padding-top: 2rem;
}

/* --- the header ------------------------------------------------------------- */
.oe-top {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--oe-border);
  background: color-mix(in srgb, var(--oe-bg) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.oe-top-inner {
  width: min(100% - 2 * var(--oe-gutter), 72rem);
  margin-inline: auto;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem 1rem;
}

.oe-brandlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--oe-fg);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.oe-brandlink img {
  width: 28px;
  height: 28px;
}

.oe-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 0.125rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.oe-nav::-webkit-scrollbar {
  display: none;
}

.oe-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: var(--oe-radius-sm);
  color: var(--oe-fg-2);
  font-size: var(--oe-text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.oe-nav a:hover {
  background: var(--oe-hover);
  color: var(--oe-fg);
}

.oe-nav a[aria-current='page'] {
  background: var(--oe-primary-soft);
  color: var(--oe-fg);
}

.oe-top-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.oe-theme {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--oe-radius-sm);
  background: none;
  color: var(--oe-fg-2);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.oe-theme:hover {
  background: var(--oe-hover);
  color: var(--oe-fg);
}

.oe-cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border-radius: var(--oe-radius-sm);
  background: var(--oe-primary);
  color: var(--oe-on-accent);
  font-size: var(--oe-text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.oe-cta:hover {
  filter: brightness(1.08);
}

/* A phone: the name and the actions in one row, the sections under them,
   and the header leaves with the page - a quarter of the screen is too much
   to keep. */
@media (max-width: 40rem) {
  .oe-top {
    position: static;
  }

  .oe-top-inner {
    flex-wrap: wrap;
    gap: 0 0.5rem;
    padding-top: 0.25rem;
  }

  .oe-brandlink {
    flex: 1 1 auto;
    min-width: 0;
  }

  .oe-nav {
    order: 3;
    flex: 1 0 100%;
    margin-inline: -0.75rem;
    padding-inline: 0.25rem;
  }

  html {
    scroll-padding-top: 1rem;
  }
}

/* --- the front page --------------------------------------------------------- */
.oe-hero {
  padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--oe-border);
}

.oe-hero h1 {
  font-size: clamp(2.125rem, 5.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--auth-ink);
}

.oe-lead {
  max-width: 44rem;
  margin-top: 1rem;
  color: var(--auth-ink-2);
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.5;
}

.oe-filter {
  margin-top: 1.75rem;
  max-width: 32rem;
}

.oe-filter label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--oe-text-sm);
  font-weight: 600;
}

.oe-hero .oe-filter label {
  color: var(--auth-ink-2);
}

.oe-filter input {
  width: 100%;
  min-height: 3rem;
  padding: 0 1rem;
  border: 1px solid var(--oe-border-strong);
  border-radius: var(--oe-radius-sm);
  background: var(--oe-surface);
  color: var(--oe-fg);
  font: inherit;
}

.oe-filter input::placeholder {
  color: var(--oe-muted);
}

.oe-filter-none {
  margin-top: 0.5rem;
  font-size: var(--oe-text-sm);
}

.oe-hero .oe-filter-none {
  color: var(--auth-ink-2);
}

.oe-block {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.oe-block > h2 {
  font-size: 1.5rem;
}

.oe-block-lead {
  max-width: var(--oe-measure);
  margin-top: 0.5rem;
  color: var(--oe-fg-2);
}

.oe-more {
  margin-top: 1rem;
  font-weight: 600;
}

.oe-meta {
  color: var(--oe-muted);
  font-size: var(--oe-text-sm);
}

/* A numbered list of articles: the path, a topic. */
.oe-steps {
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
  counter-reset: oe-step;
  columns: 22rem 2;
  column-gap: 2.5rem;
}

.oe-steps > li {
  counter-increment: oe-step;
  position: relative;
  break-inside: avoid;
  padding: 0.625rem 0 0.625rem 3rem;
  border-top: 1px solid var(--oe-border);
}

.oe-steps > li::before {
  content: counter(oe-step);
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--oe-surface-2);
  color: var(--oe-fg-2);
  font-size: var(--oe-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.oe-steps--full {
  columns: auto;
}

.oe-steps--full > li {
  padding-block: 1rem;
}

.oe-steps--full > li::before {
  top: 1rem;
}

.oe-item-title {
  font-weight: 600;
  text-decoration: none;
}

.oe-item-title:hover {
  text-decoration: underline;
}

.oe-item-text {
  max-width: var(--oe-measure);
  margin-top: 0.25rem;
  color: var(--oe-fg-2);
}

.oe-item .oe-meta {
  margin-top: 0.125rem;
}

.oe-cards {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  align-items: start;
}

.oe-card {
  padding: 1.25rem 1.25rem 0.75rem;
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius);
  background: var(--oe-surface);
}

.oe-card h3 {
  font-size: 1.1875rem;
}

.oe-card h3 a {
  color: var(--oe-fg);
  text-decoration: none;
}

.oe-card h3 a:hover {
  color: var(--oe-primary);
}

.oe-card-text {
  margin-top: 0.375rem;
  color: var(--oe-fg-2);
  font-size: var(--oe-text-md);
}

.oe-card > .oe-meta {
  margin-top: 0.375rem;
}

.oe-list {
  list-style: none;
  padding: 0;
  margin-top: 0.75rem;
}

.oe-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--oe-border);
}

.oe-list .oe-item-title {
  font-weight: 500;
}

.oe-letters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 1rem;
}

.oe-letters a {
  min-width: 2.5rem;
  min-height: 2.5rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius-sm);
  background: var(--oe-surface);
  color: var(--oe-fg);
  font-weight: 600;
  text-decoration: none;
}

.oe-letters a:hover {
  border-color: var(--oe-primary);
  color: var(--oe-primary);
}

.oe-recent {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.oe-recent li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--oe-border);
}

.oe-levels {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem;
}

.oe-levels > div {
  padding: 0.875rem 1rem;
  border-radius: var(--oe-radius-sm);
  background: var(--oe-surface);
  border: 1px solid var(--oe-border);
}

.oe-levels dt {
  font-weight: 600;
}

.oe-levels dd {
  color: var(--oe-fg-2);
  font-size: var(--oe-text-sm);
}

/* --- the way back up -------------------------------------------------------- */
.oe-crumbs ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  font-size: var(--oe-text-sm);
}

.oe-crumbs li + li::before {
  content: '/';
  margin-right: 0.5rem;
  color: var(--oe-muted);
}

.oe-crumbs a {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--oe-fg-2);
  text-decoration: none;
}

.oe-crumbs a:hover {
  color: var(--oe-primary);
  text-decoration: underline;
}

/* --- a page's head ---------------------------------------------------------- */
.oe-main--list h1,
.oe-main--glossary h1,
.oe-main--missing h1,
.oe-article-head h1 {
  margin-top: 0.75rem;
  font-size: clamp(1.875rem, 4.5vw, 2.625rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.oe-summary {
  max-width: var(--oe-measure);
  margin-top: 1rem;
  color: var(--oe-fg);
  font-size: clamp(1.125rem, 2.2vw, 1.25rem);
  line-height: 1.5;
}

.oe-summary + .oe-meta {
  margin-top: 0.75rem;
}

.oe-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.875rem;
}

.oe-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius-pill);
  background: var(--oe-surface);
  color: var(--oe-fg-2);
  font-size: var(--oe-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.oe-chip--link:hover {
  border-color: var(--oe-primary);
  color: var(--oe-primary);
}

.oe-article-head > .oe-meta {
  margin-top: 0.625rem;
}

/* --- an article ------------------------------------------------------------- */
.oe-article > * {
  max-width: var(--oe-measure);
}

.oe-keypoints,
.oe-glance,
.oe-before,
.oe-terms,
.oe-sources,
.oe-related {
  margin-top: 2rem;
}

.oe-keypoints {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--oe-border);
  border-left: 4px solid var(--oe-primary);
  border-radius: var(--oe-radius-sm);
  background: var(--oe-surface);
}

.oe-keypoints h2,
.oe-before h2 {
  color: var(--oe-fg-2);
  font-size: var(--oe-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oe-keypoints ul {
  margin-top: 0.625rem;
  padding-left: 1.25rem;
}

.oe-keypoints li + li {
  margin-top: 0.375rem;
}

.oe-glance h2,
.oe-terms h2,
.oe-sources h2,
.oe-related h2 {
  font-size: 1.25rem;
}

.oe-glance .oe-table {
  margin-top: 0.75rem;
}

.oe-glance th {
  width: 38%;
  color: var(--oe-fg-2);
  font-weight: 600;
}

.oe-before {
  padding: 1rem 1.25rem;
  border-radius: var(--oe-radius-sm);
  background: var(--oe-surface-2);
}

.oe-before ul {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
}

/* "On this page": inside the text on a narrow screen (the script folds it
   there), beside the article on a wide one. */
.oe-toc {
  margin-top: 2rem;
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius-sm);
  background: var(--oe-surface);
}

.oe-toc summary {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  color: var(--oe-fg-2);
  font-size: var(--oe-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.oe-toc ol {
  list-style: none;
  padding: 0 1rem 0.875rem;
}

.oe-toc a {
  display: block;
  padding: 0.375rem 0 0.375rem 0.75rem;
  border-left: 2px solid var(--oe-border);
  color: var(--oe-fg-2);
  font-size: var(--oe-text-sm);
  line-height: 1.35;
  text-decoration: none;
}

.oe-toc a:hover {
  color: var(--oe-fg);
}

.oe-toc a[aria-current='true'] {
  border-left-color: var(--oe-primary);
  color: var(--oe-fg);
  font-weight: 600;
}

@media (min-width: 64rem) {
  .oe-article {
    display: grid;
    grid-template-columns: minmax(0, var(--oe-measure)) minmax(0, 16rem);
    justify-content: space-between;
    column-gap: 3rem;
  }

  .oe-article > * {
    grid-column: 1;
    min-width: 0;
  }

  .oe-article > .oe-toc {
    grid-column: 2;
    grid-row: 1 / span 40;
    align-self: start;
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6.5rem);
    margin-top: 0.75rem;
    overflow-y: auto;
    border: 0;
    background: none;
  }

  .oe-toc summary {
    padding: 0;
    list-style: none;
    cursor: default;
    pointer-events: none;
  }

  .oe-toc summary::-webkit-details-marker {
    display: none;
  }

  .oe-toc ol {
    padding: 0;
  }
}

/* The text itself. */
.oe-prose {
  margin-top: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.65;
}

.oe-prose > * + * {
  margin-top: 1rem;
}

.oe-prose h2 {
  margin-top: 2.75rem;
  font-size: 1.5rem;
}

.oe-prose h3 {
  margin-top: 2rem;
  font-size: 1.1875rem;
}

.oe-prose h2 + *,
.oe-prose h3 + * {
  margin-top: 0.625rem;
}

.oe-prose ul,
.oe-prose ol {
  padding-left: 1.375rem;
}

.oe-prose li + li {
  margin-top: 0.375rem;
}

.oe-prose li > ul,
.oe-prose li > ol {
  margin-top: 0.375rem;
}

.oe-prose strong {
  font-weight: 600;
}

.oe-prose code {
  padding: 0.1em 0.35em;
  border-radius: var(--oe-radius-xs);
  background: var(--oe-surface-2);
  font-family: var(--oe-font-mono);
  font-size: 0.9em;
}

.oe-prose pre {
  margin-top: 1rem;
  padding: 1rem;
  overflow-x: auto;
  border-radius: var(--oe-radius-sm);
  background: var(--oe-surface-2);
  font-size: var(--oe-text-sm);
  line-height: 1.5;
}

.oe-prose pre code {
  padding: 0;
  background: none;
}

.oe-prose blockquote {
  margin: 1rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--oe-border-strong);
  color: var(--oe-fg-2);
}

.oe-prose dt {
  font-weight: 600;
}

.oe-prose dd {
  margin: 0.125rem 0 0.75rem 1.25rem;
  color: var(--oe-fg-2);
}

.oe-prose hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--oe-border);
}

.oe-prose .footnotes {
  font-size: var(--oe-text-sm);
  color: var(--oe-fg-2);
}

.oe-prose sup {
  line-height: 0;
}

/* Tables scroll inside their own box: the page never scrolls sideways. */
.oe-table {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius-sm);
  background: var(--oe-surface);
}

.oe-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--oe-text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}

.oe-table caption {
  padding: 0.75rem 0.875rem 0.625rem;
  caption-side: top;
  color: var(--oe-fg-2);
  font-weight: 600;
  text-align: left;
}

.oe-table th,
.oe-table td {
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--oe-border);
  text-align: left;
  vertical-align: top;
}

.oe-table thead th {
  border-top: 0;
  background: var(--oe-surface-2);
  color: var(--oe-fg-2);
  font-weight: 600;
  vertical-align: bottom;
}

.oe-table caption + thead th {
  border-top: 1px solid var(--oe-border);
}

.oe-table tbody tr:first-child > * {
  border-top: 0;
}

.oe-table thead + tbody tr:first-child > * {
  border-top: 1px solid var(--oe-border);
}

.oe-table tbody th {
  font-weight: 600;
}

.oe-table .oe-num {
  text-align: right;
}

/* A figure stays on its line; the heading over it may take two. */
.oe-table td.oe-num {
  white-space: nowrap;
}

.oe-table .oe-center {
  text-align: center;
}

/* An aside says what it is in a word: the colour only repeats it. */
.oe-note {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--oe-border);
  border-left: 4px solid var(--oe-neutral);
  border-radius: var(--oe-radius-sm);
  background: var(--oe-surface);
}

.oe-note > * + * {
  margin-top: 0.75rem;
}

.oe-note-label {
  color: var(--oe-fg-2);
  font-size: var(--oe-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oe-note--example {
  border-left-color: var(--oe-info);
}

.oe-note--example .oe-note-label {
  color: var(--oe-info-text);
}

.oe-note--warning {
  border-left-color: var(--oe-warning);
}

.oe-note--warning .oe-note-label {
  color: var(--oe-warning-text);
}

.oe-note-foot,
.oe-fig-note {
  color: var(--oe-muted);
  font-size: var(--oe-text-sm);
}

/* A payoff figure: the drawing, what it shows in words, its table. */
.oe-figure {
  margin-top: 2rem;
}

/* Drawn 380 units wide: about its own size on a phone, where its 12-unit
   labels must still be read, and no more than 30rem beside the text. */
.oe-figure .oe-fig-svg {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius-sm);
  background: var(--oe-surface);
}

.oe-fig-gain {
  fill: var(--oe-success-soft);
}

.oe-fig-loss {
  fill: var(--oe-danger-soft);
}

.oe-fig-zero {
  stroke: var(--oe-border-strong);
  stroke-width: 1;
}

.oe-fig-tick {
  stroke: var(--oe-border-strong);
  stroke-width: 1;
}

.oe-fig-spot {
  stroke: var(--oe-muted);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.oe-fig-line {
  fill: none;
  stroke: var(--oe-primary);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.oe-fig-line--other {
  stroke: var(--oe-muted);
  stroke-width: 1.75;
  stroke-dasharray: 6 4;
}

.oe-fig-even {
  fill: var(--oe-surface);
  stroke: var(--oe-primary);
  stroke-width: 2;
}

.oe-fig-label,
.oe-fig-axis {
  fill: var(--oe-muted);
  font-family: var(--oe-font);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.oe-figure .oe-fig-legend {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-top: 0.625rem;
  color: var(--oe-fg-2);
  font-size: var(--oe-text-sm);
}

.oe-figure .oe-fig-key {
  margin: 0;
}

.oe-fig-key::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  margin-right: 0.5rem;
  border-top: 3px solid var(--oe-primary);
  vertical-align: middle;
}

.oe-fig-key--other::before {
  border-top: 2px dashed var(--oe-muted);
}

.oe-figure figcaption {
  margin-top: 0.75rem;
  color: var(--oe-fg-2);
  font-size: var(--oe-text-sm);
  line-height: 1.5;
}

.oe-figure figcaption strong {
  color: var(--oe-fg);
}

.oe-figure .oe-table {
  margin-top: 0.75rem;
}

/* After the text. */
.oe-terms dl {
  margin-top: 0.75rem;
}

.oe-terms dl > div {
  padding: 0.75rem 0;
  border-top: 1px solid var(--oe-border);
}

.oe-terms dt {
  font-weight: 600;
}

.oe-terms dd {
  color: var(--oe-fg-2);
  font-size: var(--oe-text-md);
}

.oe-sources ol {
  margin-top: 0.75rem;
  padding-left: 1.375rem;
  color: var(--oe-fg-2);
  font-size: var(--oe-text-md);
}

.oe-sources li + li {
  margin-top: 0.5rem;
}

.oe-pager {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.75rem;
}

.oe-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--oe-border);
  border-radius: var(--oe-radius-sm);
  background: var(--oe-surface);
  text-decoration: none;
}

.oe-pager-link:hover {
  border-color: var(--oe-primary);
}

.oe-pager-link span {
  color: var(--oe-muted);
  font-size: var(--oe-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.oe-pager-link strong {
  font-weight: 600;
}

.oe-pager-link--next {
  text-align: right;
}

.oe-pager-link--next:first-child {
  grid-column: -2;
}

/* --- the glossary ----------------------------------------------------------- */
.oe-main--glossary .oe-filter {
  margin-top: 1.5rem;
}

.oe-main--glossary .oe-letters {
  margin-top: 1.5rem;
}

.oe-letter {
  margin-top: 2.5rem;
}

.oe-letter > h2 {
  font-size: 1.5rem;
}

.oe-glossary {
  margin-top: 0.5rem;
}

.oe-term {
  padding: 1rem 0.75rem;
  margin-inline: -0.75rem;
  border-top: 1px solid var(--oe-border);
  border-radius: var(--oe-radius-sm);
}

.oe-term:target {
  background: var(--oe-primary-soft);
}

.oe-term dt {
  font-size: 1.125rem;
  font-weight: 600;
}

.oe-term dd {
  max-width: var(--oe-measure);
}

.oe-term dd > * + * {
  margin-top: 0.5rem;
}

/* --- the footer ------------------------------------------------------------- */
.oe-foot {
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--oe-border);
  background: var(--oe-surface);
  color: var(--oe-fg-2);
  font-size: var(--oe-text-sm);
  line-height: 1.55;
}

.oe-foot-title {
  color: var(--oe-fg-2);
  font-size: var(--oe-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oe-foot p {
  max-width: 52rem;
  margin-top: 0.75rem;
}

.oe-foot-links a {
  display: inline-block;
  padding: 0.25rem 0;
}

/* --- on paper --------------------------------------------------------------- */
@media print {
  .oe-top,
  .oe-skip,
  .oe-filter,
  .oe-toc,
  .oe-pager,
  .oe-foot-links {
    display: none !important;
  }

  body.oe-learn {
    font-size: 11pt;
  }

  .oe-table {
    overflow: visible;
  }
}