/* media/css/main.css */
/**
* -----------------------------------------
* REFERENCE STANDARD COLORS:
* (in order from lightest to darkest)
*
* #e7eae8: Extremely light gray, used for alternating color boxes such as on mailinglists.html
* #d7dad8: Medium gray, used in Dropotron
* #666: Dark gray, official PostgreSQL gray color and equivalent to RGB(102,102,102)
* #688297: Grayish blue, used in Dropotron
* #336791: Medium blue, official PostgreSQL blue color
* #264d6d: Dark blue
*
* -----------------------------------------
* All padding: 0 0 0 0; and margin: 0 0 0 0; definitions are top, right, bottom, left specifications, respectively.
*/

/** CUSTOM FONTS */
@import url('/media/css/open-sans-woff.css');
@import url('/media/css/open-sans-woff2.css');

/** STANDARD COLOR DEFINITIONS (complete list) **/
:root {
  --a-fg-color: #336791;
  --a-highlight-fg-color: #193145;
  --alert-warning-bg-color: #fff3cd;
  --alert-warning-bdr-color: #ffeeba;
  --b-fg-color: #474747;
  --blockquote-bdr-color: #e7eae8;
  --body-bg-color: inherit;
  --body-fg-color: inherit;
  --btn-decoration-bdr-color: #666;
  --btn-decoration-bg-color: #666;
  --btn-default-bdr-color: #ccc;
  --btn-default-bg-color: #fff;
  --btn-default-fg-color: #333;
  --btn-download-bdr-color: #336791;
  --btn-download-decoration-bdr-color: inherit;
  --btn-download-decoration-bg-color: #e7eae8;
  --btn-download-bg-color: #fff;
  --btn-download-active-bg-color: #e7eae8;
  --btn-download-fg-color: #336791;
  --btn-light-bdr-color: #6c757d;
  --btn-light-bg-color: #6c757d;
  --btn-light-fg-color: #fff;
  --btn-primary-bdr-color: #336791;
  --btn-primary-bg-color: #336791;
  --btn-primary-fg-color: #fff;
  --btn-secondary-bdr-color: inherit;
  --btn-secondary-bg-color: inherit;
  --btn-secondary-fg-color: inherit;
  --button-input-bdr-color: #ced4da;
  --button-input-bg-color: #fff;
  --button-input-fg-color: #495057;
  --carousel-b-fg-color: #336791;
  --carousel-fg-color: #999;
  --carousel-i-fg-color: rgba(0, 0, 0, 0.8);
  --carousel-i-sdw-color: #000;
  --carousel-i-sdw-v-color: #e6e6e6;
  --carousel-image-bdr-color: #ddd;
  --carousel-li-active-bg-color: #555;
  --carousel-li-bg-color: #999;
  --carousel-li-sdw-color: rgba(0,0,0,0.2);
  --cta-bg-color: #336791;
  --cta-fg-color: #fff;
  --cta-header-fg-color: #fff;
  --custom-select-bdr-color: #ced4da;
  --custom-select-bg-color: #fff;
  --custom-select-fg-color: #495057;
  --doccontent-blockquote-table-caution-bdr-color: #e2b21f;
  --doccontent-blockquote-table-caution-bg-color: #fff3cd;
  --doccontent-blockquote-table-note-bdr-color: #ced4da;
  --doccontent-blockquote-table-note-bg-color: #d1ecf1;
  --doccontent-blockquote-table-tip-bdr-color: #84c578;
  --doccontent-blockquote-table-tip-bg-color: #e8f7e6;
  --doccontent-blockquote-table-warning-bdr-color: #df421e;
  --doccontent-blockquote-table-warning-bg-color: #fbeded;
  --doccontent-blockquote-td-warning-bg-color: #fbeded;
  --doccontent-blockquote-td-warning-fg-color: #495057;
  --doccontent-callout-fg-color: initial;
  --doccontent-code-bg-color: inherit;
  --doccontent-code-fg-color: inherit;
  --doccontent-code-warning-note-bg-color: transparent;
  --doccontent-pre-code-bg-color: #f8f9fa;
  --doccontent-pre-code-callout-bg-color: transparent;
  --doccontent-pre-code-fg-color: inherit;
  --doccontent-table-bdr-color: #dee2e6;
  --doccontent-table-bg-color: #e0ecef;
  --doccontent-table-fg-color: #336791;
  --doccontent-table-td-bdr-color: #dee2e6;
  --doccontent-table-td-bg-color: #fff;
  --doccontent-table-td-caution-bdr-color: #f3e4d5;
  --doccontent-table-td-caution-bg-color: #fff3cd;
  --doccontent-table-td-fg-color: inherit;
  --doccontent-table-td-pre-bg-color: inherit;
  --doccontent-table-td-warning-bdr-color: #ffd7d7;
  --doccontent-table-td-warning-bg-color: #fff3cd;
  --doccontent-table-th-bdr-color: #dee2e6;
  --doccontent-table-th-bg-color: #e9ecef;
  --doccontent-table-th-fg-color: inherit;
  --doccontent-table-tt-code-bg-color: inherit;
  --doccontent-table-tt-code-fg-color: inherit;
  --doccontent-table-warning-bdr-color: #ced4da;
  --doccontent-td-warning-bdr-color: #bd4147;
  --doccontent-td-warning-bg-color: #fbeded;
  --doccontent-title-code-bg-color: inherit;
  --doccontent-title-code-fg-color: inherit;
  --feature-grid-bdr-color: #fff;
  --feature-grid-bg-color: #336791;
  --feature-grid-header-color: #fff;
  --feature-i-fg-color: #336791;
  --fieldset-form-group-bdr-color: #ddd;
  --footer-a-fg-color: #336791;
  --h2-decoration-bg-color: #e7eae8;
  --header-a-fg-color: inherit;
  --header-fg-color: #336791;
  --hr-bdr-color: #e7eae8;
  --i-fa-heart-fg-color: #b52525;
  --i-fas-fg-color: #336791;
  --navbar-bg-color: inherit;
  --navbar-fg-color: inherit;
  --navbar-sdw-color: rgba(0,0,0,0.2);
  --navbar-toggler-img: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  --pg-bdr-blue-color: #336791;
  --pg-bg-blue-color: #336791;
  --pg-bg-gray-color: #e7eae8;
  --pg-bg-light-blue-color: #008bb9;
  --pg-bg-purple-color: #e6e6fa;
  --pg-feature-bg-color: #f5f5f5;
  --pg-jumbotron-grdt-end-color: rgba(0, 0, 0, 0.5);
  --pg-jumbotron-grdt-start-color: rgba(0, 0, 0, 0.5);
  --pg-shoutbox-bg-color: #336791;
  --pg-shoutbox-fg-color: #fff;
  --pg-sidenav-a-fg-color: #336791;
  --pg-text-blue-color: #008bb9;
  --pgcontent-a-decoration-fg-color: #193145;
  --pgcontent-doccontent-a-fg-color: #840032;
  --pgcontent-doccontent-a-not-tabindex-fg-color: #336791;
  --pgcontent-fa-fg-color: #336791;
  --pgcontent-pre-bdr-color: #ced4da;
  --pgcontent-span-newsdatefg-color: #fff;
  --pgcontent-span-newstag-fg-color: #fff;
  --styled-select-input-bdr-color: #e7eae8;
  --styled-select-input-bg-color: #fff;
  --table-td-bdr-color: #dee2e6;
  --table-td-bg-color: inherit;
  --table-td-fg-color: inherit;
  --table-th-bdr-color: #dee2e6;
  --table-th-bg-color: unset;
  --table-th-fg-color: inherit;
  --td-fm-no-bg-color: #ffdddd;
  --td-fm-no-fg-color: inherit;
  --td-fm-obs-bg-color: #ddddff;
  --td-fm-obs-fg-color: inherit;
  --td-fm-unk-bg-color: #ffffaa;
  --td-fm-unk-fg-color: inherit;
  --td-fm-yes-bg-color: #ddffdd;
  --td-fm-yes-fg-color: inherit;
  --ul-divided-bdr-color: #e7eae8;
  --ul-errorlist-fg-color: #bd4147;
}

/** DARK COLOR (overrides only) **/
[data-theme="dark"] {
    --a-fg-color: #699eca;
    --a-highlight-fg-color: #50b0f0;
    --alert-warning-bg-color: #bcb5b5;
    --alert-warning-bdr-color: #bcb5b5;
    --b-fg-color: #f3f5f9;
    --body-bg-color: #212121;
    --body-fg-color: #f3f5f9;
    --btn-download-bdr-color: #699eca;
    --btn-download-decoration-bdr-color: #d4d4d4;
    --btn-download-decoration-bg-color: #4a4a4a;
    --btn-download-bg-color: #212121;
    --btn-download-active-bg-color: #4A4A4A;
    --btn-download-fg-color: #699eca;
    --btn-primary-bdr-color: #699eca;
    --btn-primary-bg-color: #699eca;
    --btn-primary-fg-color: #000;
    --btn-secondary-bdr-color: #6b6b6b;
    --btn-secondary-bg-color: #212121;
    --btn-secondary-fg-color: #fff;
    --btn-light-bdr-color: #ccc;
    --btn-light-bg-color: #d4d4d4;
    --btn-light-fg-color: rgb(1, 1, 1);
    --button-input-bdr-color: #6b6b6b;
    --button-input-bg-color: #4a4a4a;
    --button-input-fg-color: #f3f5f9;
    --custom-select-bdr-color: #6b6b6b;
    --custom-select-bg-color: #4a4a4a;
    --custom-select-fg-color: #f3f5f9;
    --cta-header-fg-color: #f3f5f9;
    --doccontent-blockquote-table-caution-bg-color: #171709;
    --doccontent-blockquote-table-note-bdr-color: #84c578;
    --doccontent-blockquote-table-note-bg-color: #4a4a4a;
    --doccontent-blockquote-table-tip-bdr-color: #84c578;
    --doccontent-blockquote-table-tip-bg-color: none;
    --doccontent-blockquote-table-warning-bg-color: #1e0c0c;
    --doccontent-callout-fg-color: #f3f5f9;
    --doccontent-pre-code-bg-color: #4a4a4a;
    --doccontent-table-bdr-color: #6b6b6b;
    --doccontent-table-bg-color: #4a4a4a;
    --doccontent-table-td-bdr-color: #6b6b6b;
    --doccontent-table-td-bg-color: #212121;
    --doccontent-table-td-fg-color: #f3f5f9;
    --doccontent-table-th-bdr-color: #6b6b6b;
    --doccontent-table-th-bg-color: #6b6b6b;
    --doccontent-table-th-fg-color: #f3f5f9;
    --footer-a-fg-color: #699eca;
    --h2-decoration-bg-color: #6b6b6b;
    --header-fg-color: #699eca;
    --hr-bdr-color: #6b6b6b;
    --navbar-bg-color: #212121;
    --navbar-fg-color: #f3f5f9;
    --navbar-toggler-img: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(243, 245, 249, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    --pg-bg-gray-color: #2e2e2e;
    --pg-shoutbox-bg-color: #699eca;
    --pg-shoutbox-fg-color: #000;
    --pg-sidenav-a-fg-color: #699eca;
    --pgcontent-a-decoration-fg-color: #50b0f0;
    --pgcontent-doccontent-a-fg-color: #699eca;
    --pgcontent-fa-fg-color: #6b6b6b;
    --table-td-bdr-color: #4a4a4a;
    --table-td-fg-color: #f3f5f9;
    --table-th-bdr-color: #4a4a4a;
    --table-th-bg-color: #303030;
    --table-th-fg-color: #f3f5f9;
    --td-fm-no-bg-color: #ff8882;
    --td-fm-no-fg-color: #000;
    --td-fm-obs-fg-color: #000;
    --td-fm-unk-fg-color: #000;
    --td-fm-yes-bg-color: #89ff96;
    --td-fm-yes-fg-color: #000;
}


/** GLOBAL CONFIGURATION */
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: var(--body-fg-color);
  background-color: var(--body-bg-color);
  font-size: 11.5pt;
}

input, select, textarea, .btn-default {
  background-color: var(--button-input-bg-color);
  border-color: var(--button-input-bdr-color);
  color: var(--button-input-fg-color);
}

.table th {
  background-color: var(--table-th-bg-color);
  border-color: var(--table-th-bdr-color) !important;
  color: var(--table-th-fg-color);
}

/* We need to do this otherwise the striping on the feature matrix will break */
/* unless someone brighter than me can figure it out of course. */
@media (prefers-color-scheme: dark) {
  .table th {
    background-color: var(--table-th-bg-color) !important;
  }
}

.table td {
  background-color: var(--table-td-bg-color);
  border-color: var(--table-td-bdr-color);
  color: var(--table-td-fg-color);
}

p {
  margin-bottom: 0.5rem;
}

dl, ol, ul {
  margin-bottom: 0.5rem;
}

.table td, .table th {
  padding: 0.5rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  color: var(--header-fg-color);
  /*margin: 0 0 0.5em 0;*/
}

h2 {
  font-size: 1.6em;
  margin: 1em 0;
}

h3 {
  font-size: 1.4em;
  font-weight: initial;
}

.h4, h4 {
  font-size: 1.1rem;
  text-transform: capitalize !important;
}

.h5, h5 {
  font-size: 0.98rem;
}

#pgContentWrap h2:after, #pgSideNav h2:after {
  background-color: var(--h2-decoration-bg-color);
  content: '\a0';
  flex-grow: 1;
  height: 2px;
  position: relative;
  margin: .5em 0 .5em .75em;
}

#pgContentWrap h2, #pgSideNav h2 {
  display: flex;
  flex-direction: row;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: none;
  color: var(--header-a-fg-color);
}

a, .news a {
  color: var(--a-fg-color);
  font-weight: 600;
  text-decoration: none;
  -moz-transition: color .2s ease-in-out;
  -webkit-transition: color .2s ease-in-out;
  -ms-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
}

a:hover, a:active {
  color: var(--a-highlight-fg-color);
  text-decoration: none;
}

b, strong, th {
  font-weight: 600;
  color: var(--b-fg-color) !important;
}

i, em {
  font-style: italic;
}

sub {
  position: relative;
  top: 0.5em;
  font-size: 0.8em;
}

sup {
  position: relative;
  top: -0.5em;
  font-size: 0.8em;
}

hr {
  border: 0;
  border-top: solid 2px var(--hr-bdr-color);
  margin: 0 0 3em 0;
}

.image {
  width: 100%;
  margin: 1em 0 2em 0;
}

/**
p, ul, ol, dl, table {
  margin-bottom: 3em;
}*/

/** Global styles */

.pg-bg-blue {
  background-color: var(--pg-bg-blue-color);
}

.pg-bg-light-blue {
  background-color: var(--pg-bg-light-blue-color);
}

.pg-bg-purple {
  background-color: var(--pg-bg-purple-color);
}

.pg-bg-gray {
  background-color: var(--pg-bg-gray-color);
}

.pg-border-color-blue {
  border-color: var(--pg-bdr-blue-color);
}

.pg-text-blue {
  color: var(--pg-text-blue-color)
}

.pg-text-light-blue {
  color: var(--pg-text-blue-color);
}

.pgFrontFeature {
  background: var(--pg-feature-bg-color) url(/media/img/feature/feature_elephant.png) right bottom no-repeat;
  /* background: var(--pg-feature-bg-color) url(/media/img/feature/feature_elephant.png) right bottom no-repeat; */
}

.pgFrontContainer {
  padding: 1em 2em;
}

