@penn-libraries/web 1.4.0-dev.2 → 1.4.0-dev.3

package/dist/components/pennlibs-accordion.js

@@ -0,0 +1,192 @@
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+
+const pennlibsAccordionCss = "pennlibs-accordion{display:contents}";
+
+let accordionUid = 0;
+const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * When set, only one panel can be open at a time, so opening one closes the
+         * others, like a classic accordion.
+         * @prop single
+         */
+        this.single = false;
+        this.uid = accordionUid++;
+        this.items = [];
+        this.summaries = [];
+        // Roving focus between headers per the WAI-ARIA Accordion keyboard model.
+        // Enter/Space toggling is left to the browser's native <details> behavior.
+        this.onKeydown = (event) => {
+            var _a;
+            const current = event.currentTarget;
+            const index = this.summaries.indexOf(current);
+            if (index === -1)
+                return;
+            const count = this.summaries.length;
+            let next;
+            switch (event.key) {
+                case 'ArrowDown':
+                    next = (index + 1) % count;
+                    break;
+                case 'ArrowUp':
+                    next = (index - 1 + count) % count;
+                    break;
+                case 'Home':
+                    next = 0;
+                    break;
+                case 'End':
+                    next = count - 1;
+                    break;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            (_a = this.summaries[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.onToggle = (event) => {
+            if (!this.single)
+                return;
+            const details = event.target;
+            if (!details.open)
+                return;
+            this.items.forEach((other) => {
+                if (other !== details && other.open)
+                    other.open = false;
+            });
+        };
+    }
+    componentDidLoad() {
+        this.collectItems();
+        this.enhanceItems();
+        this.syncControls(this.el, this.items.some((details) => details.open));
+    }
+    disconnectedCallback() {
+        this.summaries.forEach((summary) => summary.removeEventListener('keydown', this.onKeydown));
+        this.items.forEach((details) => details.removeEventListener('toggle', this.onToggle));
+    }
+    collectItems() {
+        this.items = Array.from(this.el.querySelectorAll(':scope > details, :scope > .pl-details'));
+        this.summaries = this.items
+            .map((details) => details.querySelector(':scope > summary'))
+            .filter((summary) => summary instanceof HTMLElement);
+    }
+    enhanceItems() {
+        this.items.forEach((details, index) => {
+            const summary = details.querySelector(':scope > summary');
+            if (!summary)
+                return;
+            const panel = summary.nextElementSibling;
+            const baseId = `pl-accordion-${this.uid}-${index}`;
+            // Wire the summary (the disclosure button) to its panel as a labelled
+            // region. Native <summary> already exposes the button role and
+            // aria-expanded, so we only add what it lacks.
+            if (!summary.id)
+                summary.id = `${baseId}-summary`;
+            if (panel) {
+                if (!panel.id)
+                    panel.id = `${baseId}-panel`;
+                if (!panel.hasAttribute('role'))
+                    panel.setAttribute('role', 'region');
+                if (!panel.hasAttribute('aria-labelledby'))
+                    panel.setAttribute('aria-labelledby', summary.id);
+                summary.setAttribute('aria-controls', panel.id);
+            }
+            summary.addEventListener('keydown', this.onKeydown);
+            details.addEventListener('toggle', this.onToggle);
+        });
+    }
+    // A declarative toggle-all control: any element marked with
+    // `data-pl-accordion-toggle`. With no value it controls the closest enclosing
+    // accordion; set the value to an accordion's id to control one from elsewhere
+    // on the page. Add `data-pl-accordion-toggle-deep` to also reach nested
+    // accordions, or a number for that many levels. `data-pl-expand-label` and
+    // `data-pl-collapse-label` swap its text to match the state.
+    onControlClick(event) {
+        var _a;
+        const control = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('[data-pl-accordion-toggle]');
+        if (!control || this.controlTarget(control) !== this.el)
+            return;
+        event.preventDefault();
+        const expanded = !this.items.some((details) => details.open);
+        this.setAll(this.el, expanded, this.controlDepth(control));
+    }
+    // The accordion a control points at: the element whose id is in the attribute
+    // value, or the closest enclosing accordion when the value is empty.
+    controlTarget(control) {
+        const id = control.getAttribute('data-pl-accordion-toggle');
+        return id ? document.getElementById(id) : control.closest('pennlibs-accordion');
+    }
+    // How many nested levels a control reaches: absent is none, a bare attribute
+    // is every level, and a non-negative number is that many levels down.
+    controlDepth(control) {
+        if (!control.hasAttribute('data-pl-accordion-toggle-deep'))
+            return 0;
+        const raw = control.getAttribute('data-pl-accordion-toggle-deep');
+        if (raw === null || raw === '')
+            return Infinity;
+        const levels = parseInt(raw, 10);
+        return Number.isFinite(levels) && levels >= 0 ? levels : Infinity;
+    }
+    // Expand or collapse every item in an accordion, pushing the same direction
+    // `levels` deep. Each level reads its own single-open rule, so nothing forces
+    // two panels open in a single-open group.
+    setAll(accordion, expanded, levels) {
+        const items = Array.from(accordion.querySelectorAll(':scope > details, :scope > .pl-details'));
+        if (expanded && accordion.single) {
+            items.forEach((details, index) => (details.open = index === 0));
+        }
+        else {
+            items.forEach((details) => (details.open = expanded));
+        }
+        this.syncControls(accordion, expanded);
+        if (levels > 0) {
+            this.nestedAccordions(accordion).forEach((nested) => this.setAll(nested, expanded, levels - 1));
+        }
+    }
+    // The accordions one level down from the given one (not their descendants).
+    nestedAccordions(accordion) {
+        return Array.from(accordion.querySelectorAll('pennlibs-accordion')).filter((node) => { var _a; return ((_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.closest('pennlibs-accordion')) === accordion; });
+    }
+    // Keep every control pointing at an accordion in sync with its state.
+    syncControls(accordion, expanded) {
+        document.querySelectorAll('[data-pl-accordion-toggle]').forEach((control) => {
+            if (this.controlTarget(control) !== accordion)
+                return;
+            control.setAttribute('aria-expanded', String(expanded));
+            const label = expanded
+                ? control.getAttribute('data-pl-collapse-label')
+                : control.getAttribute('data-pl-expand-label');
+            if (label)
+                control.textContent = label;
+        });
+    }
+    get el() { return this; }
+    static get style() { return pennlibsAccordionCss; }
+}, [0, "pennlibs-accordion", {
+        "single": [4]
+    }, [[4, "click", "onControlClick"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pennlibs-accordion"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pennlibs-accordion":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Accordion);
+            }
+            break;
+    } });
+}
+
+const PennlibsAccordion = Accordion;
+const defineCustomElement = defineCustomElement$1;
+
+export { PennlibsAccordion, defineCustomElement };
+//# sourceMappingURL=pennlibs-accordion.js.map
+
+//# sourceMappingURL=pennlibs-accordion.js.map

package/dist/components/pennlibs-accordion.js.map

