/* Custom "screenshot" admonition: marks a Windows screenshot still to capture. */
:root {
  --md-admonition-icon--screenshot: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6H5v4H3V4h6v2m10 4V6h-4V4h6v6h-2M5 14v4h4v2H3v-6h2m10 4h4v-4h2v6h-6v-2M7 8h10v8H7V8Z"/></svg>');
}
.md-typeset .admonition.screenshot,
.md-typeset details.screenshot { border-color: #7e57c2; }
.md-typeset .screenshot > .admonition-title,
.md-typeset .screenshot > summary { background-color: rgba(126, 87, 194, .1); }
.md-typeset .screenshot > .admonition-title::before,
.md-typeset .screenshot > summary::before {
  background-color: #7e57c2;
  -webkit-mask-image: var(--md-admonition-icon--screenshot);
          mask-image: var(--md-admonition-icon--screenshot);
}

/* "walkthrough" admonition: the at-a-glance box that opens every walkthrough. */
:root {
  --ppee-walkthrough: #00897b;
  --ppee-verdict: #c2185b;
  --md-admonition-icon--walkthrough: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 15.5v2h1.5v-2m8-6.5v6.5h1.5v-6.5m-6 3.5v3h1.5v-3m8-3.5v6.5h1.5v-6.5M18 5v10.5h1.5V5M2 19.5V21h20v-1.5Z"/></svg>');
  --md-admonition-icon--verdict: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.3 20.28 11.9 10.68 10.5 9.26l-.71.71a1 1 0 0 1-1.41 0l-.71-.71a1 1 0 0 1 0-1.41l5.66-5.66a1 1 0 0 1 1.41 0l.71.71a1 1 0 0 1 0 1.41l-.71.7 1.42 1.42a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.42l1.41 1.41.71-.71a1 1 0 0 1 1.41 0l.71.71a1 1 0 0 1 0 1.41l-5.66 5.66a1 1 0 0 1-1.41 0l-.71-.71a1 1 0 0 1 0-1.41l.71-.7-1.42-1.42-9.6 9.6a1 1 0 0 1-1.41 0 1 1 0 0 1 0-1.41M20 19a2 2 0 0 1 2 2v1H12v-1a2 2 0 0 1 2-2Z"/></svg>');
}
.md-typeset .admonition.walkthrough,
.md-typeset details.walkthrough { border-color: var(--ppee-walkthrough); border-width: 0 0 0 .3rem; }
.md-typeset .walkthrough > .admonition-title,
.md-typeset .walkthrough > summary { background-color: rgba(0, 137, 123, .12); font-weight: 700; }
.md-typeset .walkthrough > .admonition-title::before,
.md-typeset .walkthrough > summary::before {
  background-color: var(--ppee-walkthrough);
  -webkit-mask-image: var(--md-admonition-icon--walkthrough);
          mask-image: var(--md-admonition-icon--walkthrough);
}
.md-typeset .admonition.verdict,
.md-typeset details.verdict { border-color: var(--ppee-verdict); }
.md-typeset .verdict > .admonition-title,
.md-typeset .verdict > summary { background-color: rgba(194, 24, 91, .1); font-weight: 700; }
.md-typeset .verdict > .admonition-title::before,
.md-typeset .verdict > summary::before {
  background-color: var(--ppee-verdict);
  -webkit-mask-image: var(--md-admonition-icon--verdict);
          mask-image: var(--md-admonition-icon--verdict);
}
/* The facts list inside an at-a-glance box: label column, then value. */
.md-typeset .walkthrough dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; margin: .6rem 0; }
.md-typeset .walkthrough dt { font-weight: 700; margin: 0; }
.md-typeset .walkthrough dd { margin: 0; }
@media screen and (max-width: 40em) {
  .md-typeset .walkthrough dl { grid-template-columns: 1fr; }
  .md-typeset .walkthrough dd { margin-bottom: .4rem; }
}
/* Step headings in walkthrough pages: "Step 2 · …" gets a pill. */
.md-typeset .ppee-step { display: inline-block; padding: 0 .55em; margin-right: .4em; border-radius: 1em;
  background: var(--ppee-walkthrough); color: #fff; font-size: .8em; vertical-align: .1em; }
/* Walkthrough gallery cards: a colored top edge. */
.md-typeset .grid.cards.walkthroughs > ul > li { border-top: .2rem solid var(--ppee-walkthrough); }

/* Screenshots: subtle frame so light UI shots don't melt into the page. */
.md-typeset img.shot {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .3rem;
  box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .12);
}

