/*
 * Halonex Privacy Center — shared stylesheet.
 *
 * Built on GitHub's Primer design system (see _design-system/ for the local
 * copy of the guidelines). Rules for editing this file:
 *   - Use Primer semantic tokens only (fgColor-*, bgColor-*, borderColor-*,
 *     text-*-shorthand, stack-*, control-*). No raw hex/px values.
 *   - Media queries can't read custom properties, so breakpoints are written
 *     as rem values with the matching --breakpoint-* token named beside them.
 *   - Component class names follow Primer's (Label, Banner, NavList,
 *     PageHeader, Blankslate, ToggleSwitch) so the docs map straight onto them.
 *
 * Load order on every page:
 *   /assets/vendor/primer/primitives.css  (Primer tokens, light + dark)
 *   /assets/css/site.css                  (this file)
 */

/* ---------------------------------------------------------------------------
 * Fonts — Primer's --fontStack-* tokens lead with "Mona Sans VF"
 * ------------------------------------------------------------------------- */

@font-face {
    font-family: "Mona Sans VF";
    src: url("/assets/fonts/MonaSansVF.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mona Sans VF";
    src: url("/assets/fonts/MonaSansVF-Italic.woff2") format("woff2");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
 * Brand
 * The halonex. wordmark is lowercase with an orange period. That period is
 * the site's only brand colour; illustrations reuse it as their one accent.
 * ------------------------------------------------------------------------- */

:root {
    --brand-accent: var(--fgColor-severe);
}

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light dark;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--base-size-64) + var(--stack-gap-normal));
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bgColor-default);
    color: var(--fgColor-default);
    font: var(--text-body-shorthand-medium);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: var(--selection-bgColor);
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
    margin: 0;
}

img, svg {
    display: block;
}

a {
    color: var(--fgColor-accent);
    text-decoration: none;
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--outline-focus-offset);
}

a:focus-visible {
    outline-offset: var(--base-size-2);
    border-radius: var(--borderRadius-small);
}

code {
    font: var(--text-codeInline-shorthand);
    padding: var(--space-xxs) var(--space-xs);
    background-color: var(--bgColor-neutral-muted);
    border-radius: var(--borderRadius-medium);
}

kbd {
    display: inline-block;
    min-width: var(--base-size-20);
    padding: 0 var(--space-xs);
    font: var(--text-caption-shorthand);
    font-family: var(--fontStack-monospace);
    line-height: var(--base-size-20);
    text-align: center;
    color: var(--fgColor-muted);
    background-color: var(--bgColor-muted);
    border: var(--borderWidth-thin) solid var(--borderColor-default);
    border-radius: var(--borderRadius-medium);
    box-shadow: inset 0 calc(-1 * var(--borderWidth-thin)) 0 var(--borderColor-default);
}

.Octicon {
    display: inline-block;
    flex-shrink: 0;
    fill: currentColor;
    vertical-align: text-bottom;
}

/* Line-art illustrations: <svg class="Illustration"> wrapping a <use> that
 * points at a symbol in /assets/img/illustrations.svg. The symbols read these
 * properties, so the art follows the colour mode. Always aria-hidden. */
.Illustration {
    --Illustration-tint: var(--bgColor-muted);
    --Illustration-surface: var(--bgColor-default);
    --Illustration-subtle: var(--borderColor-default);
    --Illustration-accent: var(--brand-accent);
    display: block;
    flex-shrink: 0;
    max-width: 100%;
    height: auto;
    color: var(--fgColor-muted);
    overflow: visible;
}

.Wordmark {
    font: var(--text-title-shorthand-medium);
    font-family: var(--fontStack-sansSerifDisplay);
    font-weight: var(--base-text-weight-semibold);
    color: var(--fgColor-default);
    white-space: nowrap;
}

.Wordmark-dot {
    color: var(--brand-accent);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.SkipLink {
    position: fixed;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: var(--zIndex-skipLink);
    padding: var(--control-medium-paddingBlock) var(--control-medium-paddingInline-normal);
    font: var(--text-body-shorthand-medium);
    font-weight: var(--base-text-weight-semibold);
    color: var(--fgColor-onEmphasis);
    background-color: var(--bgColor-accent-emphasis);
    border-radius: var(--borderRadius-medium);
    transform: translateY(calc(-100% - var(--base-size-16)));
}

.SkipLink:focus {
    transform: none;
}

/* ---------------------------------------------------------------------------
 * Layout container
 * ------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--breakpoint-xlarge);
    margin-inline: auto;
    padding-inline: var(--stack-padding-normal);
}

@media (min-width: 48rem) { /* --breakpoint-medium */
    .container {
        padding-inline: var(--stack-padding-spacious);
    }
}

/* ---------------------------------------------------------------------------
 * Site header: halonex. wordmark lockup, policy menu, links, theme toggle
 * ------------------------------------------------------------------------- */

.SiteHeader {
    position: sticky;
    top: 0;
    z-index: var(--zIndex-sticky);
    background-color: var(--bgColor-default);
    border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
}

.SiteHeader-inner {
    display: flex;
    align-items: center;
    gap: var(--stack-gap-normal);
    min-height: var(--base-size-64);
}

.SiteHeader-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--fgColor-default);
    border-radius: var(--borderRadius-medium);
    white-space: nowrap;
}

