/* Nexus demo theme core: Paligo plumbing and proven fixes. No brand, no page architecture.
 *
 * What lives here is what every portal needs whatever it looks like, and what took a design-eval loop to get
 * right: a header that never moves (fixed slots, a brand margin that survives :hover, one nav treatment across
 * Paligo Base's portal and content-page variants), topic titles sized by position, framed figures, a right rail
 * that is never empty, a footer on the content grid, the Answers widget hooks, print rules.
 *
 * It decides NO look and NO layout. Colors, faces, shape, imagery, the header arrangement, the landing page's
 * sections and their order are designed per prospect from their own site (see the nexus-theme-design skill):
 * the landing sections come from the pattern library or are written new, and brand.css fills the --dp-* slots
 * below and styles everything else. Do not edit this file per prospect; override it in brand.css.
 *
 * Load order (base.html.twig): Paligo Base main.css, theme.css, then fonts.css, core.css, sections.css, brand.css
 */

/* ===== Slots (brand.css fills these) ===================================== */
:root {
  --dp-core-loaded: 1;      /* capture probe: core layer applied */
  /* Chrome: header bar, landing hero, closing band, footer. "-rgb" twins are channel lists for alpha use. */
  --dp-chrome-bg: #111114;  --dp-chrome-fg: #ffffff;  --dp-chrome-fg-rgb: 255 255 255;  --dp-chrome-line: rgb(255 255 255 / .1);
  --dp-hero-bg: #111114;    --dp-hero-fg: #ffffff;    --dp-hero-fg-rgb: 255 255 255;
  --dp-hero-glow-rgb: 90 110 255;                      /* glow behind hero visuals and dark panels */
  --dp-band-bg: #111114;    --dp-band-fg: #ffffff;    --dp-band-fg-rgb: 255 255 255;
  --dp-footer-bg: #111114;  --dp-footer-fg: #ffffff;  --dp-footer-fg-rgb: 255 255 255;
  --dp-panel-bg: #111114;   --dp-panel-fg: #ffffff;   --dp-panel-fg-rgb: 255 255 255;   /* dark feature panel */

  /* Actions */
  --dp-cta-bg: var(--paligo-primary);     --dp-cta-fg: #ffffff;  --dp-cta-bg-hover: var(--paligo-primary-hover);
  --dp-pill2-bg: var(--paligo-brand-wash); --dp-pill2-fg: var(--paligo-text); --dp-pill2-bg-hover: var(--paligo-surface-2);
  --dp-current: var(--paligo-primary);    /* current-page marker in the top nav */

  /* Surfaces */
  --dp-rule: var(--paligo-border-strong); /* section rules on the landing page */
  --dp-card-bg: var(--paligo-bg);  --dp-card-border: var(--paligo-border);
  --dp-hover-bg: var(--paligo-brand-wash);  --dp-hover-fg: var(--paligo-text);  --dp-hover-border: var(--paligo-brand-wash);
  --dp-card-lift: 0px;                    /* translateY on card hover; 0 = no motion */
  --dp-tile: var(--paligo-surface);       /* icon/glyph tile ground */
  --dp-media-ground: var(--paligo-surface);
  --dp-progress-on: var(--paligo-primary);

  /* Type */
  --dp-display: var(--paligo-font);        /* display face for titles and statements */
  --dp-display-weight: 650;
  --dp-display-tracking: -.02em;
  --dp-label-font: var(--paligo-font);     /* eyebrows, kickers, pills, small labels */
  --dp-label-case: none;                   /* none | uppercase */
  --dp-label-tracking: .01em;
  --dp-kicker-mark: "";                    /* e.g. "\2192\00a0" for an arrow before section kickers */
  --dp-hero-h1: clamp(3rem, 7.5vw, 6rem);
  --dp-statement: clamp(1.8rem, 3vw, 2.6rem);

  /* Shape and rhythm */
  --dp-radius-card: var(--paligo-radius-lg);
  --dp-radius-pill: 999px;
  --dp-radius-panel: 24px;
  --dp-wrap: 1200px;
  --dp-section-gap: clamp(4.5rem, 9vw, 7rem);
  --dp-header-cta-w: 8.75rem;              /* fixed slot: a font swap can never resize it */
  --dp-header-search-w: 12.5rem;

  /* The scale (October 2026). Themes that reached the craft numbers by stacking overrides round on round still read
     as assembled; Vercel and Apple take every size and space from one scale. brand.css retunes these tokens from the
     brief and paints; it does not set font sizes or vertical spacing on content selectors. craft_audit.mjs warns on
     any size in the reading column that is not one of --t-*. */
  --t-xs: 13px;    /* labels, captions, breadcrumb, counters, meta */
  --t-sm: 14px;    /* navigation, rail, tables, tools, footer */
  --t-md: 17px;    /* body, steps, admonitions */
  --t-lg: 20px;    /* lead, pager titles, card titles */
  --t-xl: 24px;    /* section headings inside a topic */
  --t-2xl: 32px;   /* landing card and band titles */
  --t-3xl: 48px;   /* topic title, landing section headings */
  --t-4xl: 64px;   /* statements (the hero H1 is --dp-hero-h1) */
  --lh-body: 1.65;  --lh-ui: 1.45;  --lh-snug: 1.3;  --lh-display: 1.08;
  --tr-display: -.02em;  --tr-label: .06em;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px;  --s-16: 64px;  --s-20: 80px;  --s-24: 96px;
  /* Reading rhythm (content-page.md) */
  --dp-measure: 68ch;  --dp-lead-measure: 62ch;
  --dp-para-gap: var(--s-4);  --dp-step-gap: var(--s-4);  --dp-block-gap: var(--s-6);
  --dp-h2-above: var(--s-8);  --dp-h2-below: var(--s-3);
  --dp-step-badge: 28px;
}

/* ===== Base ============================================================== */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
main a { text-underline-offset: 3px; }
main td { font-variant-numeric: tabular-nums; }
/* A topic's own title takes its heading level from nesting depth (a second-level topic opens with an h3),
   so it is sized by position, never by level. */