/* Option reference: keep switch names on one line in tables. */
.md-typeset table code { white-space: nowrap; }

/* Hero on the home page. */
.ppee-hero { text-align: center; padding: 1rem 0 .5rem; }
.ppee-hero h1 { margin-bottom: .3rem; }
.ppee-hero p { font-size: 1.05rem; color: var(--md-default-fg-color--light); }

/* Light warm blue palette (mkdocs.yml: primary/accent "custom"). */
:root, [data-md-color-scheme="default"] {
  --md-primary-fg-color:        #4a8fc7;
  --md-primary-fg-color--light: #7db1dd;
  --md-primary-fg-color--dark:  #2f6fa3;
  --md-primary-bg-color:        #ffffff;
  --md-accent-fg-color:         #2f80d0;
  --md-accent-fg-color--transparent: rgba(47, 128, 208, .1);
  --md-typeset-a-color:         #2f6fa3;
}
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #3a78ad;
  --md-primary-fg-color--light: #6aa3d4;
  --md-primary-fg-color--dark:  #285a85;
  --md-accent-fg-color:         #7ab8ee;
  --md-accent-fg-color--transparent: rgba(122, 184, 238, .12);
  --md-typeset-a-color:         #8fc3f0;
}

/* Home page: keep the three hero buttons on one line at every width */
.ppee-hero p:has(> .md-button) {
  display: flex; flex-wrap: nowrap; justify-content: center; gap: .5rem;
}
.ppee-hero p:has(> .md-button) .md-button {
  margin: 0; white-space: nowrap; flex: 0 1 auto; min-width: 0;
  font-size: clamp(.5rem, 2.4vw, .8rem); padding: .55em 1em;
}
@media screen and (max-width: 30em) {
  .ppee-hero p:has(> .md-button) { gap: .3rem; }
  .ppee-hero p:has(> .md-button) .md-button { padding: .5em .6em; }
}
@media screen and (max-width: 25em) {
  .ppee-hero p:has(> .md-button) .md-button { padding: .5em .5em; }
  .ppee-hero p:has(> .md-button) .md-button .twemoji { display: none; }
}

/* ==========================================================================
   Visual polish: typography, header, hero, cards, tables, code, admonitions.
   Uses Material's color variables so light and dark schemes both follow.
   ========================================================================== */
:root {
  --ppee-radius: .5rem;
  --ppee-border: var(--md-default-fg-color--lightest);
  --ppee-surface: rgba(74, 143, 199, .045);
  --ppee-shadow: 0 1px 2px rgba(15, 35, 60, .06), 0 .4rem 1.2rem rgba(15, 35, 60, .06);
  --ppee-shadow-hover: 0 2px 4px rgba(15, 35, 60, .08), 0 .8rem 2rem rgba(15, 35, 60, .12);
}
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #14171d;
  --md-code-bg-color: #1b1f27;
  --ppee-surface: rgba(122, 184, 238, .05);
  --ppee-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 .4rem 1.2rem rgba(0, 0, 0, .25);
  --ppee-shadow-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 .8rem 2rem rgba(0, 0, 0, .4);
}

/* Typography */
.md-typeset { font-size: .78rem; line-height: 1.7; }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  font-weight: 700; letter-spacing: -.015em; color: var(--md-default-fg-color);
}
.md-typeset h1 { font-weight: 800; font-size: 2.1em; letter-spacing: -.025em; margin-bottom: .8em; }
.md-typeset h2 {
  margin-top: 2.2em; padding-top: .9em;
  border-top: 1px solid var(--ppee-border);
}
.md-typeset h1 + h2, .md-typeset .ppee-hero + h2 { border-top: 0; padding-top: 0; }
.md-typeset h3 { margin-top: 1.8em; }
.md-typeset :not(pre) > code {
  border-radius: .25rem; padding: .1em .35em;
  border: 1px solid var(--ppee-border);
}
.md-typeset a { text-underline-offset: .2em; }
.md-typeset a:hover { text-decoration: underline; }
.md-typeset hr { border-bottom-color: var(--ppee-border); margin: 2em 0; }

