/*
 * The site header (inc/site-header.php). Plan and decisions:
 * roadmaps/header-redesign.md.
 *
 * One dark bar at every width, --theme-palette-color-4, which on a phone joins
 * the painted status strip and the bottom nav into one frame. Layout changes
 * hands at 999.98px / 1000px, the boundary the bottom nav pairs to (STYLING.md
 * § Navigation chrome pairs to the header): below it the phone row, at and
 * above it the desktop row with main-nav inline and no bottom nav.
 *
 * The dropdowns and overlays are light (--theme-palette-color-8).
 */

/* ---- Geometry, published for every consumer ------------------------------
   Blocksy's own names, so its sticky sidebar and anchor offsets, ui-guidance's
   sticky aids and pms-custom's hard-block overlay all read them unchanged.
   On the body class the module adds only when the header rendered, so focus
   mode (no header) leaves them unset, as Blocksy did. No shrink. */

body.pp-has-site-header {
  --header-height: 56px;
  --header-sticky-height: 56px;
  --sticky-shrink: 100;
}

@media (min-width: 1000px) {
  body.pp-has-site-header {
    --header-height: 64px;
    --header-sticky-height: 64px;
  }
}

/* Sticky on Blocksy's own wrapper: the markup inside it is exactly its height,
   so an inner element would have nowhere to stick. It pins under the status
   strip (the top safe-area inset, 0px in a browser tab) and the admin bar.
   z-index 50 keeps the rank showcase-content's overlay (40) and Basic banner
   (45) sit under, and makes the header a stacking context: the bell panel
   rendered inside it clears the bottom nav in its own padding. Nothing here
   may take a transform or filter, which would turn the bell panel's
   position: fixed into a box inside the header. */
body.pp-has-site-header #header {
  position: sticky;
  top: calc(var(--admin-bar, 0px) + env(safe-area-inset-top, 0px));
  z-index: 50;
}

/* ---- The bar ------------------------------------------------------------- */

.pp-site-header {
  background: var(--theme-palette-color-4);
  color: var(--theme-palette-color-8);
}

.pp-site-header__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--header-height, 56px);
  box-sizing: border-box;
}

/* The phone row runs edge to edge: 16px to the logo, 4px past the last icon,
   whose glyph then sits about 16px from the edge inside its 44px box. */
@media (max-width: 999.98px) {
  .pp-site-header__inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 4px 0 16px;
  }
}

/* The desktop row sits on the content's own width (Blocksy's .ct-container). */
@media (min-width: 1000px) {
  .pp-site-header__inner {
    gap: 32px;
  }
}

.pp-site-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  text-decoration: none;
}

.pp-site-header__logo:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* The PNG wordmark painted white, until the SVG replaces it (STYLING.md ›
   Native surfaces on a dark ground: the wordmark on a dark ground takes the
   prominent tone). On the img only: a filter on #header would contain the
   bell panel. */
.pp-site-header__wordmark {
  display: block;
  width: auto;
  height: 24px;
  filter: brightness(0) invert(1);
}

.pp-site-header__wordmark--text {
  height: auto;
  filter: none;
  color: var(--theme-palette-color-8);
  font-size: 1.05rem;
  font-weight: 600;
}

@media (min-width: 1000px) {
  .pp-site-header__wordmark {
    height: 28px;
  }
}

/* ---- The desktop menu ---------------------------------------------------- */

.pp-site-header__nav {
  display: none;
}

@media (min-width: 1000px) {
  .pp-site-header__nav {
    display: flex;
    align-self: stretch;
  }
}