main > :is(section, article):first-of-type > header > :is(h1, h2, h3, h4, h5, h6),
main > :first-child > header > :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--dp-display); font-weight: var(--dp-display-weight); letter-spacing: var(--dp-display-tracking);
  font-size: var(--t-3xl); line-height: var(--lh-display); margin: 0 0 var(--s-4); text-wrap: balance;
}
/* The first paragraph under a topic title reads as its lead. */
main > section > header + p { font-size: var(--t-lg); line-height: 1.55; max-width: var(--dp-lead-measure); color: var(--paligo-muted); margin: 0 0 var(--s-6); }

.dp-kicker { font-family: var(--dp-label-font); font-size: var(--t-xs); letter-spacing: var(--dp-label-tracking); text-transform: var(--dp-label-case); color: var(--paligo-text); margin: 0; }
.dp-kicker::before { content: var(--dp-kicker-mark); }
.dp-eyebrow { margin: 0 0 var(--s-4); }
.dp-eyebrow > span {
  display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--dp-label-font); font-size: var(--t-xs);
  letter-spacing: var(--dp-label-tracking); text-transform: var(--dp-label-case);
  padding: .28rem .75rem; border-radius: var(--dp-radius-pill); border: 1px solid currentColor;
}
.dp-eyebrow--page > span { color: var(--paligo-faint); border-color: var(--paligo-border-strong); }