/* Utility */
.ws-pre {
  white-space: pre;
}

/* #BLOCKQUOTE */

blockquote {
  border-left: solid 5px var(--blockquote-bdr-color);
  padding: 0 4em 0 .5em;
  margin: 1em 0 1em 0;
  font-style: italic;
}

.item blockquote {
  border-left: none;
  margin: 0;
}

.item blockquote img {
  margin-bottom: 10px;
}

.item blockquote p:before {
  content: "\f10d";
  font-family: 'Fontawesome';
  float: left;
  margin-right: 10px;
}

/* # CAROUSEL */

.col-center {
  margin: 0 auto;
  float: none !important;
}
.carousel {
  margin: 0 auto 4rem auto;
  padding: 0 3rem;
}
.carousel .item {
  text-align: center;
  overflow: hidden;
  min-height: 12rem;
}
.carousel .item .img-box {
  width: 135px;
  height: 135px;
  margin: 0 auto;
  padding: 5px;
  border: 1px solid var(--carousel-image-bdr-color);
  border-radius: 50%;
}
.carousel .img-box img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.carousel .testimonial {
  margin-top: 4rem;
  padding: 0 1rem;
}
.carousel .overview {
  font-style: italic;
  color: var(--carousel-fg-color);
}
.carousel .overview b {
  text-transform: uppercase;
  color: var(--carousel-b-fg-color);
}
.carousel .carousel-control {
  width: 40px;
  height: 40px;
  margin-top: -20px;
  top: 50%;
  background: none;
}
.carousel-control i {
  font-size: 68px;
  line-height: 42px;
  position: absolute;
  display: inline-block;
  color: var(--carousel-i-fg-color);
  text-shadow: 0 3px 3px var(--carousel-i-sdw-v-color), 0 0 0 var(--carousel-i-sdw-color);
}
.carousel .carousel-indicators {
  bottom: -40px;
}
.carousel-indicators li, .carousel-indicators li.active {
  width: 10px;
  height: 10px;
  margin: 1px 3px;
  border-radius: 50%;
}
.carousel-indicators li {
  background: var(--carousel-li-bg-color);
  border-color: transparent;
  box-shadow: inset 0 2px 1px var(--carousel-li-sdw-color);
}
.carousel-indicators li.active {
  background: var(--carousel-li-active-bg-color);
  box-shadow: inset 0 2px 1px var(--carousel-li-sdw-color);
}

/* #FEATURED SECTIONS */

.community {
  width: 1em !important;
  margin: 0 5px 0 0 !important;
  display: inline-block;
}

.feature-grid {
  background-color: var(--feature-grid-bg-color);
  text-align: center;
  padding: 3em 0;
  border: solid 1px var(--feature-grid-bdr-color);
}

.feature-grid h3 {
  color: var(--feature-grid-header-color);
}

li.non-badged {
  padding-left: 2em;
}

/* #LIST */

ul.errorlist {
  color: var(--ul-errorlist-fg-color);
  font-weight: 600;
  list-style-type: none;
  padding: 0;
}

ul.meta {
  font-size: 0.85em;
  padding-left: 0;
}

ul.meta li {
  display: inline-block;
  margin-right: 1em;
}

ul.meta li i {
  margin-right: 4px;
}

ul.divided > li {
  border-top: solid 2px var(--ul-divided-bdr-color);
  padding-top: 1.35em;
  margin-top: 1.35em;
  list-style: none;
}

ul.divided > li:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.divided h3 {
  font-size: 1.2em;
}

ul.bold {
  font-weight: 600;
  list-style-type: none;
  padding-left: 0;
}

/* #ICONS */

.icon {
  position: relative;
  text-decoration: none;
}

.icon:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}

.icon > .label {
  display: none;
}

/** BASE STYLES */

/* #SIDEBAR UL STYLING */

#pgSideNav {
  padding: 1em;
}

#pgSideNav a {
  color: var(--pg-sidenav-a-fg-color);
  font-weight: normal;
}

#pgSideNav ul {
  list-style-type: circle;
  padding-left: 1.3em;
}

/* DOCUMENTATION */
/*
 * The documentation classes are divided up by newer/older version of the docs
 * Newer version of the docs are "lowercase" classed
 * Older version of the docs are "UPPERCASE" classed
 * Also, newer styles will be in classes vs. older ones that have i
 */

.docs-version-selected {
  font-weight: 600;
  text-decoration: underline;
}

/**
 * docContent represents the main "box" where the documentation is rendered.
 * We namespace everything to ensure these styles do not interfere across the
 * rest of the site
 */

/**
 * General styles
 */

#pgContentWrap .alert-warning {
  background-color: var(--alert-warning-bg-color);
  border-color: var(--alert-warning-bdr-color);
}

#docContent {
  font-size: 0.9rem;
  margin-top: 1rem;
}

#docContent p {
  margin-bottom: 1rem;
}

#docContent dt {
  font-weight: 600;
}

#docContent hr {
  margin: 0 0 0.5em 0;
}

/* #docContent hr.c1 {
  margin: 0 0 3em 0;
} */

/* For code, order matters here.
 * For instance, we don't want to have any any padding on code blocks that
 * are within the "screen" element
 * This is also higher up as some inherited rules affected the display of the
 * code in certain areas
 */

#docContent br.table-break {
  display: none;
}

#docContent pre {
  padding: 0.8rem;
}

pre,
code,
#docContent kbd,
#docContent tt.LITERAL,
#docContent tt.REPLACEABLE {
  font-size: 0.9rem !important;
  color: var(--doccontent-pre-code-fg-color) !important;
  background-color: var(--doccontent-pre-code-bg-color);
  border-radius: .25rem;
  margin: .6rem 0;
  font-weight: 400;
}

#docContent .note pre,
#docContent .note code,
#docContent .note kbd,
#docContent .note tt.LITERAL,
#docContent .note tt.REPLACEABLE,
#docContent .warning pre,
#docContent .warning code,
#docContent .warning kbd,
#docContent .warning tt.LITERAL,
#docContent .warning tt.REPLACEABLE,
#docContent .tip pre,
#docContent .tip code,
#docContent .tip kbd,
#docContent .tip tt.LITERAL,
#docContent .tip tt.REPLACEABLE,
#docContent .caution pre,
#docContent .caution code,
#docContent .caution kbd,
#docContent .caution tt.LITERAL,
#docContent .caution tt.REPLACEABLE {
  background-color: var(--doccontent-pre-code-callout-bg-color) !important;
  border: none;
  padding: 0 !important;
}

#docContent .SCREEN code,
#docContent .screen code {
  padding: 0;
}

#docContent .USERINPUT > code,
#docContent .userinput > code {
  font-weight: 600;
}

#docContent .REPLACEABLE,
#docContent tt.REPLACEABLE,
#docContent .replaceable {
  font-weight: 800;
  font-style: italic;
}

#docContent .REPLACEABLE > code,
#docContent .replaceable > code {
  font-weight: 800;
}

/**
 * Documentation Tables
 */
#docContent .table .title > strong,
#docContent .TABLE,
#docContent .TABLE b {
  color: var(--doccontent-table-fg-color);
  font-weight: 600;
}

#docContent table.table,
 #docContent table.informaltable,
 #docContent table.CALSTABLE {
   background-color: var(--doccontent-table-bg-color);
   border: 2px solid var(--doccontent-table-bdr-color);
   border-spacing: 0;
   border-collapse: collapse;
   width: initial;
   margin: 2ex 0;
 }

#docContent table.table th,
#docContent table.informaltable th,
#docContent table.CALSTABLE th {
  background-color: var(--doccontent-table-th-bg-color);
  color: var(--doccontent-table-th-fg-color);
  border-color: var(--doccontent-table-th-bdr-color);
  padding: 0.5ex 0.5ex;
}

#docContent table.table th[align="left"],
#docContent table.table td[align="left"] {
  text-align: left;
}

#docContent table.table th[align="center"],
#docContent table.table td[align="center"] {
  text-align: center;
}

#docContent table.table th[align="right"],
#docContent table.table td[align="right"] {
  text-align: right;
}

#docContent table.table th[valign="top"],
#docContent table.table td[valign="top"] {
  vertical-align: top;
}

#docContent table.table th[valign="middle"],
#docContent table.table td[valign="middle"] {
  vertical-align: middle;
}

#docContent table.table th[valign="bottom"],
#docContent table.table td[valign="bottom"] {
  vertical-align: top;
}

#docContent table.table td,
#docContent table.informaltable td,
#docContent table.CALSTABLE td {
  background-color: var(--doccontent-table-td-bg-color);
  color: var(--doccontent-table-td-fg-color);
  border-color: var(--doccontent-table-td-bdr-color);
  padding: 0.5ex 0.5ex;
}

/** We use some overrides for code in tables, which makes it more readable */
#docContent table.table tt,
#docContent table.informaltable tt,
#docContent table.CALSTABLE tt,
#docContent table.table code,
#docContent table.informaltable code,
#docContent table.CALSTABLE code {
  background-color: var(--doccontent-table-tt-code-bg-color);
  color: var(--doccontent-table-tt-code-fg-color);
  font-size: inherit !important;
  margin: 0;
  padding: 0;
  word-break: unset;
}

#docContent table.table th.func_table_entry p,
#docContent table.table td.func_table_entry p {
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  padding-left: 4em;
  text-align: left;
}

/** Formatting for entries in tables of catalog/view columns **/
#docContent table.table th.catalog_table_entry p,
#docContent table.table td.catalog_table_entry p {
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  padding-left: 4em;
  text-align: left;
}

#docContent table.table th.catalog_table_entry p.column_definition {
  text-indent: -3.5em;
  word-spacing: 0.25em;
}

#docContent table.table td.catalog_table_entry p.column_definition {
  text-indent: -3.5em;
}

#docContent table.table p.column_definition code.type {
  padding-left: 0.25em;
  padding-right: 0.25em;
}

#docContent table.table td.catalog_table_entry pre.programlisting {
  background-color: var(--doccontent-table-td-pre-bg-color);
  border: 0;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
  padding: 0 0 0 4em;
}

#docContent table.table p.func_signature {
  text-indent: -3.5em;
}

#docContent table.table td.func_table_entry pre.programlisting {
  background-color: var(--doccontent-table-td-pre-bg-color);
  border: 0;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
  padding: 0 0 0 4em;
}

/**
 * Titles, Navigation
 */
#docContent .title {
  display: block;
}

#docContent .title:after {
  display: none;
}

#docContent h2.SECT2 tt,
#docContent .title code {
  background-color: var(--doccontent-title-code-bg-color) !important;
  color: var(--doccontent-title-code-fg-color) !important;
  font-size: inherit !important;
}

#docContent h2 code {
  font-size: inherit !important;
  margin: 0 0.5em;
}

#docContent .NAVHEADER table th,
#docContent .navheader table th {
  text-align: center;
}

/**
 * Table of contents
 */
#docContent .TOC,
#docContent .toc {
  margin-bottom: 1rem;
}

#docContent div.TOC > dl > dd,
#docContent div.toc > dl > dd {
  margin-left: 2rem;
}

#docContent div.TOC > dl > dt.c2,
#docContent div.toc > dl > dt.c2 {
  font-weight: 400;
  margin-bottom: 1rem;
}

#docContent .TOC tt, #docContent .TOC dt a,
#docContent .toc tt, #docContent .toc dt a {
  font-weight: 400;
}

#docContent .TOC dd, #docContent .TOC dl,
#docContent .toc dd, #docContent .toc dl {
  margin: 0;
}

#docContent .TOC span.refpurpose,
#docContent .toc span.refpurpose {
  font-weight: normal;
}

/** Do not show any highlighting on code literals in TOC */
#docContent .TOC tt,
#docContent .toc code {
  background-color: var(--doccontent-code-bg-color) !important;
  color: var(--doccontent-code-fg-color) !important;
}

/** Additional formatting for "simplelist" structures */
#docContent table.simplelist td {
  padding-left: 2em;
  padding-right: 2em;
}

/**
 * Styles for anchors to deeper documentation links. This makes an element
 * (currently "#") appear next to links, so a reader can click on it and have
 * the anchor appear in the URL.
 */
#docContent a.id_link {
  color: inherit;
  visibility: hidden;
  text-decoration: none;
}

#docContent a.id_link:hover:after {
  content: "Permalink to this heading";
  font-size: 10px;
  font-weight: normal;
  text-decoration: none;
  border: 1px solid #444444;
  text-align: center;
  border-radius: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
  position: relative;
  top: 20px;
}

#docContent *:hover > a.id_link {
  visibility: visible;
}

/**
  * Various callout boxes for docs, including warning, caution, note, tip
  */
#docContent table.CAUTION, table.WARNING,
#docContent blockquote.CAUTION, #docContent blockquote.NOTE, #docContent blockquote.TIP, #docContent blockquote.WARNING,
#docContent .caution, #docContent .note, #docContent .tip, #docContent .warning
{
  border-width: 1px;
  border-style: solid;
  font-style: initial;
  margin: 4ex auto;
  max-width: 40rem;
  padding: 1rem;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  border-radius: 8px;
}

#docContent table.WARNING {
  border-color: var(--doccontent-table-warning-bdr-color);
}

#docContent table.CAUTION, table.WARNING {
  display: block;
  overflow: auto;
  padding: 0;
}

#docContent table.CAUTION td, #docContent table.CAUTION th,
#docContent table.WARNING td, #docContent table.WARNING th {
  border-width: 0;
  padding-left: 2ex;
  padding-right: 2ex;
}

#docContent table.CAUTION td, #docContent table.CAUTION th {
  background-color: var(--doccontent-table-td-caution-bg-color);
  border-color: var(--doccontent-table-td-caution-bdr-color);
}

#docContent table.WARNING td, #docContent table.WARNING th {
  background-color: var(--doccontent-table-td-warning-bg-color);
  border-color: var(--doccontent-table-td-warning-bdr-color);
}

#docContent table.CAUTION,
#docContent table.WARNING,
#docContent blockquote.CAUTION p:last-child,
#docContent blockquote.NOTE p:last-child,
#docContent blockquote.TIP p:last-child,
#docContent blockquote.WARNING p:last-child,
#docContent .caution p:last-child,
#docContent .note p:last-child,
#docContent .tip p:last-child,
#docContent .warning p:last-child
{
  margin-bottom: 0 !important;
}

#docContent blockquote.CAUTION,
#docContent table.CAUTION,
#docContent .caution {
  border-color: var(--doccontent-blockquote-table-caution-bdr-color);
  background-color: var(--doccontent-blockquote-table-caution-bg-color);
}

#docContent blockquote.NOTE,
#docContent .note {
  border-color: var(--doccontent-blockquote-table-note-bdr-color);
  background-color: var(--doccontent-blockquote-table-note-bg-color);
}

#docContent blockquote.TIP,
#docContent .tip {
  border-color: var(--doccontent-blockquote-table-tip-bdr-color);
  background-color: var(--doccontent-blockquote-table-tip-bg-color);
}

#docContent blockquote.WARNING,
#docContent .warning {
  background-color: var(--doccontent-blockquote-table-warning-bg-color);
  border-color: var(--doccontent-blockquote-table-warning-bdr-color);
}

#docContent blockquote.TIP h3, #docContent blockquote.NOTE h3, #docContent blockquote.CAUTION h3, #docContent blockquote.WARNING h3,
#docContent .tip h3, #docContent .note h3, #docContent .caution h3, #docContent .warning h3 {
  text-align: center;
  margin: 0.25rem 0 0.5rem 0;
  color: var(--doccontent-callout-fg-color);
}