.pp-site-header__menu {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-site-header__menu > li {
  position: relative;
  display: flex;
  margin: 0;
}

/* Home and Recall are spliced into main-nav right after each other (the
   compass by this theme, Recall by smart-review); on the bar Recall goes to
   the far end, so Home and Recall flank the sections, the bottom nav's order. */
.pp-site-header__menu > .pp-nav-recall-item {
  order: 1;
}

/* Text only on the bar: the splices carry a glyph for Blocksy's header. */
.pp-site-header__menu > li > a > svg {
  display: none;
}

.pp-site-header__menu > li > a,
.pp-site-header .pp-site-header__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgba(var(--pp-steel-1-rgb), 0.72);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.pp-site-header__menu > li > a:hover,
.pp-site-header .pp-site-header__more:hover,
.pp-site-header .pp-site-header__more[aria-expanded="true"] {
  color: var(--theme-palette-color-8);
}

/* The current section: the ground's prominent tone and the accent underline
   the bottom nav gives its current item (the Tabs marker, in a new role). */
.pp-site-header__menu > li.current-menu-item > a,
.pp-site-header__menu > li.current-menu-ancestor > .pp-site-header__more {
  color: var(--theme-palette-color-8);
  border-bottom-color: var(--theme-palette-color-5);
}

.pp-site-header__menu > li > a:focus-visible,
.pp-site-header .pp-site-header__more:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: -2px;
}

.pp-site-header__more svg {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}

.pp-site-header__more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ---- Dropdowns: More, and the account menu ---------------------------------
   STYLING.md § A small dropdown menu: the surface, the rows and their hover.
   Class 4: no Back entry, closed by a tap outside, Esc, or focus leaving. */

.pp-site-header__account-anchor {
  position: relative;
  display: flex;
}

.pp-site-header__dropdown:not([hidden]),
.pp-site-header__account-menu:not([hidden]) {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 4px;
  background: var(--theme-palette-color-8);
  border: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(var(--pp-steel-7-rgb), 0.20);
  box-sizing: border-box;
  color: var(--pp-steel-7);
  animation: pp-site-header-fade 0.25s ease;
}

.pp-site-header__dropdown:not([hidden]) {
  top: 100%;
  left: 0;
}

.pp-site-header__account-menu:not([hidden]) {
  right: 0;
}

@keyframes pp-site-header-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pp-site-header__dropdown-list,
.pp-site-header__dropdown-group {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-site-header__dropdown-list li {
  margin: 0;
}

/* A group (Legacy) under a hairline, headed by its eyebrow. */
.pp-site-header__dropdown-list > li:has(> .pp-site-header__dropdown-label) {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-site-header__dropdown-label {
  display: block;
  padding: 8px 12px 4px;
  color: var(--pp-steel-5);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.pp-site-header__dropdown-link {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--pp-steel-7);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.pp-site-header__dropdown-link:hover {
  background: rgba(var(--pp-steel-7-rgb), 0.05);
  color: var(--pp-steel-7);
}

.pp-site-header__dropdown-link[aria-current="page"] {
  font-weight: 600;
}

.pp-site-header__dropdown-link:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: -2px;
}

.pp-site-header__account-who {
  margin: 0 0 4px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  color: var(--pp-steel-5);
  font-size: 0.85rem;
  line-height: 1.3;
}

/* ---- The actions ------------------------------------------------------- */

.pp-site-header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}

@media (min-width: 1000px) {
  .pp-site-header__actions {
    gap: 8px;
  }
}

/* Icon controls on the dark ground: a 44px box around a 22px glyph, no fill at
   rest, the dark ground's neutral hover (STYLING.md › Tints: hover vs. active)
   on hover and while open. latest-posts gives the bell the same metrics. */
.pp-site-header .pp-site-header__search,
.pp-site-header .pp-site-header__account,
.pp-site-header .pp-site-header__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: var(--theme-palette-color-8);
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.pp-site-header .pp-site-header__search:hover,
.pp-site-header .pp-site-header__account:hover,
.pp-site-header .pp-site-header__account[aria-expanded="true"],
.pp-site-header .pp-site-header__menu-toggle:hover {
  background: rgba(var(--pp-steel-1-rgb), 0.12);
}

.pp-site-header .pp-site-header__search:focus-visible,
.pp-site-header .pp-site-header__account:focus-visible,
.pp-site-header .pp-site-header__menu-toggle:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

.pp-site-header__search svg,
.pp-site-header__account svg,
.pp-site-header__menu-toggle svg {
  width: 22px;
  height: 22px;
}

.pp-site-header__bell {
  display: flex;
  align-items: center;
}

/* Sign in: a text link on a phone, the secondary-on-dark fill on desktop. */
.pp-site-header .pp-site-header__signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--theme-palette-color-8);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease;
}

