/* Site rules on top of PatternFly 6 (assets/patternfly/). PatternFly does the
   components; this file sets the few things a content site needs that a
   product console does not: document scrolling, lighter headings, key/value
   rows with hairlines, and print. Keep it short. */

/* Red Hat Display ships as a variable font covering 300..900, but PatternFly
   only declares 600..800. Declare the full range so headings can be light. */
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 300 900;
  font-display: fallback;
  src: url("patternfly/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 300 700;
  font-display: fallback;
  src: url("patternfly/assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
}

/* The handful of utility and flex classes the markup uses, so the 184 KB
   addons file and the 80 KB flex layout stay out of the bundle. */
.pf-v6-u-text-color-subtle { color: var(--pf-t--global--text--color--subtle); }
.pf-v6-u-mt-xs { margin-block-start: var(--pf-t--global--spacer--xs); }
.pf-v6-u-mt-lg { margin-block-start: var(--pf-t--global--spacer--lg); }
.pf-v6-u-mb-lg { margin-block-end: var(--pf-t--global--spacer--lg); }
.pf-v6-u-mb-xl { margin-block-end: var(--pf-t--global--spacer--xl); }
.pf-v6-l-flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pf-t--global--spacer--md); }
.pf-v6-l-flex.pf-m-space-items-sm { gap: var(--pf-t--global--spacer--sm); }

/* PatternFly's own app shell, which is what Cockpit runs: the page is one
   viewport tall, the masthead and the sidebar stay put, and only the content
   area scrolls. Nothing to override; this file only keeps the document from
   scrolling behind it. */
html, body { height: 100%; overflow: hidden; }

/* ---- masthead: stacked identity on the left, quiet links on the right ---- */
.brand { display: block; text-decoration: none; line-height: 1.25; }
.brand .brand-name { display: block; font-weight: 600; color: var(--pf-t--global--text--color--regular); overflow-wrap: anywhere; }
.brand .brand-sub { display: block; font-size: var(--pf-t--global--font--size--body--sm); color: var(--pf-t--global--text--color--subtle); }
.brand:hover { text-decoration: none; }
.brand:hover .brand-name { color: var(--pf-t--global--text--color--link--hover); }
.pf-v6-c-masthead__content { display: flex; align-items: center; justify-content: flex-end; gap: var(--pf-t--global--spacer--md); flex-wrap: wrap; }
.pf-v6-c-masthead { position: relative; }
.theme-toggle .icon-sun { display: none; }
html.pf-v6-theme-dark .theme-toggle .icon-sun { display: inline-block; }
html.pf-v6-theme-dark .theme-toggle .icon-moon { display: none; }

/* Width, the Cockpit way: a sidebar of navigation on the left, and the
   content sheet takes the rest of the screen. Cards, tables and rows stretch
   with it; runs of prose stop at 789px, the Red Hat Design System's
   seven-column limit, inside PatternFly's 20 to 100 characters a line. */
.pf-v6-c-page { --pf-v6-c-page--section--m-limit-width--MaxWidth: none; }
.pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body { width: 100%; }
/* Jumping to a section animates rather than teleports. Anchors are ordinary
   links, so this is the platform's own scrolling, switched off for readers
   who ask for less motion. */
.pf-v6-c-page__main { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .pf-v6-c-page__main { scroll-behavior: auto; } }

/* A page of records or of a CV is read, not scanned like a dashboard, so its
   column stops at 58rem. That leaves a card about 864px wide inside, which is
   the 789px measure for the paragraph plus room for the status at its right.
   The overview is a dashboard and fills the screen. */
.doc-page { --pf-v6-c-page--section--m-limit-width--MaxWidth: 76rem; }
.doc-page .pf-v6-c-page__main-body:has(> .page-rail) { margin-inline: auto; }

/* The first section sits 16px below the top of the sheet by default, which
   crowds the page title against the masthead. Give it room to breathe, and
   the same at the foot so the last card is not flush with the edge. */