#docContent blockquote.WARNING td.c2, #docContent blockquote.WARNING td,
#docContent .warning td.c2, #docContent .warning td {
  border: 1px solid var(--doccontent-td-warning-bdr-color);
}

#docContent blockquote.WARNING td.c2,
#docContent .warning td.c2 {
  color: var(--doccontent-blockquote-td-warning-fg-color);
  background-color: var(--doccontent-blockquote-td-warning-bg-color);
}

#docContent .warning td.c2 {
  background-color: var(--doccontent-td-warning-bg-color);
}

/**
 * Background color of code should be transparent
 */

#docContent table.WARNING code,
#docContent blockquote.NOTE code {
   background-color: var(--doccontent-code-warning-note-bg-color) !important;
}

/**
 * Listing out variables
 */
#docContent .VARIABLELIST dt,
#docContent .variablelist dt {
  font-family: monospace;
  font-weight: 400;
}

#docContent .VARIABLELIST dt,
#docContent .variablelist dt {
  font-family: monospace;
  font-weight: 400;
}

#docContent .variablelist dd {
  margin-top: 1rem;
}

#docContent .VARIABLELIST dd,
#docContent .variablelist dd {
  margin-inline-start: 2rem;
}

#docContent ul.itemizedlist {
  margin-left: 2.5rem;
}

#docContent ul.itemizedlist > li > p {
  margin-left: 0 !important;
}

#docContent .VARIABLELIST p,
#docContent .variablelist p,
#docContent .VARIABLELIST pre,
#docContent .variablelist pre {
  margin: 1rem 0 1rem 2rem !important;;
}
/**
 * Footnotes
 */
#docContent .FOOTNOTES hr,
#docContent .footnotes hr {
  margin-bottom: 1.25rem;
}

/* #PGCONTENTWRAP */

#pgContentWrap a:not([href]):not([tabindex]),
#docContent a:not([href]):not([tabindex]) {
  text-decoration: none;
  color: var(--pgcontent-doccontent-a-not-tabindex-fg-color) !important;
}

#pgContentWrap a, #docContent a {
  color: var(--pgcontent-doccontent-a-fg-color);
  text-decoration: none;
  -moz-transition: color .2s ease-in-out;
  -webkit-transition: color .2s ease-in-out;
  -ms-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
}

#pgContentWrap a:hover, #pgContentWrap a:active {
  color: var(--pgcontent-a-decoration-fg-color);
  text-decoration: none;
}

#pgContentWrap {
  padding: 1em 2em;
  margin: 0 auto;
  width: 100%;
}

#pgContentWrap h3, #pgContentWrap h4 {
  margin: 1em 0;
}

#pgContentWrap .fa, #pgContentWrap .far, #pgContentWrap .fas, #pgContentWrap .fab {
  color: var(--pgcontent-fa-fg-color);
  margin: 0 5px;
}

#pgContentWrap .logo-preview {
  max-width: 10% !important;
}

#pgContentWrap i.fa.fa-heart {
  color: var(--i-fa-heart-fg-color);
}

i.fas {
  color: var(--i-fas-fg-color);
}

/* #CODE */

pre {
  padding: 0.8rem;
  border: 1px solid var(--pgcontent-pre-bdr-color);
  margin: 1rem 0;
}

pre.code {
  padding: .2rem .4rem;
  font-size: 90%;
  border-radius: .25rem;
}

/* News and events getting markdown from end users */
#pgContentWrap .newseventwrap h1 {
  font-size: 1.2em;
}
#pgContentWrap .newseventwrap h2 {
  display: block;
  font-size: 1.1em;
}
#pgContentWrap .newseventwrap h3 {
  font-size: 1.0em;
}
#pgContentWrap strong.event-highlight {
  font-weight: 600;
}
hr.eventseparator {
  width: 80%;
  margin-bottom: 1em;
}


/* #STYLEDSELECT */

/**
* Used on mailinglists.html as part of the mailinglist subscribe functionality.
*/

.styledSelect, .styledInput {
  width: 100%;
  height: 34px;
  overflow: hidden;
  background-color: var(--styled-select-input-bg-color);
  border: solid 2px var(--styled-select-input-bdr-color);
}

.styledInput[name="search"] {
  width: 98%;
  height: 3.6em;
}

/* Buttons */

.btn {
  width: 14em;
  margin: 1em auto;
}

.btn-double-width {
  width: 28em;
}

.btn-center {
  text-align: center;
  display: block;
}

.btn-primary {
  background-color: var(--btn-primary-bg-color);
  border-color: var(--btn-primary-bdr-color);
  color: var(--btn-primary-fg-color) !important;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary.active, .btn:active:focus, .btn.active:focus {
  background-color: var(--btn-decoration-bg-color);
  border-color: var(--btn-decoration-bdr-color);
  cursor: pointer;
}

.btn-outline-secondary {
  background-color: var(--btn-secondary-bg-color);
  border-color: var(--btn-secondary-bdr-color);
  color: var(--btn-secondary-fg-color) !important;
}

.btn-inline-block {
  display: inline-block;
}

.form-row .btn-primary {
  margin: 0.5em 0;
}

button.btn.btn-default {
  color: var(--btn-default-fg-color);
  background-color: var(--btn-default-bg-color);
  border-color: var(--btn-default-bdr-color);
  width: initial;
  margin: auto 0;
  height: 100%;
  cursor: pointer;
}

.btn-light {
  color: var(--btn-light-fg-color);
  background-color: var(--btn-light-bg-color);
  border-color: var(--btn-light-bdr-color);
}

/* Input */

input.form-control {
  height: 2.5em;
  margin: auto 0;
}

input#q {
  font-size: 1em;
  font-family: 'Open Sans', sans-serif;
}

input {
  padding-left: 0.5em;
}

input[type=checkbox] {
  vertical-align: middle;
  margin-left: 5px;
  width: auto;
}

input[type=checkbox]:focus {
  outline: none;
  box-shadow: none;
}

.custom-select {
  background-color: var(--custom-select-bg-color) !important;
  border-color: var(--custom-select-bdr-color) !important;
  color: var(--custom-select-fg-color) !important;
  margin: 2px;
}

/* For the thread viewer, keep the width inline with the parent element */
#thread_select.custom-select {
  width: auto;
}

th.formfieldnamecontainer {
  padding-right: 1em;
}

.pgGenericFormTable input, .pgGenericFormTable textarea {
  margin: 0.5em 0;
}

.form-check div.describedcheckbox {
  margin-left: 3rem;
  font-style: italic;
}

.form-check-input[type=radio] {
  margin-top: .4rem;
}

.text-center.fixed-height h3 {
  height: 3.5em;
}

fieldset.form-group {
    border: 1px groove var(--fieldset-form-group-bdr-color);
}
fieldset.form-group legend {
    width:inherit;
    padding-left: 1rem;
    padding-right: 1rem;
}

/** This code is for pgarchives */

/**
 * general navigation padding just for the archives; removable after the
 * universal notifier is available
 */
 .archive {
   margin-top: 4rem;
 }

/** Thread Lists */
.thread-list {
  font-size: 0.8em;
}

.thread-list th, .thread-list td {
  padding: 0;
}

/** Messages */

h3.messages {
  text-transform: none;
  font-size: 1.2em;
}

.message-header {
  font-size: 0.7em;
  line-height: 1.2em;
  padding-bottom: 0.3em;
}

.message-header th, .message-header td {
  padding: 0;
 }

.message-header select {
  height: auto;
  padding: 0;
}

.message-content {
  display: inline-block;
  font-family: monospace, monospace;
  font-size: 0.7em;
  line-height: 1.2em;
  margin: 0 auto;
  white-space: pre-wrap;
}

.message-content p {
  margin-bottom: -1.2em;
}

.message-responses {
  font-size: 0.7em;
  line-height: 1.5em;
}

.message-attachments, .message-nav {
  font-size: 0.7em;
  line-height: 1.2em;
}
/* Message Subjects */
h1.subject {
  text-transform: none;
  font-size: 1.2em;
}

/* Feature matrix */
form#featurematrix_version_filter {
  text-align: center;
}
input.featurematrix_version {
  margin-right: 15px;
}
input.featurematrix_version:last-child {
  margin-right: 0;
}
hr#featurematrix_version_divider {
  margin: 0;
}

td.fm_no {
  background-color: var(--td-fm-no-bg-color);
  color: var(--td-fm-no-fg-color);
}
td.fm_no::before {
    content: "No";
}
td.fm_yes {
  background-color: var(--td-fm-yes-bg-color);
  color: var(--td-fm-yes-fg-color);
}
td.fm_yes::before {
    content: "Yes";
}
td.fm_obs {
  background-color: var(--td-fm-obs-bg-color);
  color: var(--td-fm-obs-fg-color);
}
td.fm_obs::before {
    content: "Obsolete";
}
td.fm_unk {
  background-color: var(--td-fm-unk-bg-color);
  color: var(--td-fm-unk-fg-color);
}
td.fm_unk::before {
    content: "?";
}

div#feature-matrix-filter {
    border-color: var(--hr-bdr-color) !important;
}

/* Code of Conduct Committee */
table.cocc-table tbody tr td:nth-child(1) {
  width: 20%;
}

table.coc-report-table thead tr th:nth-child(1) {
  width: 50%;
}

/* Contributors */
table.contributor-table thead tr th {
  width: 50%;
}

/* News archive */
#pgContentWrap span.newstag {
    white-space: nowrap;
}
#pgContentWrap span.newstag a i.fa {
    color: var(--pgcontent-span-newstag-fg-color);
}
#pgContentWrap div.newsdate span.badge i.fa {
    color: var(--pgcontent-span-newsdatefg-color);
}
#pgContentWrap div.newstags {
    padding-bottom: 3rem;
}

/* Downloads/products */

.btn-download {
  border-color: var(--btn-download-bdr-color);
  border-width: 2px;
  color: var(--btn-download-fg-color) !important;
  background-color: var(--btn-download-bg-color);
}

.btn-download:hover {
  background-color: var(--btn-download-decoration-bg-color);
  border-color: var(--btn-download-decoration-bdr-color);
}

.btn-download-active {
  background-color: var(--btn-download-active-bg-color);
}

.download-subnav {
  display: none;
}

table.product-table thead tr th:nth-child(1) {
  width: 60%;
}
table.product-table thead tr th:nth-child(2) {
  width: 10%;
}
table.product-table thead tr th:nth-child(3) {
  width: 10%;
}
table.product-table thead tr th:nth-child(4) {
  width: 20%;
}

/* Downloads // yum */
li#dnfmodule {
  display: none;
}

/* Professional servies */
table.profserv-table tbody tr th {
  width: 20%;
}

/* Sponsors */
table.sponsor-table tbody tr th {
  width: 20%;
}
table.sponsor-table tbody tr td:nth-child(2) {
  width: 50%;
}
table.sponsor-table tbody tr td:nth-child(3) {
  width: 30%;
}

/* Docs/books */
img.bookcover {
  width: 130px;
  height: 160px;
  background-image: url('/media/img/docs/books/combined.webp');
}

/**
* This sets the rule for the rendering in the sponsors table. The name is chosen
* to ensure compatibility with various browser plugins that may otherwise hide
* images.
**/
img.organisation-logo {
  max-height: 65px;
  max-width: 150px;
}
th.organisation-logo {
  height: 65px;
  width: 150px;
  background-color: white !important;
  text-align: center;
}

/** Release Notes */
#release-notes .navheader,
#release-notes .navfooter,
#release-notes .NAVHEADER,
#release-notes .NAVFOOTER,
#release-notes .titlepage,
#release-notes h1.SECT1,
#release-notes .toc {
  display: none;
}

#release-notes .version-list h2:after {
  content: none;
}

details.release-notes-list ul {
  list-style-type: none;
}

details.release-notes-list {
  margin-bottom: 0.3rem;
}

/* Moderation preview */
.moderation-mdpreview-wrap {
    max-width: 650px;
}

.moderation-preview-iframe {
    width: 100%;
    min-height: 400px;
    border: 1px solid var(--button-input-bdr-color);
    border-radius: 5px;
    background-color: #fff;
}

/* Buttons that are images */
button.imagebutton {
    border: 0;
    padding: 0;
}


/** ALL RESPONSIVE QUERIES HERE */
/* Small devices (landscape phones, 576px and up)*/

@media (max-width: 992px) {
  .archive {
    margin-top: 2rem;
  }
  #docContent table.table {
    font-size: 70%;
  }

}

@media (max-width: 768px) {

  .text {
    height: initial;
  }

  ul.divided, ul.menu {
    padding: 0;
    text-align: center;
  }

  ul.feature {
    padding: 0 0 1em 0 !important;
  }

  .feature-grid {
    padding: 0;
  }

  #pgContentWrap {
    padding: 0;
  }

  #pgContentWrap ul {
    padding-left: 1em;
  }

  #docContent table.table {
    font-size: 50%;
  }

}

@media (min-width: 576px) {
  /** NAVBAR */
  .nav-item > a {
    font-size: 0.95rem;
  }
}
@media (max-width: 575px) {
  /** HOMEPAGE JUMBOTRON */
  .pg-jumbotron-header {
    font-size: 1.5rem;
  }

  .btn-double-width {
    width: 18em;
  }
}

/* Script copy buttons */
.pg-script-container {
  position: relative;
}

.pg-script-container pre.code {
  padding-right: 4rem;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
}

.pg-script-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1rem;
  padding: 4px 6px;
  cursor: pointer;
  transition: color 0.2s;
}

.pg-script-copy-btn-root {
  right: 2rem;
}

.pg-script-copy-btn i {
  color: #555 !important;
  margin: 0 !important;
  transition: color 0.2s;
}

.pg-script-copy-btn:hover i {
  color: #336791 !important;
}

.pg-script-copy-btn.copied i {
  color: #28a745 !important;
}

[data-theme="dark"] .pg-script-copy-btn i {
  color: #ccc !important;
}

[data-theme="dark"] .pg-script-copy-btn:hover i {
  color: #fff !important;
}

[data-theme="dark"] .pg-script-copy-btn.copied i {
  color: #7dff7d !important;
}

.nobr {
  white-space: nowrap;
}

/* media/css/normalize.css */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 2; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/* media/css/pgsql.css */
/**
 * pgsql.cc theme layer
 * -----------------------------------------------------------------------
 * Loaded after main.css / normalize.css through /dyncss/base.css.
 *
 * This file owns the site chrome (header, drawer, shout box, footer), the
 * home page composition, and the page furniture used by inner pages. The
 * upstream stylesheet (main.css) keeps the documentation and form styles;
 * its colour variables are re-pointed at the tokens declared here so every
 * inner page picks up the same PostgreSQL slate-blue palette.
 *
 * Structure follows the OINK 1.0 shell: a sticky three-zone navbar
 * (brand / centred menu with hover panels / utilities), a "fat" footer
 * with a brand column and link columns, and a slim foot line.
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/media/webfonts/brand/chakra-petch-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/media/webfonts/brand/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/media/webfonts/brand/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

/* --------------------------------------------------------------- tokens */