.pp-site-header .pp-site-header__signin:hover {
  color: var(--theme-palette-color-8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Join now: the accent fill, the one filled control in the row. */
.pp-site-header .pp-site-header__join {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0 4px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--theme-palette-color-5);
  color: var(--theme-palette-color-8);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.pp-site-header .pp-site-header__join:hover {
  color: var(--theme-palette-color-8);
}

.pp-site-header .pp-site-header__signin:focus-visible,
.pp-site-header .pp-site-header__join:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

@media (max-width: 999.98px) {
  /* A guest searches from the menu sheet on a phone. */
  .pp-site-header--guest .pp-site-header__search {
    display: none;
  }
}

@media (min-width: 1000px) {
  .pp-site-header .pp-site-header__menu-toggle {
    display: none;
  }

  .pp-site-header .pp-site-header__signin {
    min-height: 36px;
    padding: 0 16px;
    background: rgba(var(--pp-steel-1-rgb), 0.12);
    font-size: 0.9375rem;
  }

  .pp-site-header .pp-site-header__signin:hover {
    background: rgba(var(--pp-steel-1-rgb), 0.20);
    text-decoration: none;
  }

  .pp-site-header .pp-site-header__join {
    margin: 0;
    padding: 0 16px;
  }
}

/* ---- Overlays: the guest sheet, the account panel, search -----------------
   Class 3 (STYLING.md § Overlays): the cross, Esc and Back close them. Printed
   on <body>, outside the header's stacking context. */

html.pp-site-header-locked {
  overflow: hidden;
}

/* The sheet and the panel exist for the phone row only; the script closes
   them when the width crosses the boundary, and this keeps them off the
   desktop row whatever state they are in. */
.pp-site-header-sheet:not([hidden]),
.pp-site-header-panel:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: calc(var(--pp-z-bottom-nav, 900) + 1);
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  background: var(--theme-palette-color-8);
  color: var(--pp-steel-7);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

@media (min-width: 1000px) {
  .pp-site-header-sheet:not([hidden]),
  .pp-site-header-panel:not([hidden]) {
    display: none;
  }
}

.pp-site-header-sheet__head,
.pp-site-header-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
}

.pp-site-header-sheet__wordmark {
  display: block;
  width: auto;
  height: 24px;
}

/* The dismiss cross, full-screen tier: a 44px disc, its own hit area. The
   search overlay's takes the dialog tier above 768px, below. */
.pp-site-header-sheet__close,
.pp-site-header-panel__close,
.pp-site-header-search__close {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--pp-steel-7-rgb), 0.06);
  box-shadow: none;
  color: var(--pp-steel-4);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.pp-site-header-sheet__close:hover,
.pp-site-header-panel__close:hover,
.pp-site-header-search__close:hover {
  background: rgba(var(--pp-steel-7-rgb), 0.12);
  color: var(--pp-steel-7);
}

.pp-site-header-sheet__close:focus-visible,
.pp-site-header-panel__close:focus-visible,
.pp-site-header-search__close:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

.pp-site-header-sheet__close svg,
.pp-site-header-panel__close svg,
.pp-site-header-search__close svg {
  width: 20px;
  height: 20px;
}

/* The sheet's search, drawn as the field it opens (STYLING.md › Text inputs). */
.pp-site-header-sheet .pp-site-header-sheet__search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0 16px 16px;
  padding: 0 12px;
  border: 1px solid rgba(var(--pp-accent-rgb), 0.22);
  border-radius: 8px;
  background: var(--pp-steel-1);
  box-shadow: none;
  color: var(--pp-steel-5);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