/* Pills never move on hover (a lifted header control reads as a jump); color only. */
.dp-pill {
  display: inline-flex; align-items: center; gap: .45em; padding: .55rem 1rem; border-radius: var(--dp-radius-pill);
  font-family: var(--dp-label-font); font-size: var(--t-sm); line-height: 1; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dp-pill:hover { text-decoration: none; }
.dp-pill--cta { background: var(--dp-cta-bg); border-color: var(--dp-cta-bg); color: var(--dp-cta-fg); }
.dp-pill--cta:hover { background: var(--dp-cta-bg-hover); border-color: var(--dp-cta-bg-hover); color: var(--dp-cta-fg); }
.dp-pill--alt { background: var(--dp-pill2-bg); border-color: var(--dp-pill2-bg); color: var(--dp-pill2-fg); }
.dp-pill--alt:hover { background: var(--dp-pill2-bg-hover); border-color: var(--dp-pill2-bg-hover); color: var(--dp-pill2-fg); }

/* ===== Header: never moves ================================================ */
.topbar, body.portal .topbar, body.portal .topbar.is-scrolled {
  background: var(--dp-chrome-bg); color: var(--dp-chrome-fg); border-bottom: 1px solid var(--dp-chrome-line);
  -webkit-backdrop-filter: none; backdrop-filter: none; gap: 1.25rem;
}
/* On the portal the bar is fixed over the hero. --dp-chrome-bg-top lets a brand float it transparent until the
   page scrolls (Paligo Base's behavior) or keep it solid (the default). Color only: no size change on scroll. */
body.portal .topbar:not(.is-scrolled) { background: var(--dp-chrome-bg-top, var(--dp-chrome-bg)); border-bottom-color: var(--dp-chrome-line-top, var(--dp-chrome-line)); }
/* Header arrangement. Default: brand left, everything else right. patterns/css/header-*.css hold the centered and
   inline-nav arrangements. margin-right:auto pushes the right-hand controls to the edge. It MUST hold in the hover state too: losing it
   on .brand:hover collapsed every control to the left whenever the logo was hovered. */
.brand, .brand:hover { color: var(--dp-chrome-fg); gap: 1rem; margin-right: auto; }
.brand .dp-logo { display: block; height: 28px; width: auto; color: var(--dp-chrome-fg); }
.dp-logo--text { height: auto; font-family: var(--dp-display); font-weight: var(--dp-display-weight); font-size: var(--t-lg); letter-spacing: -.01em; }
.dp-docs-label {
  font-family: var(--dp-label-font); font-size: var(--t-xs); font-weight: 400; letter-spacing: var(--dp-label-tracking);
  text-transform: var(--dp-label-case); color: rgb(var(--dp-chrome-fg-rgb) / .85);
  padding: 4px 10px; border: 1px solid rgb(var(--dp-chrome-fg-rgb) / .35); border-radius: var(--dp-radius-pill); white-space: nowrap;
}
.header-tools, .topbar .header-tools { display: flex; align-items: center; gap: .6rem; flex: none; }
/* Fixed slots: nothing to their left can shift when a font swaps in or a control changes state. */
.topbar .dp-header-cta { flex: none; width: var(--dp-header-cta-w); justify-content: center; box-sizing: border-box; font-size: var(--t-xs); padding: .55rem .9rem; }
.topbar .header-search { flex: 0 0 var(--dp-header-search-w); width: var(--dp-header-search-w); }
.dp-top-nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
/* One nav treatment in every header state. Paligo Base styles portal-hero, portal-scrolled and content-page
   hovers differently (translucent pill / light-gray pill that hid white text); these match or beat all three. */
.topbar .dp-top-nav a,
body.portal .topbar:not(.is-scrolled) .dp-top-nav a,
body.portal .topbar.is-scrolled .dp-top-nav a {
  color: var(--dp-nav-fg, var(--dp-chrome-fg)); background: var(--dp-nav-bg, transparent); border-radius: var(--dp-nav-radius, 0);
  padding: var(--dp-nav-pad, .4rem 0); font-family: var(--dp-nav-font, inherit); font-size: var(--dp-nav-size, var(--t-sm));
  font-weight: var(--dp-nav-weight, 400); letter-spacing: var(--dp-nav-tracking, normal); text-transform: var(--dp-nav-case, none);
  text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.topbar .dp-top-nav a:hover, .topbar .dp-top-nav a:focus-visible,
body.portal .topbar:not(.is-scrolled) .dp-top-nav a:hover,
body.portal .topbar.is-scrolled .dp-top-nav a:hover {
  color: var(--dp-nav-hover-fg, var(--dp-chrome-fg)); background: var(--dp-nav-hover-bg, transparent);
  border-bottom-color: var(--dp-nav-hover-line, rgb(var(--dp-chrome-fg-rgb) / .7)); text-decoration: none;
}
.topbar .dp-top-nav a[aria-current="page"],
body.portal .topbar:not(.is-scrolled) .dp-top-nav a[aria-current="page"],
body.portal .topbar.is-scrolled .dp-top-nav a[aria-current="page"] {
  border-bottom-color: var(--dp-nav-current-line, var(--dp-current)); background: var(--dp-nav-current-bg, var(--dp-nav-bg, transparent));
}
.topbar .icon-btn, body.portal .topbar:not(.is-scrolled) .icon-btn {
  width: 36px; height: 36px; color: var(--dp-chrome-fg); background: transparent;
  border: 1px solid rgb(var(--dp-chrome-fg-rgb) / .6); border-radius: var(--dp-radius-pill);
}
.topbar .icon-btn:hover, body.portal .topbar:not(.is-scrolled) .icon-btn:hover { color: var(--dp-chrome-fg); background: rgb(var(--dp-chrome-fg-rgb) / .12); }
.topbar .langswitch > summary { color: var(--dp-chrome-fg); }
.topbar .site-search__form { background: rgb(var(--dp-chrome-fg-rgb) / .08); border: 1px solid rgb(var(--dp-chrome-fg-rgb) / .3); border-radius: var(--dp-radius-pill); }
.topbar .site-search__form:focus-within { border-color: var(--dp-chrome-fg); background: rgb(var(--dp-chrome-fg-rgb) / .12); }
.topbar .site-search__input { color: var(--dp-chrome-fg); }
.topbar .site-search__input::placeholder { color: rgb(var(--dp-chrome-fg-rgb) / .65); }
.topbar .site-search__icon, .topbar .site-search__hint { color: rgb(var(--dp-chrome-fg-rgb) / .7); border-color: rgb(var(--dp-chrome-fg-rgb) / .35); }

/* ===== Landing page plumbing (shared by the section patterns) ============= */
/* Every hero pattern renders <header class="portal-hero dp-hero dp-hero-NAME">. Paligo Base gives .portal-hero a
   bottom border and its own ground; these reset that and style the search from the hero's ink, so it reads on any
   ground in either color scheme. */
.portal-hero.dp-hero { border-bottom: 0; background: var(--dp-hero-bg); color: var(--dp-hero-fg); }
.dp-hero h1 { font-family: var(--dp-display); font-weight: var(--dp-display-weight); letter-spacing: var(--dp-display-tracking); color: var(--dp-hero-fg); text-wrap: balance; }
.dp-hero .portal-sub { color: rgb(var(--dp-hero-fg-rgb) / .82); }
.dp-hero .portal-search .site-search__form {
  height: 56px; border-radius: var(--dp-radius-search, var(--dp-radius-pill)); padding-inline: 1.25rem 1rem;
  background: var(--dp-search-bg, rgb(var(--dp-hero-fg-rgb) / .08)); border: 1px solid var(--dp-search-border, rgb(var(--dp-hero-fg-rgb) / .35));
  transition: box-shadow .2s ease, border-color .2s ease;
}
.dp-hero .portal-search .site-search__form:focus-within { border-color: var(--dp-hero-fg); box-shadow: 0 0 0 5px rgb(var(--dp-hero-glow-rgb) / .35); }
.dp-hero .site-search__input { font-size: var(--t-md); color: var(--dp-hero-fg); }
.dp-hero .site-search__input::placeholder { color: rgb(var(--dp-hero-fg-rgb) / .62); }
.dp-hero .site-search__icon, .dp-hero .site-search__hint { color: rgb(var(--dp-hero-fg-rgb) / .7); border-color: rgb(var(--dp-hero-fg-rgb) / .35); }
.dp-hero .dp-eyebrow > span { color: rgb(var(--dp-hero-fg-rgb) / .9); border-color: rgb(var(--dp-hero-fg-rgb) / .45); }
/* Quick links under the search (strings heroQuick / heroQuickLabel, partials/quick-links.html.twig). */
.dp-quick { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.25rem 0 0; padding: 0; position: relative; z-index: 3; }
.dp-quick li { margin: 0; }
.dp-quick__label { font-family: var(--dp-label-font); font-size: var(--t-xs); color: rgb(var(--dp-hero-fg-rgb) / .6); margin-right: .25rem !important; }
.dp-quick a {
  display: inline-block; font-family: var(--dp-label-font); font-size: var(--t-xs); color: rgb(var(--dp-hero-fg-rgb) / .92); text-decoration: none;
  padding: .35rem .8rem; border-radius: var(--dp-radius-pill); border: 1px solid rgb(var(--dp-hero-fg-rgb) / .28);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dp-quick a:hover { background: var(--dp-pill2-bg); border-color: var(--dp-pill2-bg); color: var(--dp-pill2-fg); }

body.portal, body.portal > main { background: var(--paligo-bg); }
body.portal > main { padding-bottom: 0; display: flex; flex-direction: column; }
/* Sized by width, not padding, so section rules line up with the content edge. */
.dp-wrap { width: min(var(--dp-wrap), calc(100% - 2 * clamp(1.25rem, 3vw, 2.5rem))); margin-inline: auto; box-sizing: border-box; }
.dp-section { margin-top: var(--dp-section-gap); }
.dp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--dp-rule); margin-bottom: 1.75rem; }
.dp-section-meta { font-family: var(--dp-label-font); font-size: var(--t-xs); color: var(--paligo-faint); margin: 0; }

/* ===== Demo notice (always on: see partials/demo-notice.html.twig) ======= */
/* Restyle freely in brand.css; never hide. The pill sits bottom-left because the Answers launcher sits bottom-right. */
.dp-demo-statement { margin: 0 0 var(--s-3); max-width: 90ch; font-size: var(--t-xs); line-height: 1.55; color: rgb(var(--dp-footer-fg-rgb) / .55); }
.dp-demo-pill {
  position: fixed; left: var(--dp-demo-pill-x, 16px); bottom: var(--dp-demo-pill-y, 16px); z-index: 60; max-width: min(22rem, calc(100vw - 32px));
  font-family: var(--dp-label-font); font-size: var(--t-xs); line-height: 1.45; letter-spacing: var(--dp-label-tracking); outline: none;
}
.dp-demo-pill__label {
  display: inline-flex; align-items: center; gap: .4em; padding: .3rem .65rem; border-radius: var(--dp-radius-pill); cursor: default;
  background: var(--dp-demo-bg, color-mix(in srgb, var(--paligo-bg) 92%, transparent)); color: var(--dp-demo-fg, var(--paligo-muted));
  border: 1px solid var(--dp-demo-border, var(--paligo-border)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-transform: var(--dp-label-case); transition: color .15s ease, border-color .15s ease;
}
.dp-demo-pill__label svg { width: 12px; height: 12px; }
.dp-demo-pill__text {
  position: absolute; left: 0; bottom: calc(100% + 8px); width: min(22rem, calc(100vw - 32px)); box-sizing: border-box; padding: .8rem .95rem;
  border-radius: var(--paligo-radius); background: var(--dp-demo-panel-bg, var(--paligo-bg)); color: var(--paligo-text);
  border: 1px solid var(--paligo-border); box-shadow: 0 12px 32px -12px rgb(0 0 0 / .35); text-transform: none; letter-spacing: normal;
  font-family: var(--paligo-font); font-size: var(--t-xs); line-height: 1.5;
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.dp-demo-pill:hover .dp-demo-pill__text, .dp-demo-pill:focus .dp-demo-pill__text, .dp-demo-pill:focus-within .dp-demo-pill__text {
  opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .15s ease;
}
.dp-demo-pill:hover .dp-demo-pill__label, .dp-demo-pill:focus .dp-demo-pill__label { color: var(--paligo-text); border-color: var(--paligo-border-strong); }
.dp-demo-pill--tab { left: 0; bottom: var(--dp-demo-pill-y, 7rem); }
.dp-demo-pill--tab .dp-demo-pill__label {
  writing-mode: vertical-rl; transform: rotate(180deg); padding: .55rem .2rem; border-radius: 8px 0 0 8px; border-right: 0;
}
.dp-demo-pill--tab .dp-demo-pill__label svg { display: none; }
.dp-demo-pill--tab .dp-demo-pill__text { left: .5rem; }
@media (max-width: 36rem) { .dp-demo-pill--tab .dp-demo-pill__label { padding: .5rem .1rem; font-size: 10.5px; line-height: 1.3; } }
.dp-demo-caption { margin: var(--s-4) 0 0; font-family: var(--dp-label-font); font-size: var(--t-xs); letter-spacing: var(--dp-label-tracking); color: rgb(var(--dp-hero-fg-rgb) / .6); }
.dp-demo-watermark { display: none; }

/* ===== Wireframe landing page ============================================= */
/* The scaffold's portal.html.twig is a wireframe: a heading, the search and a plain chapter list, so a fresh
   theme renders before any design work. It is never shipped: check_theme.py fails while .dp-wireframe is in
   the portal. Compose the real landing page from the brief (patterns/ or new sections). */
.dp-wireframe { width: min(var(--dp-wrap), calc(100% - 3rem)); margin: calc(var(--paligo-header-h) + 3rem) auto 4rem; }
.dp-wireframe h1 { font-family: var(--dp-display); font-size: var(--t-3xl); margin: 0 0 1.5rem; }
.dp-wireframe .portal-search { max-width: 36rem; margin-bottom: 2.5rem; }
.dp-wireframe ol { columns: 2; padding-left: 1.25rem; }
.dp-wireframe li { margin-bottom: .5rem; }

/* ===== Footer: on the content grid ======================================== */
.site-footer.dp-footer { display: block; background: var(--dp-footer-bg); color: rgb(var(--dp-footer-fg-rgb) / .7); border-top: 1px solid rgb(var(--dp-footer-fg-rgb) / .08); padding: var(--s-16) clamp(1.25rem, 3vw, 2.5rem) var(--s-10); font-size: var(--t-sm); }
.dp-footer__top, .dp-footer__bottom { width: min(var(--dp-wrap), 100%); margin-inline: auto; box-sizing: border-box; }
.dp-footer__top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); padding-bottom: 2.5rem; }
.dp-footer__id { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.dp-footer__brand { color: var(--dp-footer-fg); display: inline-block; }
.dp-footer__brand .dp-logo { height: 32px; width: auto; display: block; }
.dp-footer__guide { margin: 0; font-family: var(--dp-display); font-weight: var(--dp-display-weight); font-size: var(--t-xl); line-height: 1.1; color: var(--dp-footer-fg); }
/* Paligo Base pushes footer navs right with margin-left:auto; on this grid that is an 11px offset. */
.site-footer .dp-footer__nav { display: block; margin-left: 0; }
.dp-footer__nav .dp-kicker { color: rgb(var(--dp-footer-fg-rgb) / .6); margin-bottom: 1rem; }
.dp-footer__nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3.5rem; }
.dp-footer__nav li { margin: 0 0 .65rem; break-inside: avoid; }
.site-footer .dp-footer__nav a { color: rgb(var(--dp-footer-fg-rgb) / .9); text-decoration: none; font-size: var(--t-sm); }
.site-footer .dp-footer__nav a:hover { color: var(--dp-footer-fg); text-decoration: underline; }
.dp-footer__bottom { border-top: 1px solid rgb(var(--dp-footer-fg-rgb) / .1); padding-top: 1.5rem; }
.site-footer .footer-text { margin: 0; max-width: 90ch; font-size: var(--t-xs); line-height: 1.55; color: rgb(var(--dp-footer-fg-rgb) / .55); }
.site-footer .copyright { color: rgb(var(--dp-footer-fg-rgb) / .55); }

/* ===== Content pages ====================================================== */
/* Every size and vertical space here is a token (top of this file); brand.css retunes the tokens and paints. The
   rules follow references/content-page.md: 17 px at 1.65 on a 68ch measure, steps 16 px apart, one compact
   admonition style, tables at 14 px with tabular numbers, a rail of three layers. */
aside.site-nav { background: var(--paligo-bg); border-right: 1px solid var(--paligo-border); border-left: 0; }
aside.site-nav a, aside.site-nav .nav-inner li li a, aside.site-nav .nav-inner li li li a { font-size: var(--t-sm); }   /* Base shrinks nested levels off the scale */
aside.site-nav a[aria-current="page"]::before { display: none; }
/* One reading measure everywhere and a right rail that always carries something. */
.pagebody.dp-pagebody, .pagebody.dp-pagebody:not(:has(nav.pagetoc)) { grid-template-columns: minmax(0, 720px) 15rem; max-width: 76rem; gap: clamp(2.5rem, 5vw, 4.5rem); justify-content: center; }
.dp-pagebody > main { max-width: 720px; font-size: var(--t-md); line-height: var(--lh-body); }
.dp-pagebody > main :is(p, li) { font-size: var(--t-md); line-height: var(--lh-body); }
/* Prose, lists, steps and admonitions hold the measure even when a brand widens the column for tables and figures;
   craft_audit.mjs measures it on the rendered page. */
.dp-pagebody > main :is(p, ul, ol, dl, .admonition, blockquote) { max-width: var(--dp-measure); }
.dp-pagebody > main :is(table, .table-contents, figure, .figure, .informalfigure, pre) :is(p, ul, ol) { max-width: none; }
.dp-pagebody > main section > p { margin: 0 0 var(--dp-para-gap); }
main > section section { margin: var(--dp-h2-above) 0 0; }
main > section section > header > :is(h2, h3, h4, h5, h6), main .section > header :is(h2, h3, h4, h5, h6) {
  font-family: var(--dp-display); font-weight: var(--dp-display-weight); font-size: var(--t-xl); line-height: var(--lh-snug);
  letter-spacing: -.01em; margin: 0 0 var(--dp-h2-below);
}
main code { font-size: var(--t-sm); }   /* on the scale: an em size lands between steps */
main :is(table, .dp-run, .breadcrumb) code { font-size: var(--t-xs); }
/* The breadcrumb is rendered inside the reading column (page.html.twig) so it aligns with eyebrow and title. */
.dp-pagebody > main > .breadcrumb { max-width: none; margin: 0 0 var(--s-6); padding: 0; font-size: var(--t-xs); }
.dp-pagebody > main > .breadcrumb li { margin-block: 0; }
.dp-pagebody > main > .breadcrumb :is(li, a, span) { font-size: var(--t-xs); line-height: var(--lh-ui); }   /* Base sizes the crumbs at body size */
.dp-eyebrow--page { margin: 0 0 var(--s-4); }
nav.pagetoc:not(:has(a)) { display: none; }   /* an empty "On this page" is a label floating in the margin */
nav.pagetoc a { font-size: var(--t-sm); }

/* Rail: the chapter's numbered topics (current bold and marked), on this page, tools, help. Never a demo notice. */
.dp-rail { position: sticky; top: calc(var(--paligo-header-h) + var(--s-8)); align-self: start; display: flex; flex-direction: column; gap: var(--s-8); font-size: var(--t-sm); }
.dp-rail nav.pagetoc { position: static; }
.dp-rail__label { font-family: var(--dp-label-font); font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--paligo-faint); margin: 0 0 var(--s-3); }
.dp-rail__chapter-title { display: block; font-family: var(--dp-display); font-weight: var(--dp-display-weight); font-size: var(--t-md); line-height: var(--lh-snug); color: var(--paligo-text); text-decoration: none; margin: 0 0 var(--s-2); }
.dp-rail__chapter ol { list-style: none; margin: 0; padding: 0; counter-reset: rail; }
.dp-rail__chapter li { margin: 0; counter-increment: rail; }
.dp-rail__chapter li a { display: grid; grid-template-columns: 1.75rem 1fr; padding: var(--s-2) 0; font-size: var(--t-sm); color: var(--paligo-muted); text-decoration: none; line-height: var(--lh-snug); border-bottom: 1px solid color-mix(in srgb, var(--paligo-border) 60%, transparent); }
.dp-rail__chapter li a::before { content: counter(rail, decimal-leading-zero); font-family: var(--dp-label-font); font-size: var(--t-xs); color: var(--paligo-faint); }
.dp-rail__chapter li a:hover { color: var(--paligo-primary); }
.dp-rail__chapter li a[aria-current="page"] { color: var(--paligo-text); font-weight: 600; }
.dp-rail__chapter li a[aria-current="page"]::before { color: var(--paligo-primary); }
.dp-rail__tools { display: flex; flex-direction: column; gap: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--paligo-border); }
.dp-rail__tools button { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--t-sm); color: var(--paligo-muted); text-align: left; }
.dp-rail__tools button:hover { color: var(--paligo-primary); }
.dp-rail__tools svg { width: 16px; height: 16px; flex: none; }
.dp-rail__tools kbd { margin-left: auto; font-family: var(--dp-label-font); font-size: var(--t-xs); color: var(--paligo-faint); }
.dp-rail__help { padding: var(--s-4) var(--s-4) var(--s-5); border-radius: var(--paligo-radius); background: var(--paligo-surface); }
.dp-rail__help p { margin: 0 0 var(--s-3); font-size: var(--t-sm); line-height: var(--lh-ui); color: var(--paligo-text); }