:root {
  /* brand */
  --pg-blue: #336791;
  --pg-blue-rgb: 51, 103, 145;
  --pg-blue-deep: #264d6d;
  --pg-navy: #193145;
  --pg-sky: #5b9bd1;
  --pg-azure: #1f7ac0;

  /* surfaces and ink */
  --pg-canvas: #f3f6f9;
  --pg-surface: #ffffff;
  --pg-surface-2: #e9eff5;
  --pg-ink: #1c2b3a;
  --pg-ink-2: #4b5e70;
  --pg-muted: #6f8397;
  --pg-heading: #264d6d;
  --pg-line: rgba(51, 103, 145, 0.16);
  --pg-line-strong: rgba(51, 103, 145, 0.34);
  --pg-wash: rgba(51, 103, 145, 0.07);
  --pg-wash-strong: rgba(51, 103, 145, 0.12);

  /* links and controls. Same split as postgresql.org: links are blue by
     default; links inside the inner-page content area (#pgContentWrap) and
     the documentation (#docContent) are wine red (#840032 upstream). Chrome
     hover states use --pg-hover, the vivid azure. */
  --pg-link: #2b5f8c;
  --pg-link-hover: #1f7ac0;
  --pg-link-content: #9a2f3f;
  --pg-link-content-hover: #c43a3a;
  --pg-hover: #1f7ac0;
  --pg-primary: #336791;
  --pg-primary-hover: #264d6d;
  --pg-code-bg: #ffffff;
  --pg-code-inline-bg: rgba(28, 43, 58, 0.06);

  /* chrome */
  --pg-header-bg: rgba(243, 246, 249, 0.86);
  --pg-shadow-sm: 0 2px 10px rgba(25, 49, 69, 0.08);
  --pg-shadow-md: 0 14px 38px rgba(25, 49, 69, 0.14);
  --pg-radius: 12px;
  --pg-radius-sm: 8px;
  --pg-nav-h: 60px;
  --pg-brand-from: #264d6d;
  --pg-brand-to: #5b9bd1;

  /* type and motion */
  --pg-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Segoe UI', sans-serif;
  --pg-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pg-font-brand: 'Chakra Petch', 'Open Sans', sans-serif;
  --pg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pg-dur: 160ms;

  /* re-point the upstream variables at the palette above */
  --a-fg-color: var(--pg-link);
  --a-highlight-fg-color: var(--pg-link-hover);
  --b-fg-color: var(--pg-ink);
  --body-bg-color: var(--pg-canvas);
  --body-fg-color: var(--pg-ink);
  --header-fg-color: var(--pg-heading);
  --h2-decoration-bg-color: var(--pg-line);
  --hr-bdr-color: var(--pg-line);
  --blockquote-bdr-color: var(--pg-line-strong);
  --pg-bg-gray-color: var(--pg-surface-2);
  --pg-feature-bg-color: var(--pg-surface-2);
  --pg-sidenav-a-fg-color: var(--pg-ink-2);
  --pgcontent-doccontent-a-fg-color: var(--pg-link-content);
  --pgcontent-doccontent-a-not-tabindex-fg-color: var(--pg-ink);
  --pgcontent-a-decoration-fg-color: var(--pg-link-content-hover);
  --pgcontent-fa-fg-color: var(--pg-blue);
  --pgcontent-pre-bdr-color: var(--pg-line);
  --i-fas-fg-color: var(--pg-blue);
  --footer-a-fg-color: var(--pg-ink-2);
  --feature-i-fg-color: var(--pg-blue);
  --feature-grid-bg-color: var(--pg-blue);
  --feature-grid-bdr-color: var(--pg-surface);
  --cta-bg-color: var(--pg-navy);
  --btn-primary-bg-color: var(--pg-primary);
  --btn-primary-bdr-color: var(--pg-primary);
  --btn-decoration-bg-color: var(--pg-primary-hover);
  --btn-decoration-bdr-color: var(--pg-primary-hover);
  --btn-secondary-bdr-color: var(--pg-line-strong);
  --btn-secondary-fg-color: var(--pg-heading);
  --btn-light-bg-color: var(--pg-blue-deep);
  --btn-light-bdr-color: var(--pg-blue-deep);
  --btn-download-bdr-color: var(--pg-blue);
  --btn-download-fg-color: var(--pg-blue-deep);
  --btn-download-bg-color: var(--pg-surface);
  --btn-download-decoration-bg-color: var(--pg-wash-strong);
  --btn-download-active-bg-color: var(--pg-wash-strong);
  --btn-default-bdr-color: var(--pg-line-strong);
  --btn-default-bg-color: var(--pg-surface);
  --btn-default-fg-color: var(--pg-ink);
  --button-input-bdr-color: rgba(51, 103, 145, 0.28);
  --button-input-bg-color: var(--pg-surface);
  --button-input-fg-color: var(--pg-ink);
  --custom-select-bdr-color: rgba(51, 103, 145, 0.28);
  --custom-select-bg-color: var(--pg-surface);
  --custom-select-fg-color: var(--pg-ink);
  --styled-select-input-bdr-color: var(--pg-line);
  --styled-select-input-bg-color: var(--pg-surface);
  --fieldset-form-group-bdr-color: var(--pg-line);
  --table-td-bdr-color: var(--pg-line);
  --table-th-bdr-color: var(--pg-line);
  --table-th-bg-color: var(--pg-surface-2);
  --ul-divided-bdr-color: var(--pg-line);
  --doccontent-pre-code-bg-color: var(--pg-code-bg);
  --doccontent-table-bg-color: var(--pg-surface-2);
  --doccontent-table-bdr-color: var(--pg-line-strong);
  --doccontent-table-fg-color: var(--pg-heading);
  --doccontent-table-th-bg-color: var(--pg-surface-2);
  --doccontent-table-th-bdr-color: var(--pg-line);
  --doccontent-table-td-bg-color: var(--pg-surface);
  --doccontent-table-td-bdr-color: var(--pg-line);
  --pg-shoutbox-bg-color: var(--pg-blue);
}

[data-theme="dark"] {
  --pg-canvas: #0e151d;
  --pg-surface: #151f2b;
  --pg-surface-2: #1b2735;
  --pg-ink: #e6edf4;
  --pg-ink-2: #b4c2d1;
  --pg-muted: #8194a8;
  --pg-heading: #a9cbe9;
  --pg-line: rgba(140, 170, 205, 0.16);
  --pg-line-strong: rgba(140, 170, 205, 0.34);
  --pg-wash: rgba(125, 181, 230, 0.1);
  --pg-wash-strong: rgba(125, 181, 230, 0.18);
  --pg-link: #7db5e6;
  --pg-link-hover: #a3cdf3;
  /* Upstream switches its wine-red content links to blue in dark mode
     (#699eca there); the split only exists on the light canvas. */
  --pg-link-content: #7db5e6;
  --pg-link-content-hover: #a3cdf3;
  --pg-hover: #a3cdf3;
  --pg-primary: #3a7ab0;
  --pg-primary-hover: #4a8cc4;
  --pg-code-bg: #0b1119;
  --pg-code-inline-bg: rgba(230, 237, 244, 0.08);
  --pg-header-bg: rgba(14, 21, 29, 0.88);
  --pg-shadow-sm: 0 4px 18px rgba(2, 8, 18, 0.35);
  --pg-shadow-md: 0 14px 44px rgba(2, 8, 18, 0.5);
  --pg-brand-from: #a9cbe9;
  --pg-brand-to: #5b9bd1;

  --btn-primary-fg-color: #fff;
  --btn-light-bg-color: #a9cbe9;
  --btn-light-bdr-color: #a9cbe9;
  --btn-light-fg-color: #0e151d;
  --btn-download-bg-color: var(--pg-surface);
  --btn-download-decoration-bdr-color: var(--pg-line-strong);
  --btn-secondary-bg-color: transparent;
  --button-input-bdr-color: var(--pg-line-strong);
  --button-input-bg-color: var(--pg-surface);
  --button-input-fg-color: var(--pg-ink);
  --custom-select-bdr-color: var(--pg-line-strong);
  --custom-select-bg-color: var(--pg-surface);
  --custom-select-fg-color: var(--pg-ink);
  --btn-default-bg-color: var(--pg-surface);
  --btn-default-fg-color: var(--pg-ink);
  --btn-default-bdr-color: var(--pg-line-strong);
  --table-td-fg-color: var(--pg-ink);
  --table-th-fg-color: var(--pg-ink);
  --doccontent-table-td-fg-color: var(--pg-ink);
  --doccontent-table-th-fg-color: var(--pg-ink);
  --doccontent-callout-fg-color: var(--pg-ink);
  --doccontent-blockquote-table-note-bg-color: #1b2735;
  --doccontent-blockquote-table-caution-bg-color: #221c0f;
  --doccontent-blockquote-table-warning-bg-color: #261416;
  --doccontent-blockquote-table-tip-bg-color: #12211a;
  --alert-warning-bg-color: #3a3212;
  --alert-warning-bdr-color: #5a4d1a;
  --pg-shoutbox-fg-color: #fff;
}

/* ----------------------------------------------------------------- base */

html {
  scroll-padding-top: calc(var(--pg-nav-h) + 16px);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--pg-font);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--pg-ink);
  background-color: var(--pg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body > * {
  min-width: 0;
}

body > .pg-page,
body > .container-fluid.margin {
  flex: 1 0 auto;
}

/* Inline logos inside headings and download buttons (about, download). */
.logo {
  height: 2rem;
  margin-left: 5px;
  margin-bottom: 5px;
}

::selection {
  background: rgba(var(--pg-blue-rgb), 0.22);
}

:focus-visible {
  outline: 2px solid var(--pg-azure);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pg-font);
  color: var(--pg-heading);
  letter-spacing: -0.005em;
}

h2 {
  font-weight: 700;
}

h1, h2, h3 {
  text-wrap: balance;
}

p, li, dd {
  text-wrap: pretty;
}

h3 {
  font-weight: 600;
}

b, strong, th {
  color: var(--pg-ink) !important;
}

pre,
code,
kbd,
samp {
  font-family: var(--pg-font-mono);
}

pre {
  border-color: var(--pg-line);
  border-radius: var(--pg-radius-sm);
  background-color: var(--pg-code-bg);
  font-size: 13.5px;
  line-height: 1.65;
}

code {
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background-color: var(--pg-code-inline-bg);
  font-size: 0.9em;
}

pre code {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
}

.btn {
  border-radius: var(--pg-radius-sm);
  font-weight: 600;
  transition: background-color var(--pg-dur) var(--pg-ease),
              border-color var(--pg-dur) var(--pg-ease),
              color var(--pg-dur) var(--pg-ease);
}

.btn-outline-secondary:hover {
  background-color: var(--pg-wash);
}

.form-control,
input.form-control, textarea.form-control, .custom-select, select.form-control {
  border-radius: var(--pg-radius-sm);
  border-color: var(--button-input-bdr-color);
  background-color: var(--button-input-bg-color);
  color: var(--button-input-fg-color);
}

.form-control::placeholder {
  color: var(--pg-muted);
}

input.form-control:focus, textarea.form-control:focus, .custom-select:focus {
  border-color: var(--pg-blue) !important;
  box-shadow: 0 0 0 3px rgba(var(--pg-blue-rgb), 0.16);
}

.table th {
  font-weight: 600;
}

/* Layout helpers */

.pg-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}

.pg-icon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
}

.pg-icon--sun,
.pg-icon--close {
  display: none;
}

[data-theme="dark"] .pg-icon--sun {
  display: block;
}

[data-theme="dark"] .pg-icon--moon {
  display: none;
}

.pg-wordmark {
  display: inline-block;
  font-family: var(--pg-font-brand);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  background: linear-gradient(115deg, var(--pg-brand-from) 6%, var(--pg-brand-to) 94%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------- header */

.pg-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--pg-nav-h);
  border-bottom: 1px solid var(--pg-line);
  background: var(--pg-header-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: box-shadow 200ms ease;
}

.pg-header.pg-scrolled {
  box-shadow: var(--pg-shadow-sm);
}

.pg-header > .pg-container {
  height: 100%;
}

/* Three zones on one row: the logo at the start, the menu true-centred,
   the utilities packed against the end. */
.pg-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  height: 100%;
}

.pg-nav__brand {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 4px;
  border-radius: var(--pg-radius-sm);
  transition: background-color var(--pg-dur) var(--pg-ease);
}

.pg-nav__brand:hover {
  background: var(--pg-wash);
}

.pg-nav__logo {
  display: block;
  width: 30px;
  height: 30px;
}

.pg-nav__menu {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.pg-nav__item {
  position: relative;
  display: inline-flex;
}

.pg-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: var(--pg-radius-sm);
  color: var(--pg-ink-2);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--pg-dur) var(--pg-ease),
              color var(--pg-dur) var(--pg-ease);
}

.pg-nav__link:hover,
.pg-nav__link:focus-visible,
.pg-nav__item:hover > .pg-nav__link,
.pg-nav__item:focus-within > .pg-nav__link {
  background: var(--pg-wash);
  color: var(--pg-hover);
  text-decoration: none;
}

.pg-nav__link.active {
  color: var(--pg-heading);
  font-weight: 600;
}

.pg-nav__link.active::after {
  content: '';
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: calc((var(--pg-nav-h) - 100%) / -2);
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--pg-blue);
}

[data-theme="dark"] .pg-nav__link.active::after {
  background: var(--pg-heading);
}

/* Hover panel: one column of section links below the entry. Hovering or
   focusing (keyboard) reveals it; the invisible bridge closes the gap so
   the pointer can travel down without the panel closing. */
.pg-nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 110;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 32px));
  padding: 7px;
  border: 1px solid var(--pg-line);
  border-radius: 10px;
  background: var(--pg-surface);
  box-shadow: var(--pg-shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 140ms var(--pg-ease),
              transform 140ms var(--pg-ease),
              visibility 0s linear 140ms;
}

.pg-nav__panel::before {
  content: '';
  position: absolute;
  top: -9px;
  right: 0;
  left: 0;
  height: 9px;
}

.pg-nav__item:hover > .pg-nav__panel,
.pg-nav__item:focus-within > .pg-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.pg-nav__panel-link {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--pg-ink);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--pg-dur) var(--pg-ease),
              color var(--pg-dur) var(--pg-ease);
}

.pg-nav__panel-link:hover,
.pg-nav__panel-link:focus-visible {
  background: var(--pg-wash);
  color: var(--pg-hover);
  text-decoration: none;
}

.pg-nav__panel-group {
  margin: 1px 0 4px 12px;
  padding-left: 6px;
  border-left: 1px solid var(--pg-line);
}

.pg-nav__panel-link--sub {
  padding: 5px 10px;
  color: var(--pg-ink-2);
  font-size: 13px;
  font-weight: 400;
}

.pg-nav__util {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pg-nav__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 150px;
  height: 34px;
  margin: 0 4px 0 0;
  padding: 0 8px 0 10px;
  border: 1px solid var(--pg-line);
  border-radius: var(--pg-radius-sm);
  background: var(--pg-surface);
  color: var(--pg-muted);
  font-size: 13px;
  transition: border-color var(--pg-dur) var(--pg-ease),
              box-shadow var(--pg-dur) var(--pg-ease);
}

.pg-nav__search:hover {
  border-color: var(--pg-line-strong);
}

.pg-nav__search:focus-within {
  border-color: var(--pg-blue);
  box-shadow: 0 0 0 3px rgba(var(--pg-blue-rgb), 0.15);
}

.pg-nav__search .pg-icon {
  width: 15px;
  height: 15px;
  color: var(--pg-muted);
}

.pg-nav__search-go {
  display: inline-flex;
  align-items: center;
  margin: 0 -2px;
  padding: 4px 2px;
  border-radius: 5px;
  color: var(--pg-muted);
}

.pg-nav__search-go:hover {
  color: var(--pg-heading);
  text-decoration: none;
}

.pg-nav__search-go:hover .pg-icon {
  color: var(--pg-heading);
}