.pp-site-header-sheet .pp-site-header-sheet__search svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--pp-steel-4);
}

.pp-site-header-sheet .pp-site-header-sheet__search:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

/* Rows, the sheet's and the panel's: main-nav, Account and Settings. */
.pp-site-header-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pp-site-header-rows li {
  margin: 0;
}

.pp-site-header-rows > li:first-child > .pp-site-header-rows__link {
  border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-site-header-rows__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  color: var(--pp-steel-7);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.pp-site-header-rows__link:hover {
  background: rgba(var(--pp-steel-7-rgb), 0.05);
  color: var(--pp-steel-7);
}

.pp-site-header-rows__link[aria-current="page"] {
  color: var(--theme-palette-color-5);
}

.pp-site-header-rows__link:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: -2px;
}

/* Legacy: a row that opens (rows mode only). It looks like the rows around it,
   with a chevron at its end that turns while it is open. */
.pp-site-header-rows .pp-site-header-rows__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--pp-steel-7);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}

.pp-site-header-rows .pp-site-header-rows__toggle:hover {
  background: rgba(var(--pp-steel-7-rgb), 0.05);
  color: var(--pp-steel-7);
}

.pp-site-header-rows .pp-site-header-rows__toggle:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: -2px;
}

.pp-site-header-rows__toggle svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--pp-steel-4);
  transition: transform 0.18s ease;
}

.pp-site-header-rows__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.pp-site-header-rows__group,
.pp-site-header-rows__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Its children: indented one step and at regular weight, so they read as
   belonging to it rather than as rows of their own. */
.pp-site-header-rows__sub .pp-site-header-rows__link {
  padding-left: 32px;
  font-weight: 400;
}

/* The panel shows only what main-nav holds under More (Blog, Legacy): Home,
   Listen, Practice, Idioms and Recall are on the bottom nav. */
.pp-site-header-rows--groups-only > li:not(.menu-item-has-children) {
  display: none;
}

.pp-site-header-sheet__foot {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-site-header-sheet__nav {
  margin-bottom: 24px;
}

.pp-site-header-sheet .pp-site-header-sheet__signin,
.pp-site-header-sheet .pp-site-header-sheet__join {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.pp-site-header-sheet .pp-site-header-sheet__signin {
  border: 1px solid rgba(var(--pp-accent-rgb), 0.28);
  color: var(--pp-steel-7);
}

.pp-site-header-sheet .pp-site-header-sheet__signin:hover {
  background: rgba(var(--pp-steel-7-rgb), 0.05);
  color: var(--pp-steel-7);
}

.pp-site-header-sheet .pp-site-header-sheet__join {
  background: var(--theme-palette-color-5);
  color: var(--theme-palette-color-8);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pp-site-header-sheet .pp-site-header-sheet__join:hover {
  color: var(--theme-palette-color-8);
}

.pp-site-header-sheet .pp-site-header-sheet__signin:focus-visible,
.pp-site-header-sheet .pp-site-header-sheet__join:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

/* The account panel's head: who is signed in, and on which plan. */
.pp-site-header-panel__who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pp-site-header-panel__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--pp-steel-7-rgb), 0.06);
  color: var(--pp-steel-7);
}

.pp-site-header-panel__avatar svg {
  width: 22px;
  height: 22px;
}

.pp-site-header-panel__name {
  margin: 0;
  color: var(--pp-steel-7);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pp-site-header-panel__plan {
  margin: 0;
  color: var(--pp-steel-5);
  font-size: 0.85rem;
  line-height: 1.3;
}

.pp-site-header-panel__foot {
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-site-header-panel .pp-site-header-panel__logout {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--pp-steel-5);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pp-site-header-panel .pp-site-header-panel__logout:hover {
  color: var(--pp-steel-7);
}

.pp-site-header-panel .pp-site-header-panel__logout:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

/* The search overlay: a dialog on desktop, the whole screen on a phone
   (STYLING.md § Modals and dialogs: it holds a field that summons the
   keyboard). The field and pills stay put; the results scroll. */
.pp-site-header-search:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.pp-site-header-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--pp-steel-7-rgb), 0.44);
}