.SiteHeader-brand:hover {
    text-decoration: none;
}

.SiteHeader-brand:hover .SiteHeader-product {
    color: var(--fgColor-default);
}

.SiteHeader-brand:active .Wordmark {
    color: var(--fgColor-muted);
}

.SiteHeader-brand:focus-visible {
    outline-offset: var(--base-size-4);
}

.SiteHeader-product {
    padding-left: var(--space-md);
    border-left: var(--borderWidth-thin) solid var(--borderColor-default);
    font: var(--text-body-shorthand-large);
    color: var(--fgColor-muted);
    transition: color var(--motion-transition-hover);
}

.SiteHeader-nav {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-left: auto;
}

.SiteHeader-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    height: var(--control-medium-size);
    padding: 0 var(--control-medium-paddingInline-condensed);
    color: var(--fgColor-default);
    border-radius: var(--borderRadius-medium);
    font: var(--text-body-shorthand-medium);
    font-weight: var(--base-text-weight-medium);
    transition: background-color var(--motion-transition-hover);
}

.SiteHeader-link .Octicon {
    color: var(--fgColor-muted);
}

.SiteHeader-link:hover {
    text-decoration: none;
    background-color: var(--control-transparent-bgColor-hover);
}

.SiteHeader-link:active {
    background-color: var(--control-transparent-bgColor-active);
}

.SiteHeader-separator {
    align-self: center;
    width: var(--borderWidth-thin);
    height: var(--base-size-20);
    margin-inline: var(--space-xs);
    background-color: var(--borderColor-muted);
}

@media (max-width: 47.9375rem) { /* below --breakpoint-medium */
    .SiteHeader-link,
    .SiteHeader-separator {
        display: none;
    }
}

@media (max-width: 33.9375rem) { /* below --breakpoint-small */
    .SiteHeader-inner {
        gap: var(--space-sm);
    }

    .SiteHeader-brand {
        gap: var(--space-sm);
    }

    .SiteHeader-product {
        padding-left: var(--space-sm);
        font: var(--text-body-shorthand-medium);
    }

    .ActionMenu-button .ActionMenu-leadingVisual {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
 * ActionMenu + ActionList (Primer). A <details> disclosure holding a list of
 * links, so it works without JS; site.js adds Escape, outside-click and
 * focus-out closing.
 * ------------------------------------------------------------------------- */

.ActionMenu {
    position: relative;
}

.ActionMenu-button {
    list-style: none;
}

.ActionMenu-button::-webkit-details-marker {
    display: none;
}

.ActionMenu-chevron {
    transition: transform var(--motion-transition-stateChange);
}

.ActionMenu[open] .ActionMenu-chevron {
    transform: rotate(180deg);
}

.ActionMenu[open] .ActionMenu-button {
    background-color: var(--button-invisible-bgColor-active);
}

.ActionMenu-overlay {
    position: absolute;
    top: calc(100% + var(--overlay-offset));
    right: 0;
    z-index: var(--zIndex-dropdown);
    width: var(--overlay-width-small);
    max-width: calc(100vw - var(--base-size-32));
    max-height: calc(100vh - var(--base-size-80));
    overflow-y: auto;
    padding: var(--overlay-paddingBlock-condensed) var(--space-sm);
    background-color: var(--overlay-bgColor);
    border: var(--borderWidth-thin) solid var(--overlay-borderColor);
    border-radius: var(--overlay-borderRadius);
    box-shadow: var(--shadow-floating-small);
}

.ActionList {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ActionList-sectionHeading {
    padding: var(--space-sm) var(--control-medium-paddingInline-condensed) var(--space-xs);
    font: var(--text-body-shorthand-small);
    font-weight: var(--base-text-weight-semibold);
    color: var(--fgColor-muted);
}

.ActionList-divider {
    height: var(--borderWidth-thin);
    margin: var(--space-sm) calc(-1 * var(--space-sm));
    background-color: var(--borderColor-muted);
}

.ActionList-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--control-medium-size);
    padding: var(--control-medium-paddingBlock) var(--control-medium-paddingInline-condensed);
    font: var(--text-body-shorthand-medium);
    color: var(--fgColor-default);
    border-radius: var(--borderRadius-medium);
    transition: background-color var(--motion-transition-hover);
}

.ActionList-item:hover {
    text-decoration: none;
    background-color: var(--control-transparent-bgColor-hover);
}

.ActionList-item:active {
    background-color: var(--control-transparent-bgColor-active);
}

.ActionList-item:focus-visible {
    outline-offset: calc(-1 * var(--outline-focus-width));
}

.ActionList-item[aria-current="page"] {
    font-weight: var(--base-text-weight-semibold);
    background-color: var(--control-transparent-bgColor-selected);
}

.ActionList-item[aria-current="page"]::after {
    content: "";
    position: absolute;
    top: calc(50% - var(--base-size-12));
    left: calc(-1 * var(--space-sm));
    width: var(--base-size-4);
    height: var(--base-size-24);
    background-color: var(--borderColor-accent-emphasis);
    border-radius: var(--borderRadius-medium);
}

.ActionList-itemDescription {
    margin-left: auto;
    font: var(--text-body-shorthand-small);
    font-weight: var(--base-text-weight-normal);
    color: var(--fgColor-muted);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Button + IconButton (Primer Button, default and invisible variants)
 * ------------------------------------------------------------------------- */

.Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--control-medium-gap);
    height: var(--control-medium-size);
    padding: 0 var(--control-medium-paddingInline-normal);
    font: var(--text-body-shorthand-medium);
    font-weight: var(--base-text-weight-medium);
    color: var(--button-default-fgColor-rest);
    white-space: nowrap;
    background-color: var(--button-default-bgColor-rest);
    border: var(--borderWidth-thin) solid var(--button-default-borderColor-rest);
    border-radius: var(--borderRadius-medium);
    box-shadow: var(--shadow-resting-small);
    cursor: pointer;
    transition:
        background-color var(--motion-transition-hover),
        border-color var(--motion-transition-hover);
}