.pf-v6-c-page__main > .pf-v6-c-page__main-section:first-child { --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--2xl); }
.pf-v6-c-page__main > .pf-v6-c-page__main-section:last-child { --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--2xl); }
/* The rail is sticky inside that padding, so hold it clear of the top edge. */
@media (min-width: 75rem) { .page-rail { top: var(--pf-t--global--spacer--md); } }

/* The current-section marker is a border on each item, so it jumps from one
   to the next. Where the rail spies on a scroll container, one marker slides
   instead: the per-item border is switched off through the component's own
   variable and this bar takes its colour and width from the same tokens. */
.pf-v6-c-jump-links__list { position: relative; }
.rail-marker {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: var(--pf-t--global--border--width--extra-strong);
  height: 0;
  border-radius: var(--pf-t--global--border--radius--small);
  background: var(--pf-t--global--border--color--brand--default);
  opacity: 0;
  transition: transform var(--pf-t--global--motion--duration--sm, 0.2s) var(--pf-t--global--motion--timing-function--default, ease),
              height var(--pf-t--global--motion--duration--sm, 0.2s) var(--pf-t--global--motion--timing-function--default, ease),
              opacity var(--pf-t--global--motion--duration--sm, 0.2s) linear;
}
.rail-marker.is-on { opacity: 1; }
.has-rail-marker .pf-v6-c-jump-links__item.pf-m-current > .pf-v6-c-jump-links__link {
  --pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth: 0;
}
@media (prefers-reduced-motion: reduce) { .rail-marker { transition: none; } }

/* Moving between the three pages is a cross-document view transition, a
   browser feature: where it is supported the content fades between pages and
   the masthead and sidebar, named here so the browser matches them across
   documents, stay where they are. Where it is not, the link is an ordinary
   navigation. */