.pg-nav__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pg-ink);
  font-family: var(--pg-font);
  font-size: 13.5px;
  outline: none;
  box-shadow: none;
}

.pg-nav__search input::placeholder {
  color: var(--pg-muted);
}

.pg-nav__search kbd {
  flex: none;
  min-width: 18px;
  padding: 0 5px;
  border: 1px solid var(--pg-line);
  border-radius: 5px;
  background: var(--pg-canvas);
  color: var(--pg-muted);
  font-family: var(--pg-font-mono);
  font-size: 11px;
  line-height: 17px;
  text-align: center;
}

/* Utility controls: one 34px square for every icon so they line up. */
.pg-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--pg-radius-sm);
  background: transparent;
  color: var(--pg-ink-2);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--pg-dur) var(--pg-ease),
              color var(--pg-dur) var(--pg-ease);
}

.pg-nav__btn:hover,
.pg-nav__btn:focus-visible {
  background: var(--pg-wash);
  color: var(--pg-hover);
  text-decoration: none;
}

.pg-nav__btn.active {
  color: var(--pg-heading);
}

.pg-nav__search-btn,
.pg-nav__toggle {
  display: none;
}

body.pg-drawer-open .pg-nav__toggle .pg-icon--menu {
  display: none;
}

body.pg-drawer-open .pg-nav__toggle .pg-icon--close {
  display: block;
}

/* Drawer: the full labelled menu for phone widths */

.pg-drawer {
  position: fixed;
  top: var(--pg-nav-h);
  right: 0;
  left: 0;
  z-index: 99;
  max-height: calc(100dvh - var(--pg-nav-h));
  overflow-y: auto;
  padding: 12px 16px 20px;
  border-bottom: 1px solid var(--pg-line);
  background: var(--pg-surface);
  box-shadow: var(--pg-shadow-md);
}

.pg-drawer[hidden] {
  display: none;
}

.pg-drawer__inner {
  display: grid;
  gap: 2px;
  max-width: 720px;
  margin: 0 auto;
}

.pg-drawer__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  margin: 0 0 8px;
  padding: 0 12px;
  border: 1px solid var(--pg-line);
  border-radius: 10px;
  background: var(--pg-canvas);
  color: var(--pg-muted);
}

.pg-drawer__search:focus-within {
  border-color: var(--pg-blue);
  box-shadow: 0 0 0 3px rgba(var(--pg-blue-rgb), 0.15);
}

.pg-drawer__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pg-ink);
  font-family: var(--pg-font);
  font-size: 15px;
  outline: none;
}

.pg-drawer__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--pg-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--pg-dur) var(--pg-ease);
}

.pg-drawer__link .pg-icon {
  color: var(--pg-muted);
}

.pg-drawer__link:hover,
.pg-drawer__link:focus-visible {
  background: var(--pg-wash);
  color: var(--pg-ink);
  text-decoration: none;
}

.pg-drawer__link.active {
  background: var(--pg-wash-strong);
  color: var(--pg-heading);
}

.pg-drawer__children {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: 0 0 6px 12px;
  padding: 2px 0 2px 10px;
  border-left: 1px solid var(--pg-line);
}

.pg-drawer__sublink {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--pg-ink-2);
  font-size: 13.5px;
  font-weight: 400;
  text-decoration: none;
}

.pg-drawer__sublink--sub {
  color: var(--pg-muted);
}

.pg-drawer__sublink:hover,
.pg-drawer__sublink:focus-visible {
  background: var(--pg-wash);
  color: var(--pg-heading);
  text-decoration: none;
}

.pg-drawer__sep {
  height: 1px;
  margin: 8px 10px;
  background: var(--pg-line);
}

body.pg-drawer-open {
  overflow: hidden;
}

/* Header tiers. Each step removes one thing so the row keeps fitting.
   The search box goes first: below 1024px the centred menu and the box
   would meet, so only the magnifier stays (it links to /search/). */

@media (max-width: 1023.98px) {
  .pg-nav__search {
    display: none;
  }

  .pg-nav__search-btn {
    display: inline-flex;
  }
}

@media (max-width: 899.98px) {
  .pg-nav__link {
    padding: 6px 8px;
    font-size: 14px;
  }

  .pg-nav__link.active::after {
    left: 8px;
    right: 8px;
  }

}

@media (max-width: 767.98px) {
  .pg-container {
    padding: 0 16px;
  }

  .pg-nav {
    column-gap: 8px;
  }

  .pg-nav__menu,
  .pg-nav__alt {
    display: none;
  }

  .pg-nav__toggle {
    display: inline-flex;
  }
}

@media (min-width: 768px) {
  .pg-drawer {
    display: none !important;
  }
}

/* ------------------------------------------------------------ shout box */

.pg-shout {
  position: relative;
  background: linear-gradient(90deg, var(--pg-blue-deep), var(--pg-blue));
  color: #fff;
  text-align: center;
}

html[data-shout="off"] .pg-shout {
  display: none;
}

/* Close control: appears while the bar is hovered or focused (always on
   touch screens), sits at the right edge of the bar. */
.pg-shout__close {
  position: absolute;
  top: 50%;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms ease, background-color var(--pg-dur) var(--pg-ease), color var(--pg-dur) var(--pg-ease);
}

.pg-shout:hover .pg-shout__close,
.pg-shout__close:focus-visible {
  opacity: 1;
}

.pg-shout__close:hover,
.pg-shout__close:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.pg-shout__close .pg-icon {
  display: block;
  width: 15px;
  height: 15px;
}

@media (hover: none) {
  .pg-shout__close {
    opacity: 1;
  }
}

.pg-shout__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.pg-shout__news {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.pg-shout__news > i {
  flex: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
}

.pg-shout__note {
  margin: 0;
  padding: 0 32px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

.pg-shout a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--pg-dur) var(--pg-ease);
}

.pg-shout__note a {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

.pg-shout a:hover {
  color: #fff;
  text-decoration-color: #fff;
}

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

.pg-footer {
  margin-top: auto;
  border-top: 1px solid var(--pg-line);
  background:
    linear-gradient(135deg, rgba(var(--pg-blue-rgb), 0.07), transparent 42%),
    var(--pg-surface-2);
  color: var(--pg-ink-2);
  font-size: 14px;
}

.pg-footer__inner {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(0, 3.2fr);
  gap: 2rem 2rem;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 2.25rem;
}

.pg-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
  text-decoration: none;
}

.pg-footer__logo img {
  display: block;
  width: 44px;
  height: 44px;
}

.pg-footer__logo .pg-wordmark {
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}

.pg-footer__site {
  margin: 0 0 0.85rem;
  color: var(--pg-heading);
  font-size: 15.5px;
  font-weight: 700;
}

/* The two descriptive lines read as one group: tight inside, more air
   above and below. */
.pg-footer__about {
  margin: 0 0 1.1rem;
}

.pg-footer__tagline,
.pg-footer__note {
  max-width: 30rem;
  margin: 0;
  color: var(--pg-ink-2);
  font-size: 14px;
  line-height: 1.6;
}

.pg-footer__note {
  margin-top: 0.15rem;
  color: var(--pg-muted);
  font-size: 13px;
}

.pg-footer__note a {
  color: var(--pg-ink-2);
  font-weight: 600;
}

.pg-footer__note a:hover {
  color: var(--pg-hover);
}

.pg-footer__legal {
  max-width: 30rem;
  margin: 0;
  color: var(--pg-muted);
  font-size: 11.5px;
  line-height: 1.7;
}

.pg-footer__legal a {
  color: var(--pg-ink-2);
  font-weight: 500;
}

.pg-footer__legal a:hover {
  color: var(--pg-hover);
}

.pg-footer__grid {
  display: grid;
  grid-template-columns: repeat(var(--pg-footer-cols, 5), minmax(0, 1fr));
  gap: 2rem 1.25rem;
}

.pg-footer__col h2 {
  margin: 0 0 0.85rem;
  color: var(--pg-heading);
  font-size: 14px;
  font-weight: 700;
}

.pg-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-footer__col li + li {
  margin-top: 0.5rem;
}

.pg-footer__col a {
  color: var(--pg-ink-2);
  font-weight: 400;
  text-decoration: none;
  transition: color var(--pg-dur) var(--pg-ease);
}

.pg-footer__col a:hover {
  color: var(--pg-hover);
}

.pg-footline {
  border-top: 1px solid var(--pg-line);
}

.pg-footline__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 24px;
  min-height: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--pg-muted);
  font-size: 12.5px;
}

.pg-footline__copy {
  justify-self: start;
  margin: 0;
  white-space: nowrap;
}

.pg-footline__copy a {
  color: var(--pg-ink-2);
  font-weight: 500;
}

.pg-footline__copy a:hover {
  color: var(--pg-hover);
}

.pg-footline__links {
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
}

.pg-footline__links a {
  color: var(--pg-ink-2);
  font-weight: 500;
  text-decoration: none;
}

.pg-footline__links a:hover {
  color: var(--pg-hover);
}

.pg-footline__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
}

.pg-footline__right .pg-nav__btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--pg-muted);
}

.pg-footline__right .pg-icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 991.98px) {
  .pg-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .pg-footline__inner {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }

  .pg-footline__links {
    grid-column: 1 / -1;
    justify-self: start;
    justify-content: flex-start;
    order: -1;
  }
}

@media (max-width: 599.98px) {
  .pg-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem;
  }

  .pg-footline__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .pg-footline__links {
    justify-self: center;
    justify-content: center;
  }

  .pg-footline__copy {
    justify-self: center;
    white-space: normal;
  }

  .pg-footline__right {
    justify-self: center;
  }
}

/* -------------------------------------------------------------- buttons */

.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--pg-dur) var(--pg-ease),
              border-color var(--pg-dur) var(--pg-ease),
              color var(--pg-dur) var(--pg-ease),
              box-shadow var(--pg-dur) var(--pg-ease);
}

.pg-btn i {
  font-size: 12px;
  color: inherit;
  transition: transform var(--pg-dur) var(--pg-ease);
}

.pg-btn:hover i.fa-arrow-right {
  transform: translateX(3px);
}

.pg-btn--primary {
  background: var(--pg-primary);
  border-color: var(--pg-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(25, 49, 69, 0.2);
}

.pg-btn--primary:hover,
.pg-btn--primary:focus-visible {
  background: var(--pg-primary-hover);
  border-color: var(--pg-primary-hover);
  color: #fff;
  text-decoration: none;
}

.pg-btn--ghost {
  background: transparent;
  border-color: var(--pg-line-strong);
  color: var(--pg-heading);
}

.pg-btn--ghost:hover,
.pg-btn--ghost:focus-visible {
  background: var(--pg-wash);
  border-color: var(--pg-blue);
  color: var(--pg-heading);
  text-decoration: none;
}

.pg-btn--light {
  background: #fff;
  border-color: #fff;
  color: var(--pg-blue-deep);
  box-shadow: 0 6px 20px rgba(13, 26, 38, 0.25);
}

.pg-btn--light:hover,
.pg-btn--light:focus-visible {
  background: #e6eff7;
  border-color: #e6eff7;
  color: var(--pg-navy);
  text-decoration: none;
}

.pg-btn--outline-light {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.pg-btn--outline-light:hover,
.pg-btn--outline-light:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

.pg-btn--sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13.5px;
}

/* ----------------------------------------------------------------- home */

.pg-home {
  flex: 1 0 auto;
}

/* Hero: the upstream elephant photograph, re-toned in the brand navy. The
   photo is greyscale; two blended layers turn its shadows navy and its
   highlights a pale sky blue, and a third shade layer keeps the title and
   buttons readable. */

.pg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.pg-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pg-navy) url('/media/img/misc/banner.jpg') center 40% / cover no-repeat;
  filter: grayscale(1) contrast(1.05);
}

.pg-hero__media::before,
.pg-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
}

.pg-hero__media::before {
  background: #1a3247;
  mix-blend-mode: lighten;
}

.pg-hero__media::after {
  background: #a8c6df;
  mix-blend-mode: multiply;
}

.pg-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 90% at 50% 45%, rgba(25, 49, 69, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(25, 49, 69, 0.2) 0%, rgba(25, 49, 69, 0.35) 55%, rgba(25, 49, 69, 0.72) 100%);
}

.pg-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(56px, 8vw, 92px);
  padding-bottom: clamp(60px, 8vw, 96px);
}

.pg-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 6px 13px 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(25, 49, 69, 0.5);
  color: #e6f0f8;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color var(--pg-dur) var(--pg-ease),
              border-color var(--pg-dur) var(--pg-ease);
}

.pg-hero__chip:hover {
  background: rgba(25, 49, 69, 0.72);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  text-decoration: none;
}

.pg-hero__chip .pg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7ed6a0;
  box-shadow: 0 0 0 3px rgba(126, 214, 160, 0.25);
}

.pg-hero__chip {
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.pg-hero__chip strong {
  color: #fff !important;
  font-weight: 600;
  line-height: 1.5;
}

.pg-hero__chip time {
  color: rgba(230, 240, 248, 0.72);
  font-family: var(--pg-font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Phones get the abbreviated headline ("PG 18.6 … 发布！") instead. */
.pg-hero__chip-short {
  display: none;
}

.pg-hero__title {
  max-width: 1040px;
  margin: 0 0 32px;
  color: #fff;
  font-size: clamp(1.7rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 28px rgba(13, 26, 38, 0.5);
  text-wrap: balance;
}

.pg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Front matter: four blocks in two rows, no boxes. Every block has the same
   skeleton (icon tile, heading, body, button row) and the same column
   width, so text wraps the same way left and right. The data row is a
   grid too, so its two blocks stretch to one height and the button rows
   land on the same baseline. */

.pg-front__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 64px;
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(48px, 6vw, 72px);
}

.pg-front__row--data {
  border-top: 1px solid var(--pg-line);
  padding-bottom: clamp(56px, 7vw, 88px);
}

.pg-story {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pg-story__mark {
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 0 16px;
}

.pg-story__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 0 16px;
  border-radius: 12px;
  background: var(--pg-wash);
  color: var(--pg-blue);
  font-size: 18px;
}

[data-theme="dark"] .pg-story__icon {
  color: var(--pg-heading);
}

.pg-story h2 {
  margin: 0 0 12px;
  color: var(--pg-heading);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.pg-story__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.pg-story p {
  margin: 0 0 0.75rem;
  color: var(--pg-ink-2);
  font-size: 15.5px;
  line-height: 1.85;
}

.pg-story--data p {
  font-size: 14.5px;
  line-height: 1.75;
}

.pg-story__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}

/* Release lead: the date on its own line, then the announcement title as a
   balanced block, so a long title never leaves a stray character behind. */
.pg-story__lead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 10px;
}

.pg-story__lead time,
.pg-story__lead-slot {
  display: block;
  min-height: 22px;
  color: var(--pg-muted);
  font-family: var(--pg-font-mono);
  font-size: 13px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}

.pg-story__lead > a {
  display: block;
  color: var(--pg-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-wrap: balance;
}

/* The events block mirrors the release block's lead: an empty slot where
   the date sits on the left, then the badge legend on the title line. */
.pg-story__note-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--pg-muted);
  font-size: 13px;
  line-height: 1.5;
}

.pg-story__note-line img.community {
  flex: none;
  width: 15px !important;
  margin: 0 !important;
}

.pg-story__note-line > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-story__note-line a {
  display: inline;
  font-weight: 600;
}

.pg-story__lead > a:hover {
  color: var(--pg-hover);
}

/* Ledger: the supported release rows */

.pg-ledger {
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--pg-line);
  list-style: none;
}