.Button .Octicon {
    color: var(--fgColor-muted);
}

.Button:hover {
    text-decoration: none;
    background-color: var(--button-default-bgColor-hover);
    border-color: var(--button-default-borderColor-hover);
}

.Button:active {
    background-color: var(--button-default-bgColor-active);
    border-color: var(--button-default-borderColor-active);
}

.Button:disabled,
.Button[aria-disabled="true"] {
    color: var(--button-default-fgColor-disabled);
    background-color: var(--button-default-bgColor-disabled);
    cursor: not-allowed;
}

.Button--small {
    height: var(--control-small-size);
    padding: 0 var(--control-small-paddingInline-normal);
    gap: var(--control-small-gap);
    font: var(--text-body-shorthand-small);
    font-weight: var(--base-text-weight-medium);
}

.Button--block {
    width: 100%;
}

.Button--invisible {
    color: var(--button-invisible-fgColor-rest);
    background-color: var(--button-invisible-bgColor-rest);
    border-color: var(--button-invisible-borderColor-rest);
    box-shadow: none;
}

.Button--invisible .Octicon {
    color: var(--button-invisible-iconColor-rest);
}

.Button--invisible:hover {
    color: var(--button-invisible-fgColor-hover);
    background-color: var(--button-invisible-bgColor-hover);
    border-color: var(--button-invisible-borderColor-hover);
}

.Button--invisible:hover .Octicon {
    color: var(--button-invisible-iconColor-hover);
}

.Button--invisible:active {
    color: var(--button-invisible-fgColor-active);
    background-color: var(--button-invisible-bgColor-active);
}

.Button--invisible:disabled,
.Button--invisible[aria-disabled="true"] {
    color: var(--button-invisible-fgColor-disabled);
    background-color: var(--button-invisible-bgColor-disabled);
    border-color: var(--button-invisible-borderColor-disabled);
}

.IconButton {
    display: inline-grid;
    place-items: center;
    width: var(--control-medium-size);
    height: var(--control-medium-size);
    padding: 0;
    color: var(--button-invisible-iconColor-rest);
    background-color: var(--button-invisible-bgColor-rest);
    border: var(--borderWidth-thin) solid var(--button-invisible-borderColor-rest);
    border-radius: var(--borderRadius-medium);
    cursor: pointer;
    transition: background-color var(--motion-transition-hover);
}

.IconButton:hover {
    color: var(--button-invisible-iconColor-hover);
    background-color: var(--button-invisible-bgColor-hover);
}

.IconButton:active {
    background-color: var(--button-invisible-bgColor-active);
}

.IconButton:disabled {
    color: var(--button-invisible-iconColor-disabled);
    cursor: not-allowed;
}

/* Theme toggle shows the icon for the mode it will switch to. site.js sets
 * data-theme-resolved on <html> to the theme currently in effect. */
.ThemeToggle-light,
[data-theme-resolved="dark"] .ThemeToggle-dark {
    display: none;
}

[data-theme-resolved="dark"] .ThemeToggle-light {
    display: block;
}

/* ---------------------------------------------------------------------------
 * Label (Primer Label)
 * ------------------------------------------------------------------------- */

.Label {
    display: inline-flex;
    align-items: center;
    height: var(--base-size-20);
    padding: 0 var(--space-sm);
    font: var(--text-body-shorthand-small);
    font-weight: var(--base-text-weight-medium);
    line-height: 1;
    white-space: nowrap;
    color: var(--fgColor-muted);
    background-color: transparent;
    border: var(--borderWidth-thin) solid var(--borderColor-default);
    border-radius: var(--borderRadius-full);
    vertical-align: middle;
}

h2 .Label,
h3 .Label,
.control-title .Label {
    margin-left: var(--space-sm);
}

.Label--accent {
    color: var(--fgColor-accent);
    border-color: var(--borderColor-accent-emphasis);
}

.Label--success {
    color: var(--fgColor-success);
    border-color: var(--borderColor-success-emphasis);
}

.Label--attention {
    color: var(--fgColor-attention);
    border-color: var(--borderColor-attention-emphasis);
}

/* ---------------------------------------------------------------------------
 * TextInput (Primer TextInput, large, with leading + trailing visuals)
 * ------------------------------------------------------------------------- */

.TextInput {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--control-large-gap);
    height: var(--control-large-size);
    padding: 0 var(--control-large-paddingInline-normal);
    background-color: var(--bgColor-default);
    border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
    border-radius: var(--borderRadius-medium);
    box-shadow: var(--shadow-inset);
    transition: border-color var(--motion-transition-hover);
}