/* Header and tabs: a quiet gradient with a hairline instead of a heavy bar */
.md-header {
  background: linear-gradient(90deg, var(--md-primary-fg-color--dark), var(--md-primary-fg-color));
  box-shadow: none;
}
.md-header--shadow { box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 .2rem .8rem rgba(0, 0, 0, .1); }
.md-tabs { background: var(--md-primary-fg-color); }
.md-tabs__link { font-weight: 500; opacity: .8; }
.md-tabs__link--active, .md-tabs__link:hover { opacity: 1; }
.md-tabs__item--active .md-tabs__link { font-weight: 700; }
.md-search__form { border-radius: .4rem; }

/* Sidebar navigation: pill on the current page */
.md-nav__link--active {
  font-weight: 600;
}
.md-sidebar--primary .md-nav__link--active:not(.md-nav__container > .md-nav__link) {
  background: var(--md-accent-fg-color--transparent);
  border-radius: .3rem; margin-left: -.5rem; padding-left: .5rem;
}
.md-nav__title { font-weight: 700; }

/* Hero */
.md-typeset .ppee-hero {
  position: relative; overflow: hidden;
  margin: -.4rem 0 2rem; padding: 2.6rem 1.2rem 2rem;
  border-radius: calc(var(--ppee-radius) * 2);
  border: 1px solid var(--ppee-border);
  background:
    radial-gradient(60rem 18rem at 50% -6rem, rgba(74, 143, 199, .22), transparent 70%),
    radial-gradient(20rem 12rem at 100% 100%, rgba(0, 137, 123, .10), transparent 70%),
    var(--ppee-surface);
}
.md-typeset .ppee-hero h1 {
  font-size: 2.6em; margin: 0 0 .5rem;
  background: linear-gradient(120deg, var(--md-primary-fg-color--dark), var(--md-accent-fg-color));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-md-color-scheme="slate"] .md-typeset .ppee-hero h1 {
  background-image: linear-gradient(120deg, #e8f2fb, var(--md-accent-fg-color));
}
.md-typeset .ppee-hero > p:not(:has(> .md-button)) { max-width: 38rem; margin-left: auto; margin-right: auto; }
.md-typeset .ppee-hero p:has(> .md-button) { margin-top: 1.6rem; }

/* Buttons */
.md-typeset .md-button {
  border-radius: 2rem; font-weight: 600; border-width: 1px;
  transition: transform .15s, box-shadow .15s, background-color .15s, color .15s;
}
.md-typeset .md-button:hover { transform: translateY(-1px); box-shadow: var(--ppee-shadow); text-decoration: none; }
.md-typeset .md-button--primary { box-shadow: 0 .3rem .9rem rgba(47, 111, 163, .3); }

/* Card grids */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  border: 1px solid var(--ppee-border);
  border-radius: var(--ppee-radius);
  background: var(--md-default-bg-color);
  box-shadow: var(--ppee-shadow);
  padding: 1rem 1.1rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ppee-shadow-hover);
  border-color: var(--md-primary-fg-color--light);
}
.md-typeset .grid.cards > ul > li > hr { margin: .6rem 0; }
.md-typeset .grid.cards .lg { color: var(--md-primary-fg-color); }

/* Tables: rounded frame, tinted header, zebra rows */
.md-typeset table:not([class]) {
  border: 1px solid var(--ppee-border);
  border-radius: var(--ppee-radius);
  box-shadow: none; overflow: hidden; font-size: .72rem;
}
.md-typeset table:not([class]) th {
  background: var(--ppee-surface);
  font-weight: 700; text-transform: none;
  border-bottom: 1px solid var(--ppee-border);
}
.md-typeset table:not([class]) tbody tr:nth-child(even) { background: rgba(127, 127, 127, .035); }
.md-typeset table:not([class]) tbody tr:hover { background: var(--md-accent-fg-color--transparent); box-shadow: none; }
.md-typeset table:not([class]) td { border-top-color: var(--ppee-border); }