@view-transition { navigation: auto; }
.pf-v6-c-masthead { view-transition-name: masthead; }
.pf-v6-c-page__sidebar { view-transition-name: sidebar; }
.pf-v6-c-page__main { view-transition-name: main; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* The sidebar lies over the content below xl, so PatternFly's backdrop dims
   what is behind it. The component sits at the lg layer, above the sidebar's
   own sm layer, and the content container sits at xs, the same layer the
   backdrop would fall back to; it goes just under the sidebar instead, which
   puts it over the content and under the panel. It fades with the panel. */
.site-backdrop {
  --pf-v6-c-backdrop--ZIndex: calc(var(--pf-t--global--z-index--sm) - 1);
  opacity: 0;
  transition: opacity var(--pf-t--global--motion--duration--fade--default, 0.2s) var(--pf-t--global--motion--timing-function--decelerate, ease);
}
.site-backdrop.is-on { opacity: 1; }
/* A drag on the dimmed area does nothing rather than scrolling the page
   behind the panel. Taking the document out of the scroll entirely would
   strand the sticky masthead, which needs a scrollable document to stick to. */
.site-backdrop { touch-action: none; overscroll-behavior: contain; }
@media (min-width: 75rem) { .site-backdrop { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .site-backdrop { transition: none; } }

/* The hamburger morph runs at the icon default, which reads as a flick on a
   phone where the panel beside it takes a slide-in to arrive. Give it the
   slide's duration so the two finish together. */
@media (max-width: 74.99rem) {
  .pf-v6-c-button.pf-m-hamburger { --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default); }
}

/* Below xl the page scrolls as a document rather than inside the shell. The
   shell keeps the masthead and sidebar in place on a large screen, but on a
   phone it costs the browser's own gestures, pull to refresh among them,
   because those need the document itself to be the thing that scrolls. The
   masthead stays put by being sticky, which leaves those gestures alone. */
@media (max-width: 74.99rem) {
  html, body { height: auto; min-height: 100%; overflow: visible; }
  html { scroll-behavior: smooth; }
  .pf-v6-c-page { height: auto; min-height: 100dvh; }
  .pf-v6-c-page__main-container, .pf-v6-c-page__main { height: auto; max-height: none; overflow: visible; }
  .pf-v6-c-masthead { position: sticky; top: 0; z-index: var(--pf-t--global--z-index--md); }
  /* With the document scrolling, the panel would otherwise sit at the top of
     it and be gone once the reader has scrolled; it is pinned to the viewport
     under the masthead instead, which is where a drawer belongs. */
  .pf-v6-c-page__sidebar { position: fixed; inset-block-start: var(--masthead-h, 4.5rem); inset-block-end: 0; height: auto; }
}
@media (max-width: 74.99rem) and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* A link that leaves the site says so before it is clicked. The glyph is
   PatternFly's external-link icon, drawn through a mask so it takes the
   link's own colour in either theme. It also serves as the warning that the
   accessibility guidance asks for wherever a link opens a new tab. */
a[href^="http"]:not([href^="https://gahingwoo.com"])::after,
.pf-v6-c-nav__link[href^="http"]:not([href^="https://gahingwoo.com"]) .pf-v6-c-nav__link-text::after {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-inline-start: 0.3em;
  vertical-align: -0.02em;
  background-color: currentColor;
  opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M30 21v7.5c0 .827-.673 1.5-1.5 1.5h-25c-.827 0-1.5-.673-1.5-1.5v-25C2 2.673 2.673 2 3.5 2H11a1 1 0 1 1 0 2H4v24h24v-7a1 1 0 1 1 2 0ZM28.5 2H18a1 1 0 1 0 0 2h8.586L13.293 17.293a.999.999 0 1 0 1.414 1.414L28 5.414V14a1 1 0 1 0 2 0V3.5c0-.827-.673-1.5-1.5-1.5Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M30 21v7.5c0 .827-.673 1.5-1.5 1.5h-25c-.827 0-1.5-.673-1.5-1.5v-25C2 2.673 2.673 2 3.5 2H11a1 1 0 1 1 0 2H4v24h24v-7a1 1 0 1 1 2 0ZM28.5 2H18a1 1 0 1 0 0 2h8.586L13.293 17.293a.999.999 0 1 0 1.414 1.414L28 5.414V14a1 1 0 1 0 2 0V3.5c0-.827-.673-1.5-1.5-1.5Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* A mailto link leaves the page too, but for a compose window rather than a
   website, so it carries an envelope rather than the arrow: the same warning,
   the truthful symbol. */
a[href^="mailto:"]::after,
.pf-v6-c-nav__link[href^="mailto:"] .pf-v6-c-nav__link-text::after {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-inline-start: 0.3em;
  vertical-align: -0.02em;
  background-color: currentColor;
  opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M29.5 5h-27C1.673 5 1 5.673 1 6.5v19c0 .827.673 1.5 1.5 1.5h27c.827 0 1.5-.673 1.5-1.5v-19c0-.827-.673-1.5-1.5-1.5ZM3 8.238 10.762 16 3 23.762V8.238Zm16.382 7.143h-.001v.001l-3.38 3.38-3.38-3.38v-.001h-.001L4.238 7h23.524l-8.38 8.381ZM12 17.238l3.027 3.027c.26.26.605.403.973.403s.713-.143.973-.403L20 17.238 27.762 25H4.238L12 17.238ZM21.238 16 29 8.238v15.524L21.238 16Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M29.5 5h-27C1.673 5 1 5.673 1 6.5v19c0 .827.673 1.5 1.5 1.5h27c.827 0 1.5-.673 1.5-1.5v-19c0-.827-.673-1.5-1.5-1.5ZM3 8.238 10.762 16 3 23.762V8.238Zm16.382 7.143h-.001v.001l-3.38 3.38-3.38-3.38v-.001h-.001L4.238 7h23.524l-8.38 8.381ZM12 17.238l3.027 3.027c.26.26.605.403.973.403s.713-.143.973-.403L20 17.238 27.762 25H4.238L12 17.238ZM21.238 16 29 8.238v15.524L21.238 16Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
a.pf-v6-c-nav__link[href^="mailto:"]::after { content: none; }

/* In the sidebar the markers line up down the right edge rather than trailing
   labels of different lengths. The label takes the row and the marker is
   pushed to its end, which also keeps it on the same line: on the link itself
   it would become a row of its own above the label.
   Not on the masthead's own controls, nor in print, where the address is
   already spelled out and the glyph would be noise. */
.pf-v6-c-nav__link-text { display: flex; align-items: center; width: 100%; }
.pf-v6-c-nav__link-text::after { margin-inline-start: auto !important; }

/* The rest of the suppressions.
   Not on the masthead's own controls, nor in print, where the address is
   already spelled out and the glyph would be noise. */
a.pf-v6-c-nav__link[href^="http"]::after { content: none; }
.pf-v6-c-masthead a::after, .search-results a::after { content: none; }
@media print { a::after { content: none !important; } }

/* ---- search ----
   patternfly.org keeps a search in its masthead: an icon that expands into an
   input. Cockpit's sidebar box filters a list of nav options, which is a
   different job. The index is generated from the pages by
   tools/build_search.py and fetched the first time the box is used. */
.pf-v6-c-masthead__content { position: relative; min-width: 0; }
.site-search .pf-v6-c-text-input-group__text-input { min-width: 0; }
/* PatternFly's input group is width:100% by design; collapsed, this one is a
   single icon, so it takes only its own width and sits beside the theme
   toggle instead of stretching across the row. */
.site-search { width: auto; flex: 0 0 auto; min-width: 0; }
/* The width cannot be a percentage now that the containing block is the slot
   the collapsed icon occupies; it is measured against the viewport instead. */
.site-search.pf-m-expanded { width: min(26rem, calc(100vw - 6rem)); }
@media (min-width: 48rem) {
  .pf-v6-c-masthead__content { flex-wrap: nowrap; }
  }

/* Collapsed, the search is one icon in the row. Expanded, it lifts out of the
   flex row and lies over the utility links instead of competing with them for
   space, so opening it can never reflow the masthead or crowd the brand. It
   hangs off the right edge of the slot it occupies while collapsed, so the
   button under the pointer does not move as the icon changes. */
.search-slot { position: relative; display: flex; flex: 0 0 auto; }
.site-search.pf-m-expanded {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-end: 0;
  z-index: 2;
}
.site-search.pf-m-expanded .pf-v6-c-input-group__item.pf-m-search-input { --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%; }
.search-results {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--pf-t--global--spacer--sm));
  z-index: var(--pf-t--global--z-index--md);
  width: min(30rem, calc(100vw - 2 * var(--pf-t--global--spacer--md)));
  max-height: min(70dvh, 34rem);
  overflow-y: auto;
  box-shadow: var(--pf-t--global--box-shadow--md);
}
/* Results are read, not scanned as labels, so they wrap; the snippet is held
   to two lines so one long entry cannot crowd out the rest. */
.search-results .pf-v6-c-menu__item-text { display: block; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.search-results .pf-v6-c-menu__item { align-items: start; }
.search-result-page { display: block; font-size: var(--pf-t--global--font--size--body--sm); color: var(--pf-t--global--text--color--subtle); }
.search-result-snippet { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--pf-t--global--font--size--body--sm); color: var(--pf-t--global--text--color--subtle); margin-block-start: 2px; }
/* Below md the field is nearly the width of the screen, so the results are
   not hung off its right edge: they span the viewport under the masthead,
   which is the only way they fit. */
@media (max-width: 47.99rem) {
  .search-results {
    position: fixed;
    inset-inline: var(--pf-t--global--spacer--md);
    top: calc(var(--masthead-h, 4.5rem) + var(--pf-t--global--spacer--xs));
    width: auto;
  }
}
.search-results mark { background: var(--pf-t--global--color--nonstatus--yellow--default, #f0ab00); color: inherit; border-radius: 2px; padding: 0 1px; }
.search-empty { padding: var(--pf-t--global--spacer--md); font-size: var(--pf-t--global--font--size--body--sm); color: var(--pf-t--global--text--color--subtle); }
@media print { .site-search, .search-results { display: none !important; } }

/* ---- on this page ----
   The pattern patternfly.org uses for its own documentation: the site's
   navigation on the left, the sections of this page on the right. From xl the
   rail is a plain sticky list beside the content; below that the grid is one
   column and PatternFly's expandable variant turns the same list into a
   toggle above the content. */
.page-rail { margin-bottom: var(--pf-t--global--spacer--md); }
.page-rail .pf-v6-c-jump-links__label { font-family: var(--pf-t--global--font--family--heading); color: var(--pf-t--global--text--color--subtle); }
.page-rail .pf-v6-c-jump-links__toggle .pf-v6-c-button { padding-inline-start: 0; }
@media (max-width: 74.99rem) {
  .page-rail .pf-v6-c-jump-links:not(.pf-m-expanded) .pf-v6-c-jump-links__list { display: none; }
}
@media (min-width: 75rem) {
  .with-rail .pf-v6-c-page__main-body:has(> .page-rail) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    column-gap: var(--pf-t--global--spacer--xl);
    align-items: start;
  }
  .page-content { grid-column: 1; grid-row: 1; min-width: 0; }
  .page-rail {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 0;
    margin-bottom: 0;
    max-height: calc(100dvh - var(--pf-t--global--spacer--3xl));
    overflow-y: auto;
  }
}
.card-text, .entry-desc, .cv-desc, .cv-list li, .cv-summary, .kv .pf-v6-c-description-list__description { max-width: 789px; }

/* ---- page head: title, inline subtitle, one action ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-t--global--spacer--md); flex-wrap: wrap; margin-bottom: var(--pf-t--global--spacer--xl); }
.page-title { font-family: var(--pf-t--global--font--family--heading); font-weight: 400; font-size: 1.75rem; line-height: 1.25; margin: 0; }
.page-title .subtitle { font-family: var(--pf-t--global--font--family--body); font-size: 1.125rem; font-weight: 400; color: var(--pf-t--global--text--color--subtle); margin-inline-start: var(--pf-t--global--spacer--md); }
@media (max-width: 640px) { .page-title .subtitle { display: block; margin-inline-start: 0; margin-top: 2px; } }

/* ---- cards ---- */
.pf-v6-l-gallery { --pf-v6-l-gallery--GridTemplateColumns--min: min(100%, 25rem); }
/* Overview cards: Cockpit's gallery, as many columns as fit at 26rem each. */
.home-cards { --pf-v6-l-gallery--GridTemplateColumns--min: min(100%, 24rem); }
.pf-v6-c-card { --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--xl); --pf-v6-c-card--child--PaddingInlineStart: var(--pf-t--global--spacer--xl); --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--xl); --pf-v6-c-card--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--xl); }
.pf-v6-c-card__title-text { font-weight: 400; font-size: 1.375rem; line-height: 1.3; }
.pf-v6-c-card__body { font-size: 1rem; line-height: 1.5; }
.pf-v6-c-card__footer { font-size: 1rem; }
.card-text p { margin: 0 0 var(--pf-t--global--spacer--md) 0; }
/* The card's own opening. It carries the same job the About paragraph does:
   say what the thing is and why it is hard before naming it, so a reader who
   does not know what an IOMMU is still knows what was at stake. It sits above
   the key/value rows and reads as body text, because it is the part a
   non-specialist most needs, not a caption on the part they can skip. */