.TextInput:focus-within {
    border-color: var(--focus-outline-color);
    outline: var(--focus-outline);
    outline-offset: calc(-1 * var(--borderWidth-thin));
}

.TextInput-leadingVisual {
    color: var(--fgColor-muted);
}

.TextInput input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    font: var(--text-body-shorthand-large);
    color: var(--fgColor-default);
    background: transparent;
    border: 0;
    outline: 0;
}

.TextInput input::placeholder {
    color: var(--control-fgColor-placeholder);
}

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

.TextInput-trailingVisual {
    display: flex;
    gap: var(--space-xxs);
}

@media (hover: none) {
    .TextInput-trailingVisual {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
 * Site footer
 * ------------------------------------------------------------------------- */

.SiteFooter {
    margin-top: auto;
    border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
    color: var(--fgColor-muted);
}

.SiteFooter-main {
    display: grid;
    gap: var(--base-size-40);
    padding-block: var(--base-size-48) var(--base-size-40);
}

@media (min-width: 48rem) { /* --breakpoint-medium */
    .SiteFooter-main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--base-size-48);
    }
}

.SiteFooter-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--stack-gap-condensed);
}

.SiteFooter-wordmark {
    border-radius: var(--borderRadius-medium);
}

.SiteFooter-wordmark:hover {
    text-decoration: none;
}

.SiteFooter-wordmark:active .Wordmark {
    color: var(--fgColor-muted);
}

.SiteFooter-wordmark .Wordmark {
    font: var(--text-title-shorthand-large);
    font-family: var(--fontStack-sansSerifDisplay);
    font-weight: var(--base-text-weight-semibold);
}

.SiteFooter-tagline {
    max-width: var(--overlay-width-small);
    font: var(--text-body-shorthand-medium);
}

.SiteFooter-illustration {
    width: calc(var(--base-size-128) + var(--base-size-16));
    margin-top: var(--space-sm);
}

.SiteFooter-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--overlay-width-xsmall) * 0.8), 1fr));
    gap: var(--stack-gap-spacious);
}

.SiteFooter-heading {
    margin-bottom: var(--space-md);
    font: var(--text-body-shorthand-medium);
    font-weight: var(--base-text-weight-semibold);
    color: var(--fgColor-default);
}

.SiteFooter-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 0;
    list-style: none;
    font: var(--text-body-shorthand-medium);
}

.SiteFooter-list a,
.SiteFooter-bottom a {
    color: var(--fgColor-muted);
    transition: color var(--motion-transition-hover);
}

.SiteFooter-list a:hover,
.SiteFooter-bottom a:hover {
    color: var(--fgColor-accent);
}

.SiteFooter-list a:active,
.SiteFooter-bottom a:active {
    color: var(--fgColor-default);
}

.SiteFooter-list a[aria-current="page"] {
    color: var(--fgColor-default);
    font-weight: var(--base-text-weight-medium);
}

.SiteFooter-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm) var(--stack-gap-normal);
    padding-block: var(--stack-padding-spacious);
    border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
    font: var(--text-body-shorthand-small);
}

.SiteFooter-bottom a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ---------------------------------------------------------------------------
 * Index: hero
 * ------------------------------------------------------------------------- */

.Hero {
    padding-block: var(--base-size-80) var(--base-size-48);
    background-color: var(--bgColor-default);
}

.Hero-inner {
    max-width: var(--breakpoint-medium);
}

.Hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--stack-gap-normal);
    font: var(--text-body-shorthand-medium);
    font-weight: var(--base-text-weight-semibold);
    color: var(--fgColor-muted);
}

.Hero-eyebrow .Octicon {
    color: var(--fgColor-success);
}

.Hero-heading {
    font: var(--text-display-shorthand);
    font-size: calc(var(--text-display-size) * 1.4);
    font-weight: var(--base-text-weight-semibold);
    line-height: var(--base-text-lineHeight-tight);
    text-wrap: balance;
}

.Hero-lead {
    margin-top: var(--stack-gap-normal);
    font: var(--text-subtitle-shorthand);
    color: var(--fgColor-muted);
    text-wrap: pretty;
}

.Hero-search {
    margin-top: var(--stack-gap-spacious);
    max-width: var(--overlay-width-large);
}

.Hero-layout {
    display: grid;
    align-items: center;
    gap: var(--base-size-48);
}

.Hero-illustration {
    display: none;
}

@media (min-width: 63.25rem) { /* --breakpoint-large */
    .Hero-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--overlay-width-medium));
    }

    .Hero-illustration {
        display: block;
        width: 100%;
    }
}

@media (max-width: 47.9375rem) { /* below --breakpoint-medium */
    .Hero {
        padding-block: var(--base-size-48) var(--base-size-32);
    }

    .Hero-heading {
        font-size: var(--text-display-size);
    }
}

/* ---------------------------------------------------------------------------
 * Index: product policy grid + cards
 * ------------------------------------------------------------------------- */

.PolicyIndex {
    padding-bottom: var(--base-size-80);
}

.PolicyIndex-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--stack-gap-normal);
    padding-bottom: var(--stack-padding-normal);
    margin-bottom: var(--stack-gap-spacious);
    border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
}

.PolicyIndex-title {
    font: var(--text-title-shorthand-medium);
}

.PolicyIndex-count {
    font: var(--text-body-shorthand-medium);
    color: var(--fgColor-muted);
}

.PolicyGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--overlay-width-small)), 1fr));
    gap: var(--stack-gap-normal);
    padding: 0;
    list-style: none;
}

.PolicyGrid > li {
    display: flex;
}

.PolicyGrid > li[hidden] {
    display: none;
}

.PolicyCard {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--stack-gap-condensed);
    padding: var(--stack-padding-spacious);
    background-color: var(--bgColor-default);
    border: var(--borderWidth-thin) solid var(--borderColor-default);
    border-radius: var(--borderRadius-large);
    transition:
        border-color var(--motion-transition-hover),
        box-shadow var(--motion-transition-hover);
}

.PolicyCard:hover,
.PolicyCard:focus-within {
    border-color: var(--borderColor-emphasis);
    box-shadow: var(--shadow-resting-medium);
}

.PolicyCard-icon {
    display: grid;
    place-items: center;
    width: var(--base-size-48);
    height: var(--base-size-48);
    margin-bottom: var(--space-sm);
    color: var(--fgColor-default);
    background-color: var(--bgColor-muted);
    border: var(--borderWidth-thin) solid var(--borderColor-muted);
    border-radius: var(--borderRadius-medium);
}

.PolicyCard-title {
    font: var(--text-title-shorthand-small);
}

.PolicyCard-title a {
    color: var(--fgColor-default);
}

/* Stretch the title link over the whole card so the card is one target. */
.PolicyCard-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.PolicyCard-title a:hover {
    text-decoration: none;
}

.PolicyCard-title a:focus-visible {
    outline: none;
}

.PolicyCard-title a:focus-visible::after {
    outline: var(--focus-outline);
    outline-offset: var(--outline-focus-offset);
}

.PolicyCard-description {
    flex: 1;
    font: var(--text-body-shorthand-medium);
    color: var(--fgColor-muted);
}

.PolicyCard-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-top: var(--stack-padding-normal);
    border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
    font: var(--text-body-shorthand-small);
    color: var(--fgColor-muted);
}

.PolicyCard-updated {
    margin-left: auto;
}

.PolicyCard-arrow {
    color: var(--fgColor-muted);
    transition: transform var(--motion-transition-hover);
}

.PolicyCard:hover .PolicyCard-arrow {
    color: var(--fgColor-accent);
    transform: translateX(var(--base-size-2));
}

/* ---------------------------------------------------------------------------
 * Blankslate (empty search results)
 * ------------------------------------------------------------------------- */

.Blankslate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--stack-gap-condensed);
    padding: var(--base-size-48) var(--stack-padding-spacious);
    text-align: center;
    border: var(--borderWidth-thin) dashed var(--borderColor-default);
    border-radius: var(--borderRadius-large);
}

.Blankslate[hidden] {
    display: none;
}

.Blankslate-visual {
    margin-bottom: var(--space-sm);
    color: var(--fgColor-muted);
}

.Blankslate-visual.Illustration {
    width: calc(var(--base-size-80) * 2);
}

/* ---------------------------------------------------------------------------
 * Index: "How to read these policies" guide
 * ------------------------------------------------------------------------- */

.Guide {
    padding-bottom: var(--base-size-80);
}

.Guide-header {
    padding-bottom: var(--stack-padding-normal);
    margin-bottom: var(--stack-gap-spacious);
    border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
}

.Guide-title {
    font: var(--text-title-shorthand-medium);
}

.Guide-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--overlay-width-small) * 0.8), 1fr));
    gap: var(--stack-gap-spacious);
    padding: 0;
    list-style: none;
}

.Guide-item {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap-condensed);
}

.Guide-item .Illustration {
    width: calc(var(--base-size-80) * 2);
    margin-bottom: var(--space-sm);
}

.Guide-itemTitle {
    font: var(--text-title-shorthand-small);
}

.Guide-itemDescription {
    font: var(--text-body-shorthand-medium);
    color: var(--fgColor-muted);
}

.Blankslate-heading {
    font: var(--text-title-shorthand-medium);
}

.Blankslate-description {
    max-width: var(--overlay-width-medium);
    color: var(--fgColor-muted);
}

.Blankslate .Button {
    margin-top: var(--stack-gap-condensed);
}

/* ---------------------------------------------------------------------------
 * Policy pages: progress bar (Primer ProgressBar)
 * ------------------------------------------------------------------------- */

.ReadingProgress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--zIndex-overlay);
    height: var(--base-size-4);
    background-color: transparent;
    pointer-events: none;
}

.ReadingProgress-bar {
    width: 100%;
    height: 100%;
    background-color: var(--progressBar-bgColor-accent);
    transform: scaleX(0);
    transform-origin: left center;
}

/* ---------------------------------------------------------------------------
 * Policy pages: PageLayout (sidebar pane + content)
 * ------------------------------------------------------------------------- */

.PageLayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--stack-gap-spacious);
    padding-block: var(--stack-padding-spacious) var(--base-size-80);
}

.PageLayout-content {
    min-width: 0;
    max-width: var(--breakpoint-medium);
}

@media (min-width: 63.25rem) { /* --breakpoint-large */
    .PageLayout {
        grid-template-columns: var(--overlay-width-xsmall) minmax(0, 1fr);
        gap: var(--base-size-48);
        padding-block-start: var(--base-size-40);
    }

    .PageLayout-pane {
        position: sticky;
        top: calc(var(--base-size-64) + var(--stack-gap-spacious));
        align-self: start;
        max-height: calc(100vh - var(--base-size-64) - var(--base-size-48));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 0 var(--stack-padding-normal) var(--space-sm);
        margin-left: calc(-1 * var(--space-sm));
    }
}