/* Procedures: numerals in circles joined by a connector, 16 px between steps. The step keeps its left padding wider
   than the badge whatever its spacing (a reverted round clipped every step under its badge). */
main ol.procedure { list-style: none; counter-reset: dp-step; padding-left: 0; margin: var(--dp-block-gap) 0; }
main ol.procedure > li.step { counter-increment: dp-step; position: relative; margin: 0; padding: 0 0 var(--dp-step-gap) calc(var(--dp-step-badge) + var(--s-4)); }
main ol.procedure > li.step::before {
  content: counter(dp-step, decimal-leading-zero); position: absolute; left: 0; top: 0; z-index: 1; box-sizing: border-box;
  width: var(--dp-step-badge); height: var(--dp-step-badge); border-radius: 999px; display: grid; place-items: center;
  font-family: var(--dp-label-font); font-size: var(--t-xs); color: var(--paligo-text); background: var(--paligo-bg); border: 1px solid var(--paligo-border-strong);
}
main ol.procedure > li.step:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--dp-step-badge) / 2 - .5px); top: var(--dp-step-badge); bottom: 0; width: 1px; background: var(--paligo-border); }
main ol.procedure > li.step > p { font-size: var(--t-md); line-height: var(--lh-body); margin: 0 0 var(--s-2); }
main ol.procedure > li.step > p:last-child { margin-bottom: 0; }
main ol.procedure > li.step:last-child { padding-bottom: 0; }