.pp-site-header-search__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  border-radius: 14px;
  background: var(--theme-palette-color-8);
  box-shadow: 0 18px 50px rgba(var(--pp-steel-7-rgb), 0.24);
  color: var(--pp-steel-7);
  overflow: hidden;
}

.pp-site-header-search__form {
  flex: 0 0 auto;
  margin: 0;
  padding: 16px 16px 0;
}

.pp-site-header-search__bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pp-site-header-search__field-wrap {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(var(--pp-accent-rgb), 0.22);
  border-radius: 8px;
  background: var(--pp-steel-1);
  color: var(--pp-steel-4);
  box-sizing: border-box;
}

.pp-site-header-search__field-wrap:focus-within {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

.pp-site-header-search__field-wrap svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

/* (0,2,0), over Blocksy's input:is([type=search], …) at (0,1,1): the field is
   bare inside its wrapper, which draws the input shape. The 1rem is the
   16px floor (STYLING.md › The 16px floor). */
.pp-site-header-search__field[type="search"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  outline: none;
  color: var(--pp-steel-7);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
}

.pp-site-header-search__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 12px 0 16px;
  border: 0;
}

.pp-site-header-search__pill {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

/* Hidden from sight only, so the pills stay reachable by keyboard. */
.pp-site-header-search__pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* 32px: pills abut on an 8px gap, the adjacent-control target. */
.pp-site-header-search__pill span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(var(--pp-accent-rgb), 0.28);
  border-radius: 999px;
  color: var(--pp-steel-7);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  box-sizing: border-box;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.pp-site-header-search__pill:hover span {
  background: rgba(var(--pp-steel-7-rgb), 0.05);
}

.pp-site-header-search__pill input:checked + span {
  background: var(--theme-palette-color-5);
  border-color: var(--theme-palette-color-5);
  color: var(--theme-palette-color-8);
}

.pp-site-header-search__pill input:focus-visible + span {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

.pp-site-header-search__results {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pp-site-header-search__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
}

.pp-site-header-search__list li {
  margin: 0;
}

.pp-site-header-search__result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--pp-steel-7-rgb), 0.12);
  text-decoration: none;
}

.pp-site-header-search__result:hover {
  background: rgba(var(--pp-steel-7-rgb), 0.05);
}

.pp-site-header-search__result:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: -2px;
}

.pp-site-header-search__result-title {
  color: var(--pp-steel-7);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.pp-site-header-search__result-type {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--pp-steel-5);
  font-size: 0.85rem;
  line-height: 1.2;
}

.pp-site-header-search__result-type-icon {
  display: inline-flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

/* The section glyphs carry no stroke in their markup. */
.pp-site-header-search__result-type-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pp-site-header-search__status {
  margin: 0;
  padding: 12px 16px 16px;
  color: var(--pp-steel-5);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Above the phone breakpoint the overlay is a card with a backdrop and Esc,
   so its cross takes the dialog tier. */
@media (min-width: 769px) {
  .pp-site-header-search__close {
    width: 32px;
    height: 32px;
  }

  .pp-site-header-search__close svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 768px) {
  .pp-site-header-search:not([hidden]) {
    padding: 0;
  }

  .pp-site-header-search__dialog {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }

  .pp-site-header-search__form {
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
  }

  .pp-site-header-search__results {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-site-header__dropdown:not([hidden]),
  .pp-site-header__account-menu:not([hidden]) {
    animation: none;
  }

  .pp-site-header__more svg,
  .pp-site-header-rows__toggle svg {
    transition: none;
  }
}