.card-lede {
  margin: 0 0 var(--pf-t--global--spacer--md) 0;
  max-width: 789px;
  color: var(--pf-t--global--text--color--regular);
}
.card-text p:last-child { margin-bottom: 0; }

/* Key/value rows with hairlines, as Cockpit lays out system information. */
.kv { --pf-v6-c-description-list--RowGap: 0; --pf-v6-c-description-list--m-horizontal__term--width: minmax(0, 11rem); }
.kv .pf-v6-c-description-list__group { padding-block: 0.625rem; border-bottom: 1px solid var(--pf-t--global--border--color--default); }
.kv .pf-v6-c-description-list__group:first-child { padding-top: 0; }
.kv .pf-v6-c-description-list__group:last-child { border-bottom: 0; padding-bottom: 0; }
.kv .pf-v6-c-description-list__term .pf-v6-c-description-list__text { font-weight: 400; overflow-wrap: normal; }
.kv .pf-v6-c-description-list__text { font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.kv .meta { display: block; color: var(--pf-t--global--text--color--subtle); font-size: var(--pf-t--global--font--size--body--default); margin-top: 2px; }

/* ---- section heading on long pages ---- */
.section-title { font-family: var(--pf-t--global--font--family--heading); font-weight: 400; font-size: 1.375rem; margin: 0 0 var(--pf-t--global--spacer--md) 0; }
.section-title .count { color: var(--pf-t--global--text--color--subtle); font-size: 1rem; margin-inline-start: var(--pf-t--global--spacer--sm); }

/* ---- sidebar ----
   PatternFly's page sidebar: always open from xl, slid in by the hamburger
   below that. The section list of the current page lives here, as Cockpit
   keeps its System and Tools groups. */
.pf-v6-c-page__sidebar-body { padding-block-start: var(--pf-t--global--spacer--md); }
.pf-v6-c-nav__section-title { font-family: var(--pf-t--global--font--family--heading); }
@media print { .pf-v6-c-page__sidebar, .page-rail { display: none !important; } }

/* ---- evidence entries: rows of a data list inside one card per group ---- */
.section { margin-top: var(--pf-t--global--spacer--lg); scroll-margin-top: var(--pf-t--global--spacer--lg); }
.pf-v6-c-card__title-text .count { color: var(--pf-t--global--text--color--subtle); font-size: 1rem; margin-inline-start: var(--pf-t--global--spacer--xs); white-space: nowrap; }
.pf-v6-c-data-list { --pf-v6-c-data-list--BorderBlockStartWidth: 0; --pf-v6-c-data-list--sm--BorderBlockStartWidth: 0; }
.pf-v6-c-data-list__item:last-child { --pf-v6-c-data-list__item--BorderBlockEndWidth: 0; --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: 0; }
.entry { scroll-margin-top: var(--pf-t--global--spacer--lg); }
.entry .pf-v6-c-data-list__item-row { padding-inline: 0; }  /* the card body already pads */
.entry .pf-v6-c-data-list__cell { min-width: 0; }
.entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pf-t--global--spacer--md); flex-wrap: wrap; margin-bottom: var(--pf-t--global--spacer--xs); }
.entry-title { font-family: var(--pf-t--global--font--family--heading); font-weight: 400; font-size: 1.125rem; line-height: 1.3; margin: 0; }
.entry-anchor { color: inherit; text-decoration: none; }
.entry-anchor:hover { text-decoration: underline; }
.entry .status { color: var(--pf-t--global--text--color--subtle); font-size: var(--pf-t--global--font--size--body--default); }
/* The entry a link lands on: a soft tint across the whole row, pulled out to
   the card edge so the text column does not move. */