.pg-ledger li {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--pg-line);
  background: transparent;
  transition: background-color var(--pg-dur) var(--pg-ease);
}

.pg-ledger li:hover {
  background: var(--pg-wash);
}

.pg-ledger__ver {
  color: var(--pg-heading);
  font-family: var(--pg-font-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pg-ledger li:first-child .pg-ledger__ver {
  color: var(--pg-hover);
}

.pg-ledger__date {
  color: var(--pg-muted);
  font-family: var(--pg-font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.pg-ledger__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 600;
}

.pg-ledger__link i {
  font-size: 10px;
  color: inherit;
}

/* Events: dated rows. Three fixed columns -- a date slot wide enough for
   "start - end", a badge slot that is present whether or not the event
   carries the community badge, then the title -- so every title starts on
   the same line. Long titles are cut with an ellipsis (full title in the
   tooltip). The list stretches to fill the block so its bottom edge meets
   the release block beside it. */

.pg-events {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pg-line);
  list-style: none;
}

.pg-events > li {
  display: grid;
  flex: 1 0 auto;
  grid-template-columns: 178px 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 43px;
  padding: 6px 6px;
  border-bottom: 1px solid var(--pg-line);
  transition: background-color var(--pg-dur) var(--pg-ease);
}

.pg-events > li:hover {
  background: var(--pg-wash);
}

.pg-events__date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--pg-muted);
  font-family: var(--pg-font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pg-events__to {
  color: var(--pg-line-strong);
}

.pg-events__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.pg-events__badge img.community {
  display: block;
  width: 16px !important;
  margin: 0 !important;
}

.pg-events__title {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--pg-ink);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pg-events__title:hover {
  color: var(--pg-hover);
}

/* Split call-to-action bands */

.pg-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.pg-cta__media {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background: var(--pg-navy) center / cover no-repeat;
  filter: grayscale(1) contrast(1.05);
}

.pg-cta__media::before,
.pg-cta__media::after {
  content: '';
  position: absolute;
  inset: 0;
}

.pg-cta__media::before {
  background: #1a3247;
  mix-blend-mode: lighten;
}

.pg-cta__media::after {
  background: #8db4d6;
  mix-blend-mode: multiply;
}

.pg-cta__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25, 49, 69, 0.12), rgba(25, 49, 69, 0.38));
}

.pg-cta__media--training {
  background-image: url('/media/img/misc/training.jpg');
}

.pg-cta__media--bugs {
  background-image: url('/media/img/misc/bugs.jpg');
}

/* The text half is exactly half the band, so "100% - 612px" is the distance
   from its outer edge to the 1280px content column (plus the 28px gutter).
   The band on the left aligns its text with the column's left edge, the one
   on the right keeps its text inside the column's right edge. */
.pg-cta__text {
  --pg-cta-edge: max(28px, calc(100% - 612px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(40px, 6vw, 80px) 48px;
  background:
    radial-gradient(110% 110% at 100% 0%, rgba(91, 155, 209, 0.28), transparent 55%),
    linear-gradient(160deg, var(--pg-navy), var(--pg-blue-deep));
  color: #dfe9f2;
  text-align: left;
}

.pg-cta__text h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pg-cta__text p {
  max-width: 34rem;
  margin: 0 0 26px;
  color: rgba(223, 233, 242, 0.9);
  font-size: 15.5px;
  line-height: 1.85;
  text-align: left;
}

.pg-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pg-cta--bugs .pg-cta__text {
  padding-left: var(--pg-cta-edge);
}

.pg-cta--training .pg-cta__text {
  padding-right: var(--pg-cta-edge);
  padding-left: clamp(40px, 5vw, 72px);
}

/* Sections */

.pg-section {
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: clamp(56px, 7vw, 88px);
}

.pg-section--tint {
  border-top: 1px solid var(--pg-line);
  border-bottom: 1px solid var(--pg-line);
  background: color-mix(in srgb, var(--pg-surface-2) 55%, var(--pg-canvas));
}

.pg-section__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 clamp(24px, 4vw, 40px);
}

.pg-section__head h2 {
  margin: 0;
  color: var(--pg-heading);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.pg-section__head::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--pg-line-strong), transparent);
}

/* News */

.pg-news {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px 56px;
}

.pg-featured h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.45;
}

.pg-featured h3 a {
  color: var(--pg-heading);
}

.pg-featured h3 a:hover {
  color: var(--pg-hover);
}

.pg-featured__body p {
  margin: 0 0 0.75rem;
  color: var(--pg-ink-2);
  font-size: 15px;
  line-height: 1.8;
}

.pg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 14px;
  padding: 0;
  color: var(--pg-muted);
  font-size: 13px;
  list-style: none;
}

.pg-meta li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pg-meta li i {
  font-size: 12px;
  color: var(--pg-muted);
}

.pg-meta time,
.pg-meta .pg-meta__date {
  font-family: var(--pg-font-mono);
  font-variant-numeric: tabular-nums;
}

.pg-linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.pg-linkrow a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--pg-line);
  border-radius: 999px;
  background: var(--pg-surface);
  color: var(--pg-heading);
  font-size: 13px;
  font-weight: 600;
  transition: border-color var(--pg-dur) var(--pg-ease),
              color var(--pg-dur) var(--pg-ease);
}

.pg-linkrow a:hover {
  border-color: var(--pg-blue);
  color: var(--pg-hover);
}

.pg-featured__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

/* Side list: title with a quiet date/source line, hairline between items */

.pg-newslist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-newslist > li {
  padding: 13px 0;
  border-bottom: 1px solid var(--pg-line);
}

.pg-newslist > li:first-child {
  padding-top: 4px;
}

.pg-newslist h3 {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.pg-newslist h3 a {
  color: var(--pg-ink);
}

.pg-newslist h3 a:hover {
  color: var(--pg-hover);
}

.pg-newslist__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin: 0;
  color: var(--pg-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.pg-newslist__meta time {
  font-family: var(--pg-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Planet PostgreSQL: a ruled three-column list */

.pg-planet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
}

.pg-post {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0 18px;
  border-top: 1px solid var(--pg-line);
}

.pg-post h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.pg-post h3 a {
  color: var(--pg-ink);
}

/* The hairline separates rows only: none above the first row, whatever
   the column count (3 / 2 / 1). */
.pg-post:nth-child(-n+3) {
  padding-top: 4px;
  border-top: 0;
}

@media (max-width: 991.98px) {
  .pg-post:nth-child(3) {
    padding-top: 16px;
    border-top: 1px solid var(--pg-line);
  }
}

@media (max-width: 767.98px) {
  .pg-post:nth-child(2),
  .pg-post:nth-child(3) {
    padding-top: 16px;
    border-top: 1px solid var(--pg-line);
  }
}

.pg-post h3 a:hover {
  color: var(--pg-hover);
}

.pg-post .pg-meta {
  margin: auto 0 0;
}

.pg-planet__actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* Home responsive */

@media (max-width: 1199.98px) {
  .pg-front__row {
    gap: 40px 44px;
  }

  .pg-planet {
    gap: 0 28px;
  }
}

@media (max-width: 991.98px) {
  .pg-front__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .pg-events > li {
    flex: 0 0 auto;
  }

  .pg-cta--bugs .pg-cta__text,
  .pg-cta--training .pg-cta__text {
    padding-right: 28px;
    padding-left: 28px;
  }

  .pg-cta {
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-cta__media {
    min-height: 220px;
  }

  .pg-cta--bugs .pg-cta__media {
    order: -1;
  }

  .pg-news {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .pg-planet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .pg-hero__inner {
    padding-top: 48px;
    padding-bottom: 56px;
  }

  /* One line on a phone: "PostgreSQL" becomes "PG", the date is dropped,
     and the pill never wraps (it ellipsises on the very narrowest screens). */
  .pg-hero__chip {
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 7px;
    padding: 6px 10px 6px 9px;
    /* Scales with the screen so the six-version headline fits a 360px phone. */
    font-size: clamp(10.5px, 3vw, 12px);
  }

  .pg-hero__chip .pg-dot {
    flex: none;
    width: 6px;
    height: 6px;
  }

  .pg-hero__chip-full,
  .pg-hero__chip time {
    display: none;
  }

  .pg-hero__chip-short {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pg-hero__title {
    font-size: clamp(1.45rem, 6.2vw, 2rem);
  }

  .pg-hero__actions .pg-btn {
    flex: 1 1 160px;
  }

  .pg-front__row {
    padding-top: 32px;
    padding-bottom: 40px;
  }

  .pg-ledger li {
    grid-template-columns: 60px 1fr auto;
    gap: 8px;
  }

  .pg-events > li {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 2px 8px;
    padding: 8px 6px;
  }

  .pg-events__date {
    grid-column: 1 / -1;
  }

  .pg-events__title {
    white-space: normal;
  }

  .pg-planet {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------- inner pages */

.pg-page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto 4em;
  padding: 1.5rem 20px 0;
}

#pgSideWrap {
  position: sticky;
  top: calc(var(--pg-nav-h) + 20px);
}

#pgSideNav {
  padding: 1rem 0.85rem 1.1rem;
  border: 1px solid var(--pg-line);
  border-radius: var(--pg-radius);
  background: var(--pg-surface);
  font-size: 14px;
}

#pgSideNav h2 {
  display: block;
  margin: 0 0.5rem 0.6rem;
  color: var(--pg-muted);
  font-size: 12.5px;
  font-weight: 700;
}

#pgSideNav h2:after {
  content: none;
}

#pgSideNav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#pgSideNav > ul > li {
  margin: 1px 0;
}

#pgSideNav a {
  display: block;
  padding: 5px 9px;
  border-radius: 6px;
  color: var(--pg-ink-2);
  font-weight: 500;
  line-height: 1.5;
  transition: background-color var(--pg-dur) var(--pg-ease),
              color var(--pg-dur) var(--pg-ease);
}

#pgSideNav a:hover {
  background: var(--pg-wash);
  color: var(--pg-heading);
}

#pgSideNav ul ul {
  margin: 2px 0 4px 12px;
  padding-left: 8px;
  border-left: 1px solid var(--pg-line);
}

#pgSideNav ul ul a {
  padding: 3px 8px;
  color: var(--pg-muted);
  font-size: 13px;
  font-weight: 400;
}

#pgContentWrap {
  padding: 0.5rem 1.25rem 2rem;
}

#pgContentWrap h1 {
  margin: 0.25rem 0 1.25rem;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

#pgContentWrap h2 {
  margin: 1.6em 0 0.8em;
  font-size: 1.45rem;
  font-weight: 700;
}

#pgContentWrap h2:after {
  height: 1px;
  margin: 0.85em 0 0.5em 0.9em;
  background-color: var(--pg-line);
}

#pgContentWrap > h2:first-child,
#pgContentWrap > h1:first-child {
  margin-top: 0.25rem;
}

#pgContentWrap h3 {
  font-size: 1.2rem;
  font-weight: 600;
}

#pgContentWrap .alert-warning,
.alert-warning {
  border-radius: var(--pg-radius-sm);
}

/* Site buttons inside the content column keep their own colours (the
   column paints every link wine-red). */
#pgContentWrap .pg-btn--ghost {
  margin-left: 4px;
  vertical-align: middle;
  color: var(--pg-heading);
}

#pgContentWrap .pg-btn--ghost:hover,
#pgContentWrap .pg-btn--ghost:focus-visible {
  color: var(--pg-heading);
}

#pgContentWrap .pg-btn--primary,
#pgContentWrap .pg-btn--primary:hover {
  color: #fff;
}

/* News archive tag filters: quiet pills instead of a wall of solid buttons */
#pgContentWrap .newstag .btn {
  margin: 0 4px 8px 0;
  padding: 4px 12px;
  border: 1px solid var(--pg-line-strong);
  border-radius: 999px;
  background: var(--pg-surface);
  color: var(--pg-heading) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: none;
}

#pgContentWrap .newstag .btn:hover,
#pgContentWrap .newstag .btn:focus-visible {
  border-color: var(--pg-blue);
  background: var(--pg-wash);
}

#pgContentWrap .newstag .btn .fa-tag {
  margin-right: 2px;
  color: var(--pg-muted);
  font-size: 11px;
}

@media (max-width: 991.98px) {
  /* Below the sidebar layout the quick links follow the content instead of
     pushing it a whole screen down. */
  .pg-page > .row > .col-lg-2 {
    order: 2;
  }

  #pgSideWrap {
    position: static;
  }

  #pgSideNav {
    margin: 1.5rem 0 0;
  }

  .pg-page {
    padding: 1rem 8px 0;
  }
}

@media (max-width: 767.98px) {
  #pgContentWrap {
    padding: 0.25rem 0.25rem 1.5rem;
  }
}

/* Download page: operating-system chooser. One row of pill buttons with
   the logo beside the label (instead of upstream's fixed-width stacked
   tiles that left the fifth entry alone on a second row). The ids and the
   .btn-download / .btn-download-active classes are what download.js and
   the upstream stylesheet key on, so they stay. */

.pg-os-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0.25rem 0 1.5rem;
}

.pg-os.btn.btn-download {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 150px;
  height: 54px;
  margin: 0;
  padding: 0 20px;
  border: 1.5px solid var(--pg-line-strong);
  border-radius: 12px;
  background: var(--pg-surface);
  color: var(--pg-heading) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--pg-shadow-sm);
  transition: background-color var(--pg-dur) var(--pg-ease),
              border-color var(--pg-dur) var(--pg-ease),
              box-shadow var(--pg-dur) var(--pg-ease);
}

.pg-os.btn.btn-download:hover,
.pg-os.btn.btn-download:focus-visible {
  border-color: var(--pg-blue);
  background: var(--pg-wash);
  box-shadow: var(--pg-shadow-md);
}

.pg-os.btn.btn-download.btn-download-active {
  border-color: var(--pg-blue);
  background: var(--pg-wash-strong);
  box-shadow: inset 0 0 0 1px var(--pg-blue);
}

.pg-os img.logo {
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0;
  object-fit: contain;
}

.download-subnav > p {
  margin: 0.25rem 0 0.6rem;
}

@media (max-width: 767.98px) {
  .pg-os.btn.btn-download {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 0 14px;
  }
}

/* Tables on content pages (.pg-page scopes this to the sidebar layout, so
   the documentation manual keeps its own table styling). One hairline
   frame with rounded corners, a quiet tinted header row, row hairlines
   instead of zebra stripes, and a soft hover wash. The feature matrix
   (.matrix) keeps its coloured yes/no cells: only the frame and padding
   apply there. */

.pg-page .table {
  width: 100%;
  margin: 0.75rem 0 1.5rem;
  border: 1px solid var(--pg-line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pg-surface);
  color: var(--pg-ink);
  font-size: 14.5px;
  line-height: 1.55;
}

.pg-page .table > thead > tr > th,
.pg-page .table > tbody > tr > th,
.pg-page .table > tbody > tr > td,
.pg-page .table > tfoot > tr > td {
  padding: 11px 16px;
  border: 0;
  vertical-align: middle;
}

