:root {
  color-scheme: light;
  --surface-page: #fffefa;
  --surface-sidebar: #fffefa;
  --surface-card: #ffffff;
  --surface-soft: #f7f3ea;
  --surface-input: #ffffff;
  --surface-content: #fffdf8;
  --surface-cover: #f7f3ea;
  --surface-elevated: #ffffff;
  --text-main: #102a50;
  --text-heading: #102a50;
  --text-body: #293a50;
  --text-muted: #687184;
  --link-color: #315476;
  --line-main: #ded7c8;
  --row-alt: #e8f2fb;
  --accent-gold: #a47a2b;
  --shadow-color: rgba(22, 32, 46, 0.12);
}

/*
 * Content colors are author choices, not workspace chrome. Keep them stable
 * across light, dark, and system display modes by placing these rules after
 * every theme override.
 */
.rule-detail__body .callout-color--default { background: #ffffff !important; color: #37352f !important; }
.rule-detail__body .callout-color--gray { background: #e3e2e0 !important; color: #37352f !important; }
.rule-detail__body .callout-color--brown { background: #eee0da !important; color: #37352f !important; }
.rule-detail__body .callout-color--orange { background: #fadec9 !important; color: #37352f !important; }
.rule-detail__body .callout-color--yellow { background: #fdecc8 !important; color: #37352f !important; }
.rule-detail__body .callout-color--green { background: #dbeddb !important; color: #37352f !important; }
.rule-detail__body .callout-color--blue { background: #d3e5ef !important; color: #37352f !important; }
.rule-detail__body .callout-color--purple { background: #e8deee !important; color: #37352f !important; }
.rule-detail__body .callout-color--pink { background: #f5e0e9 !important; color: #37352f !important; }
.rule-detail__body .callout-color--red { background: #ffe2dd !important; color: #37352f !important; }

.rule-detail__body tr.table-color--default > th,
.rule-detail__body tr.table-color--default > td,
.rule-detail__body th.table-color--default,
.rule-detail__body td.table-color--default { background: #ffffff !important; color: #37352f !important; }
.rule-detail__body tr.table-color--gray > th,
.rule-detail__body tr.table-color--gray > td,
.rule-detail__body th.table-color--gray,
.rule-detail__body td.table-color--gray { background: #e3e2e0 !important; color: #37352f !important; }
.rule-detail__body tr.table-color--brown > th,
.rule-detail__body tr.table-color--brown > td,
.rule-detail__body th.table-color--brown,
.rule-detail__body td.table-color--brown { background: #eee0da !important; color: #37352f !important; }
.rule-detail__body tr.table-color--orange > th,
.rule-detail__body tr.table-color--orange > td,
.rule-detail__body th.table-color--orange,
.rule-detail__body td.table-color--orange { background: #fadec9 !important; color: #37352f !important; }
.rule-detail__body tr.table-color--yellow > th,
.rule-detail__body tr.table-color--yellow > td,
.rule-detail__body th.table-color--yellow,
.rule-detail__body td.table-color--yellow { background: #fdecc8 !important; color: #37352f !important; }
.rule-detail__body tr.table-color--green > th,
.rule-detail__body tr.table-color--green > td,
.rule-detail__body th.table-color--green,
.rule-detail__body td.table-color--green { background: #dbeddb !important; color: #37352f !important; }
.rule-detail__body tr.table-color--blue > th,
.rule-detail__body tr.table-color--blue > td,
.rule-detail__body th.table-color--blue,
.rule-detail__body td.table-color--blue { background: #d3e5ef !important; color: #37352f !important; }
.rule-detail__body tr.table-color--purple > th,
.rule-detail__body tr.table-color--purple > td,
.rule-detail__body th.table-color--purple,
.rule-detail__body td.table-color--purple { background: #e8deee !important; color: #37352f !important; }
.rule-detail__body tr.table-color--pink > th,
.rule-detail__body tr.table-color--pink > td,
.rule-detail__body th.table-color--pink,
.rule-detail__body td.table-color--pink { background: #f5e0e9 !important; color: #37352f !important; }
.rule-detail__body tr.table-color--red > th,
.rule-detail__body tr.table-color--red > td,
.rule-detail__body th.table-color--red,
.rule-detail__body td.table-color--red { background: #ffe2dd !important; color: #37352f !important; }

.rule-detail__body [class*="callout-color--"] :where(p, li, strong, em, span:not([class*="text-color--"])),
.rule-detail__body [class*="table-color--"] :where(p, li, strong, em, span:not([class*="text-color--"])) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.rule-detail__body .text-color--default { color: var(--text-body) !important; -webkit-text-fill-color: var(--text-body) !important; }
.rule-detail__body [class*="callout-color--"] .text-color--default,
.rule-detail__body [class*="table-color--"] .text-color--default { color: #37352f !important; -webkit-text-fill-color: #37352f !important; }
.rule-detail__body .text-color--gray { color: #787774 !important; -webkit-text-fill-color: #787774 !important; }
.rule-detail__body .text-color--brown { color: #9f6b53 !important; -webkit-text-fill-color: #9f6b53 !important; }
.rule-detail__body .text-color--orange { color: #d9730d !important; -webkit-text-fill-color: #d9730d !important; }
.rule-detail__body .text-color--yellow { color: #cb912f !important; -webkit-text-fill-color: #cb912f !important; }
.rule-detail__body .text-color--green { color: #448361 !important; -webkit-text-fill-color: #448361 !important; }
.rule-detail__body .text-color--blue { color: #337ea9 !important; -webkit-text-fill-color: #337ea9 !important; }
.rule-detail__body .text-color--purple { color: #9065b0 !important; -webkit-text-fill-color: #9065b0 !important; }
.rule-detail__body .text-color--pink { color: #c14c8a !important; -webkit-text-fill-color: #c14c8a !important; }
.rule-detail__body .text-color--red { color: #d44c47 !important; -webkit-text-fill-color: #d44c47 !important; }

/* Rule text uses a neutral canvas in light mode, without changing dark themes. */
html[data-display-theme="light"] .rule-detail__body,
html[data-display-theme="light"] .rule-detail__body > div,
html[data-display-theme="light"] .rule-detail__body > section,
html[data-display-theme="light"] .rule-detail__body > article,
html[data-display-theme="system"] .rule-detail__body,
html[data-display-theme="system"] .rule-detail__body > div,
html[data-display-theme="system"] .rule-detail__body > section,
html[data-display-theme="system"] .rule-detail__body > article {
  background: #ffffff !important;
}

html[data-display-theme="dark"] .rule-detail__body,
html[data-display-theme="dark"] .rule-detail__body > div,
html[data-display-theme="dark"] .rule-detail__body > section,
html[data-display-theme="dark"] .rule-detail__body > article {
  background: var(--surface-content) !important;
}

@media (prefers-color-scheme: dark) {
  html[data-display-theme="system"] .rule-detail__body,
  html[data-display-theme="system"] .rule-detail__body > div,
  html[data-display-theme="system"] .rule-detail__body > section,
  html[data-display-theme="system"] .rule-detail__body > article {
    background: var(--surface-content) !important;
  }
}

/*
 * Authored rule-note colors are content, not interface chrome. Keep these
 * Notion-style choices visible after the light/dark/system theme rules above.
 */
.rule-detail__body .callout-color--default { background: #ffffff !important; color: #37352f !important; }
.rule-detail__body .callout-color--gray { background: #e3e2e0 !important; color: #37352f !important; }
.rule-detail__body .callout-color--brown { background: #eee0da !important; color: #37352f !important; }
.rule-detail__body .callout-color--orange { background: #fadec9 !important; color: #37352f !important; }
.rule-detail__body .callout-color--yellow { background: #fdecc8 !important; color: #37352f !important; }
.rule-detail__body .callout-color--green { background: #dbeddb !important; color: #37352f !important; }
.rule-detail__body .callout-color--blue { background: #d3e5ef !important; color: #37352f !important; }
.rule-detail__body .callout-color--purple { background: #e8deee !important; color: #37352f !important; }
.rule-detail__body .callout-color--pink { background: #f5e0e9 !important; color: #37352f !important; }
.rule-detail__body .callout-color--red { background: #ffe2dd !important; color: #37352f !important; }

.rule-detail__body tr.table-color--default > :is(td, th),
.rule-detail__body :is(td, th).table-color--default { background: #ffffff !important; color: #37352f !important; }
.rule-detail__body tr.table-color--gray > :is(td, th),
.rule-detail__body :is(td, th).table-color--gray { background: #e3e2e0 !important; color: #37352f !important; }
.rule-detail__body tr.table-color--brown > :is(td, th),
.rule-detail__body :is(td, th).table-color--brown { background: #eee0da !important; color: #37352f !important; }
.rule-detail__body tr.table-color--orange > :is(td, th),
.rule-detail__body :is(td, th).table-color--orange { background: #fadec9 !important; color: #37352f !important; }
.rule-detail__body tr.table-color--yellow > :is(td, th),
.rule-detail__body :is(td, th).table-color--yellow { background: #fdecc8 !important; color: #37352f !important; }
.rule-detail__body tr.table-color--green > :is(td, th),
.rule-detail__body :is(td, th).table-color--green { background: #dbeddb !important; color: #37352f !important; }
.rule-detail__body tr.table-color--blue > :is(td, th),
.rule-detail__body :is(td, th).table-color--blue { background: #d3e5ef !important; color: #37352f !important; }
.rule-detail__body tr.table-color--purple > :is(td, th),
.rule-detail__body :is(td, th).table-color--purple { background: #e8deee !important; color: #37352f !important; }
.rule-detail__body tr.table-color--pink > :is(td, th),
.rule-detail__body :is(td, th).table-color--pink { background: #f5e0e9 !important; color: #37352f !important; }
.rule-detail__body tr.table-color--red > :is(td, th),
.rule-detail__body :is(td, th).table-color--red { background: #ffe2dd !important; color: #37352f !important; }

.rule-detail__body .text-color--default { color: var(--text-body) !important; -webkit-text-fill-color: var(--text-body) !important; }
.rule-detail__body .text-color--gray { color: #787774 !important; -webkit-text-fill-color: #787774 !important; }
.rule-detail__body .text-color--brown { color: #9f6b53 !important; -webkit-text-fill-color: #9f6b53 !important; }
.rule-detail__body .text-color--orange { color: #d9730d !important; -webkit-text-fill-color: #d9730d !important; }
.rule-detail__body .text-color--yellow { color: #cb912f !important; -webkit-text-fill-color: #cb912f !important; }
.rule-detail__body .text-color--green { color: #448361 !important; -webkit-text-fill-color: #448361 !important; }
.rule-detail__body .text-color--blue { color: #337ea9 !important; -webkit-text-fill-color: #337ea9 !important; }
.rule-detail__body .text-color--purple { color: #9065b0 !important; -webkit-text-fill-color: #9065b0 !important; }
.rule-detail__body .text-color--pink { color: #c14c8a !important; -webkit-text-fill-color: #c14c8a !important; }
.rule-detail__body .text-color--red { color: #d44c47 !important; -webkit-text-fill-color: #d44c47 !important; }

/*
 * Rule content colors are authored content, not interface chrome. Keep saved
 * Notion-style callout, table, and text colors intact when dark mode changes
 * the surrounding workspace surfaces.
 */
.rule-detail__body .callout-color--gray {
  background-color: #e3e2e0 !important;
  color: #37352f !important;
}

.rule-detail__body .callout-color--brown {
  background-color: #eee0da !important;
  color: #37352f !important;
}

.rule-detail__body .callout-color--orange {
  background-color: #fadec9 !important;
  color: #37352f !important;
}

.rule-detail__body .callout-color--yellow {
  background-color: #fdecc8 !important;
  color: #37352f !important;
}

.rule-detail__body .callout-color--green {
  background-color: #dbeddb !important;
  color: #37352f !important;
}

.rule-detail__body .callout-color--blue {
  background-color: #d3e5ef !important;
  color: #37352f !important;
}

.rule-detail__body .callout-color--purple {
  background-color: #e8deee !important;
  color: #37352f !important;
}

.rule-detail__body .callout-color--pink {
  background-color: #f5e0e9 !important;
  color: #37352f !important;
}

.rule-detail__body .callout-color--red {
  background-color: #ffe2dd !important;
  color: #37352f !important;
}

.rule-detail__body .table-color--gray > :is(td, th),
.rule-detail__body :is(td, th).table-color--gray {
  background-color: #e3e2e0 !important;
  color: #37352f !important;
}

.rule-detail__body .table-color--brown > :is(td, th),
.rule-detail__body :is(td, th).table-color--brown {
  background-color: #eee0da !important;
  color: #37352f !important;
}

.rule-detail__body .table-color--orange > :is(td, th),
.rule-detail__body :is(td, th).table-color--orange {
  background-color: #fadec9 !important;
  color: #37352f !important;
}

.rule-detail__body .table-color--yellow > :is(td, th),
.rule-detail__body :is(td, th).table-color--yellow {
  background-color: #fdecc8 !important;
  color: #37352f !important;
}

.rule-detail__body .table-color--green > :is(td, th),
.rule-detail__body :is(td, th).table-color--green {
  background-color: #dbeddb !important;
  color: #37352f !important;
}

.rule-detail__body .table-color--blue > :is(td, th),
.rule-detail__body :is(td, th).table-color--blue {
  background-color: #d3e5ef !important;
  color: #37352f !important;
}

.rule-detail__body .table-color--purple > :is(td, th),
.rule-detail__body :is(td, th).table-color--purple {
  background-color: #e8deee !important;
  color: #37352f !important;
}

.rule-detail__body .table-color--pink > :is(td, th),
.rule-detail__body :is(td, th).table-color--pink {
  background-color: #f5e0e9 !important;
  color: #37352f !important;
}

.rule-detail__body .table-color--red > :is(td, th),
.rule-detail__body :is(td, th).table-color--red {
  background-color: #ffe2dd !important;
  color: #37352f !important;
}

.rule-detail__body .text-color--default {
  color: var(--text-body) !important;
  -webkit-text-fill-color: var(--text-body) !important;
}

.rule-detail__body :is(
  .callout-color--gray,
  .callout-color--brown,
  .callout-color--orange,
  .callout-color--yellow,
  .callout-color--green,
  .callout-color--blue,
  .callout-color--purple,
  .callout-color--pink,
  .callout-color--red,
  .table-color--gray,
  .table-color--brown,
  .table-color--orange,
  .table-color--yellow,
  .table-color--green,
  .table-color--blue,
  .table-color--purple,
  .table-color--pink,
  .table-color--red
) .text-color--default {
  color: #37352f !important;
  -webkit-text-fill-color: #37352f !important;
}

.rule-detail__body .text-color--gray {
  color: #787774 !important;
  -webkit-text-fill-color: #787774 !important;
}

.rule-detail__body .text-color--brown {
  color: #9f6b53 !important;
  -webkit-text-fill-color: #9f6b53 !important;
}

.rule-detail__body .text-color--orange {
  color: #d9730d !important;
  -webkit-text-fill-color: #d9730d !important;
}

.rule-detail__body .text-color--yellow {
  color: #cb912f !important;
  -webkit-text-fill-color: #cb912f !important;
}

.rule-detail__body .text-color--green {
  color: #448361 !important;
  -webkit-text-fill-color: #448361 !important;
}

.rule-detail__body .text-color--blue {
  color: #337ea9 !important;
  -webkit-text-fill-color: #337ea9 !important;
}

.rule-detail__body .text-color--purple {
  color: #9065b0 !important;
  -webkit-text-fill-color: #9065b0 !important;
}

.rule-detail__body .text-color--pink {
  color: #c14c8a !important;
  -webkit-text-fill-color: #c14c8a !important;
}

.rule-detail__body .text-color--red {
  color: #d44c47 !important;
  -webkit-text-fill-color: #d44c47 !important;
}

/* Exact component bridges for pages whose local styles use fixed light colors. */
.glossary-main,
.harptos-main {
  background: var(--surface-page) !important;
  color: var(--text-body) !important;
}

.glossary-hero h1,
.glossary-list-header h1,
.rule-detail h1,
.harptos-header h1,
.calendar-event-heading h1 {
  color: var(--text-heading) !important;
  -webkit-text-fill-color: var(--text-heading) !important;
}

.glossary-hero,
.glossary-list-header,
.harptos-header,
.harptos-navigation {
  border-color: var(--line-main) !important;
}

.glossary-section-card,
.rule-card {
  background: var(--surface-card) !important;
  border-color: var(--line-main) !important;
  color: var(--text-body) !important;
}

.glossary-section-card__art,
.glossary-section-card__blank {
  background: var(--surface-cover) !important;
}

.glossary-section-card__label {
  background: var(--surface-card) !important;
  border-color: var(--line-main) !important;
  color: var(--text-heading) !important;
}

.glossary-section-card__label strong,
.rule-card,
.rule-card strong {
  color: var(--text-heading) !important;
}

.glossary-section-card__count,
.glossary-empty,
.glossary-empty p {
  color: var(--text-muted) !important;
}

.glossary-empty {
  background: var(--surface-soft) !important;
  border-color: var(--line-main) !important;
}

.rule-form,
.rule-detail {
  background: var(--surface-card) !important;
  border-color: var(--line-main) !important;
  color: var(--text-body) !important;
}

.rule-detail__body {
  background: var(--surface-content) !important;
  color: var(--text-body) !important;
  border-color: var(--line-main) !important;
}

.rule-detail__body h1,
.rule-detail__body h2,
.rule-detail__body h3,
.rule-detail__body h4,
.rule-detail__body strong {
  color: var(--text-heading) !important;
}

.rule-detail__body aside,
.rule-detail__body .callout,
.rule-detail__body figure,
.rule-detail__body .rule-table-wrap {
  background: var(--surface-elevated) !important;
  color: var(--text-body) !important;
  border-color: var(--line-main) !important;
}

.rule-detail__body table,
.rule-detail__body th,
.rule-detail__body td {
  background-color: var(--surface-content) !important;
  color: var(--text-body) !important;
  border-color: var(--line-main) !important;
}

.rule-detail__body th {
  color: var(--text-heading) !important;
}

.harptos-jump input,
.harptos-jump select {
  background: var(--surface-input) !important;
  color: var(--text-body) !important;
  border-color: var(--line-main) !important;
}

.harptos-grid {
  border-color: var(--line-main) !important;
}

.harptos-day {
  background: var(--surface-card) !important;
  color: var(--text-body) !important;
  border-color: var(--line-main) !important;
}

a.harptos-day:hover,
.harptos-day:focus-within {
  background: var(--surface-soft) !important;
}

.harptos-day__number {
  color: var(--text-heading) !important;
}

.harptos-day__label,
.harptos-day__hint,
.harptos-year-note {
  color: var(--text-muted) !important;
}

.harptos-festival,
.harptos-agenda,
.calendar-event-form__body {
  background: var(--surface-card) !important;
  color: var(--text-body) !important;
  border-color: var(--line-main) !important;
}

html[data-display-theme="dark"] {
  color-scheme: dark;
  --surface-page: #0f1722;
  --surface-sidebar: #0c1420;
  --surface-card: #182433;
  --surface-soft: #202d3d;
  --surface-input: #121d2a;
  --surface-content: #1b2838;
  --surface-cover: #152131;
  --surface-elevated: #223044;
  --text-main: #e8edf4;
  --text-heading: #f2eee4;
  --text-body: #dce4ed;
  --text-muted: #aab4c2;
  --link-color: #9fc8ef;
  --line-main: #354356;
  --row-alt: #22364a;
  --accent-gold: #c69a43;
  --shadow-color: rgba(0, 0, 0, 0.38);
}

@media (prefers-color-scheme: dark) {
  html[data-display-theme="system"] {
    color-scheme: dark;
    --surface-page: #0f1722;
    --surface-sidebar: #0c1420;
    --surface-card: #182433;
    --surface-soft: #202d3d;
    --surface-input: #121d2a;
    --surface-content: #1b2838;
    --surface-cover: #152131;
    --surface-elevated: #223044;
    --text-main: #e8edf4;
    --text-heading: #f2eee4;
    --text-body: #dce4ed;
    --text-muted: #aab4c2;
    --link-color: #9fc8ef;
    --line-main: #354356;
    --row-alt: #22364a;
    --accent-gold: #c69a43;
    --shadow-color: rgba(0, 0, 0, 0.38);
  }
}

html,
body,
.wayfarer-shell,
.wayfarer-main,
.wayfarer-content,
.glossary-main,
.harptos-main {
  background: var(--surface-page) !important;
  color: var(--text-body);
}

.wayfarer-sidebar {
  background: var(--surface-sidebar) !important;
  color: var(--text-main);
  border-color: var(--line-main) !important;
}

.wayfarer-brand,
.wayfarer-sidebar h1,
.wayfarer-sidebar h2,
.wayfarer-sidebar a,
.wayfarer-sidebar button,
.sidebar-link,
.sidebar-link__label,
.sidebar-user__name,
.sidebar-user__role {
  color: var(--text-main) !important;
}

html[data-display-theme="dark"] .wayfarer-sidebar .wayfarer-nav__link.is-active,
html[data-display-theme="dark"] .wayfarer-sidebar .wayfarer-nav__link[aria-current="page"] {
  color: #102f56 !important;
}

@media (prefers-color-scheme: dark) {
  html[data-display-theme="system"] .wayfarer-sidebar .wayfarer-nav__link.is-active,
  html[data-display-theme="system"] .wayfarer-sidebar .wayfarer-nav__link[aria-current="page"] {
    color: #102f56 !important;
  }
}

.sidebar-section,
.sidebar-user,
.wayfarer-sidebar hr {
  border-color: var(--line-main) !important;
}

.sidebar-link:hover,
.sidebar-link.is-active,
.sidebar-link[aria-current="page"] {
  background: var(--surface-soft) !important;
}

.glossary-main,
.rule-detail,
.rule-form {
  --rg-navy: var(--text-heading);
  --rg-ink: var(--text-body);
  --rg-muted: var(--text-muted);
  --rg-line: var(--line-main);
  --rg-paper: var(--surface-page);
  --rg-card: var(--surface-card);
}

.glossary-title,
.glossary-list-head h1,
.glossary-section-title,
.rule-detail h1,
.rule-detail h2,
.rule-detail h3,
.rule-detail__title,
.rule-form h1,
.harptos-title,
.harptos-month-title,
.calendar-heading,
.calendar-day-number {
  color: var(--text-heading) !important;
}

.glossary-kicker,
.glossary-subtitle,
.glossary-section-subtitle,
.rule-detail__back,
.rule-detail__property-label,
.harptos-subtitle,
.calendar-day-label,
.calendar-year-note {
  color: var(--text-muted) !important;
}

a {
  color: var(--link-color);
}

.wayfarer-card,
.atlas-page-card,
.glossary-section-card,
.rule-card,
.display-choice,
.member-card,
.tag-card,
.generic-section-card {
  background: var(--surface-card) !important;
  color: var(--text-main) !important;
  border-color: var(--line-main) !important;
  box-shadow: 0 10px 24px var(--shadow-color) !important;
}

.wayfarer-card__label,
.atlas-page-card__label,
.glossary-section-card__footer,
.rule-card__label,
.rule-card__title,
.glossary-section-card__title {
  background: var(--surface-card) !important;
  color: var(--text-main) !important;
  border-color: var(--line-main) !important;
}

.wayfarer-card__cover,
.atlas-page-card__cover,
.glossary-section-card__cover,
.rule-card__cover,
.gallery-card-cover,
.gallery-card-cover--blank {
  background: var(--surface-cover) !important;
  border-color: var(--line-main) !important;
}

.rule-detail,
.rule-form,
.atlas-page-hero,
.atlas-section-hero,
.calendar-event-form,
.calendar-event-detail,
.settings-panel {
  background: var(--surface-card) !important;
  color: var(--text-body) !important;
  border-color: var(--line-main) !important;
  box-shadow: 0 12px 30px var(--shadow-color) !important;
}

.rule-detail__properties,
.rule-detail__body,
.rule-content,
.rule-callout,
.rule-table-wrap,
.page-preview,
.page-link-preview,
.link-preview-card,
.tag-picker-menu,
.tag-editor-menu,
.icon-picker-menu,
.table-tools,
.rich-editor {
  background: var(--surface-content) !important;
  color: var(--text-body) !important;
  border-color: var(--line-main) !important;
}

.rule-detail__body > div,
.rule-detail__body > section,
.rule-detail__body > article,
.rule-callout,
.rule-table-wrap {
  background: var(--surface-content) !important;
  color: var(--text-body) !important;
}

.rule-detail__body p,
.rule-detail__body li,
.rule-detail__body td,
.rule-detail__body th,
.rule-detail__body strong,
.rule-detail__body em,
.rule-detail__body span:not(.tag-pill) {
  color: inherit;
}

.rule-table,
.rule-table th,
.rule-table td,
.rich-editor table,
.rich-editor th,
.rich-editor td {
  background: var(--surface-content) !important;
  color: var(--text-body) !important;
  border-color: var(--line-main) !important;
}

.rule-table tr:nth-child(even) td,
.rich-editor tr:nth-child(even) td {
  background: var(--row-alt) !important;
}

.rule-table th,
.rich-editor th {
  color: var(--text-heading) !important;
}

.rule-editor-toolbar,
.rule-editor-table-tools,
.editor-toolbar,
.tag-picker,
.tag-picker__control,
.tag-editor,
.tag-editor__control {
  background: var(--surface-soft) !important;
  color: var(--text-main) !important;
  border-color: var(--line-main) !important;
}

input,
select,
textarea,
[contenteditable="true"] {
  background-color: var(--surface-input) !important;
  color: var(--text-body) !important;
  border-color: var(--line-main) !important;
  caret-color: var(--text-body);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

.harptos-toolbar input,
.harptos-toolbar select,
.calendar-control {
  background: var(--surface-input) !important;
  color: var(--text-body) !important;
}

.harptos-grid,
.calendar-grid,
.calendar-day,
.calendar-period,
.calendar-event {
  border-color: var(--line-main) !important;
}

.calendar-day,
.calendar-period {
  background: var(--surface-card) !important;
  color: var(--text-body) !important;
}

.calendar-day:hover {
  background: var(--surface-soft) !important;
}

.calendar-day.is-selected,
.calendar-day[aria-current="date"] {
  background: var(--surface-elevated) !important;
}

.calendar-event {
  background: var(--surface-soft) !important;
  color: var(--text-body) !important;
}

html[data-display-theme="dark"] .gallery-sort-handle,
html[data-display-theme="dark"] .drag-handle,
html[data-display-theme="dark"] .rule-property-drag-handle {
  color: #718096 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-display-theme="dark"] .mention-link,
html[data-display-theme="dark"] .page-link {
  color: var(--link-color) !important;
  background: transparent !important;
}

@media (prefers-color-scheme: dark) {
  html[data-display-theme="system"] .gallery-sort-handle,
  html[data-display-theme="system"] .drag-handle,
  html[data-display-theme="system"] .rule-property-drag-handle {
    color: #718096 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-display-theme="system"] .mention-link,
  html[data-display-theme="system"] .page-link {
    color: var(--link-color) !important;
    background: transparent !important;
  }
}

/* Authored rule-note colors must take precedence over display-theme chrome. */
.rule-detail__body .callout-color--default { background: #fff !important; color: #37352f !important; }
.rule-detail__body .callout-color--gray { background: #e3e2e0 !important; color: #37352f !important; }
.rule-detail__body .callout-color--brown { background: #eee0da !important; color: #37352f !important; }
.rule-detail__body .callout-color--orange { background: #fadec9 !important; color: #37352f !important; }
.rule-detail__body .callout-color--yellow { background: #fdecc8 !important; color: #37352f !important; }
.rule-detail__body .callout-color--green { background: #dbeddb !important; color: #37352f !important; }
.rule-detail__body .callout-color--blue { background: #d3e5ef !important; color: #37352f !important; }
.rule-detail__body .callout-color--purple { background: #e8deee !important; color: #37352f !important; }
.rule-detail__body .callout-color--pink { background: #f5e0e9 !important; color: #37352f !important; }
.rule-detail__body .callout-color--red { background: #ffe2dd !important; color: #37352f !important; }

.rule-detail__body tr.table-color--default > :is(td, th),
.rule-detail__body :is(td, th).table-color--default { background: #fff !important; color: #37352f !important; }
.rule-detail__body tr.table-color--gray > :is(td, th),
.rule-detail__body :is(td, th).table-color--gray { background: #e3e2e0 !important; color: #37352f !important; }
.rule-detail__body tr.table-color--brown > :is(td, th),
.rule-detail__body :is(td, th).table-color--brown { background: #eee0da !important; color: #37352f !important; }
.rule-detail__body tr.table-color--orange > :is(td, th),
.rule-detail__body :is(td, th).table-color--orange { background: #fadec9 !important; color: #37352f !important; }
.rule-detail__body tr.table-color--yellow > :is(td, th),
.rule-detail__body :is(td, th).table-color--yellow { background: #fdecc8 !important; color: #37352f !important; }
.rule-detail__body tr.table-color--green > :is(td, th),
.rule-detail__body :is(td, th).table-color--green { background: #dbeddb !important; color: #37352f !important; }
.rule-detail__body tr.table-color--blue > :is(td, th),
.rule-detail__body :is(td, th).table-color--blue { background: #d3e5ef !important; color: #37352f !important; }
.rule-detail__body tr.table-color--purple > :is(td, th),
.rule-detail__body :is(td, th).table-color--purple { background: #e8deee !important; color: #37352f !important; }
.rule-detail__body tr.table-color--pink > :is(td, th),
.rule-detail__body :is(td, th).table-color--pink { background: #f5e0e9 !important; color: #37352f !important; }
.rule-detail__body tr.table-color--red > :is(td, th),
.rule-detail__body :is(td, th).table-color--red { background: #ffe2dd !important; color: #37352f !important; }

.rule-detail__body [class*="callout-color--"] :where(p, li, td, th, strong, em, span:not([class*="text-color--"])),
.rule-detail__body [class*="table-color--"] :where(p, li, strong, em, span:not([class*="text-color--"])) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.rule-detail__body .text-color--default { color: var(--text-body) !important; -webkit-text-fill-color: var(--text-body) !important; }
.rule-detail__body [class*="callout-color--"] .text-color--default,
.rule-detail__body [class*="table-color--"] .text-color--default { color: #37352f !important; -webkit-text-fill-color: #37352f !important; }
.rule-detail__body .text-color--gray { color: #787774 !important; -webkit-text-fill-color: #787774 !important; }
.rule-detail__body .text-color--brown { color: #9f6b53 !important; -webkit-text-fill-color: #9f6b53 !important; }
.rule-detail__body .text-color--orange { color: #d9730d !important; -webkit-text-fill-color: #d9730d !important; }
.rule-detail__body .text-color--yellow { color: #cb912f !important; -webkit-text-fill-color: #cb912f !important; }
.rule-detail__body .text-color--green { color: #448361 !important; -webkit-text-fill-color: #448361 !important; }
.rule-detail__body .text-color--blue { color: #337ea9 !important; -webkit-text-fill-color: #337ea9 !important; }
.rule-detail__body .text-color--purple { color: #9065b0 !important; -webkit-text-fill-color: #9065b0 !important; }
.rule-detail__body .text-color--pink { color: #c14c8a !important; -webkit-text-fill-color: #c14c8a !important; }
.rule-detail__body .text-color--red { color: #d44c47 !important; -webkit-text-fill-color: #d44c47 !important; }