@media (min-width: 80rem) { /* --breakpoint-xlarge */
    .PageLayout {
        grid-template-columns: var(--overlay-width-small) minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
 * Policy pages: table of contents (Primer NavList)
 * ------------------------------------------------------------------------- */

.TocDisclosure {
    border: var(--borderWidth-thin) solid var(--borderColor-default);
    border-radius: var(--borderRadius-medium);
}

.TocDisclosure-summary {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--control-medium-paddingBlock) var(--control-medium-paddingInline-normal);
    font: var(--text-body-shorthand-medium);
    font-weight: var(--base-text-weight-semibold);
    list-style: none;
    cursor: pointer;
}

.TocDisclosure-summary::-webkit-details-marker {
    display: none;
}

.TocDisclosure-summary .Octicon {
    color: var(--fgColor-muted);
}

.TocDisclosure-chevron {
    margin-left: auto;
    transition: transform var(--motion-transition-stateChange);
}

.TocDisclosure[open] .TocDisclosure-chevron {
    transform: rotate(90deg);
}

.TocDisclosure .NavList {
    padding: 0 var(--space-sm) var(--space-sm);
}

@media (min-width: 63.25rem) { /* --breakpoint-large */
    .TocDisclosure {
        border: 0;
    }

    .TocDisclosure-summary {
        padding: 0 0 var(--space-sm) var(--control-medium-paddingInline-condensed);
        font: var(--text-body-shorthand-small);
        font-weight: var(--base-text-weight-semibold);
        color: var(--fgColor-muted);
        cursor: default;
        pointer-events: none;
    }

    .TocDisclosure-summary .Octicon {
        display: none;
    }

    .TocDisclosure .NavList {
        padding: 0;
    }
}

.NavList {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
    padding: 0;
    list-style: none;
}

.NavList-item {
    position: relative;
    display: block;
    padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed);
    font: var(--text-body-shorthand-medium);
    color: var(--fgColor-default);
    border-radius: var(--borderRadius-medium);
    transition: background-color var(--motion-transition-hover);
}

.NavList-item:hover {
    text-decoration: none;
    background-color: var(--control-transparent-bgColor-hover);
}

.NavList-item:active {
    background-color: var(--control-transparent-bgColor-active);
}

.NavList-item[aria-current="true"] {
    font-weight: var(--base-text-weight-semibold);
    background-color: var(--control-transparent-bgColor-selected);
}

.NavList-item[aria-current="true"]::after {
    content: "";
    position: absolute;
    top: calc(50% - var(--base-size-12));
    left: calc(-1 * var(--space-sm));
    width: var(--base-size-4);
    height: var(--base-size-24);
    background-color: var(--borderColor-accent-emphasis);
    border-radius: var(--borderRadius-medium);
}

@media (max-width: 63.1875rem) { /* below --breakpoint-large */
    .NavList-item[aria-current="true"]::after {
        left: calc(-1 * var(--space-xs));
    }
}

/* ---------------------------------------------------------------------------
 * Policy pages: Breadcrumbs + PageHeader
 * ------------------------------------------------------------------------- */

.Breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--stack-gap-normal);
    padding: 0;
    list-style: none;
    font: var(--text-body-shorthand-medium);
}

.Breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--fgColor-muted);
}

.Breadcrumbs li + li::before {
    content: "/";
    color: var(--fgColor-muted);
}

.Breadcrumbs [aria-current="page"] {
    color: var(--fgColor-default);
}

.PageHeader {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: var(--stack-padding-spacious);
    margin-bottom: var(--base-size-40);
    border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
}

/* Product illustration: above the title on phones, beside it from medium up. */
.PageHeader-illustration {
    grid-row: 1;
    width: calc(var(--base-size-80) * 2);
    margin-bottom: var(--stack-gap-normal);
}

@media (min-width: 48rem) { /* --breakpoint-medium */
    .PageHeader {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--stack-gap-spacious);
    }

    .PageHeader-title,
    .PageHeader-labels {
        grid-column: 1;
    }

    .PageHeader-illustration {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        width: calc(var(--base-size-112) * 2);
        margin-bottom: 0;
    }

    .PageHeader-meta {
        grid-column: 1 / -1;
    }
}

.PageHeader-title {
    font: var(--text-title-shorthand-large);
    text-wrap: balance;
}

.PageHeader-actions {
    display: flex;
    gap: var(--space-sm);
    margin-left: auto;
}

.PageHeader-labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--stack-gap-normal);
}

.PageHeader-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--base-size-128) * 1.5), 1fr));
    gap: var(--stack-gap-normal);
    margin-top: var(--stack-gap-spacious);
}

.PageHeader-meta dt {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font: var(--text-body-shorthand-small);
    color: var(--fgColor-muted);
}

.PageHeader-meta dd {
    margin-top: var(--space-xxs);
    font: var(--text-body-shorthand-medium);
    font-weight: var(--base-text-weight-medium);
}

@media (max-width: 47.9375rem) { /* below --breakpoint-medium */
    .PageHeader-title {
        font: var(--text-title-shorthand-medium);
        font-size: calc(var(--text-title-size-medium) * 1.2);
    }
}