.pg-page .table > thead > tr > th {
  border-bottom: 1px solid var(--pg-line-strong);
  background: var(--pg-surface-2);
  color: var(--pg-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  white-space: nowrap;
}

.pg-page .table > tbody > tr + tr > td,
.pg-page .table > tbody > tr + tr > th {
  border-top: 1px solid var(--pg-line);
}

.pg-page .table > tbody > tr > th {
  color: var(--pg-ink);
  font-weight: 600;
}

.pg-page .table:not(.matrix) > tbody > tr > td,
.pg-page .table:not(.matrix) > tbody > tr > th {
  background: transparent;
}

.pg-page .table-striped > tbody > tr:nth-of-type(odd),
.pg-page .table-striped:not(.matrix) > tbody > tr:nth-of-type(odd) > td,
.pg-page .table-striped:not(.matrix) > tbody > tr:nth-of-type(odd) > th {
  background: transparent;
}

.pg-page .table:not(.matrix) > tbody > tr:hover > td,
.pg-page .table:not(.matrix) > tbody > tr:hover > th {
  background: var(--pg-wash);
}

.pg-page .table td > p:last-child,
.pg-page .table td > ul:last-child {
  margin-bottom: 0;
}

.pg-page .table-sm > thead > tr > th,
.pg-page .table-sm > tbody > tr > td,
.pg-page .table-sm > tbody > tr > th {
  padding: 7px 10px;
}

/* Feature matrix: version numbers centred over their columns, the feature
   name column left-aligned, and each cell a status chip instead of a
   fully painted cell. Green / rose / amber / slate tints are muted and
   read the same in both themes. */

.pg-page .table.matrix {
  font-size: 13.5px;
  /* Painted cells: a soft green / rose / amber ground with a deep ink of
     the same hue, so the colour reads at a glance and the word stays
     legible. Dark mode uses the same hues at low lightness. */
  --fm-yes: #1c5a3a;
  --fm-yes-bg: #d9efe1;
  --fm-no: #7a2c2c;
  --fm-no-bg: #f6dcdc;
  --fm-obs: #6b4b0f;
  --fm-obs-bg: #f6e8c3;
  --fm-unk: var(--pg-muted);
  --fm-unk-bg: var(--pg-surface-2);
}

[data-theme="dark"] .pg-page .table.matrix {
  --fm-yes: #a5e6c0;
  --fm-yes-bg: #17352a;
  --fm-no: #f2a6ae;
  --fm-no-bg: #3b1f24;
  --fm-obs: #e8c97e;
  --fm-obs-bg: #3a2f16;
  --fm-unk: var(--pg-muted);
  --fm-unk-bg: #1b2735;
}

.pg-page .table.matrix > thead > tr > th {
  text-align: center;
  font-family: var(--pg-font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.pg-page .table.matrix > thead > tr > th:first-child,
.pg-page .table.matrix > tbody > tr > th {
  text-align: left;
}

.pg-page .table.matrix > tbody > tr > th {
  padding-left: 14px;
  background: transparent;
  font-weight: 500;
}

.pg-page .table.matrix > tbody > tr > th a {
  font-weight: 500;
}

.pg-page .table.matrix > tbody > tr > td {
  padding: 5px 8px;
  text-align: center;
  vertical-align: middle;
}

.pg-page .table.matrix td.fm_yes,
.pg-page .table.matrix td.fm_no,
.pg-page .table.matrix td.fm_obs,
.pg-page .table.matrix td.fm_unk {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: filter var(--pg-dur) var(--pg-ease);
}

.pg-page .table.matrix td.fm_yes { background-color: var(--fm-yes-bg); color: var(--fm-yes); }
.pg-page .table.matrix td.fm_no { background-color: var(--fm-no-bg); color: var(--fm-no); }
.pg-page .table.matrix td.fm_obs { background-color: var(--fm-obs-bg); color: var(--fm-obs); }
.pg-page .table.matrix td.fm_unk { background-color: var(--fm-unk-bg); color: var(--fm-unk); }

.pg-page .table.matrix td.fm_yes::before { content: "Yes"; }
.pg-page .table.matrix td.fm_no::before { content: "No"; }
.pg-page .table.matrix td.fm_obs::before { content: "Obsolete"; }
.pg-page .table.matrix td.fm_unk::before { content: "?"; }

.pg-page .table.matrix > tbody > tr:hover > td {
  filter: brightness(0.96);
}

[data-theme="dark"] .pg-page .table.matrix > tbody > tr:hover > td {
  filter: brightness(1.18);
}

/* Version filter box above the matrix */
.pg-page #feature-matrix-filter {
  margin-bottom: 1.5rem;
  padding: 14px 18px 10px;
  border: 1px solid var(--pg-line) !important;
  border-radius: 12px;
  background: var(--pg-surface);
}

.pg-page #feature-matrix-filter h5 {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 600;
}

.pg-page #feature-matrix-filter .fm-toggles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
}

.pg-page #feature-matrix-filter .fm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.pg-page #feature-matrix-filter .fm-toggle:hover {
  background: var(--pg-wash);
}

.pg-page #feature-matrix-filter label {
  margin: 0;
  font-family: var(--pg-font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.pg-page #feature-matrix-filter input.featurematrix_version {
  margin: 0;
}

.pg-page #feature-matrix-filter label[for="hide_unchanged"] {
  font-family: var(--pg-font);
}

.pg-page #feature-matrix-filter hr {
  margin: 8px 0 !important;
  border-top-color: var(--pg-line);
}

@media (max-width: 767.98px) {
  .pg-page .table {
    display: block;
    overflow-x: auto;
    font-size: 13.5px;
  }

  .pg-page .table > thead > tr > th,
  .pg-page .table > tbody > tr > td,
  .pg-page .table > tbody > tr > th {
    padding: 9px 12px;
  }
}

/* Code blocks. code.js wraps every <pre> on content and manual pages in
   .pg-code: one framed surface with the copy action floating in the
   top-right corner, shown on hover, keyboard focus, or always on touch
   screens. Upstream's .pg-script-container (copy / copy-without-sudo)
   takes the same frame. */

.pg-code {
  position: relative;
  margin: 0.9rem 0 1.25rem;
  border: 1px solid var(--pg-line);
  border-radius: 12px;
  background: var(--pg-code-bg);
  overflow: hidden;
}

.pg-code > pre,
.pg-code > pre.code,
#docContent .pg-code > pre {
  margin: 0;
  padding: 14px 56px 14px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13.5px;
  line-height: 1.65;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pg-code > pre.code {
  display: block;
  min-height: 0;
  align-items: normal;
}

.pg-code__actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.pg-code:hover > .pg-code__actions,
.pg-code:focus-within > .pg-code__actions,
.pg-code__actions:has([data-state]) {
  opacity: 1;
}

@media (hover: none) {
  .pg-code__actions {
    opacity: 1;
  }
}

.pg-code__btn,
button.pg-script-copy-btn.pg-code__btn {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--pg-line);
  border-radius: 7px;
  background: var(--pg-code-bg);
  color: var(--pg-muted);
  box-shadow: 0 1px 2px rgba(25, 49, 69, 0.06);
  cursor: pointer;
  transition: background-color var(--pg-dur) var(--pg-ease),
              color var(--pg-dur) var(--pg-ease),
              border-color var(--pg-dur) var(--pg-ease);
}

.pg-code__btn:hover,
.pg-code__btn:focus-visible {
  border-color: var(--pg-line-strong);
  background: var(--pg-surface-2);
  color: var(--pg-ink);
}

.pg-code__btn .pg-icon {
  width: 15px;
  height: 15px;
}

.pg-code__btn .pg-icon--check {
  display: none;
}

.pg-code__btn[data-state="success"] {
  color: #1f7a4d;
  border-color: rgba(31, 122, 77, 0.4);
}

[data-theme="dark"] .pg-code__btn[data-state="success"] {
  color: #7ed6a0;
}

.pg-code__btn[data-state="success"] .pg-icon:not(.pg-icon--check) {
  display: none;
}

.pg-code__btn[data-state="success"] .pg-icon--check {
  display: block;
}

.pg-code__btn[data-state="error"] {
  color: #a63d3d;
}

/* Syntax colours: highlight.js token classes on the theme palette. */

.hljs {
  color: var(--pg-ink);
}