.entry:target { background: color-mix(in srgb, var(--pf-t--global--color--brand--default) 7%, transparent); margin-inline: calc(-1 * var(--pf-t--global--spacer--xl)); padding-inline: var(--pf-t--global--spacer--xl); border-radius: var(--pf-t--global--border--radius--small); }
.home-cards > .pf-v6-c-card { scroll-margin-top: var(--pf-t--global--spacer--md); }
.entry-desc { position: relative; font-size: 1rem; line-height: 1.5; }
.entry.is-folded .entry-desc { max-height: 9em; overflow: hidden; }
.entry.is-folded .entry-desc::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3em;
  background: linear-gradient(to bottom, transparent, var(--pf-t--global--background--color--primary--default));
  pointer-events: none;
}
.entry-more { margin-top: var(--pf-t--global--spacer--xs); }
.entry-links { display: flex; flex-wrap: wrap; gap: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--lg); font-size: var(--pf-t--global--font--size--body--default); margin-top: var(--pf-t--global--spacer--sm); }
.entry-links a, .cv-refs a, .kv a { overflow-wrap: anywhere; }
.contents { columns: 1; column-gap: var(--pf-t--global--spacer--2xl); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .contents { columns: 2; } }
.contents li { display: flex; justify-content: space-between; gap: var(--pf-t--global--spacer--sm); padding: 0.375rem 0; border-bottom: 1px solid var(--pf-t--global--border--color--default); break-inside: avoid; font-size: 1rem; }
.contents .count { color: var(--pf-t--global--text--color--subtle); }
.table-wrap { overflow-x: auto; }
.status-cell { color: var(--pf-t--global--text--color--subtle); white-space: nowrap; }