/* Code blocks */
.md-typeset pre > code { border-radius: var(--ppee-radius); }
.md-typeset .highlight, .md-typeset pre {
  border-radius: var(--ppee-radius);
}
.md-typeset .highlight pre, .md-typeset > pre {
  border: 1px solid var(--ppee-border); border-radius: var(--ppee-radius);
}
.md-typeset .highlight span.filename {
  border-radius: var(--ppee-radius) var(--ppee-radius) 0 0;
  border: 1px solid var(--ppee-border); border-bottom: 0;
}
.md-typeset .highlight span.filename + pre { border-top-left-radius: 0; border-top-right-radius: 0; }
.md-typeset .tabbed-set { border-radius: var(--ppee-radius); }

/* Admonitions: softer, rounded, no heavy shadow */
.md-typeset .admonition, .md-typeset details {
  border-radius: var(--ppee-radius);
  box-shadow: none;
  border-width: 1px 1px 1px .25rem;
  font-size: .74rem;
}
.md-typeset .admonition-title, .md-typeset summary { font-weight: 700; }
.md-typeset .admonition.walkthrough, .md-typeset details.walkthrough { border-width: 1px 1px 1px .3rem; }

/* Screenshots: larger radius to match cards */
.md-typeset img.shot { border-radius: var(--ppee-radius); box-shadow: var(--ppee-shadow); }

/* Footer */
.md-footer { background: var(--md-default-bg-color); color: var(--md-default-fg-color); border-top: 1px solid var(--ppee-border); }
.md-footer__link { opacity: .85; }
.md-footer__link:hover { opacity: 1; }
.md-footer__title { color: var(--md-default-fg-color); }
.md-footer__direction { color: var(--md-default-fg-color--light); }
.md-footer-meta { background: var(--ppee-surface); }
.md-footer-meta, .md-footer-meta .md-copyright, .md-footer-meta a { color: var(--md-default-fg-color--light); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .md-typeset .md-button, .md-typeset .grid.cards > ul > li, .md-typeset .grid > .card { transition: none; }
  .md-typeset .md-button:hover, .md-typeset .grid.cards > ul > li:hover, .md-typeset .grid > .card:hover { transform: none; }
}

/* Regex sample table: let long patterns wrap instead of scrolling sideways. */
.md-typeset .ppee-regex-table table:not([class]) { display: table; width: 100%; table-layout: fixed; }
.md-typeset .ppee-regex-table table code { white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
.md-typeset .ppee-regex-table th:nth-child(1) { width: 26%; }
.md-typeset .ppee-regex-table th:nth-child(2) { width: 48%; }
.md-typeset .ppee-regex-table th:nth-child(3) { width: 26%; }
/* Copy button after each regex sample pattern (javascripts/copy-pattern.js). */
.md-typeset .ppee-regex-table td:has(> .ppee-copy) { display: flex; align-items: flex-start; gap: .4rem; }
.md-typeset .ppee-regex-table td:has(> .ppee-copy) > code { flex: 1 1 auto; min-width: 0; }
.md-typeset .ppee-copy {
  flex: 0 0 auto; width: 1.3rem; height: 1.3rem; margin-top: .1rem; padding: 0; cursor: pointer;
  border: 1px solid var(--ppee-border); border-radius: .25rem; background: transparent;
  color: var(--md-default-fg-color--light);
}
.md-typeset .ppee-copy::before {
  content: ""; display: block; width: .8rem; height: .8rem; margin: auto; background-color: currentColor;
  -webkit-mask: var(--md-clipboard-icon) center / contain no-repeat;
          mask: var(--md-clipboard-icon) center / contain no-repeat;
}
.md-typeset .ppee-copy:hover, .md-typeset .ppee-copy:focus-visible { color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); }
.md-typeset .ppee-copy--done { color: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); }
.md-typeset .ppee-copy--done::before {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59 21 7Z"/></svg>');
          mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59 21 7Z"/></svg>');
}