/* ---------------------------------------------------------------------------
 * Policy pages: article prose
 * ------------------------------------------------------------------------- */

.Prose section {
    display: flow-root;
    margin-bottom: var(--base-size-48);
}

/* Section illustrations float beside the opening paragraphs. Boxed blocks
 * (tables, settings, diagrams) clear them rather than squeeze beside them. */
.SectionIllustration {
    float: right;
    width: var(--base-size-96);
    margin: 0 0 var(--space-sm) var(--stack-gap-normal);
}

@media (min-width: 48rem) { /* --breakpoint-medium */
    .SectionIllustration {
        width: calc(var(--base-size-80) * 2);
        margin: calc(-1 * var(--space-sm)) 0 var(--stack-gap-normal) var(--stack-gap-spacious);
    }
}

.Prose .table-wrap,
.Prose .control-panel,
.Prose .arch-diagram,
.Prose .notification-preview {
    clear: both;
}

.Prose h2 {
    padding-bottom: var(--space-sm);
    margin-bottom: var(--stack-gap-normal);
    font: var(--text-title-shorthand-medium);
    font-size: calc(var(--text-title-size-medium) * 1.2);
    border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
}

.Prose h3 {
    margin: var(--stack-gap-spacious) 0 var(--stack-gap-condensed);
    font: var(--text-title-shorthand-small);
}

.Prose h4 {
    margin: var(--stack-gap-normal) 0 var(--space-sm);
    font: var(--text-body-shorthand-large);
    font-weight: var(--base-text-weight-semibold);
}

.Prose p,
.Prose ul,
.Prose ol {
    margin-bottom: var(--stack-gap-normal);
    font: var(--text-body-shorthand-large);
}

.Prose ul,
.Prose ol {
    padding-left: var(--base-size-24);
}

.Prose li + li {
    margin-top: var(--space-sm);
}

.Prose li > ul,
.Prose li > ol {
    margin-top: var(--space-sm);
    margin-bottom: 0;
}

.Prose strong {
    font-weight: var(--base-text-weight-semibold);
}

.Prose a {
    text-decoration: underline;
    text-decoration-thickness: from-font;
}

.Prose em {
    font-style: italic;
}

/* Long URLs and identifiers must wrap rather than widen the page on phones. */
.Prose code {
    overflow-wrap: anywhere;
}

/* Inline definitions. site.js turns each .term into a keyboard-operable
 * button (Primer: tooltips never go on non-interactive text) that opens a
 * small popover with the definition. */
.term {
    text-decoration: underline dotted var(--fgColor-muted);
    text-decoration-thickness: from-font;
    text-underline-offset: 0.25em;
    cursor: pointer;
    border-radius: var(--borderRadius-small);
}

.term:hover,
.term[aria-expanded="true"] {
    color: var(--fgColor-accent);
    text-decoration-color: var(--fgColor-accent);
}

.term:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--base-size-2);
}

/* Primer Popover */
.Popover {
    position: fixed;
    z-index: var(--zIndex-popover);
    max-width: min(var(--overlay-width-small), calc(100vw - var(--base-size-32)));
    padding: var(--space-md) var(--stack-padding-normal);
    font: var(--text-body-shorthand-medium);
    color: var(--fgColor-default);
    background-color: var(--overlay-bgColor);
    border: var(--borderWidth-thin) solid var(--overlay-borderColor);
    border-radius: var(--overlay-borderRadius);
    box-shadow: var(--shadow-floating-small);
    opacity: 0;
    transition: opacity var(--motion-transition-enter);
}

.Popover[data-visible="true"] {
    opacity: 1;
}

/* "Human summary" callouts — GitHub's Markdown "Note" alert. Primer's Banner
 * is limited to one per page with no heading, and these repeat per section. */
.summary-box {
    margin: var(--stack-gap-spacious) 0;
    padding: var(--space-sm) var(--stack-padding-normal);
    border-left: var(--borderWidth-thicker) solid var(--borderColor-accent-emphasis);
}

.Prose .summary-box h4 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0 0 var(--space-xs);
    font: var(--text-body-shorthand-medium);
    font-weight: var(--base-text-weight-semibold);
    color: var(--fgColor-accent);
}