/* ---- footer ---- */
/* ---- footer ----
   Four columns: three of links and one that says who this is, which is the
   arrangement the church site uses and the one a reader arriving at the bottom
   of a long page expects. The legal line sits under a rule beneath it. */
/* The footer is its own region on the secondary surface rather than more
   content on the sheet, which is how redhat.com and the PatternFly demos end a
   page: the change of ground does the separating, so no rule is needed above
   it. It sits outside the content section, so it also runs the full width
   instead of stopping where the right-hand rail begins. */
.site-footer, .foot-legal {
  background: var(--pf-t--global--background--color--secondary--default);
  font-size: var(--pf-t--global--font--size--body--sm);
  color: var(--pf-t--global--text--color--subtle);
}
.site-footer { padding-block-start: var(--pf-t--global--spacer--2xl); }
.foot-legal { padding-block-start: 0; }
.foot-title {
  font-family: var(--pf-t--global--font--family--heading);
  font-weight: 500;
  color: var(--pf-t--global--text--color--regular);
  margin: 0 0 var(--pf-t--global--spacer--sm) 0;
}
.site-footer nav { display: flex; flex-direction: column; gap: var(--pf-t--global--spacer--xs); }
/* The footer does not colour its links, and a footer link is navigation rather
   than a citation, so it carries neither the link colour nor the
   leaves-the-site glyph that a reference in the content does. */