/* Substeps (ol.procedure.substeps inside a step): lettered, smaller and outlined, so they never read as the main
   sequence restarting at 01. */
main ol.procedure.substeps { counter-reset: dp-substep; margin: var(--s-3) 0 0; }
main ol.procedure.substeps > li.step { counter-increment: dp-substep; padding: 0 0 var(--s-3) calc(24px + var(--s-3)); }
main ol.procedure.substeps > li.step::before {
  content: counter(dp-substep, lower-alpha); width: 24px; height: 24px; top: 2px; font-size: var(--t-xs);
  background: var(--paligo-bg); color: var(--paligo-text); border: 1px solid var(--paligo-border-strong);
}
main ol.procedure.substeps > li.step:not(:last-child)::after { left: 11.5px; top: 26px; }

/* Admonitions: one compact style (content-page.md): a left rule, the title on its own line, the text at body size.
   Danger alone keeps a tinted box. Two in a row are merged into one block by dp-interact.js. */
main .admonition { margin: 0 0 var(--dp-block-gap); padding: var(--s-1) 0 var(--s-1) var(--s-5); border: 0; border-left: 4px solid var(--adm, var(--paligo-note)); border-radius: 0; background: none; }
main .admonition > div { display: block; padding: 0; }
main .admonition .icon { display: none; }
main .admonition .body, main .admonition .body p { font-size: var(--t-md); line-height: var(--lh-body); }
main .admonition .body > header { margin: 0 0 var(--s-1); }
main .admonition .body > div { padding: 0; }
main .admonition .body p { margin: 0 0 var(--s-2); }
main .admonition .body p:last-child { margin-bottom: 0; }
main .admonition .title { font-family: var(--dp-label-font); font-weight: 600; font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--paligo-text); margin: 0; }
main .admonition.warning { --adm: var(--paligo-warning); }
main .admonition.caution { --adm: var(--paligo-caution); }
main .admonition.tip { --adm: var(--paligo-tip); }
main .admonition.danger { --adm: var(--paligo-danger); padding: var(--s-4) var(--s-5); background: color-mix(in srgb, var(--paligo-danger) 6%, var(--paligo-bg)); }
main .admonition .dp-adm-more { margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--paligo-border); }