@@ -0,0 +1 @@
+{"file":"pennlibs-accordion.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pennlibs-accordion/pennlibs-accordion.css?tag=pennlibs-accordion","src/components/pennlibs-accordion/pennlibs-accordion.tsx"],"sourcesContent":["/*\n  The accordion is a behavior wrapper, not a layout box. `display: contents`\n  lets its details flow in the surrounding context as if the element were not\n  there. (`:host` is not used because this is a non-shadow component, so the\n  rule targets the tag, which Stencil injects globally when the component loads.)\n*/\npennlibs-accordion {\n  display: contents;\n}\n","import { Component, Element, Prop, Listen } from '@stencil/core';\n\nlet accordionUid = 0;\n\n/**\n * Composes a group of native `<details class=\"pl-details\">` disclosures into an\n * accordion. The markup is authored as plain styled details elements (see the\n * Details pattern) so it works and is accessible without JavaScript; once this\n * component loads it layers on the WAI-ARIA Accordion behavior: keyboard\n * navigation between headers, region wiring, and an optional single-open mode.\n *\n * To expand or collapse every item at once, add a control with\n * `data-pl-accordion-toggle`. With no value it controls the closest enclosing\n * accordion; set the value to an accordion's id to control one from elsewhere\n * on the page. Add `data-pl-accordion-toggle-deep` to also reach nested\n * accordions, or give it a number to reach that many levels down.\n * `data-pl-expand-label` and `data-pl-collapse-label` swap the control's text\n * to match the state.\n *\n * This is a light-DOM component. It does not render its own template; it only\n * enhances the `<details>` children it is given.\n *\n * @slot - One or more details items, each styled with the pl-details classes.\n */\n@Component({\n  tag: 'pennlibs-accordion',\n  styleUrl: 'pennlibs-accordion.css',\n  shadow: false,\n})\nexport class Accordion {\n  @Element() el!: HTMLElement;\n\n  /**\n   * When set, only one panel can be open at a time, so opening one closes the\n   * others, like a classic accordion.\n   * @prop single\n   */\n  @Prop() single: boolean = false;\n\n  private uid = accordionUid++;\n  private items: HTMLDetailsElement[] = [];\n  private summaries: HTMLElement[] = [];\n\n  componentDidLoad() {\n    this.collectItems();\n    this.enhanceItems();\n    this.syncControls(this.el, this.items.some((details) => details.open));\n  }\n\n  disconnectedCallback() {\n    this.summaries.forEach((summary) => summary.removeEventListener('keydown', this.onKeydown));\n    this.items.forEach((details) => details.removeEventListener('toggle', this.onToggle));\n  }\n\n  private collectItems() {\n    this.items = Array.from(\n      this.el.querySelectorAll(':scope > details, :scope > .pl-details'),\n    ) as HTMLDetailsElement[];\n    this.summaries = this.items\n      .map((details) => details.querySelector(':scope > summary'))\n      .filter((summary): summary is HTMLElement => summary instanceof HTMLElement);\n  }\n\n  private enhanceItems() {\n    this.items.forEach((details, index) => {\n      const summary = details.querySelector(':scope > summary') as HTMLElement | null;\n      if (!summary) return;\n      const panel = summary.nextElementSibling as HTMLElement | null;\n      const baseId = `pl-accordion-${this.uid}-${index}`;\n\n      // Wire the summary (the disclosure button) to its panel as a labelled\n      // region. Native <summary> already exposes the button role and\n      // aria-expanded, so we only add what it lacks.\n      if (!summary.id) summary.id = `${baseId}-summary`;\n      if (panel) {\n        if (!panel.id) panel.id = `${baseId}-panel`;\n        if (!panel.hasAttribute('role')) panel.setAttribute('role', 'region');\n        if (!panel.hasAttribute('aria-labelledby')) panel.setAttribute('aria-labelledby', summary.id);\n        summary.setAttribute('aria-controls', panel.id);\n      }\n\n      summary.addEventListener('keydown', this.onKeydown);\n      details.addEventListener('toggle', this.onToggle);\n    });\n  }\n\n  // Roving focus between headers per the WAI-ARIA Accordion keyboard model.\n  // Enter/Space toggling is left to the browser's native <details> behavior.\n  private onKeydown = (event: KeyboardEvent) => {\n    const current = event.currentTarget as HTMLElement;\n    const index = this.summaries.indexOf(current);\n    if (index === -1) return;\n\n    const count = this.summaries.length;\n    let next: number;\n    switch (event.key) {\n      case 'ArrowDown':\n        next = (index + 1) % count;\n        break;\n      case 'ArrowUp':\n        next = (index - 1 + count) % count;\n        break;\n      case 'Home':\n        next = 0;\n        break;\n      case 'End':\n        next = count - 1;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.summaries[next]?.focus();\n  };\n\n  private onToggle = (event: Event) => {\n    if (!this.single) return;\n    const details = event.target as HTMLDetailsElement;\n    if (!details.open) return;\n    this.items.forEach((other) => {\n      if (other !== details && other.open) other.open = false;\n    });\n  };\n\n  // A declarative toggle-all control: any element marked with\n  // `data-pl-accordion-toggle`. With no value it controls the closest enclosing\n  // accordion; set the value to an accordion's id to control one from elsewhere\n  // on the page. Add `data-pl-accordion-toggle-deep` to also reach nested\n  // accordions, or a number for that many levels. `data-pl-expand-label` and\n  // `data-pl-collapse-label` swap its text to match the state.\n  @Listen('click', { target: 'document' })\n  onControlClick(event: MouseEvent) {\n    const control = (event.target as HTMLElement)?.closest('[data-pl-accordion-toggle]');\n    if (!control || this.controlTarget(control) !== this.el) return;\n    event.preventDefault();\n    const expanded = !this.items.some((details) => details.open);\n    this.setAll(this.el, expanded, this.controlDepth(control));\n  }\n\n  // The accordion a control points at: the element whose id is in the attribute\n  // value, or the closest enclosing accordion when the value is empty.\n  private controlTarget(control: Element): Element | null {\n    const id = control.getAttribute('data-pl-accordion-toggle');\n    return id ? document.getElementById(id) : control.closest('pennlibs-accordion');\n  }\n\n  // How many nested levels a control reaches: absent is none, a bare attribute\n  // is every level, and a non-negative number is that many levels down.\n  private controlDepth(control: Element): number {\n    if (!control.hasAttribute('data-pl-accordion-toggle-deep')) return 0;\n    const raw = control.getAttribute('data-pl-accordion-toggle-deep');\n    if (raw === null || raw === '') return Infinity;\n    const levels = parseInt(raw, 10);\n    return Number.isFinite(levels) && levels >= 0 ? levels : Infinity;\n  }\n\n  // Expand or collapse every item in an accordion, pushing the same direction\n  // `levels` deep. Each level reads its own single-open rule, so nothing forces\n  // two panels open in a single-open group.\n  private setAll(accordion: Element, expanded: boolean, levels: number) {\n    const items = Array.from(\n      accordion.querySelectorAll(':scope > details, :scope > .pl-details'),\n    ) as HTMLDetailsElement[];\n    if (expanded && (accordion as HTMLPennlibsAccordionElement).single) {\n      items.forEach((details, index) => (details.open = index === 0));\n    } else {\n      items.forEach((details) => (details.open = expanded));\n    }\n    this.syncControls(accordion, expanded);\n    if (levels > 0) {\n      this.nestedAccordions(accordion).forEach((nested) => this.setAll(nested, expanded, levels - 1));\n    }\n  }\n\n  // The accordions one level down from the given one (not their descendants).\n  private nestedAccordions(accordion: Element): Element[] {\n    return Array.from(accordion.querySelectorAll('pennlibs-accordion')).filter(\n      (node) => node.parentElement?.closest('pennlibs-accordion') === accordion,\n    );\n  }\n\n  // Keep every control pointing at an accordion in sync with its state.\n  private syncControls(accordion: Element, expanded: boolean) {\n    document.querySelectorAll('[data-pl-accordion-toggle]').forEach((control) => {\n      if (this.controlTarget(control) !== accordion) return;\n      control.setAttribute('aria-expanded', String(expanded));\n      const label = expanded\n        ? control.getAttribute('data-pl-collapse-label')\n        : control.getAttribute('data-pl-expand-label');\n      if (label) control.textContent = label;\n    });\n  }\n}\n"],"version":3}

package/dist/docs.json