.site-footer a, .foot-legal a { color: inherit; }
.site-footer a::after, .foot-legal a::after { content: none !important; }
.foot-brand { display: flex; align-items: center; gap: var(--pf-t--global--spacer--sm); }
.foot-mark { width: 2rem; height: 2rem; border-radius: 50%; }
.foot-name { font-family: var(--pf-t--global--font--family--heading); font-weight: 500; color: var(--pf-t--global--text--color--regular); }
.foot-about { margin: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--md) 0; }
.site-footer address { font-style: normal; line-height: 1.9; }
.foot-legal .pf-v6-c-page__main-body {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--lg);
  padding-block-start: var(--pf-t--global--spacer--md);
}
/* The rule belongs to the columns of links, not to the whole footer: run it
   the full width and it draws a box around the identity block on the right,
   which is a separate thing that happens to sit alongside. So it stops where
   the fourth column begins. That column starts at 75% plus three quarters of
   one gutter, so the rule ends a quarter of a gutter before it. Below lg the
   columns stack and there is nothing to the right, so it spans the width. */
.foot-legal .pf-v6-c-page__main-body::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  border-block-start: 1px solid var(--pf-t--global--border--color--default);
}
@media (min-width: 75rem) {
  .foot-legal .pf-v6-c-page__main-body::before {
    inline-size: calc(75% - 0.25 * var(--pf-t--global--spacer--md));
  }
}
/* A button that has to sit in a run of links and read as one of them. */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}
.link-button:hover { text-decoration-style: solid; }

/* ---- about this site ----
   PatternFly's about modal box, which is the component this exact content is
   for: a product's name, a list of facts about it, and a closing line. */