/* Tables: 14 px, tabular numbers, row rules, no zebra, no sticky header (full-page captures draw it over row one). */
main table { margin: var(--dp-block-gap) 0 var(--s-8); font-size: var(--t-sm); font-variant-numeric: tabular-nums; border-collapse: collapse; width: 100%; }
main table :is(th, td) { padding: var(--s-3) var(--s-4); line-height: var(--lh-ui); vertical-align: top; text-align: left; }
.dp-pagebody > main table :is(th, td) :is(p, li) { font-size: var(--t-sm); line-height: var(--lh-ui); margin: 0; }
main table tbody td { border-bottom: 1px solid var(--paligo-border); }
main table tbody tr:nth-child(even) td { background: transparent; }
main :is(.table, .formalobject) > header .title, main table caption { font-size: var(--t-sm); font-weight: 600; }

/* Figures: the frame wraps the image (no letterbox bands), centered, capped below the fold line; caption under it. */
main .figure.formalobject, main .informalfigure { display: flex; flex-direction: column-reverse; align-items: center; margin: var(--s-8) 0; }
main .figure .mediaobject, main .informalfigure .mediaobject { width: fit-content; max-width: 100%; border-radius: var(--paligo-radius-lg); overflow: hidden; line-height: 0; }
main .figure img, main .informalfigure img { display: block; width: auto; max-width: 100%; height: auto; max-height: 480px; }
main .figure > header { margin-top: var(--s-3); }
main .figure > header .title { font-family: var(--dp-label-font); font-size: var(--t-xs); font-weight: 400; letter-spacing: .02em; color: var(--paligo-faint); }

.pager { gap: var(--s-4); margin-top: var(--s-12); }
.pager a { border: 1px solid var(--paligo-border); border-radius: var(--paligo-radius); background: var(--paligo-bg); padding: var(--s-4) var(--s-5); color: var(--paligo-text); transition: border-color .15s ease; }
.pager a:hover { border-color: var(--paligo-text); background: var(--paligo-bg); }
.pager .dir { font-family: var(--dp-label-font); font-weight: 400; font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--paligo-faint); }
.pager .ttl { font-weight: 500; color: var(--paligo-text); font-size: var(--t-lg); line-height: var(--lh-snug); }
.pager a:hover .ttl { color: var(--paligo-primary); }

/* ===== Reader tools (dp-interact.js; references/experience.md) =========== */
/* Painted from the tokens: --dp-progress-on is the run-mode accent, --paligo-* the grounds. A brand recolors, it
   does not resize. Motion is transform and opacity, 120 to 200 ms, and stops under reduced motion (below). */
.dp-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Procedure run mode */
.dp-run { display: flex; align-items: center; gap: var(--s-3); margin: var(--dp-block-gap) 0 var(--s-4); font-size: var(--t-xs); line-height: var(--lh-ui); color: var(--paligo-muted); max-width: var(--dp-measure); }
.dp-run + ol.procedure { margin-top: 0; }
.dp-run__meter { flex: 0 0 120px; height: 4px; background: var(--paligo-border); overflow: hidden; }
.dp-run__fill { display: block; height: 100%; background: var(--dp-progress-on); transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s cubic-bezier(.2, 0, 0, 1); }
.dp-run__reset { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-size: var(--t-xs); color: var(--paligo-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dp-run__reset:hover { color: var(--paligo-text); }
main ol.procedure > li.step > .dp-step-check {
  position: absolute; left: 0; top: 0; z-index: 2; width: var(--dp-step-badge); height: var(--dp-step-badge); padding: 0; margin: 0;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
}
main ol.procedure > li.step > .dp-step-check::after { content: ""; position: absolute; inset: -8px; }   /* a 44 px touch target */
main ol.procedure > li.step > .dp-step-check:focus-visible { outline: 2px solid var(--paligo-focus, var(--paligo-primary)); outline-offset: 2px; }
main ol.procedure > li.step:has(> .dp-step-check:hover)::before { border-color: var(--paligo-text); }
main ol.procedure > li.step.is-done::before { content: "\2713"; background: var(--paligo-text); border-color: var(--paligo-text); color: var(--paligo-bg); }
main ol.procedure > li.step.is-done > :not(.dp-step-check) { opacity: .55; transition: opacity .15s ease; }
main ol.procedure > li.step.is-next::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dp-progress-on) 45%, transparent); }