@@ -1,11 +1,81 @@
 {
-  "timestamp": "2026-06-03T19:41:32",
+  "timestamp": "2026-06-17T18:34:27",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.1",
     "typescriptVersion": "5.9.3"
   },
   "components": [
+    {
+      "filePath": "src/components/pennlibs-accordion/pennlibs-accordion.tsx",
+      "encapsulation": "none",
+      "tag": "pennlibs-accordion",
+      "readme": "# pennlibs-accordion\n\n\n",
+      "docs": "Composes a group of native `<details class=\"pl-details\">` disclosures into an\naccordion. The markup is authored as plain styled details elements (see the\nDetails pattern) so it works and is accessible without JavaScript; once this\ncomponent loads it layers on the WAI-ARIA Accordion behavior: keyboard\nnavigation between headers, region wiring, and an optional single-open mode.\n\nTo expand or collapse every item at once, add a control with\n`data-pl-accordion-toggle`. With no value it controls the closest enclosing\naccordion; set the value to an accordion's id to control one from elsewhere\non the page. Add `data-pl-accordion-toggle-deep` to also reach nested\naccordions, or give it a number to reach that many levels down.\n`data-pl-expand-label` and `data-pl-collapse-label` swap the control's text\nto match the state.\n\nThis is a light-DOM component. It does not render its own template; it only\nenhances the `<details>` children it is given.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "- One or more details items, each styled with the pl-details classes."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "single",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "single",
+          "reflectToAttr": false,
+          "docs": "When set, only one panel can be open at a time, so opening one closes the\nothers, like a classic accordion.",
+          "docsTags": [
+            {
+              "name": "prop",
+              "text": "single"
+            },
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [
+        {
+          "event": "click",
+          "target": "document",
+          "capture": false,
+          "passive": false
+        }
+      ],
+      "styles": [],
+      "slots": [
+        {
+          "name": "",
+          "docs": "One or more details items, each styled with the pl-details classes."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/pennlibs-autocomplete/pennlibs-autocomplete.tsx",
       "encapsulation": "shadow",

package/dist/{web/p-DJQvPLp9.js → esm/index-BXL8iX4F.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'web';
 const BUILD = /* web */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = "@import url(\"https://use.typekit.net/gbh8cmg.css\");\n\n@font-face {\n  font-family: 'Perpetua';\n  src: url('assets/fonts/perpetua.woff2') format('woff2'),\n       url('assets/fonts/perpetua.woff') format('woff');\n  font-weight: 400;\n  font-display: swap;\n}\n\n:root {\n  --pl-color-penn-red: #990000;\n  --pl-color-penn-blue: #011F5B;\n  --pl-color-gray-dark: #2D3545;\n  --pl-color-gray: #595F6A;\n  --pl-color-gray-light: #F5F5F6;\n  --pl-color-gray-blue-light: #EEEEF4;\n  --pl-color-white: #FFFFFF;\n  --pl-color-blue: #0E5696;\n  --pl-color-blue-light: #D4E4F2;\n  --pl-color-green: #267434;\n  --pl-color-green-light: #F1F7E1;\n  --pl-color-orange: #BD4718;\n  --pl-color-orange-light: #FEEDDD;\n  --pl-color-purple: #80317F;\n  --pl-color-purple-light: #F2DFED;\n  --pl-color-bg-gradient-1: linear-gradient(45deg, rgba(200, 219, 232, 0.8), rgba(239, 210, 215, 0.8));\n  --pl-color-bg-gradient-2: linear-gradient(45deg, #dbe9f5, #feefdf);\n  --pl-font-size: 16px;\n  --pl-font-sans-serif: proxima-nova, system-ui, sans-serif;\n  --pl-font-serif: 'Perpetua', serif;\n  --pl-link-text-underline-offset: 0.2em;\n  --pl-link-text-decoration-thickness: 1px;\n  --pl-link-hover-text-decoration-thickness: 2px;\n  --pl-viewport-margins-max-width: 1440px;\n  --pl-viewport-margins-gutter: 1em;\n  --pl-color-fg-default: var(--pl-color-gray-dark);\n  --pl-color-fg-subtle: var(--pl-color-gray);\n  --pl-color-fg-subtle-on-emphasis: var(--pl-color-gray-light);\n  --pl-color-fg-on-emphasis: var(--pl-color-white);\n  --pl-color-fg-accent: var(--pl-color-blue);\n  --pl-color-fg-success: var(--pl-color-green);\n  --pl-color-fg-attention: var(--pl-color-orange);\n  --pl-color-fg-info: var(--pl-color-purple);\n  --pl-color-bg-default: var(--pl-color-white);\n  --pl-color-bg-subtle: var(--pl-color-gray-light);\n  --pl-color-bg-subtle-brand: var(--pl-color-gray-blue-light);\n  --pl-color-bg-emphasis: var(--pl-color-gray-dark);\n  --pl-color-bg-accent: var(--pl-color-blue-light);\n  --pl-color-bg-success: var(--pl-color-green-light);\n  --pl-color-bg-attention: var(--pl-color-orange-light);\n  --pl-color-bg-info: var(--pl-color-purple-light);\n  --pl-color-bg-accent-emphasis: var(--pl-color-blue);\n  --pl-color-bg-success-emphasis: var(--pl-color-green);\n  --pl-color-bg-attention-emphasis: var(--pl-color-orange);\n  --pl-color-bg-info-emphasis: var(--pl-color-purple);\n  --pl-font-family: var(--pl-font-sans-serif);\n  --pl-link-text-underline-offset: 0.2em;\n  --pl-link-text-decoration-thickness: 1px;\n  --pl-link-hover-text-decoration-thickness: 2px;\n\n  /* Font size tokens */\n  --pl-font-size-5xl: 3.5rem;\n  --pl-font-size-4xl: 2.5rem;\n  --pl-font-size-3xl: 2rem;\n  --pl-font-size-2xl: 1.5rem;\n  --pl-font-size-xl: 1.25rem;\n  --pl-font-size-l: 1.125rem;\n  --pl-font-size-m: 1rem;\n  --pl-font-size-s: 0.875rem;\n  --pl-font-size-xs: 0.75rem;\n  \n  /* Spacing tokens */\n  --pl-space-3xs: 0.125rem;\n  --pl-space-2xs: 0.25rem;\n  --pl-space-xs: 0.5rem;\n  --pl-space-s: 0.75rem;\n  --pl-space-m: 1rem;\n  --pl-space-l: 1.5rem;\n  --pl-space-xl: 2rem;\n  --pl-space-2xl: 3rem;\n  --pl-space-3xl: 4rem;\n\n  /* Border radius tokens */\n  --pl-border-radius-subtle: 0.25rem;\n  --pl-border-radius: 1rem;\n\n  /* Focus box shadow tokens */\n  --pl-focus-box-shadow: 0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-fg-default);\n}\n\n@media (min-width: 768px) {\n  :root {\n    --pl-viewport-margins-gutter: 3em;\n  }\n}\n\n@media print {\n  body {\n    zoom: 80%;\n  }\n}\n\n.pl-viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1rem);\n  width: 100%;\n}\n\n/*\n  Prevents a flash of unstyled content (FOUC) while custom elements are loading.\n  Ensures that elements are only visible once they're fully defined and ready to be displayed.\n*/\n:not(:defined) {\n  visibility: hidden;\n}\n\n/*\n  Reset\n*/\n\n:where(.pl-reset) {\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--pl-color-fg-default);\n  accent-color: var(--pl-color-fg-accent);\n  overflow-wrap: anywhere;\n\n  /* Use a more-intuitive box-sizing model */\n  & :is(*, *::before, *::after) {\n    box-sizing: border-box;\n    margin: 0;\n  }\n\n  /* Improve media defaults */\n  & :is(img, picture, video, canvas, svg) {\n    display: block;\n    max-width: 100%;\n  }\n\n  /* Inherit fonts for form controls */\n  & :is(input, button, textarea, select) {\n    font: var(--pl-font-family);\n  }\n\n  /* Improve line wrapping */\n  & p {\n    text-wrap: pretty;\n  }\n  & :is(h1, h2, h3, h4, h5, h6) {\n    text-wrap: balance;\n  }\n\n  /* Link styles */\n  & a {\n    color: var(--pl-color-fg-accent);\n    text-decoration: underline;\n    text-underline-offset: var(--pl-link-text-underline-offset);\n    text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n    font-weight: 500;\n\n    &:hover {\n      text-decoration-thickness: 3px;\n    }\n  }\n}\n\n/*\n  Typeset\n*/\n\n:where(.pl-typeset) {\n  font-family: var(--pl-font-family);\n  /* Establish a container so descendant headings can use `cqi` units\n     to scale fluidly with the typeset wrapper's width. */\n  container-type: inline-size;\n\n  & :is(p, .pl-p) {\n    font-family: var(--pl-font-family);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2) {\n    font-family: var(--pl-font-serif);\n    font-weight: 400;\n  }\n\n  & :is(h3, .pl-h3, h4, .pl-h4, h5, .pl-h5, h6, .pl-h6) {\n    font-weight: 600;\n  }\n\n  & *+:is(h2,h3,h4,h5,h6) {\n    margin-block-start: var(--pl-space-xl);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2) {\n    line-height: 1;\n    font-family: var(--pl-font-serif);\n    color: var(--pl-color-penn-blue);\n    position: relative;\n\n    &::after {\n      bottom: -0.25rem;\n      content: \"\";\n      display: block;\n      height: 4px;\n      opacity: 1;\n      position: absolute;\n    }\n  }\n\n  & :is(h1, .pl-h1) {\n    /* Fallback for browsers that don't parse `cqi`. Modern browsers use the\n       fluid clamp below. */\n    font-size: var(--pl-font-size-5xl);\n    font-size: clamp(var(--pl-font-size-4xl), 3cqi + 1rem, var(--pl-font-size-5xl));\n    margin-bottom: var(--pl-space-l);\n    margin-top: 0;\n\n    &::after {\n      background: var(--pl-color-penn-red);\n      width: 2.25rem;\n    }\n  }\n\n  & :is(h2, .pl-h2) {\n    font-size: var(--pl-font-size-4xl);\n    font-size: clamp(var(--pl-font-size-3xl), 1.5cqi + 1.25rem, var(--pl-font-size-4xl));\n    margin-bottom: var(--pl-space-m);\n\n    &::after {\n      background: #d6d6dc;\n      width: 2.25rem;\n    }\n  }\n\n  & :is(h3, .pl-h3) {\n    font-size: var(--pl-font-size-xl);\n    font-size: clamp(var(--pl-font-size-l), 0.5cqi + 0.875rem, var(--pl-font-size-xl));\n    font-family: var(--pl-font-sans-serif);\n    color: var(--pl-color-fg-default);\n    margin-bottom: var(--pl-space-m);\n\n    &:after {\n      content: none;\n    }\n  }\n\n  & :is(h4, .pl-h4) {\n    font-size: var(--pl-font-size-m);\n    margin-bottom: var(--pl-space-s);\n\n    &:after {\n      content: none;\n    }\n  }\n}\n\n/* \n  Display\n*/\n.pl-block { display: block; }\n.pl-inline { display: inline; }\n.pl-inline-block { display: inline-block; }\n.pl-flex { display: flex; }\n.pl-inline-flex { display: inline-flex; }\n.pl-grid { display: grid; }\n.pl-inline-grid { display: inline-grid; }\n.pl-none { display: none; }\n\n/* \n  Flex direction utilities\n*/\n.pl-flex-row { flex-direction: row; }\n.pl-flex-col { flex-direction: column; }\n\n/* \n  Spacing\n*/\n\n/* Margin utilities */\n.pl-margin-0 { margin: 0; }\n.pl-margin-2xs { margin: var(--pl-space-2xs); }\n.pl-margin-xs { margin: var(--pl-space-xs); }\n.pl-margin-s { margin: var(--pl-space-s); }\n.pl-margin-m { margin: var(--pl-space-m); }\n.pl-margin-l { margin: var(--pl-space-l); }\n.pl-margin-xl { margin: var(--pl-space-xl); }\n.pl-margin-2xl { margin: var(--pl-space-2xl); }\n.pl-margin-3xl { margin: var(--pl-space-3xl); }\n\n/* Margin top */\n.pl-margin-t-0 { margin-top: 0; }\n.pl-margin-t-2xs { margin-top: var(--pl-space-2xs); }\n.pl-margin-t-xs { margin-top: var(--pl-space-xs); }\n.pl-margin-t-s { margin-top: var(--pl-space-s); }\n.pl-margin-t-m { margin-top: var(--pl-space-m); }\n.pl-margin-t-l { margin-top: var(--pl-space-l); }\n.pl-margin-t-xl { margin-top: var(--pl-space-xl); }\n.pl-margin-t-2xl { margin-top: var(--pl-space-2xl); }\n.pl-margin-t-3xl { margin-top: var(--pl-space-3xl); }\n\n/* Margin bottom */\n.pl-margin-b-0 { margin-bottom: 0; }\n.pl-margin-b-2xs { margin-bottom: var(--pl-space-2xs); }\n.pl-margin-b-xs { margin-bottom: var(--pl-space-xs); }\n.pl-margin-b-s { margin-bottom: var(--pl-space-s); }\n.pl-margin-b-m { margin-bottom: var(--pl-space-m); }\n.pl-margin-b-l { margin-bottom: var(--pl-space-l); }\n.pl-margin-b-xl { margin-bottom: var(--pl-space-xl); }\n.pl-margin-b-2xl { margin-bottom: var(--pl-space-2xl); }\n.pl-margin-b-3xl { margin-bottom: var(--pl-space-3xl); }\n\n/* Margin left */\n.pl-margin-l-0 { margin-left: 0; }\n.pl-margin-l-2xs { margin-left: var(--pl-space-2xs); }\n.pl-margin-l-xs { margin-left: var(--pl-space-xs); }\n.pl-margin-l-s { margin-left: var(--pl-space-s); }\n.pl-margin-l-m { margin-left: var(--pl-space-m); }\n.pl-margin-l-l { margin-left: var(--pl-space-l); }\n.pl-margin-l-xl { margin-left: var(--pl-space-xl); }\n.pl-margin-l-2xl { margin-left: var(--pl-space-2xl); }\n.pl-margin-l-3xl { margin-left: var(--pl-space-3xl); }\n\n/* Margin right */\n.pl-margin-r-0 { margin-right: 0; }\n.pl-margin-r-2xs { margin-right: var(--pl-space-2xs); }\n.pl-margin-r-xs { margin-right: var(--pl-space-xs); }\n.pl-margin-r-s { margin-right: var(--pl-space-s); }\n.pl-margin-r-m { margin-right: var(--pl-space-m); }\n.pl-margin-r-l { margin-right: var(--pl-space-l); }\n.pl-margin-r-xl { margin-right: var(--pl-space-xl); }\n.pl-margin-r-2xl { margin-right: var(--pl-space-2xl); }\n.pl-margin-r-3xl { margin-right: var(--pl-space-3xl); }\n\n/* Margin x (left and right) */\n.pl-margin-x-0 { margin-left: 0; margin-right: 0; }\n.pl-margin-x-2xs { margin-left: var(--pl-space-2xs); margin-right: var(--pl-space-2xs); }\n.pl-margin-x-xs { margin-left: var(--pl-space-xs); margin-right: var(--pl-space-xs); }\n.pl-margin-x-s { margin-left: var(--pl-space-s); margin-right: var(--pl-space-s); }\n.pl-margin-x-m { margin-left: var(--pl-space-m); margin-right: var(--pl-space-m); }\n.pl-margin-x-l { margin-left: var(--pl-space-l); margin-right: var(--pl-space-l); }\n.pl-margin-x-xl { margin-left: var(--pl-space-xl); margin-right: var(--pl-space-xl); }\n.pl-margin-x-2xl { margin-left: var(--pl-space-2xl); margin-right: var(--pl-space-2xl); }\n.pl-margin-x-3xl { margin-left: var(--pl-space-3xl); margin-right: var(--pl-space-3xl); }\n\n/* Margin y (top and bottom) */\n.pl-margin-y-0 { margin-top: 0; margin-bottom: 0; }\n.pl-margin-y-2xs { margin-top: var(--pl-space-2xs); margin-bottom: var(--pl-space-2xs); }\n.pl-margin-y-xs { margin-top: var(--pl-space-xs); margin-bottom: var(--pl-space-xs); }\n.pl-margin-y-s { margin-top: var(--pl-space-s); margin-bottom: var(--pl-space-s); }\n.pl-margin-y-m { margin-top: var(--pl-space-m); margin-bottom: var(--pl-space-m); }\n.pl-margin-y-l { margin-top: var(--pl-space-l); margin-bottom: var(--pl-space-l); }\n.pl-margin-y-xl { margin-top: var(--pl-space-xl); margin-bottom: var(--pl-space-xl); }\n.pl-margin-y-2xl { margin-top: var(--pl-space-2xl); margin-bottom: var(--pl-space-2xl); }\n.pl-margin-y-3xl { margin-top: var(--pl-space-3xl); margin-bottom: var(--pl-space-3xl); }\n\n/* Padding utilities */\n.pl-padding-0 { padding: 0; }\n.pl-padding-2xs { padding: var(--pl-space-2xs); }\n.pl-padding-xs { padding: var(--pl-space-xs); }\n.pl-padding-s { padding: var(--pl-space-s); }\n.pl-padding-m { padding: var(--pl-space-m); }\n.pl-padding-l { padding: var(--pl-space-l); }\n.pl-padding-xl { padding: var(--pl-space-xl); }\n.pl-padding-2xl { padding: var(--pl-space-2xl); }\n.pl-padding-3xl { padding: var(--pl-space-3xl); }\n\n/* Padding top */\n.pl-padding-t-0 { padding-top: 0; }\n.pl-padding-t-2xs { padding-top: var(--pl-space-2xs); }\n.pl-padding-t-xs { padding-top: var(--pl-space-xs); }\n.pl-padding-t-s { padding-top: var(--pl-space-s); }\n.pl-padding-t-m { padding-top: var(--pl-space-m); }\n.pl-padding-t-l { padding-top: var(--pl-space-l); }\n.pl-padding-t-xl { padding-top: var(--pl-space-xl); }\n.pl-padding-t-2xl { padding-top: var(--pl-space-2xl); }\n.pl-padding-t-3xl { padding-top: var(--pl-space-3xl); }\n\n/* Padding bottom */\n.pl-padding-b-0 { padding-bottom: 0; }\n.pl-padding-b-2xs { padding-bottom: var(--pl-space-2xs); }\n.pl-padding-b-xs { padding-bottom: var(--pl-space-xs); }\n.pl-padding-b-s { padding-bottom: var(--pl-space-s); }\n.pl-padding-b-m { padding-bottom: var(--pl-space-m); }\n.pl-padding-b-l { padding-bottom: var(--pl-space-l); }\n.pl-padding-b-xl { padding-bottom: var(--pl-space-xl); }\n.pl-padding-b-2xl { padding-bottom: var(--pl-space-2xl); }\n.pl-padding-b-3xl { padding-bottom: var(--pl-space-3xl); }\n\n/* Padding left */\n.pl-padding-l-0 { padding-left: 0; }\n.pl-padding-l-2xs { padding-left: var(--pl-space-2xs); }\n.pl-padding-l-xs { padding-left: var(--pl-space-xs); }\n.pl-padding-l-s { padding-left: var(--pl-space-s); }\n.pl-padding-l-m { padding-left: var(--pl-space-m); }\n.pl-padding-l-l { padding-left: var(--pl-space-l); }\n.pl-padding-l-xl { padding-left: var(--pl-space-xl); }\n.pl-padding-l-2xl { padding-left: var(--pl-space-2xl); }\n.pl-padding-l-3xl { padding-left: var(--pl-space-3xl); }\n\n/* Padding right */\n.pl-padding-r-0 { padding-right: 0; }\n.pl-padding-r-2xs { padding-right: var(--pl-space-2xs); }\n.pl-padding-r-xs { padding-right: var(--pl-space-xs); }\n.pl-padding-r-s { padding-right: var(--pl-space-s); }\n.pl-padding-r-m { padding-right: var(--pl-space-m); }\n.pl-padding-r-l { padding-right: var(--pl-space-l); }\n.pl-padding-r-xl { padding-right: var(--pl-space-xl); }\n.pl-padding-r-2xl { padding-right: var(--pl-space-2xl); }\n.pl-padding-r-3xl { padding-right: var(--pl-space-3xl); }\n\n/* Padding x (left and right) */\n.pl-padding-x-0 { padding-left: 0; padding-right: 0; }\n.pl-padding-x-2xs { padding-left: var(--pl-space-2xs); padding-right: var(--pl-space-2xs); }\n.pl-padding-x-xs { padding-left: var(--pl-space-xs); padding-right: var(--pl-space-xs); }\n.pl-padding-x-s { padding-left: var(--pl-space-s); padding-right: var(--pl-space-s); }\n.pl-padding-x-m { padding-left: var(--pl-space-m); padding-right: var(--pl-space-m); }\n.pl-padding-x-l { padding-left: var(--pl-space-l); padding-right: var(--pl-space-l); }\n.pl-padding-x-xl { padding-left: var(--pl-space-xl); padding-right: var(--pl-space-xl); }\n.pl-padding-x-2xl { padding-left: var(--pl-space-2xl); padding-right: var(--pl-space-2xl); }\n.pl-padding-x-3xl { padding-left: var(--pl-space-3xl); padding-right: var(--pl-space-3xl); }\n\n/* Padding y (top and bottom) */\n.pl-padding-y-0 { padding-top: 0; padding-bottom: 0; }\n.pl-padding-y-2xs { padding-top: var(--pl-space-2xs); padding-bottom: var(--pl-space-2xs); }\n.pl-padding-y-xs { padding-top: var(--pl-space-xs); padding-bottom: var(--pl-space-xs); }\n.pl-padding-y-s { padding-top: var(--pl-space-s); padding-bottom: var(--pl-space-s); }\n.pl-padding-y-m { padding-top: var(--pl-space-m); padding-bottom: var(--pl-space-m); }\n.pl-padding-y-l { padding-top: var(--pl-space-l); padding-bottom: var(--pl-space-l); }\n.pl-padding-y-xl { padding-top: var(--pl-space-xl); padding-bottom: var(--pl-space-xl); }\n.pl-padding-y-2xl { padding-top: var(--pl-space-2xl); padding-bottom: var(--pl-space-2xl); }\n.pl-padding-y-3xl { padding-top: var(--pl-space-3xl); padding-bottom: var(--pl-space-3xl); }\n\n/* Gap utilities for flexbox and grid */\n.pl-gap-0 { gap: 0; }\n.pl-gap-2xs { gap: var(--pl-space-2xs); }\n.pl-gap-xs { gap: var(--pl-space-xs); }\n.pl-gap-s { gap: var(--pl-space-s); }\n.pl-gap-m { gap: var(--pl-space-m); }\n.pl-gap-l { gap: var(--pl-space-l); }\n.pl-gap-xl { gap: var(--pl-space-xl); }\n.pl-gap-2xl { gap: var(--pl-space-2xl); }\n.pl-gap-3xl { gap: var(--pl-space-3xl); } \n\n/*\n  Font size\n*/\n\n.pl-font-size-xs {\n  font-size: var(--pl-font-size-xs);\n}\n\n.pl-font-size-s {\n  font-size: var(--pl-font-size-s);\n}\n\n.pl-font-size-m {\n  font-size: var(--pl-font-size-m);\n}\n\n.pl-font-size-l {\n  font-size: var(--pl-font-size-l);\n}\n\n.pl-font-size-xl {\n  font-size: var(--pl-font-size-xl);\n}\n\n.pl-font-size-2xl {\n  font-size: var(--pl-font-size-2xl);\n}\n\n.pl-font-size-3xl {\n  font-size: var(--pl-font-size-3xl);\n}\n\n.pl-font-size-4xl {\n  font-size: var(--pl-font-size-4xl);\n}\n\n.pl-font-size-5xl {\n  font-size: var(--pl-font-size-5xl);\n}\n\n/*\n  Line length\n*/\n\n.pl-line-length {\n  max-width: 60ch;\n}\n\n/*\n  Border radius\n*/\n\n.pl-border-radius-subtle {\n  border-radius: var(--pl-border-radius-subtle);\n}\n\n.pl-border-radius {\n  border-radius: var(--pl-border-radius);\n}\n\n/*\n  Definition list\n*/\n\n.pl-dl:not(.pl-dl--inline) {\n  display: grid;\n  grid-row-gap: 0.25rem;\n  \n  & dt {\n    font-weight: 600;\n    margin-top: 0.5rem;\n  }\n}\n\n@media (min-width: 720px) {\n  .pl-dl:not(.pl-dl--inline)  {\n    grid-template-columns: 12rem 1fr;\n\n    & dt {\n      grid-column: 1 / 2;\n      margin-top: 0;\n      padding-right: 1rem;\n    }\n\n    & dd {\n      grid-column: 2 / 3;\n      margin-bottom: 0;\n    }\n  }\n}\n\n@media (min-width: 720px) {\n  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type),\n  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type) + dd {\n    padding-top: 0.75rem;\n    margin-top: 0.5rem;\n    border-top: solid 1px var(--pl-color-bg-subtle-brand);\n  }\n}\n\n.pl-dl--inline {\n  display: block;\n\n  & dt,\n  & dd {\n    display: inline;\n    padding-right: 0.5rem;\n    margin-bottom: 0;\n  }\n\n  & dt {\n    font-weight: 600;\n  }\n\n  & dt:not(:first-of-type)::before {\n    content: \"\";\n    display: block;\n    margin-bottom: 0.25rem;\n  }\n\n  & dd::after {\n    content: \" ·\";\n    padding-left: var(--pl-space-xs);\n  }\n\n  & dd:has(+ dt)::after {\n    all: unset;\n  }\n\n  & > *:last-child::after {\n    all: unset;\n  }\n\n  & a {\n    color: var(--pl-color-fg-default);\n    text-decoration-style: dotted;\n    font-weight: 400;\n\n    &:hover {\n      text-decoration-style: solid;\n      text-decoration-thickness: 2px;\n    }\n  }\n}\n\n.pl-button {\n  border: none;\n  outline: none;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--pl-space-2xs);\n  padding: var(--pl-space-xs) var(--pl-space-m);\n  font-size: 1rem;\n  line-height: 1.5;\n  font-family: var(--pl-font-family);\n  border-radius: var(--pl-border-radius);\n\n  background: var(--pl-color-bg-subtle);\n  color: var(--pl-color-fg-default);\n}\n\na.pl-button {\n  text-decoration: none;\n}\n\n.pl-button:hover {\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n  text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n}\n\n.pl-button:focus {\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n.pl-button--accent {\n  background: var(--pl-color-bg-accent-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--success {\n  background: var(--pl-color-bg-success-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--attention {\n  background: var(--pl-color-bg-attention-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-callout {\n  padding: var(--pl-space-m) var(--pl-space-l);\n  margin-bottom: var(--pl-space-l);\n  border: 1px solid var(--pl-color-fg-subtle);\n  border-left-width: 0.25rem;\n  border-radius: var(--pl-border-radius-subtle);\n  border-left-color: var(--pl-color-fg-accent);\n}";
+const globalStyles = "@import url(\"https://use.typekit.net/gbh8cmg.css\");\n\n@font-face {\n  font-family: 'Perpetua';\n  src: url('assets/fonts/perpetua.woff2') format('woff2'),\n       url('assets/fonts/perpetua.woff') format('woff');\n  font-weight: 400;\n  font-display: swap;\n}\n\n:root {\n  --pl-color-penn-red: #990000;\n  --pl-color-penn-blue: #011F5B;\n  --pl-color-gray-dark: #2D3545;\n  --pl-color-gray: #595F6A;\n  --pl-color-gray-light: #F5F5F6;\n  --pl-color-gray-blue-light: #EEEEF4;\n  --pl-color-white: #FFFFFF;\n  --pl-color-blue: #0E5696;\n  --pl-color-blue-light: #D4E4F2;\n  --pl-color-green: #267434;\n  --pl-color-green-light: #F1F7E1;\n  --pl-color-orange: #BD4718;\n  --pl-color-orange-light: #FEEDDD;\n  --pl-color-purple: #80317F;\n  --pl-color-purple-light: #F2DFED;\n  --pl-color-bg-gradient-1: linear-gradient(45deg, rgba(200, 219, 232, 0.8), rgba(239, 210, 215, 0.8));\n  --pl-color-bg-gradient-2: linear-gradient(45deg, #dbe9f5, #feefdf);\n  --pl-font-size: 16px;\n  --pl-font-sans-serif: proxima-nova, system-ui, sans-serif;\n  --pl-font-serif: 'Perpetua', serif;\n  --pl-link-text-underline-offset: 0.2em;\n  --pl-link-text-decoration-thickness: 1px;\n  --pl-link-hover-text-decoration-thickness: 2px;\n  --pl-viewport-margins-max-width: 1440px;\n  --pl-viewport-margins-gutter: 1em;\n  --pl-color-fg-default: var(--pl-color-gray-dark);\n  --pl-color-fg-subtle: var(--pl-color-gray);\n  --pl-color-fg-subtle-on-emphasis: var(--pl-color-gray-light);\n  --pl-color-fg-on-emphasis: var(--pl-color-white);\n  --pl-color-fg-accent: var(--pl-color-blue);\n  --pl-color-fg-success: var(--pl-color-green);\n  --pl-color-fg-attention: var(--pl-color-orange);\n  --pl-color-fg-info: var(--pl-color-purple);\n  --pl-color-bg-default: var(--pl-color-white);\n  --pl-color-bg-subtle: var(--pl-color-gray-light);\n  --pl-color-bg-subtle-brand: var(--pl-color-gray-blue-light);\n  --pl-color-bg-emphasis: var(--pl-color-gray-dark);\n  --pl-color-bg-accent: var(--pl-color-blue-light);\n  --pl-color-bg-success: var(--pl-color-green-light);\n  --pl-color-bg-attention: var(--pl-color-orange-light);\n  --pl-color-bg-info: var(--pl-color-purple-light);\n  --pl-color-bg-accent-emphasis: var(--pl-color-blue);\n  --pl-color-bg-success-emphasis: var(--pl-color-green);\n  --pl-color-bg-attention-emphasis: var(--pl-color-orange);\n  --pl-color-bg-info-emphasis: var(--pl-color-purple);\n  --pl-font-family: var(--pl-font-sans-serif);\n  --pl-link-text-underline-offset: 0.2em;\n  --pl-link-text-decoration-thickness: 1px;\n  --pl-link-hover-text-decoration-thickness: 2px;\n\n  /* Font size tokens */\n  --pl-font-size-5xl: 3.5rem;\n  --pl-font-size-4xl: 2.5rem;\n  --pl-font-size-3xl: 2rem;\n  --pl-font-size-2xl: 1.5rem;\n  --pl-font-size-xl: 1.25rem;\n  --pl-font-size-l: 1.125rem;\n  --pl-font-size-m: 1rem;\n  --pl-font-size-s: 0.875rem;\n  --pl-font-size-xs: 0.75rem;\n  \n  /* Spacing tokens */\n  --pl-space-3xs: 0.125rem;\n  --pl-space-2xs: 0.25rem;\n  --pl-space-xs: 0.5rem;\n  --pl-space-s: 0.75rem;\n  --pl-space-m: 1rem;\n  --pl-space-l: 1.5rem;\n  --pl-space-xl: 2rem;\n  --pl-space-2xl: 3rem;\n  --pl-space-3xl: 4rem;\n\n  /* Border radius tokens */\n  --pl-border-radius-subtle: 0.25rem;\n  --pl-border-radius: 1rem;\n\n  /* Focus box shadow tokens */\n  --pl-focus-box-shadow: 0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-fg-default);\n}\n\n@media (min-width: 768px) {\n  :root {\n    --pl-viewport-margins-gutter: 3em;\n  }\n}\n\n@media print {\n  body {\n    zoom: 80%;\n  }\n}\n\n.pl-viewport-margins {\n  max-width: var(--pl-viewport-margins-max-width);\n  margin: 0 auto;\n  padding: 0 var(--pl-viewport-margins-gutter, 1rem);\n  width: 100%;\n}\n\n/*\n  Prevents a flash of unstyled content (FOUC) while custom elements are loading.\n  Ensures that elements are only visible once they're fully defined and ready to be displayed.\n*/\n:not(:defined) {\n  visibility: hidden;\n}\n\n/*\n  Reset\n*/\n\n:where(.pl-reset) {\n  font-weight: 400;\n  line-height: 1.4;\n  color: var(--pl-color-fg-default);\n  accent-color: var(--pl-color-fg-accent);\n  overflow-wrap: anywhere;\n\n  /* Use a more-intuitive box-sizing model */\n  & :is(*, *::before, *::after) {\n    box-sizing: border-box;\n    margin: 0;\n  }\n\n  /* Improve media defaults */\n  & :is(img, picture, video, canvas, svg) {\n    display: block;\n    max-width: 100%;\n  }\n\n  /* Inherit fonts for form controls */\n  & :is(input, button, textarea, select) {\n    font: var(--pl-font-family);\n  }\n\n  /* Improve line wrapping */\n  & p {\n    text-wrap: pretty;\n  }\n  & :is(h1, h2, h3, h4, h5, h6) {\n    text-wrap: balance;\n  }\n\n  /* Link styles */\n  & a {\n    color: var(--pl-color-fg-accent);\n    text-decoration: underline;\n    text-underline-offset: var(--pl-link-text-underline-offset);\n    text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n    font-weight: 500;\n\n    &:hover {\n      text-decoration-thickness: 3px;\n    }\n  }\n}\n\n/*\n  Typeset\n*/\n\n:where(.pl-typeset) {\n  font-family: var(--pl-font-family);\n  /* Establish a container so descendant headings can use `cqi` units\n     to scale fluidly with the typeset wrapper's width. */\n  container-type: inline-size;\n\n  & :is(p, .pl-p) {\n    font-family: var(--pl-font-family);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2) {\n    font-family: var(--pl-font-serif);\n    font-weight: 400;\n  }\n\n  & :is(h3, .pl-h3, h4, .pl-h4, h5, .pl-h5, h6, .pl-h6) {\n    font-weight: 600;\n  }\n\n  & *+:is(h2,h3,h4,h5,h6) {\n    margin-block-start: var(--pl-space-xl);\n  }\n\n  & :is(h1, .pl-h1, h2, .pl-h2) {\n    line-height: 1;\n    font-family: var(--pl-font-serif);\n    color: var(--pl-color-penn-blue);\n    position: relative;\n\n    &::after {\n      bottom: -0.25rem;\n      content: \"\";\n      display: block;\n      height: 4px;\n      opacity: 1;\n      position: absolute;\n    }\n  }\n\n  & :is(h1, .pl-h1) {\n    /* Fallback for browsers that don't parse `cqi`. Modern browsers use the\n       fluid clamp below. */\n    font-size: var(--pl-font-size-5xl);\n    font-size: clamp(var(--pl-font-size-4xl), 3cqi + 1rem, var(--pl-font-size-5xl));\n    margin-bottom: var(--pl-space-l);\n    margin-top: 0;\n\n    &::after {\n      background: var(--pl-color-penn-red);\n      width: 2.25rem;\n    }\n  }\n\n  & :is(h2, .pl-h2) {\n    font-size: var(--pl-font-size-4xl);\n    font-size: clamp(var(--pl-font-size-3xl), 1.5cqi + 1.25rem, var(--pl-font-size-4xl));\n    margin-bottom: var(--pl-space-m);\n\n    &::after {\n      background: #d6d6dc;\n      width: 2.25rem;\n    }\n  }\n\n  & :is(h3, .pl-h3) {\n    font-size: var(--pl-font-size-xl);\n    font-size: clamp(var(--pl-font-size-l), 0.5cqi + 0.875rem, var(--pl-font-size-xl));\n    font-family: var(--pl-font-sans-serif);\n    color: var(--pl-color-fg-default);\n    margin-bottom: var(--pl-space-m);\n\n    &:after {\n      content: none;\n    }\n  }\n\n  & :is(h4, .pl-h4) {\n    font-size: var(--pl-font-size-m);\n    margin-bottom: var(--pl-space-s);\n\n    &:after {\n      content: none;\n    }\n  }\n}\n\n/* \n  Display\n*/\n.pl-block { display: block; }\n.pl-inline { display: inline; }\n.pl-inline-block { display: inline-block; }\n.pl-flex { display: flex; }\n.pl-inline-flex { display: inline-flex; }\n.pl-grid { display: grid; }\n.pl-inline-grid { display: inline-grid; }\n.pl-none { display: none; }\n\n/* \n  Flex direction utilities\n*/\n.pl-flex-row { flex-direction: row; }\n.pl-flex-col { flex-direction: column; }\n\n/* \n  Spacing\n*/\n\n/* Margin utilities */\n.pl-margin-0 { margin: 0; }\n.pl-margin-2xs { margin: var(--pl-space-2xs); }\n.pl-margin-xs { margin: var(--pl-space-xs); }\n.pl-margin-s { margin: var(--pl-space-s); }\n.pl-margin-m { margin: var(--pl-space-m); }\n.pl-margin-l { margin: var(--pl-space-l); }\n.pl-margin-xl { margin: var(--pl-space-xl); }\n.pl-margin-2xl { margin: var(--pl-space-2xl); }\n.pl-margin-3xl { margin: var(--pl-space-3xl); }\n\n/* Margin top */\n.pl-margin-t-0 { margin-top: 0; }\n.pl-margin-t-2xs { margin-top: var(--pl-space-2xs); }\n.pl-margin-t-xs { margin-top: var(--pl-space-xs); }\n.pl-margin-t-s { margin-top: var(--pl-space-s); }\n.pl-margin-t-m { margin-top: var(--pl-space-m); }\n.pl-margin-t-l { margin-top: var(--pl-space-l); }\n.pl-margin-t-xl { margin-top: var(--pl-space-xl); }\n.pl-margin-t-2xl { margin-top: var(--pl-space-2xl); }\n.pl-margin-t-3xl { margin-top: var(--pl-space-3xl); }\n\n/* Margin bottom */\n.pl-margin-b-0 { margin-bottom: 0; }\n.pl-margin-b-2xs { margin-bottom: var(--pl-space-2xs); }\n.pl-margin-b-xs { margin-bottom: var(--pl-space-xs); }\n.pl-margin-b-s { margin-bottom: var(--pl-space-s); }\n.pl-margin-b-m { margin-bottom: var(--pl-space-m); }\n.pl-margin-b-l { margin-bottom: var(--pl-space-l); }\n.pl-margin-b-xl { margin-bottom: var(--pl-space-xl); }\n.pl-margin-b-2xl { margin-bottom: var(--pl-space-2xl); }\n.pl-margin-b-3xl { margin-bottom: var(--pl-space-3xl); }\n\n/* Margin left */\n.pl-margin-l-0 { margin-left: 0; }\n.pl-margin-l-2xs { margin-left: var(--pl-space-2xs); }\n.pl-margin-l-xs { margin-left: var(--pl-space-xs); }\n.pl-margin-l-s { margin-left: var(--pl-space-s); }\n.pl-margin-l-m { margin-left: var(--pl-space-m); }\n.pl-margin-l-l { margin-left: var(--pl-space-l); }\n.pl-margin-l-xl { margin-left: var(--pl-space-xl); }\n.pl-margin-l-2xl { margin-left: var(--pl-space-2xl); }\n.pl-margin-l-3xl { margin-left: var(--pl-space-3xl); }\n\n/* Margin right */\n.pl-margin-r-0 { margin-right: 0; }\n.pl-margin-r-2xs { margin-right: var(--pl-space-2xs); }\n.pl-margin-r-xs { margin-right: var(--pl-space-xs); }\n.pl-margin-r-s { margin-right: var(--pl-space-s); }\n.pl-margin-r-m { margin-right: var(--pl-space-m); }\n.pl-margin-r-l { margin-right: var(--pl-space-l); }\n.pl-margin-r-xl { margin-right: var(--pl-space-xl); }\n.pl-margin-r-2xl { margin-right: var(--pl-space-2xl); }\n.pl-margin-r-3xl { margin-right: var(--pl-space-3xl); }\n\n/* Margin x (left and right) */\n.pl-margin-x-0 { margin-left: 0; margin-right: 0; }\n.pl-margin-x-2xs { margin-left: var(--pl-space-2xs); margin-right: var(--pl-space-2xs); }\n.pl-margin-x-xs { margin-left: var(--pl-space-xs); margin-right: var(--pl-space-xs); }\n.pl-margin-x-s { margin-left: var(--pl-space-s); margin-right: var(--pl-space-s); }\n.pl-margin-x-m { margin-left: var(--pl-space-m); margin-right: var(--pl-space-m); }\n.pl-margin-x-l { margin-left: var(--pl-space-l); margin-right: var(--pl-space-l); }\n.pl-margin-x-xl { margin-left: var(--pl-space-xl); margin-right: var(--pl-space-xl); }\n.pl-margin-x-2xl { margin-left: var(--pl-space-2xl); margin-right: var(--pl-space-2xl); }\n.pl-margin-x-3xl { margin-left: var(--pl-space-3xl); margin-right: var(--pl-space-3xl); }\n\n/* Margin y (top and bottom) */\n.pl-margin-y-0 { margin-top: 0; margin-bottom: 0; }\n.pl-margin-y-2xs { margin-top: var(--pl-space-2xs); margin-bottom: var(--pl-space-2xs); }\n.pl-margin-y-xs { margin-top: var(--pl-space-xs); margin-bottom: var(--pl-space-xs); }\n.pl-margin-y-s { margin-top: var(--pl-space-s); margin-bottom: var(--pl-space-s); }\n.pl-margin-y-m { margin-top: var(--pl-space-m); margin-bottom: var(--pl-space-m); }\n.pl-margin-y-l { margin-top: var(--pl-space-l); margin-bottom: var(--pl-space-l); }\n.pl-margin-y-xl { margin-top: var(--pl-space-xl); margin-bottom: var(--pl-space-xl); }\n.pl-margin-y-2xl { margin-top: var(--pl-space-2xl); margin-bottom: var(--pl-space-2xl); }\n.pl-margin-y-3xl { margin-top: var(--pl-space-3xl); margin-bottom: var(--pl-space-3xl); }\n\n/* Padding utilities */\n.pl-padding-0 { padding: 0; }\n.pl-padding-2xs { padding: var(--pl-space-2xs); }\n.pl-padding-xs { padding: var(--pl-space-xs); }\n.pl-padding-s { padding: var(--pl-space-s); }\n.pl-padding-m { padding: var(--pl-space-m); }\n.pl-padding-l { padding: var(--pl-space-l); }\n.pl-padding-xl { padding: var(--pl-space-xl); }\n.pl-padding-2xl { padding: var(--pl-space-2xl); }\n.pl-padding-3xl { padding: var(--pl-space-3xl); }\n\n/* Padding top */\n.pl-padding-t-0 { padding-top: 0; }\n.pl-padding-t-2xs { padding-top: var(--pl-space-2xs); }\n.pl-padding-t-xs { padding-top: var(--pl-space-xs); }\n.pl-padding-t-s { padding-top: var(--pl-space-s); }\n.pl-padding-t-m { padding-top: var(--pl-space-m); }\n.pl-padding-t-l { padding-top: var(--pl-space-l); }\n.pl-padding-t-xl { padding-top: var(--pl-space-xl); }\n.pl-padding-t-2xl { padding-top: var(--pl-space-2xl); }\n.pl-padding-t-3xl { padding-top: var(--pl-space-3xl); }\n\n/* Padding bottom */\n.pl-padding-b-0 { padding-bottom: 0; }\n.pl-padding-b-2xs { padding-bottom: var(--pl-space-2xs); }\n.pl-padding-b-xs { padding-bottom: var(--pl-space-xs); }\n.pl-padding-b-s { padding-bottom: var(--pl-space-s); }\n.pl-padding-b-m { padding-bottom: var(--pl-space-m); }\n.pl-padding-b-l { padding-bottom: var(--pl-space-l); }\n.pl-padding-b-xl { padding-bottom: var(--pl-space-xl); }\n.pl-padding-b-2xl { padding-bottom: var(--pl-space-2xl); }\n.pl-padding-b-3xl { padding-bottom: var(--pl-space-3xl); }\n\n/* Padding left */\n.pl-padding-l-0 { padding-left: 0; }\n.pl-padding-l-2xs { padding-left: var(--pl-space-2xs); }\n.pl-padding-l-xs { padding-left: var(--pl-space-xs); }\n.pl-padding-l-s { padding-left: var(--pl-space-s); }\n.pl-padding-l-m { padding-left: var(--pl-space-m); }\n.pl-padding-l-l { padding-left: var(--pl-space-l); }\n.pl-padding-l-xl { padding-left: var(--pl-space-xl); }\n.pl-padding-l-2xl { padding-left: var(--pl-space-2xl); }\n.pl-padding-l-3xl { padding-left: var(--pl-space-3xl); }\n\n/* Padding right */\n.pl-padding-r-0 { padding-right: 0; }\n.pl-padding-r-2xs { padding-right: var(--pl-space-2xs); }\n.pl-padding-r-xs { padding-right: var(--pl-space-xs); }\n.pl-padding-r-s { padding-right: var(--pl-space-s); }\n.pl-padding-r-m { padding-right: var(--pl-space-m); }\n.pl-padding-r-l { padding-right: var(--pl-space-l); }\n.pl-padding-r-xl { padding-right: var(--pl-space-xl); }\n.pl-padding-r-2xl { padding-right: var(--pl-space-2xl); }\n.pl-padding-r-3xl { padding-right: var(--pl-space-3xl); }\n\n/* Padding x (left and right) */\n.pl-padding-x-0 { padding-left: 0; padding-right: 0; }\n.pl-padding-x-2xs { padding-left: var(--pl-space-2xs); padding-right: var(--pl-space-2xs); }\n.pl-padding-x-xs { padding-left: var(--pl-space-xs); padding-right: var(--pl-space-xs); }\n.pl-padding-x-s { padding-left: var(--pl-space-s); padding-right: var(--pl-space-s); }\n.pl-padding-x-m { padding-left: var(--pl-space-m); padding-right: var(--pl-space-m); }\n.pl-padding-x-l { padding-left: var(--pl-space-l); padding-right: var(--pl-space-l); }\n.pl-padding-x-xl { padding-left: var(--pl-space-xl); padding-right: var(--pl-space-xl); }\n.pl-padding-x-2xl { padding-left: var(--pl-space-2xl); padding-right: var(--pl-space-2xl); }\n.pl-padding-x-3xl { padding-left: var(--pl-space-3xl); padding-right: var(--pl-space-3xl); }\n\n/* Padding y (top and bottom) */\n.pl-padding-y-0 { padding-top: 0; padding-bottom: 0; }\n.pl-padding-y-2xs { padding-top: var(--pl-space-2xs); padding-bottom: var(--pl-space-2xs); }\n.pl-padding-y-xs { padding-top: var(--pl-space-xs); padding-bottom: var(--pl-space-xs); }\n.pl-padding-y-s { padding-top: var(--pl-space-s); padding-bottom: var(--pl-space-s); }\n.pl-padding-y-m { padding-top: var(--pl-space-m); padding-bottom: var(--pl-space-m); }\n.pl-padding-y-l { padding-top: var(--pl-space-l); padding-bottom: var(--pl-space-l); }\n.pl-padding-y-xl { padding-top: var(--pl-space-xl); padding-bottom: var(--pl-space-xl); }\n.pl-padding-y-2xl { padding-top: var(--pl-space-2xl); padding-bottom: var(--pl-space-2xl); }\n.pl-padding-y-3xl { padding-top: var(--pl-space-3xl); padding-bottom: var(--pl-space-3xl); }\n\n/* Gap utilities for flexbox and grid */\n.pl-gap-0 { gap: 0; }\n.pl-gap-2xs { gap: var(--pl-space-2xs); }\n.pl-gap-xs { gap: var(--pl-space-xs); }\n.pl-gap-s { gap: var(--pl-space-s); }\n.pl-gap-m { gap: var(--pl-space-m); }\n.pl-gap-l { gap: var(--pl-space-l); }\n.pl-gap-xl { gap: var(--pl-space-xl); }\n.pl-gap-2xl { gap: var(--pl-space-2xl); }\n.pl-gap-3xl { gap: var(--pl-space-3xl); } \n\n/*\n  Font size\n*/\n\n.pl-font-size-xs {\n  font-size: var(--pl-font-size-xs);\n}\n\n.pl-font-size-s {\n  font-size: var(--pl-font-size-s);\n}\n\n.pl-font-size-m {\n  font-size: var(--pl-font-size-m);\n}\n\n.pl-font-size-l {\n  font-size: var(--pl-font-size-l);\n}\n\n.pl-font-size-xl {\n  font-size: var(--pl-font-size-xl);\n}\n\n.pl-font-size-2xl {\n  font-size: var(--pl-font-size-2xl);\n}\n\n.pl-font-size-3xl {\n  font-size: var(--pl-font-size-3xl);\n}\n\n.pl-font-size-4xl {\n  font-size: var(--pl-font-size-4xl);\n}\n\n.pl-font-size-5xl {\n  font-size: var(--pl-font-size-5xl);\n}\n\n/*\n  Line length\n*/\n\n.pl-line-length {\n  max-width: 60ch;\n}\n\n/*\n  Border radius\n*/\n\n.pl-border-radius-subtle {\n  border-radius: var(--pl-border-radius-subtle);\n}\n\n.pl-border-radius {\n  border-radius: var(--pl-border-radius);\n}\n\n/*\n  Definition list\n*/\n\n.pl-dl:not(.pl-dl--inline) {\n  display: grid;\n  grid-row-gap: 0.25rem;\n  \n  & dt {\n    font-weight: 600;\n    margin-top: 0.5rem;\n  }\n}\n\n@media (min-width: 720px) {\n  .pl-dl:not(.pl-dl--inline)  {\n    grid-template-columns: 12rem 1fr;\n\n    & dt {\n      grid-column: 1 / 2;\n      margin-top: 0;\n      padding-right: 1rem;\n    }\n\n    & dd {\n      grid-column: 2 / 3;\n      margin-bottom: 0;\n    }\n  }\n}\n\n@media (min-width: 720px) {\n  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type),\n  .pl-dl:not(.pl-dl--inline) dt:not(:first-of-type) + dd {\n    padding-top: 0.75rem;\n    margin-top: 0.5rem;\n    border-top: solid 1px var(--pl-color-bg-subtle-brand);\n  }\n}\n\n.pl-dl--inline {\n  display: block;\n\n  & dt,\n  & dd {\n    display: inline;\n    padding-right: 0.5rem;\n    margin-bottom: 0;\n  }\n\n  & dt {\n    font-weight: 600;\n  }\n\n  & dt:not(:first-of-type)::before {\n    content: \"\";\n    display: block;\n    margin-bottom: 0.25rem;\n  }\n\n  & dd::after {\n    content: \" ·\";\n    padding-left: var(--pl-space-xs);\n  }\n\n  & dd:has(+ dt)::after {\n    all: unset;\n  }\n\n  & > *:last-child::after {\n    all: unset;\n  }\n\n  & a {\n    color: var(--pl-color-fg-default);\n    text-decoration-style: dotted;\n    font-weight: 400;\n\n    &:hover {\n      text-decoration-style: solid;\n      text-decoration-thickness: 2px;\n    }\n  }\n}\n\n.pl-button {\n  border: none;\n  outline: none;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--pl-space-2xs);\n  padding: var(--pl-space-xs) var(--pl-space-m);\n  font-size: 1rem;\n  line-height: 1.5;\n  font-family: var(--pl-font-family);\n  border-radius: var(--pl-border-radius);\n\n  background: var(--pl-color-bg-subtle);\n  color: var(--pl-color-fg-default);\n}\n\na.pl-button {\n  text-decoration: none;\n}\n\n.pl-button:hover {\n  cursor: pointer;\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n  text-decoration-thickness: var(--pl-link-text-decoration-thickness);\n}\n\n.pl-button:focus {\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n.pl-button--accent {\n  background: var(--pl-color-bg-accent-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--success {\n  background: var(--pl-color-bg-success-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-button--attention {\n  background: var(--pl-color-bg-attention-emphasis);\n  color: var(--pl-color-fg-on-emphasis);\n}\n\n.pl-callout {\n  padding: var(--pl-space-m) var(--pl-space-l);\n  margin-bottom: var(--pl-space-l);\n  border: 1px solid var(--pl-color-fg-subtle);\n  border-left-width: 0.25rem;\n  border-radius: var(--pl-border-radius-subtle);\n  border-left-color: var(--pl-color-fg-accent);\n}\n\n/*\n  Details\n\n  Styles a native <details>/<summary> as a disclosure: a subtle card whose\n  border and divider appear when open, with the default marker replaced by a\n  chevron that rotates on open. Pure CSS, no JavaScript required. Add\n  `.pl-details` to the <details>, `.pl-details__summary` to the <summary>, and\n  `.pl-details__content` to the panel that follows it.\n\n  Ported from the finding-aids prototype (`.faa-guide__details`).\n*/\n\n.pl-details {\n  border-radius: var(--pl-border-radius);\n  background: var(--pl-color-bg-subtle);\n  border: solid 1px transparent;\n}\n\n.pl-details[open] {\n  border-color: var(--pl-color-fg-subtle);\n}\n\n.pl-details[open] > .pl-details__summary {\n  border-bottom: solid 1px var(--pl-color-fg-subtle);\n}\n\n/* Headings used as the summary label shouldn't add their own bottom margin. */\n.pl-details__summary :is(h1, h2, h3, h4, h5, h6) {\n  margin-bottom: 0;\n}\n\n.pl-details__summary {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--pl-space-s);\n  cursor: pointer;\n  list-style: none;\n  padding: var(--pl-space-xs) var(--pl-space-m);\n}\n\n.pl-details__summary:hover {\n  text-decoration: underline;\n  text-underline-offset: var(--pl-link-text-underline-offset);\n}\n\n.pl-details__summary:focus-visible {\n  outline: none;\n  box-shadow: var(--pl-focus-box-shadow);\n}\n\n/* Remove the default disclosure triangle (Safari/Chrome use this marker). */\n.pl-details__summary::-webkit-details-marker {\n  display: none;\n}\n\n/* Custom chevron that rotates 180° when the panel is open. */\n.pl-details__summary::after {\n  content: '';\n  width: 1.25rem;\n  height: 1.25rem;\n  flex-shrink: 0;\n  background: currentColor;\n  -webkit-mask: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat center;\n  mask: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\") no-repeat center;\n  transition: transform 0.2s ease;\n}\n\n.pl-details[open] > .pl-details__summary::after {\n  transform: rotate(180deg);\n}\n\n/* The content revealed when the disclosure is open. */\n.pl-details__content {\n  padding: var(--pl-space-m);\n  background: var(--pl-color-bg-default);\n  border-radius: 0 0 var(--pl-border-radius) var(--pl-border-radius);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pl-details__summary::after {\n    transition: none;\n  }\n}";
 
 /*
  Stencil Client Platform v4.38.1 | MIT Licensed | https://stenciljs.com
@@ -1645,7 +1645,7 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
 };
 var callRender = (hostRef, instance, elm, isInitialLoad) => {
   try {
-    instance = instance.render() ;
+    instance = instance.render && instance.render();
     {
       hostRef.$flags$ &= -17 /* isQueuedForUpdate */;
     }
@@ -2272,6 +2272,6 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 export { Host as H, getElement as a, bootstrapLazy as b, createEvent as c, getAssetPath as d, setAssetPath as e, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=p-DJQvPLp9.js.map
+//# sourceMappingURL=index-BXL8iX4F.js.map
 
-//# sourceMappingURL=p-DJQvPLp9.js.map
+//# sourceMappingURL=index-BXL8iX4F.js.map