.about-backdrop .pf-v6-c-about-modal-box {
  /* The artwork PatternFly leaves the right-hand column for, shipped in the
     package. It is grey at low opacity rather than a fixed colour, so one file
     serves both themes. */
  --pf-v6-c-about-modal-box--BackgroundImage: url("/assets/patternfly/assets/images/pf-background.svg");
  --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
  /* The component fixes the box at 47.625rem tall from lg, sized for a
     product's about box. This one takes the height its rows ask for, and the
     viewport caps it. */
  --pf-v6-c-about-modal-box--Height: auto;
  --pf-v6-c-about-modal-box--lg--Height: auto;
  border-radius: var(--pf-t--global--border--radius--large);
  width: min(64rem, calc(100vw - 2 * var(--pf-t--global--spacer--lg)));
  max-height: calc(100dvh - 2 * var(--pf-t--global--spacer--lg));
  overflow: auto;
}
/* The brand slot carries the wordmark rather than a logo. One element, and the
   stylesheet picks which of the two files it draws: a hidden <img> is fetched
   anyway, so a pair of them would cost every visitor both downloads to show
   one. */
.credit-badge { display: block; width: 11.25rem; height: auto; }
.credit-badge__mark { fill: #9472db; }
.credit-badge__label,
.credit-badge__name { font-family: var(--pf-t--global--font--family--mono); }
.credit-badge__label { font-size: 20px; font-weight: 500; letter-spacing: 0.5px; fill: var(--pf-t--global--text--color--subtle); }
.credit-badge__name { font-size: 38px; font-weight: 800; letter-spacing: -0.5px; fill: var(--pf-t--global--text--color--regular); }
/* On a near-black surface the badge's own purple and its near-white wordmark
   both glow. The mark takes a dimmer purple and the wordmark drops to the
   subtle text colour, so a credit line reads as a credit line rather than as
   the brightest thing in the dialog. */
html.pf-v6-theme-dark .credit-badge__mark { fill: #8b73c9; }
html.pf-v6-theme-dark .credit-badge__name { fill: var(--pf-t--global--text--color--subtle); }
html.pf-v6-theme-dark .credit-badge__label { fill: var(--pf-t--global--text--color--subtle); opacity: 0.7; }
/* Every group in this component is its own grid, so a term column given a
   minmax() is resolved per row: the row holding a long URL squeezes its own
   term column and that row's value starts further along than the rest. A fixed
   width lines them all up, and the value wraps instead. */
.about-backdrop .pf-v6-c-description-list {
  --pf-v6-c-description-list--m-horizontal__term--width: 10rem;
  --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--md);
}
.about-backdrop .pf-v6-c-description-list__description a { overflow-wrap: anywhere; }

/* Back to top: PatternFly positions this inside a scrolling container; the
   page scrolls as a document, so it is fixed to the viewport instead, at the
   normal button size rather than the component's compact one. */
.pf-v6-c-back-to-top {
  position: fixed;
  inset-inline-end: var(--pf-t--global--spacer--lg);
  inset-block-end: var(--pf-t--global--spacer--xl);
  /* The page's main container sits at z-index xs; the button must be above it. */
  z-index: var(--pf-t--global--z-index--lg);
  --pf-v6-c-back-to-top--c-button--FontSize: var(--pf-t--global--font--size--body--default);
  --pf-v6-c-back-to-top--c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
  --pf-v6-c-back-to-top--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
  --pf-v6-c-back-to-top--c-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
  --pf-v6-c-back-to-top--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
  --pf-v6-c-back-to-top--c-button--BoxShadow: var(--pf-t--global--box-shadow--md);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media print {
  /* The app shell is one viewport tall with its own scroller; printing needs
     the whole document to flow, so undo the shell here. */
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  .pf-v6-c-masthead, .theme-toggle, .no-print, .pf-v6-c-back-to-top, .pf-v6-c-skip-to-content { display: none !important; }
  .pf-v6-c-page, .pf-v6-c-page__main-container, .pf-v6-c-page__main { display: block; height: auto; min-height: 0; background: #fff; }
  .pf-v6-c-page__main-section { background: #fff; padding: 0; border-radius: 0; }
  .entry.is-folded .entry-desc { max-height: none; overflow: visible; }
  .entry.is-folded .entry-desc::after { display: none; }
  .entry-more { display: none; }
}