/* Table filter and row links */
.dp-tfilter { display: flex; align-items: center; gap: var(--s-3); margin: var(--dp-block-gap) 0 var(--s-3); }
.dp-tfilter + :is(.table-contents, .table, .informaltable) table, .dp-tfilter + table { margin-top: 0; }
.dp-tfilter__field { display: inline-flex; align-items: center; gap: var(--s-2); width: min(20rem, 100%); height: 36px; padding: 0 var(--s-3); box-sizing: border-box; border: 1px solid var(--paligo-border-strong); border-radius: var(--dp-radius-search, 999px); background: var(--paligo-bg); color: var(--paligo-muted); }
.dp-tfilter__field:focus-within { border-color: var(--paligo-text); }
.dp-tfilter__field svg { width: 16px; height: 16px; flex: none; }
.dp-tfilter__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--t-sm); color: var(--paligo-text); }
.dp-tfilter__count { font-size: var(--t-xs); color: var(--paligo-muted); }
main table tr.dp-tfilter__none td { color: var(--paligo-muted); font-style: italic; }
main table tbody tr.is-target td, main table tbody tr.is-target:nth-child(even) td { background: color-mix(in srgb, var(--dp-progress-on) 20%, var(--paligo-bg)); transition: background-color .2s ease; }
.dp-rowlink { margin-left: var(--s-2); font-size: var(--t-xs); color: var(--paligo-faint); text-decoration: none; opacity: 0; transition: opacity .12s ease; }
main table tr:hover .dp-rowlink, .dp-rowlink:focus-visible { opacity: 1; }

/* Figure zoom */
.dp-zoomable { cursor: zoom-in; }
.dp-zoomable:focus-visible { outline: 2px solid var(--paligo-focus, var(--paligo-primary)); outline-offset: 4px; }
.dp-lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.dp-lightbox::backdrop { background: rgb(10 12 16 / .84); }
.dp-lightbox__figure { margin: 0; }
.dp-lightbox__figure img { display: block; max-width: 94vw; max-height: 84vh; width: auto; height: auto; background: var(--dp-media-ground); }
.dp-lightbox__caption { margin: var(--s-3) auto 0; max-width: 72ch; text-align: center; font-size: var(--t-sm); line-height: var(--lh-ui); color: #ffffff; }
.dp-lightbox__close { position: fixed; top: var(--s-4); right: var(--s-4); width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; background: rgb(255 255 255 / .1); color: #ffffff; cursor: pointer; }
.dp-lightbox__close svg { width: 18px; height: 18px; }

/* Jump to a topic */
.dp-jump { width: min(40rem, 92vw); margin: 12vh auto auto; padding: 0; border: 1px solid var(--paligo-border); border-radius: var(--paligo-radius-lg); background: var(--paligo-bg); color: var(--paligo-text); box-shadow: 0 24px 64px -24px rgb(0 0 0 / .45); }
.dp-jump::backdrop { background: rgb(10 12 16 / .45); }
.dp-jump__field { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--paligo-border); color: var(--paligo-muted); }
.dp-jump__field svg { width: 20px; height: 20px; flex: none; }
.dp-jump__field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--t-lg); color: var(--paligo-text); }
.dp-jump__field kbd { font-family: var(--dp-label-font); font-size: var(--t-xs); color: var(--paligo-faint); }
.dp-jump__list { list-style: none; margin: 0; padding: var(--s-2); max-height: 50vh; overflow: auto; }
.dp-jump__item { display: grid; gap: 2px; margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--paligo-radius); cursor: pointer; }
.dp-jump__item[aria-selected="true"] { background: var(--paligo-surface); box-shadow: inset 3px 0 0 var(--dp-progress-on); }
.dp-jump__title { font-size: var(--t-md); line-height: var(--lh-snug); }
.dp-jump__path { font-size: var(--t-xs); color: var(--paligo-faint); }
.dp-jump__none { margin: 0; padding: var(--s-4); font-size: var(--t-sm); color: var(--paligo-muted); }

/* Heading links */
.dp-hlink { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: var(--s-2); padding: 0; border: 0; border-radius: 999px; background: none; color: var(--paligo-faint); vertical-align: middle; cursor: pointer; opacity: 0; transition: opacity .12s ease; }
.dp-hlink svg { width: 16px; height: 16px; }
header:hover > * > .dp-hlink, :is(h2, h3, h4, h5, h6):hover > .dp-hlink, .dp-hlink:focus-visible { opacity: 1; }
.dp-hlink.is-copied { color: var(--paligo-primary); opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .dp-lightbox[open], .dp-jump[open] { animation: dp-pop .18s cubic-bezier(.2, 0, 0, 1); }
  .dp-lightbox[open]::backdrop, .dp-jump[open]::backdrop { animation: dp-fade .18s ease; }
}
@keyframes dp-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dp-run__fill, main ol.procedure > li.step.is-done > *, main table tr.is-target td, .dp-rowlink, .dp-hlink { transition: none !important; }
}
@media print { .dp-run, .dp-tfilter, .dp-hlink, .dp-rowlink, .dp-step-check { display: none !important; } }

/* ===== Nexus Answers widget ============================================== */
/* Colors come from the project's widget settings in Paligo. Everything else is a --paligo-* custom property
   on the widget's :host, inside an open shadow root; a rule on the host element beats those defaults.
   Typography inside the panel is adopted into the shadow root by js/dp-utils.js. */
