/*
  Plain, hand-authored CSS for the /rules Rule Guide static pages.
  Linked directly (no Vite build step) so worker-rendered HTML is styled
  even with zero client JS. Token values below are kept in sync by hand
  with src/react-app/index.css (--immio-primary etc.) — if the brand
  palette changes there, update it here too. The site header itself lives
  in /site-header.css, shared with the client SPA.
*/

:root {
  --immio-primary: #007aff;
  --immio-primary-hover: #0056cc;
  --content-bg: #ffffff;
  --content-text: #1a1a1a;
  --content-text-muted: #a5a5a7;
  --content-text-faint: #8a8f98;
  --content-border: #e6e6e6;
  --content-surface: #f3f4f6;
  --content-table-header-bg: #f8f9fb;
  --content-callout-bg: #ebf4fb;
  --content-callout-text: var(--content-text);
  --immio-primary-container: #ebf4fb;
  --content-max-width: 1200px;
  --content-article-width: 680px;
  --content-toc-width: 240px;
  --site-header-height: 68px;
  font-family: "Rethink Sans", system-ui, Avenir, Helvetica, Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --content-bg: #16181c;
    --content-text: #f2f3f5;
    --content-text-muted: #a3abb5;
    --content-text-faint: #7d848d;
    --content-border: #2b2f36;
    --content-surface: #1e2126;
    --content-table-header-bg: var(--content-surface);
    --content-callout-bg: #17263d;
    --content-callout-text: #70c0ff;
    --immio-primary-container: #17263d;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/*
  Smooth scrolling is opt-in via a class the page adds after load (see
  pageShell.ts). Declaring it on bare `html` also applies to the browser's
  scroll restoration on reload, which turns the restore into an animation
  that gets cancelled — leaving you back at the top instead of where you
  were. Gating it keeps in-page anchor scrolling smooth without that.
*/
html.has-smooth-scroll {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html.has-smooth-scroll {
    scroll-behavior: auto;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

/*
  No overflow-x:hidden on html/body: it forces overflow-y to compute to
  "auto" per spec, which makes body its own scroll container and breaks
  the header's position:sticky. Content widths are kept in bounds instead
  via max-width:100% on individual elements (tables, article, etc).
*/
body {
  background: var(--content-bg);
  color: var(--content-text);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--immio-primary);
  text-decoration: none;
}

a:hover {
  color: var(--immio-primary-hover);
  text-decoration: underline;
}

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--immio-primary);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
}

p {
  margin: 0 0 1rem 0;
}

/* In-app WebView (?source=inapp on /rules): hide marketing chrome. */
html.is-inapp {
  --site-header-height: 0px;
}

html.is-inapp .site-header,
html.is-inapp .site-footer,
html.is-inapp .content-keep-track-block > .content-callout {
  display: none;
}

/* Page shell — flex column so the footer sticks to the bottom on short pages. */
.content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main / breadcrumbs / intro */

.content-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* Wider article/content column on large screens — shared by every content
   page (rule articles, catalog listings, countries, legal) so widths match. */
@media (min-width: 1320px) {
  .content-main {
    --content-article-width: 760px;
  }
}

.content-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 2rem 0;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--content-text-faint);
}

.content-breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.35rem;
  color: var(--content-text-muted);
  font-weight: 700;
}

.content-breadcrumbs a {
  color: var(--content-text-faint);
}

.content-breadcrumbs a:hover {
  color: var(--content-text);
  text-decoration: none;
}

.content-breadcrumbs [aria-current="page"] {
  color: var(--content-text);
}

.content-intro h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.content-intro p {
  color: var(--content-text-muted);
  max-width: 60ch;
}

.content-empty {
  color: var(--content-text-muted);
}

/* Intro lede under the catalog/category page title. */
.content-catalog__lede {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--immio-landing-dove);
}

/*
  Catalog page's category switch — a sliding segmented control. All
  category rule lists render server-side (only the .is-active one visible)
  so everything is crawlable without JS. Before JS runs, the selected
  button gets its own flat background (correct immediately, no flash);
  once pageShell.ts's script marks the switch [data-enhanced], that static
  background steps aside and the floating pill takes over, sliding between
  selections. Tabs wrap onto the next line when they don't fit.
*/