.Prose .summary-box h4::before {
    content: "";
    flex-shrink: 0;
    width: var(--base-size-16);
    height: var(--base-size-16);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.Prose .summary-box p,
.Prose .summary-box ul {
    margin-bottom: var(--space-sm);
}

.Prose .summary-box > :last-child {
    margin-bottom: 0;
}

/* "We never collect" lists */
.Prose .no-collect-list {
    padding-left: 0;
    list-style: none;
}

.Prose .no-collect-list li {
    position: relative;
    padding-left: calc(var(--base-size-16) + var(--space-sm));
}

.Prose .no-collect-list li::before {
    content: "";
    position: absolute;
    top: calc((1lh - var(--base-size-16)) / 2);
    left: 0;
    width: var(--base-size-16);
    height: var(--base-size-16);
    background-color: var(--fgColor-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM3.965 13.096a6.5 6.5 0 0 0 9.131-9.131ZM1.5 8a6.474 6.474 0 0 0 1.404 4.035l9.131-9.131A6.499 6.499 0 0 0 1.5 8Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM3.965 13.096a6.5 6.5 0 0 0 9.131-9.131ZM1.5 8a6.474 6.474 0 0 0 1.404 4.035l9.131-9.131A6.499 6.499 0 0 0 1.5 8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Tables — Primer DataTable */
.table-wrap {
    margin: var(--stack-gap-spacious) 0;
    overflow-x: auto;
    border: var(--borderWidth-thin) solid var(--borderColor-default);
    border-radius: var(--borderRadius-medium);
}

.data-table,
.security-table {
    width: 100%;
    border-collapse: collapse;
    font: var(--text-body-shorthand-medium);
}

.data-table th,
.security-table th {
    padding: var(--space-sm) var(--space-lg);
    font-weight: var(--base-text-weight-semibold);
    text-align: left;
    color: var(--fgColor-default);
    background-color: var(--bgColor-muted);
    border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
    white-space: nowrap;
}

.data-table td,
.security-table td {
    padding: var(--space-md) var(--space-lg);
    vertical-align: top;
    border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
}

.data-table tr:last-child td,
.security-table tr:last-child td {
    border-bottom: 0;
}

/* Settings / consent lists. The switches are read-only: they document each
 * setting's default and are changed in the app, not here. */
.control-panel {
    margin: var(--stack-gap-spacious) 0;
    border: var(--borderWidth-thin) solid var(--borderColor-default);
    border-radius: var(--borderRadius-medium);
}

.control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack-gap-normal);
    padding: var(--stack-padding-normal);
}

.control-row + .control-row {
    border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
}

.control-title {
    font: var(--text-body-shorthand-medium);
    font-weight: var(--base-text-weight-semibold);
}

.control-description {
    margin-top: var(--space-xxs);
    font: var(--text-body-shorthand-medium);
    color: var(--fgColor-muted);
}

/* Primer ToggleSwitch (small, read-only) */
.ToggleSwitch {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-sm);
    font: var(--text-body-shorthand-small);
    color: var(--fgColor-muted);
}

.ToggleSwitch-status {
    min-width: var(--base-size-20);
    text-align: right;
}

.ToggleSwitch-track {
    position: relative;
    display: block;
    width: var(--base-size-40);
    height: var(--base-size-20);
    background-color: var(--control-bgColor-disabled);
    border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
    border-radius: var(--borderRadius-medium);
}

.ToggleSwitch-knob {
    position: absolute;
    top: calc(-1 * var(--borderWidth-thin));
    left: calc(-1 * var(--borderWidth-thin));
    width: var(--base-size-20);
    height: var(--base-size-20);
    background-color: var(--bgColor-default);
    border: var(--borderWidth-thin) solid var(--control-borderColor-emphasis);
    border-radius: var(--borderRadius-medium);
}

.ToggleSwitch[data-checked="true"] .ToggleSwitch-track {
    background-color: var(--control-checked-bgColor-rest);
    border-color: var(--control-checked-borderColor-rest);
}

.ToggleSwitch[data-checked="true"] .ToggleSwitch-knob {
    left: auto;
    right: calc(-1 * var(--borderWidth-thin));
    border-color: var(--control-checked-borderColor-rest);
}

.ToggleSwitch[data-checked="true"] .ToggleSwitch-status {
    color: var(--fgColor-default);
}

/* Diagrams and example notifications */
.arch-diagram {
    margin: var(--stack-gap-spacious) 0;
    padding: var(--stack-padding-normal);
    overflow-x: auto;
    font: var(--text-codeBlock-shorthand);
    white-space: pre;
    background-color: var(--bgColor-muted);
    border: var(--borderWidth-thin) solid var(--borderColor-default);
    border-radius: var(--borderRadius-medium);
}

.notification-preview {
    margin: var(--stack-gap-normal) 0;
    padding: var(--stack-padding-normal);
    font: var(--text-body-shorthand-medium);
    background-color: var(--bgColor-muted);
    border: var(--borderWidth-thin) solid var(--borderColor-default);
    border-radius: var(--borderRadius-large);
}

/* Closing notes at the end of a policy */
.policy-footnote {
    margin-top: var(--base-size-48);
    padding-top: var(--stack-padding-spacious);
    border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
}

.Prose .policy-footnote p {
    margin-bottom: var(--space-sm);
    font: var(--text-body-shorthand-medium);
    color: var(--fgColor-muted);
}

/* ---------------------------------------------------------------------------
 * Motion and print
 * ------------------------------------------------------------------------- */

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

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

@media print {
    .SiteHeader,
    .SiteFooter,
    .SkipLink,
    .ReadingProgress,
    .PageLayout-pane,
    .PageHeader-actions,
    .Popover,
    .ThemeToggle,
    .Illustration {
        display: none !important;
    }

    body {
        display: block;
    }

    .container {
        max-width: none;
        padding: 0;
    }

    .PageLayout {
        display: block;
        padding: 0;
    }

    .PageLayout-content {
        max-width: none;
    }

    .Prose section,
    .summary-box,
    .control-row,
    .data-table tr,
    .security-table tr {
        break-inside: avoid;
    }

    .Prose h2,
    .Prose h3 {
        break-after: avoid;
    }

    .Prose a::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: var(--fgColor-muted);
    }

    .Prose a[href^="#"]::after {
        content: none;
    }

    .term {
        text-decoration: none;
    }
}