[data-paligo-chat-widget] {
  /* A custom property may not refer to itself (that is a cycle and unsets it), so the widget's names are fed from
     theme-side --dp-widget-* values. */
  --paligo-font-sans: var(--dp-widget-font, var(--paligo-font));
  --paligo-radius-sm: var(--dp-widget-radius-sm, 6px);
  --paligo-radius-md: var(--dp-widget-radius-md, 10px);
  --paligo-radius-lg: var(--dp-widget-radius-lg, 16px);
  --paligo-link: var(--dp-widget-link, var(--paligo-primary));
  --paligo-shadow-panel: var(--dp-widget-shadow-panel, 0 30px 60px -20px rgb(0 0 0 / .45));
  --paligo-shadow-launcher: var(--dp-widget-shadow-launcher, 0 10px 28px -6px rgb(var(--dp-hero-glow-rgb) / .55));
}

/* ===== Responsive and print ============================================== */
@media (max-width: 75rem) {
  .pagebody.dp-pagebody, .pagebody.dp-pagebody:not(:has(nav.pagetoc)) { grid-template-columns: minmax(0, 1fr); }
  .dp-rail { position: static; }
}
@media (max-width: 70rem) { .dp-top-nav { display: none; } }
@media (max-width: 60rem) { .topbar .dp-header-cta { display: none; } }
@media (max-width: 52rem) { .dp-footer__top { grid-template-columns: 1fr; } .dp-wireframe ol { columns: 1; } }
@media (max-width: 36rem) { .dp-docs-label { display: none; } }
@media print {
  .topbar, aside.site-nav, .dp-rail, .pager, .site-footer, .breadcrumb, [data-paligo-chat-widget], .dp-demo-pill { display: none !important; }
  .dp-demo-watermark {
    display: block !important; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); width: 120%;
    text-align: center; font-size: 22pt; font-weight: 600; color: rgb(0 0 0 / .08); pointer-events: none; z-index: 1000;
  }
  .pagebody.dp-pagebody { display: block; }
}

/* Landing-page menu (base.html.twig .dp-menu): the portal page has no sidebar drawer, so below 70rem, where the
   top nav hides, this details menu takes its place. Content pages keep the drawer. */
.dp-menu { display: none; }
@media (max-width: 70rem) { body.portal .dp-menu { display: block; } }
.dp-menu > summary { list-style: none; cursor: pointer; padding: 0; line-height: 0; }
.dp-menu > summary::-webkit-details-marker { display: none; }
/* A summary wraps its content in an internal box, so a max-width: 100% reset would squeeze the icon to nothing. */
.dp-menu > summary svg { max-width: none; flex: none; margin: 0 auto; }
.dp-menu[open] > summary { background: var(--paligo-surface); }
.dp-menu__panel {
  position: fixed; top: var(--paligo-header-h); left: 0; right: 0; z-index: 60;
  max-height: calc(100vh - var(--paligo-header-h)); overflow: auto;
  padding: .5rem 1.25rem 1.5rem; background: var(--paligo-bg); color: var(--paligo-text);
  border-bottom: 1px solid var(--paligo-border); box-shadow: var(--paligo-shadow-lg);
}
.dp-menu__panel ul { list-style: none; margin: 0; padding: 0; }
.dp-menu__panel a {
  display: block; padding: .75rem 0; border-bottom: 1px solid var(--paligo-border);
  color: var(--paligo-text); font-weight: 500; text-decoration: none;
}
.dp-menu__panel a:hover, .dp-menu__panel a:focus-visible { color: var(--paligo-primary); }
.dp-menu__primary a { font-family: var(--dp-display, inherit); font-size: var(--t-lg); }
.dp-menu__label { margin: var(--s-6) 0 var(--s-1); color: var(--paligo-muted); font-size: var(--t-xs); }

/* Before site-nav.js runs (slow connections), the sidebar would show the whole tree expanded and then jump when the
   script collapses it and inserts the filter box. Collapse every branch but the current one and reserve the filter
   box's height up front, so the script's arrival changes nothing visible. */
aside.site-nav:not(:has(.nav-filter-wrap)) .nav-inner > ul ul { display: none; }
aside.site-nav:not(:has(.nav-filter-wrap)) li:has([aria-current="page"]) > ul { display: block; }
aside.site-nav:not(:has(.nav-filter-wrap)) .nav-inner { padding-top: 60px; }

/* ===== Motion plumbing (reduced-motion safe; see references/experience.md) ================================= */
/* Page-to-page transitions: the header and sidebar hold still while the page cross-fades (cross-document view
   transitions, no JavaScript). Browsers without the at-rule navigate as before; reduced motion turns it off. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
}
.topbar { view-transition-name: dp-header; }
aside.site-nav { view-transition-name: dp-sidebar; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* Theme change grows from the toggle (dp-motion.js runs the toggle inside a view transition). */
html.dp-theme-reveal::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html.dp-theme-reveal::view-transition-new(root) { mix-blend-mode: normal; animation: dp-theme-reveal 420ms cubic-bezier(.2, 0, 0, 1); }
@keyframes dp-theme-reveal {
  from { clip-path: circle(0 at var(--dp-reveal-x, 100%) var(--dp-reveal-y, 0)); }
  to { clip-path: circle(var(--dp-reveal-r, 150vmax) at var(--dp-reveal-x, 100%) var(--dp-reveal-y, 0)); }
}
/* Reveal on scroll, CSS only: give a landing section or card the class dp-reveal. It is visible everywhere and
   animates only where view timelines exist and the reader allows motion. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dp-reveal { animation: dp-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
}
@keyframes dp-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Reading progress under the header: page.html.twig may render <div class="dp-progress" aria-hidden="true"></div>. */
.dp-progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .dp-progress { display: block; position: fixed; z-index: 30; top: var(--paligo-header-h, 64px); left: 0; width: 100%; height: 3px; background: var(--dp-current); transform-origin: 0 50%; transform: scaleX(0); animation: dp-progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes dp-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Anchors land below the fixed header; headings wrap evenly. */
main :is(h1, h2, h3, h4)[id], main [id] > :is(h1, h2, h3, h4) { scroll-margin-top: calc(var(--paligo-header-h, 64px) + 1rem); }
main :is(h1, h2, h3) { text-wrap: balance; }