.hljs-comment,
.hljs-quote,
.hljs-meta .hljs-string {
  color: var(--pg-muted);
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-type,
.hljs-operator {
  color: #264d6d;
  font-weight: 600;
}

.hljs-string,
.hljs-regexp,
.hljs-addition {
  color: #1f7a4d;
}

.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet {
  color: #8a6516;
}

.hljs-attr,
.hljs-attribute,
.hljs-section,
.hljs-name,
.hljs-variable,
.hljs-template-variable,
.hljs-title,
.hljs-deletion {
  color: #9a2f3f;
}

.hljs-meta,
.hljs-doctag,
.hljs-punctuation {
  color: var(--pg-ink-2);
}

.hljs-params {
  color: var(--pg-blue);
}

.hljs-link {
  color: var(--pg-ink-2);
  text-decoration: underline;
  text-decoration-color: var(--pg-line-strong);
  text-underline-offset: 3px;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}

[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-selector-tag,
[data-theme="dark"] .hljs-built_in,
[data-theme="dark"] .hljs-type,
[data-theme="dark"] .hljs-operator {
  color: #7db5e6;
}

[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-regexp,
[data-theme="dark"] .hljs-addition {
  color: #7ed6a0;
}

[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-literal,
[data-theme="dark"] .hljs-symbol,
[data-theme="dark"] .hljs-bullet {
  color: #e6b566;
}

[data-theme="dark"] .hljs-params {
  color: #a3cdf3;
}

[data-theme="dark"] .hljs-attr,
[data-theme="dark"] .hljs-attribute,
[data-theme="dark"] .hljs-section,
[data-theme="dark"] .hljs-name,
[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .hljs-template-variable,
[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-deletion {
  color: #f08a97;
}

/* Testimonial carousel on the about page: one quote at a time with a
   cross-fade. The block is only as tall as the quote it shows; the round
   previous/next buttons hang just outside the text column, vertically
   centred on the quote, and the dots sit a short step below the
   attribution. */

.pg-carousel {
  position: relative;
  margin: 0.5rem auto 2rem;
  padding: 0;
}

.pg-carousel .carousel-inner {
  position: relative;
  min-height: 0;
  overflow: visible;
}

.pg-carousel .carousel-item {
  position: absolute;
  inset: 0;
  display: block;
  float: none;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--pg-ease), visibility 0s linear 320ms;
}

.pg-carousel .carousel-item.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.pg-carousel .testimonial {
  max-width: 44rem;
  margin: 0 auto 0.6rem;
  color: var(--pg-ink);
  font-size: 17px;
  line-height: 1.8;
  text-wrap: pretty;
}

.pg-carousel .overview {
  margin: 0;
  color: var(--pg-muted);
  font-size: 14.5px;
  font-style: italic;
}

.pg-carousel .overview a {
  font-weight: 600;
}

.pg-carousel .carousel-control {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  padding: 0;
  border: 1px solid var(--pg-line-strong);
  border-radius: 50%;
  background: var(--pg-surface);
  color: var(--pg-heading);
  opacity: 1;
  cursor: pointer;
  transition: background-color var(--pg-dur) var(--pg-ease),
              border-color var(--pg-dur) var(--pg-ease),
              color var(--pg-dur) var(--pg-ease);
}

.pg-carousel .carousel-control-prev { left: -72px; }
.pg-carousel .carousel-control-next { right: -72px; }

.pg-carousel .carousel-control:hover,
.pg-carousel .carousel-control:focus-visible {
  border-color: var(--pg-blue);
  background: var(--pg-wash);
  color: var(--pg-hover);
}

.pg-carousel .carousel-control i {
  position: static;
  display: block;
  margin: 0;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  text-shadow: none;
}

.pg-carousel .carousel-indicators {
  position: static;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.pg-carousel .carousel-indicators li {
  width: 8px;
  height: 8px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pg-line-strong);
  box-shadow: none;
  text-indent: 0;
  cursor: pointer;
  opacity: 1;
  transition: background-color var(--pg-dur) var(--pg-ease),
              transform var(--pg-dur) var(--pg-ease);
}

.pg-carousel .carousel-indicators li:hover {
  background: var(--pg-blue);
}

.pg-carousel .carousel-indicators li.active {
  background: var(--pg-blue);
  box-shadow: none;
  transform: scale(1.25);
}

[data-theme="dark"] .pg-carousel .carousel-indicators li.active,
[data-theme="dark"] .pg-carousel .carousel-indicators li:hover {
  background: var(--pg-heading);
}

/* Narrower layouts have no margin beside the column: bring the buttons
   inside and pad the quote away from them. */
@media (max-width: 991.98px) {
  .pg-carousel {
    padding: 0 52px;
  }

  .pg-carousel .carousel-control-prev { left: 0; }
  .pg-carousel .carousel-control-next { right: 0; }
}

@media (max-width: 575.98px) {
  .pg-carousel {
    padding: 0 44px;
  }

  .pg-carousel .carousel-control {
    width: 36px;
    height: 36px;
    margin-top: -18px;
  }

  .pg-carousel .testimonial {
    font-size: 15.5px;
  }
}

/* Statistics slabs (about page): upstream's solid blue grid, kept as is;
   only the type is tuned (a touch larger and bolder, tabular figures). */

.pg-page .feature-grid {
  padding: 2.6em 0.75em;
}

.pg-page .feature-grid h3 {
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* Documentation pages keep the upstream fluid layout; nudge only spacing. */

#docContent {
  line-height: 1.7;
}

#docContent pre,
#docContent code,
#docContent kbd,
#docContent tt {
  font-family: var(--pg-font-mono);
}

#docContent pre {
  font-size: 13.5px !important;
  line-height: 1.6;
}

/* Manual navigation rows on phones: the five cells no longer share fixed
   10% widths, so the link labels stay on one line and the chapter title
   takes what is left. */
@media (max-width: 575.98px) {
  #docContent .navheader td,
  #docContent .navfooter td {
    width: auto !important;
    padding: 0 4px;
    white-space: nowrap;
  }

  #docContent .navheader th[width],
  #docContent .navfooter th[width] {
    width: auto !important;
    font-size: 12.5px;
  }
}

/* Build stamp of the development docs, beside the breadcrumb */
.pg-doc-build {
  display: inline-block;
  margin-left: 8px;
  color: var(--pg-muted);
  font-family: var(--pg-font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pg-doc-build a {
  font-weight: 500;
}

/* --------------------------------------------------------------- search */

/* Shared between the search page (/search/) and the palette that opens on
   every page: result rows, kind badges, and the definition preview. The
   preview is typeset like a manual page (.pg-prose), with the version
   line in the reader's own style. */

/* Kept in the layout at zero size: <use> references into a display:none
   SVG are unreliable in some WebKit versions. */
.pg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ds-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.ds-kind {
  --kind-color: var(--pg-ink-2);
  --kind-bg: var(--pg-wash);
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--kind-bg);
  color: var(--kind-color);
}

.ds-kind .ds-icon {
  width: 14px;
  height: 14px;
}

.ds-kind-guc { --kind-color: #8a5a10; --kind-bg: rgba(191, 146, 34, 0.14); }
.ds-kind-sql { --kind-color: #2b5f8c; --kind-bg: rgba(51, 103, 145, 0.13); }
.ds-kind-function { --kind-color: #1c6b52; --kind-bg: rgba(68, 160, 132, 0.14); }
.ds-kind-type { --kind-color: #9a4f1e; --kind-bg: rgba(194, 131, 63, 0.14); }
.ds-kind-relation { --kind-color: #5a4fa8; --kind-bg: rgba(124, 113, 188, 0.14); }
.ds-kind-error { --kind-color: #9a2f3f; --kind-bg: rgba(195, 86, 104, 0.12); }
.ds-kind-tool { --kind-color: #2f5d7a; --kind-bg: rgba(63, 126, 187, 0.13); }
.ds-kind-psql { --kind-color: #4a5d75; --kind-bg: rgba(91, 111, 140, 0.14); }
.ds-kind-extension { --kind-color: #1f6f80; --kind-bg: rgba(55, 147, 167, 0.14); }
.ds-kind-guide, .ds-kind-all { --kind-color: var(--pg-ink-2); --kind-bg: var(--pg-wash); }

[data-theme="dark"] .ds-kind-guc { --kind-color: #e8c97e; }
[data-theme="dark"] .ds-kind-sql { --kind-color: #8fc0ec; }
[data-theme="dark"] .ds-kind-function { --kind-color: #8fd7b8; }
[data-theme="dark"] .ds-kind-type { --kind-color: #f0b78a; }
[data-theme="dark"] .ds-kind-relation { --kind-color: #c1b8f3; }
[data-theme="dark"] .ds-kind-error { --kind-color: #f2a6ae; }
[data-theme="dark"] .ds-kind-tool { --kind-color: #9fc7e6; }
[data-theme="dark"] .ds-kind-psql { --kind-color: #b7c6d8; }
[data-theme="dark"] .ds-kind-extension { --kind-color: #8fd3e2; }

.ds-result {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--pg-ink);
  text-decoration: none;
  outline-offset: -3px;
  transition: background-color var(--pg-dur) var(--pg-ease);
}

.ds-result:hover {
  background: var(--pg-wash);
  color: var(--pg-ink);
  text-decoration: none;
}

.ds-result.is-selected {
  background: var(--pg-wash-strong);
  box-shadow: inset 3px 0 var(--pg-blue);
}

[data-theme="dark"] .ds-result.is-selected {
  box-shadow: inset 3px 0 var(--pg-sky);
}

.ds-result .ds-kind {
  margin-top: 1px;
}

.ds-result-body {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.ds-result-title {
  display: block;
  color: var(--pg-heading);
  font-family: var(--pg-font-mono), var(--pg-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ds-result-meta {
  display: block;
  margin-top: 2px;
  color: var(--pg-muted);
  font-size: 11.5px;
}

.ds-result-meta i {
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--pg-line-strong);
  font-style: normal;
}

.ds-result-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 5px;
  overflow: hidden;
  color: var(--pg-ink-2);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.ds-result-path {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--pg-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-result mark,
.ds-doc mark {
  padding: 0;
  border-radius: 2px;
  background: rgba(226, 187, 72, 0.28);
  color: inherit;
}

[data-theme="dark"] .ds-result mark {
  background: rgba(226, 187, 72, 0.22);
}

.ds-empty {
  padding: 48px 24px;
  color: var(--pg-muted);
  text-align: center;
}

.ds-empty h2 {
  margin: 0 0 8px;
  color: var(--pg-ink-2);
  font-size: 15px;
  font-weight: 600;
}

.ds-empty p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

/* Definition preview */
.ds-preview-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--pg-line);
  background: var(--pg-surface);
}

.ds-preview-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 26px;
  margin-bottom: 8px;
}

.ds-preview-kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pg-ink-2);
  font-size: 12.5px;
  font-weight: 500;
}

.ds-preview-back {
  display: none;
  align-items: center;
  gap: 2px;
  padding: 0 6px 0 0;
  border: 0;
  background: transparent;
  color: var(--pg-link);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.ds-preview-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--pg-line);
  border-radius: 7px;
  color: var(--pg-heading);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--pg-dur) var(--pg-ease),
              border-color var(--pg-dur) var(--pg-ease);
}

.ds-preview-open:hover {
  border-color: var(--pg-line-strong);
  background: var(--pg-wash);
  text-decoration: none;
}

.ds-preview-open .ds-icon {
  width: 13px;
  height: 13px;
}

.ds-preview-title {
  margin: 0;
  color: var(--pg-heading);
  font-family: var(--pg-font-mono), var(--pg-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.ds-preview-signature {
  margin: 4px 0 0;
  color: var(--pg-ink-2);
  font-family: var(--pg-font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.ds-preview-path {
  margin: 4px 0 0;
  color: var(--pg-muted);
  font-size: 12px;
}

/* "版本 19 / 18 / 17": the manual header's version links */
.ds-preview-versions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin-top: 8px;
  font-size: 13px;
}

.ds-preview-versions__label {
  margin-right: 2px;
  color: var(--pg-muted);
  font-size: 12px;
}

.ds-preview-versions__sep {
  color: var(--pg-line-strong);
}

.ds-preview-versions a {
  color: var(--pg-link-content);
  font-weight: 500;
  text-decoration: none;
}

.ds-preview-versions a:hover {
  text-decoration: underline;
}

.ds-preview-versions a.is-current {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The definition itself, typeset as a manual page */
.ds-doc {
  padding: 18px 24px 28px;
  font-size: 14.5px;
  line-height: 1.8;
}

.ds-doc > :first-child {
  margin-top: 0;
}

.ds-doc h1,
.ds-doc h2,
.ds-doc h3,
.ds-doc h4 {
  display: block;
  margin: 1.2em 0 0.6em;
  padding-bottom: 0;
  font-size: 1.1rem;
}

.ds-doc h2::after {
  content: none;
}

.ds-doc dl {
  margin: 0 0 1em;
}

.ds-doc dt {
  margin: 0.8em 0 0.3em;
  color: var(--pg-heading);
  font-weight: 600;
}

.ds-doc dt code {
  font-size: 0.95em;
}

.ds-doc dd {
  margin: 0 0 0.6em 1.2em;
}

.ds-doc .func_signature {
  margin: 0 0 0.8em;
  padding: 10px 12px;
  border: 1px solid var(--pg-line);
  border-radius: 8px;
  background: var(--pg-wash);
  font-family: var(--pg-font-mono);
  font-size: 13px;
  line-height: 1.7;
}

.ds-doc .func_signature code {
  padding: 0;
  background: transparent;
}

.ds-doc .pg-table-scroll {
  margin: 1em 0;
}

.ds-doc table {
  font-size: 13.5px;
}

.ds-doc pre,
.ds-doc .pg-code > pre {
  font-size: 12.5px;
}

.ds-doc .refnamediv h2,
.ds-doc .refsynopsisdiv h2 {
  font-size: 1rem;
  color: var(--pg-muted);
}

/* Extension catalogue card content */
.ds-ext-desc {
  font-size: 15px;
}

.ds-ext-desc-en {
  color: var(--pg-ink-2);
}

.ds-ext-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  margin: 1em 0;
}

.ds-ext-facts dt {
  margin: 0;
  color: var(--pg-muted);
  font-size: 12px;
  font-weight: 500;
}

.ds-ext-facts dd {
  margin: 0;
  font-family: var(--pg-font-mono);
  font-size: 13px;
}

.ds-ext-tags code {
  margin: 0 4px 4px 0;
}

.ds-related {
  margin: 0 24px 28px;
  padding-top: 14px;
  border-top: 1px solid var(--pg-line);
}

.ds-related h3 {
  margin: 0 0 10px;
  color: var(--pg-muted);
  font-size: 12.5px;
  font-weight: 700;
}

.ds-related__definition {
  display: block;
  padding: 6px 10px;
  margin-bottom: 4px;
  border: 1px solid var(--pg-line);
  border-radius: 7px;
  color: var(--pg-ink-2);
  font-family: var(--pg-font-mono);
  font-size: 12px;
  line-height: 1.6;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ds-related__definition:hover {
  border-color: var(--pg-line-strong);
  background: var(--pg-wash);
  text-decoration: none;
}

.ds-catalog-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--pg-line);
  border-radius: 10px;
  color: var(--pg-ink);
  text-decoration: none;
  transition: background-color var(--pg-dur) var(--pg-ease),
              border-color var(--pg-dur) var(--pg-ease);
}

.ds-catalog-card:hover {
  border-color: var(--pg-line-strong);
  background: var(--pg-wash);
  text-decoration: none;
}

.ds-catalog-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ds-catalog-card strong {
  display: block;
  color: var(--pg-heading);
  font-family: var(--pg-font-mono);
  font-size: 13.5px;
}

.ds-catalog-card span span {
  display: block;
  color: var(--pg-muted);
  font-size: 12px;
}

.ds-catalog-card > .ds-icon {
  color: var(--pg-muted);
}

/* ---- palette ---- */

.pg-nav__search input {
  cursor: text;
}

.pg-palette {
  width: min(880px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 80px));
  margin: 8vh auto 0;
  padding: 0;
  border: 1px solid var(--pg-line-strong);
  border-radius: 14px;
  background: var(--pg-surface);
  color: var(--pg-ink);
  box-shadow: var(--pg-shadow-md);
  overflow: hidden;
}

.pg-palette[open] {
  display: flex;
  flex-direction: column;
}

.pg-palette::backdrop {
  background: rgba(14, 21, 29, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

html.pg-palette-open {
  overflow: hidden;
}

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

.pg-palette__bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--pg-line);
}

.pg-palette__bar > .pg-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--pg-muted);
}

/* Scope token: a chip in front of the input, with a menu of scopes. Backspace
   at the start of the input turns it back into editable text ("pg18:"). */
.ds-scope {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
}

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 5px 0 9px;
  border: 1px solid var(--pg-line);
  border-radius: 7px;
  background: var(--pg-wash-strong);
  color: var(--pg-heading);
  font-family: var(--pg-font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--pg-dur) var(--pg-ease),
              background-color var(--pg-dur) var(--pg-ease);
}

.ds-chip:hover,
.ds-chip[aria-expanded="true"] {
  border-color: var(--pg-line-strong);
}

.ds-chip[hidden] {
  display: none;
}

.ds-chip__caret {
  width: 12px;
  height: 12px;
  color: var(--pg-muted);
}

.ds-scope-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 6;
  min-width: 156px;
  padding: 5px;
  border: 1px solid var(--pg-line);
  border-radius: 10px;
  background: var(--pg-surface);
  box-shadow: var(--pg-shadow-md);
}

.ds-scope-menu[hidden] {
  display: none;
}

.ds-scope-menu__item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--pg-ink-2);
  font-family: var(--pg-font-mono);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.ds-scope-menu__item:hover {
  background: var(--pg-wash);
  color: var(--pg-heading);
}

.ds-scope-menu__item.is-active {
  background: var(--pg-wash-strong);
  color: var(--pg-heading);
  font-weight: 600;
}

/* Fallback actions at the end of a list */
.ds-result--action .ds-result-title {
  color: var(--pg-ink-2);
  font-family: var(--pg-font);
  font-size: 13.5px;
  font-weight: 500;
}

.ds-result--action q {
  color: var(--pg-heading);
  font-family: var(--pg-font-mono);
  quotes: '“' '”';
}

.ds-result__go {
  align-self: center;
  color: var(--pg-muted);
  opacity: 0;
}

.ds-result--action:hover .ds-result__go,
.ds-result--action.is-selected .ds-result__go {
  opacity: 1;
}

.ds-kind-action {
  --kind-color: var(--pg-muted);
  --kind-bg: transparent;
  border: 1px dashed var(--pg-line-strong);
}

/* Category cards for an empty query */
.ds-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 2px 4px 6px;
}

.ds-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--pg-line);
  border-radius: 10px;
  color: var(--pg-ink);
  text-decoration: none;
  transition: background-color var(--pg-dur) var(--pg-ease),
              border-color var(--pg-dur) var(--pg-ease);
}

.ds-cat:hover,
.ds-cat.is-selected {
  border-color: var(--pg-line-strong);
  background: var(--pg-wash);
  text-decoration: none;
}

.ds-cat__body {
  flex: 1 1 auto;
  min-width: 0;
}

.ds-cat__body strong {
  display: block;
  color: var(--pg-heading);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

.ds-cat__body span {
  display: block;
  overflow: hidden;
  color: var(--pg-muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-cat small {
  flex: none;
  color: var(--pg-muted);
  font-family: var(--pg-font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.pg-palette__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0;
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--pg-ink);
  font-family: var(--pg-font-mono), var(--pg-font);
  font-size: 16px;
}

.pg-palette__input::placeholder {
  color: var(--pg-muted);
  font-family: var(--pg-font);
  font-size: 15px;
}

.pg-palette__close {
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ds-app kbd,
.pg-palette kbd {
  display: inline-block;
  min-width: 18px;
  margin: 0 1px;
  padding: 0 5px;
  border: 1px solid var(--pg-line);
  border-radius: 5px;
  background: var(--pg-canvas);
  color: var(--pg-muted);
  font-family: var(--pg-font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}

.pg-palette__body {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.pg-palette__list {
  min-height: 120px;
  padding: 6px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.pg-palette__list .ds-result {
  padding: 8px 10px;
}

.pg-palette__list .ds-result-title {
  font-size: 13.5px;
}

.pg-palette__heading {
  padding: 8px 10px 4px;
  color: var(--pg-muted);
  font-size: 11.5px;
  font-weight: 700;
}

.pg-palette__preview {
  display: none;
  min-width: 0;
  border-left: 1px solid var(--pg-line);
  overflow-y: auto;
  scrollbar-width: thin;
}

.pg-palette__preview .ds-preview-head {
  padding: 12px 18px 10px;
}

.pg-palette__preview .ds-preview-title {
  font-size: 18px;
}

.pg-palette__preview .ds-doc {
  padding: 14px 18px 22px;
  font-size: 13.5px;
}

.pg-palette__preview .ds-related {
  margin: 0 18px 22px;
}

.pg-palette__foot {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--pg-line);
  color: var(--pg-muted);
  font-size: 11.5px;
}

.pg-palette__foot kbd {
  margin-right: 3px;
}

.pg-palette__status {
  margin-left: auto;
  white-space: nowrap;
}

.pg-palette--browse .pg-palette__body {
  grid-template-columns: minmax(0, 1fr);
}

.pg-palette--browse .pg-palette__preview {
  display: none;
}

.pg-palette--browse .pg-palette__list {
  padding: 8px 10px 10px;
}

.pg-palette__all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 14px;
  color: var(--pg-link);
  font-weight: 500;
  text-decoration: none;
}

.pg-palette__all .pg-icon {
  width: 14px;
  height: 14px;
}

@media (min-width: 1100px) {
  .pg-palette {
    width: min(1040px, calc(100vw - 48px));
    max-height: min(680px, calc(100vh - 80px));
  }

  .pg-palette__body {
    grid-template-columns: 380px minmax(0, 1fr);
  }

  .pg-palette__preview {
    display: block;
  }
}

/* Site-wide search results (search/sitesearch.html) */
.ss-lead {
  color: var(--pg-ink-2);
}

.ss-form {
  max-width: 560px;
  margin-bottom: 1.5rem;
}

.ss-count,
.ss-empty,
.ss-error {
  color: var(--pg-muted);
  font-size: 13.5px;
}

.ss-hits {
  margin: 0 0 1.5rem;
  padding-left: 1.6em;
}

.ss-hit {
  margin: 0 0 1.1rem;
}

.ss-hit__title {
  font-size: 16px;
  font-weight: 600;
}

.ss-hit__abstract {
  margin: 0.2rem 0;
  color: var(--pg-ink-2);
  font-size: 14px;
  line-height: 1.65;
}

.ss-hit__url {
  color: var(--pg-muted) !important;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.ss-pages a {
  margin-right: 6px;
}

/* ---------------------------------------------------------- motion/print */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .pg-header,
  .pg-drawer,
  .pg-shout,
  .pg-footer {
    display: none !important;
  }

  .pg-wordmark {
    color: #264d6d;
    -webkit-text-fill-color: #264d6d;
  }
}