.content-type-switch-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-bottom: 1rem;
}

.content-type-switch {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 4px;
  min-width: 0;
  max-width: 100%;
}

.content-search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.content-search-button:hover {
  background: var(--content-surface);
}

.content-search-button img {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}

.content-type-switch__pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  border-radius: 999px;
  background: var(--immio-primary-container);
  opacity: 0;
  pointer-events: none;
}

.content-type-switch[data-enhanced] .content-type-switch__pill {
  opacity: 1;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), width 0.32s cubic-bezier(0.4, 0, 0.2, 1), height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-type-switch__item {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 550;
  letter-spacing: 0.03em;
  color: var(--content-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.content-type-switch__item.is-selected {
  color: var(--immio-primary);
}

.content-type-switch:not([data-enhanced]) .content-type-switch__item.is-selected {
  background: var(--immio-primary-container);
}

.content-type-list {
  display: none;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-type-list.is-active {
  display: flex;
}

.content-type-list > li {
  flex: 0 0 100%;
}

.content-rule-chip {
  display: flex;
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 24px;
  background: var(--content-surface);
  color: var(--content-text);
  font-size: 1.3rem;
  font-weight: 550;
  text-decoration: none;
  transition: background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.content-rule-chip:hover,
.content-rule-chip:active {
  background: var(--content-border);
  color: var(--content-text);
  text-decoration: none;
}

.content-rule-chip:hover .content-rule-chip__subtitle,
.content-rule-chip:active .content-rule-chip__subtitle {
  color: var(--content-text-muted);
}

.content-rule-chip__flag {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.content-rule-chip__content {
  display: contents;
}

.content-rule-chip__title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.05rem;
}

.content-rule-chip__title-row.has-flag {
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 0.8rem;
}

.content-rule-chip__title-row.has-flag .content-rule-chip__flag {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.content-rule-chip__title,
.content-rule-chip__subtitle {
  grid-column: 1;
}

.content-rule-chip__title-row.has-flag .content-rule-chip__title,
.content-rule-chip__title-row.has-flag .content-rule-chip__subtitle {
  grid-column: 2;
}

.content-rule-chip__subtitle {
  color: var(--content-text-muted);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

@media (max-width: 767px) {
  .content-rule-chip {
    font-size: 1.15rem;
  }

  .content-rule-chip__subtitle {
    display: none;
  }

  .content-type-switch__item {
    font-size: 1.1rem;
  }
}

/* Countries grid (/rules/countries) — 3 cols desktop, 2 compact, 1 mobile. */
.content-country-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .content-country-grid {
    /* A bit wider than the search field above it, so the third column's
       right edge spills slightly past the search input's right edge. */
    width: calc(100% + 4rem);
  }
}

.content-country-grid[hidden],
.content-search-results[hidden] {
  display: none;
}

.content-country-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  height: 3rem;
  margin: 0 0 1.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--content-surface);
}

.content-country-search img {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
  .content-search-button img,
  .content-country-search > img,
  .content-country-search__clear img {
    filter: invert(1);
  }
}

.content-country-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--content-text);
  font: inherit;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}

.content-country-search input::-webkit-search-cancel-button {
  appearance: none;
}

.content-country-search input::placeholder {
  color: var(--content-text-muted);
  opacity: 1;
}

.content-country-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.content-country-search__clear[hidden] {
  display: none;
}

.content-country-search__clear:hover {
  background: var(--content-border);
}

.content-country-search__clear img {
  width: 0.75rem;
  height: 0.75rem;
}

@media (max-width: 767px) {
  .content-country-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 479px) {
  .content-country-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.content-country-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 0.5rem 0.5rem;
  border-radius: 20px;
  color: var(--content-text);
  transition: background-color 0.15s ease;
}

.content-country-card:hover {
  background: var(--content-border);
  color: var(--content-text);
  text-decoration: none;
}

.content-country-card__flag {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.content-country-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.content-country-card__name {
  color: var(--content-text);
  font-size: 1.3rem;
  font-weight: 550;
}

.content-country-card__count {
  color: var(--content-text-muted);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Catalog / category card lists */

.content-card-list {
  list-style: none;
  margin: 2rem 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.content-card {
  border: 1px solid var(--content-border);
  border-radius: 12px;
  background: var(--content-surface);
  transition: border-color 0.15s ease;
}

.content-card:hover {
  border-color: var(--immio-primary);
}

.content-card > a {
  display: block;
  padding: 1.5rem;
  color: inherit;
}

.content-card > a:hover {
  text-decoration: none;
}

.content-card h2 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.content-card p {
  color: var(--content-text-muted);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.content-card__count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--immio-primary);
}

.content-country-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--immio-primary);
  background: color-mix(in srgb, var(--immio-primary) 12%, transparent);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  margin-bottom: 0.75rem;
}

/*
  Rule article layout. The article stays centered on the page. At the wide
  tier, Back and the TOC become real grid columns flanking it — Back sits
  immediately to the article's left with the same 2.5rem gap the TOC has
  to its right, and the grid's margin-left is adjusted by exactly Back's
  reserved column width so the article's own center is unaffected.
*/

.content-content {
  min-width: 0;
  max-width: var(--content-article-width);
  margin: 0 auto;
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.content-back-row {
  /* Hidden below 1320px — no room to place it without pushing the article
     down above the breadcrumbs, so it's simply not shown there. */
  display: none;
}

/*
  Below this width there isn't enough room to center the article and still
  fit Back and the TOC beside it without overflowing, so both are hidden
  (Back falls back to a normal block above the article) and the page shows
  a single, centered article column. At 1320px+ the wider cap opens
  symmetric side space for them without disturbing the article's own
  centering.
*/
@media (min-width: 1320px) {
  .content-main--rule {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: 1400px;
  }

  .content-layout {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: minmax(0, var(--content-article-width)) minmax(200px, var(--content-toc-width));
    column-gap: 2.5rem;
    row-gap: 0;
    /* Centers the article column itself in the page; TOC sits to its right. */
    margin-left: calc((100% - var(--content-article-width)) / 2);
  }

  /* Back and layout share one cell (both grid-row/column 1) so Back sits
     beside the article without pushing it down a row. Its box is a fixed
     72px wide, right-aligned text — the same 72px is subtracted (with the
     2.5rem gap) from the article's own centering formula below, so the box
     always lands flush against a 2.5rem gap from the article's left edge,
     matching the TOC's gap on the article's other side exactly. */
  .content-back-row {
    display: block;
    width: 72px;
    text-align: right;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: start;
    position: sticky;
    top: calc(var(--site-header-height) + 1rem);
    z-index: 1;
    margin-bottom: 0;
    margin-left: calc((100% - var(--content-article-width)) / 2 - 72px - 2.5rem);
    line-height: 1.4;
  }

  .content-content .content-breadcrumbs ol {
    line-height: 1.4;
  }

  .content-toc--desktop {
    position: sticky;
    top: calc(var(--site-header-height) + 1rem);
  }

  .content-toc--desktop .content-toc__list {
    line-height: 1.4;
  }
}

.content-article {
  min-width: 0;
  max-width: 100%;
}

/* Keeps the final legal section inside the scroll-spy's activation area at the page bottom. */
.content-legal-article > section:last-child {
  padding-bottom: 40vh;
}

/*
  Content blocks fade + slide up one after another on load, matching the
  landing page's hero fade-up (immio-landing-hero-fade-up). Pure CSS —
  no JS needed since this is a static page.
*/
@keyframes content-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.content-article > *,
.content-catalog > * {
  animation: content-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.content-article > *:nth-child(1),
.content-catalog > *:nth-child(1) {
  animation-delay: 0s;
}
.content-article > *:nth-child(2),
.content-catalog > *:nth-child(2) {
  animation-delay: 0.08s;
}
.content-article > *:nth-child(3),
.content-catalog > *:nth-child(3) {
  animation-delay: 0.16s;
}
.content-article > *:nth-child(4),
.content-catalog > *:nth-child(4) {
  animation-delay: 0.24s;
}
.content-article > *:nth-child(5),
.content-catalog > *:nth-child(5) {
  animation-delay: 0.32s;
}
.content-article > *:nth-child(6),
.content-catalog > *:nth-child(6) {
  animation-delay: 0.4s;
}
.content-article > *:nth-child(7),
.content-catalog > *:nth-child(7) {
  animation-delay: 0.48s;
}
.content-article > *:nth-child(8),
.content-catalog > *:nth-child(8) {
  animation-delay: 0.56s;
}
.content-article > *:nth-child(9),
.content-catalog > *:nth-child(9) {
  animation-delay: 0.64s;
}
.content-article > *:nth-child(n + 10),
.content-catalog > *:nth-child(n + 10) {
  animation-delay: 0.72s;
}

@media (prefers-reduced-motion: reduce) {
  .content-article > *,
  .content-catalog > * {
    animation: none;
  }
}

.content-article__header {
  margin-bottom: 1.0rem;
  padding-bottom: 0.0rem;
}

.content-article__header h1 {
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.content-article__header--with-flag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.content-article__header--with-flag h1 {
  margin-bottom: 0;
}

.content-article__flag {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.content-article p.content-article__meta,
.content-legal__intro > p:first-child {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--content-text-faint);
  margin-bottom: 0.5rem;
}

.content-article p.content-article__meta,
.content-legal__intro > p:first-child {
  text-align: right;
}

/* Callout box — authored in markdown as :::callout … ::: */

.content-callout {
  background: var(--content-callout-bg);
  color: var(--content-callout-text);
  border-radius: 20px;
  padding: 1.1rem 1.4rem;
  margin: 0 0 1.75rem;
}

.content-callout > :last-child {
  margin-bottom: 0;
}

.content-callout p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.content-callout p + p {
  margin-top: 0.75rem;
}

.content-article .content-callout__lead {
  font-weight: 650;
}

.content-article a.content-callout__cta,
.content-article a.content-callout__cta strong {
  font-weight: 700;
}

.content-article .content-article__meta + section {
  margin-top: 0.5rem;
}

.content-article section {
  margin: 3.5rem 0;
  /* TOC links target the <section>, not the h2 — offset past the sticky header (68px) + breathing room. */
  scroll-margin-top: calc(var(--site-header-height) + 1rem);
}

.content-article .content-keep-track-block > .content-callout {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.content-article .content-keep-track-block > div > :last-child {
  margin-bottom: 0;
}

.content-article section h2 {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Sub-headings inside a section (e.g. examples) — clearly subordinate to the h2. */
.content-article section h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1.5rem;
}

/* Examples — numbered circle badge to the left of each example's title. */
.content-article section#examples {
  counter-reset: rule-example;
}

.content-article section#examples h3 {
  counter-increment: rule-example;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.content-article section#examples h3::before {
  content: counter(rule-example);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--immio-primary-container);
  color: var(--immio-primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.content-article p {
  font-size: 1rem;
  line-height: 1.5;
}

.content-article strong,
.content-article b {
  font-weight: 600;
}

.content-article ul {
  padding-left: 1.25rem;
}

.content-article li {
  margin-bottom: 0.4rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* Numbered lists — number badge in --immio-primary-container, digit in --immio-primary. */
.content-article ol {
  list-style: none;
  counter-reset: rule-ol;
  padding-left: 0;
}

.content-article ol > li {
  counter-increment: rule-ol;
  position: relative;
  padding-left: 2.25rem;
  min-height: 1.5rem;
}

.content-article ol > li::before {
  content: counter(rule-ol);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--immio-primary-container);
  color: var(--immio-primary);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Markdown tables — full content width, single rounded-corner card, row separators only. */
.content-article table {
  width: 100%;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 1.5rem;
  border: 1px solid var(--content-border);
  border-radius: 20px;
  overflow: hidden;
  font-size: 1rem;
}

.content-article th,
.content-article td {
  padding: 0.7rem 1rem;
  text-align: left;
}

/* Markdown column alignment (| :--- | ---: |) — the align attribute alone
   loses to the rule above, so honour it explicitly. */
.content-article th[align="right"],
.content-article td[align="right"] {
  text-align: right;
}

.content-article td[align="right"] {
  font-weight: 500;
}

.content-article th[align="center"],
.content-article td[align="center"] {
  text-align: center;
}

.content-article th {
  background: var(--content-table-header-bg);
  color: var(--content-text-muted);
  font-weight: 500;
}

.content-article td {
  color: var(--content-text);
  font-weight: 400;
  border-top: 1px solid var(--content-border);
}

.content-article blockquote {
  margin: 0 0 1rem 0;
  padding: 0.25rem 1rem;
  border-left: 3px solid var(--immio-primary);
  color: var(--content-text-muted);
}

.content-article code {
  background: var(--content-surface);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
}

/*
  Dark mode only: running prose sits one step back from the headings, so the
  structure of a long rule page stays scannable. Bold runs and headings keep
  the full-contrast --content-text (same pattern as .content-legal-disclaimer
  strong below). Light mode keeps a single body colour — the gap between
  #1a1a1a and #a5a5a7 there is too wide to read comfortably at length.

  Specificity is deliberately kept at (0,1,1) so the elements that already
  choose their own colour still win: .content-article p.content-article__meta
  stays faint, .content-callout__lead keeps the callout colour. The :where()
  exclusion keeps callout body text on --content-callout-text without adding
  specificity of its own.
*/
@media (prefers-color-scheme: dark) {
  .content-article p:not(:where(.content-callout *)),
  .content-article li:not(:where(.content-callout *)),
  .content-article td {
    color: var(--content-text-muted);
  }

  .content-article strong:not(:where(.content-callout *)),
  .content-article b:not(:where(.content-callout *)) {
    color: var(--content-text);
  }

  /*
    Overview table: the left column is the label and the right column is the
    answer the reader came for, so the values keep full contrast while the
    labels stay muted with the rest of the prose. Rule pages render exactly
    one table, whose value column markdown emits as td[align="right"].
  */
  .content-article td[align="right"] {
    color: var(--content-text);
  }

  /* Catalog lede — the description under the /rules and /rules/{type} titles. */
  .content-catalog__lede {
    color: var(--content-text-muted);
  }
}

/* Back link — used both as the sticky left column (desktop) and inside the mobile TOC drawer. */

.content-back-link {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--immio-primary);
  margin-bottom: 1rem;
}

.content-back-link:hover {
  color: var(--immio-primary-hover);
  text-decoration: none;
}

/* Table of contents — breadcrumb-style typography, no header label */

.content-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.content-toc__list li {
  position: relative;
}

.content-toc__list a {
  position: relative;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--content-text-faint);
  transition: color 0.2s ease, transform 0.2s ease;
}

.content-toc__list a:hover {
  color: var(--content-text);
  text-decoration: none;
}

/* Scroll-spy active state — set by the inline script in pageShell.ts. */
.content-toc__list a.is-active {
  color: var(--content-text);
  transform: translateX(12px);
}

.content-toc__list a.is-active::before {
  content: "•";
  position: absolute;
  left: -14px;
  font-size: 1.4em;
  line-height: 1;
  color: var(--content-text);
}

@media (prefers-reduced-motion: reduce) {
  .content-toc__list a {
    transition-duration: 0.01ms;
  }
}

.content-toc--desktop {
  display: none;
}

@media (min-width: 1320px) {
  .content-toc--desktop {
    display: block;
  }
}

/* FAQ accordion itself is the shared .faq-accordion component (public/faq-accordion.css). */

/* Related rules */

.content-related {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--content-border);
}

.content-related h2 {
  font-size: 1.2rem;
}

.content-related ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.content-related li {
  border: 1px solid var(--content-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}

.content-related p {
  color: var(--content-text-muted);
  font-size: 0.875rem;
  margin: 0.25rem 0 0 0;
}

.content-legal-disclaimer,
p.content-legal-disclaimer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--content-border);
  color: var(--content-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.content-legal-disclaimer strong {
  color: var(--content-text);
}

@media (max-width: 480px) {
  .content-main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .content-article__header--with-flag {
    gap: 1rem;
  }

  .content-article__flag {
    width: 2.5rem;
    height: 2.5rem;
  }
}