.spi-search-enhanced { position: relative; }
.spi-search-enhanced > .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.spi-search-suggestions {
  position: absolute;
  z-index: 100;
  top: calc(100% + .35rem);
  left: 0;
  width: min(38rem, calc(100vw - 2rem));
  max-height: var(--spi-search-popup-max-height, min(32rem, 70vh));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #073b4c;
  background: #fffdf7;
  border: 1px solid #9fc8ce;
  border-radius: .75rem;
  box-shadow: 0 1rem 2.5rem rgba(7, 45, 57, .2);
}
.spi-search-suggestions[hidden] { display: none; }
.spi-search-suggestions ul { flex: 1 1 auto; min-height: 0; margin: 0; padding: .35rem; overflow-y: auto; list-style: none; }
.spi-search-suggestions li + li { border-top: 1px solid #e2eeee; }
.spi-guide .spi-search-suggestions a,
.spi-search-suggestions a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: .15rem .75rem;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: .7rem .75rem;
  color: inherit;
  text-decoration: none;
  border-radius: .45rem;
}
.spi-search-suggestions a:hover,
.spi-search-suggestions a:focus-visible,
.spi-search-suggestions a[aria-selected="true"] { background: #e8f6f5; outline: 2px solid #087b83; outline-offset: -2px; }
.spi-search-suggestions strong { min-width: 0; color: #073b4c; overflow-wrap: anywhere; }
.spi-search-suggestions span { grid-column: 2; grid-row: 1; color: #087b83; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.spi-search-suggestions small { display: block; grid-column: 1 / -1; grid-row: 2; min-width: 0; color: #526f76; line-height: 1.35; overflow-wrap: anywhere; }
.spi-search-suggestions__footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .9rem; color: #526f76; border-top: 1px solid #d8e8e8; font-size: .9rem; }
.spi-search-suggestions__total { color: #526f76; font-size: .9rem; font-weight: 600; letter-spacing: normal; text-transform: none; }
.spi-search-suggestions__footer a.spi-search-suggestions__more { display: inline; width: auto; padding: .2rem 0; color: #087b83; font-weight: 800; text-decoration: underline; }

.spi-easy-nav form { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.spi-easy-nav form input { width: min(13rem, 22vw); min-height: 2.4rem; padding: .45rem .6rem; border: 1px solid rgba(255,255,255,.55); border-radius: .45rem; font: inherit; }
.spi-easy-nav form button,
.spi-library-search button,
.spi-search-form button { min-height: 2.5rem; padding: .5rem .8rem; border: 0; border-radius: .45rem; color: #fff; background: #087b83; font: inherit; font-weight: 750; cursor: pointer; }
.spi-easy-nav form button { color: #073b4c; background: #fffdf7; }

.spi-library-search form { position: relative; }
.spi-library-search form input { display: inline-block; width: calc(100% - 7rem); }
.spi-library-search form button { margin-left: .35rem; }
.spi-search-form { max-width: 48rem; margin: 1.5rem 0 .75rem; }
.spi-search-form > label { display: block; margin-bottom: .45rem; color: #073b4c; font-weight: 850; }
.spi-search-form__row { display: flex; gap: .5rem; }
.spi-search-form input { flex: 1; min-width: 0; min-height: 3rem; padding: .65rem .8rem; border: 1px solid #9fc8ce; border-radius: .55rem; font: inherit; }
.spi-search-form input:focus-visible,
.spi-search-form button:focus-visible { outline: 3px solid #f4bd45; outline-offset: 2px; }
.spi-header-search { display: block; flex: 1 0 100%; grid-column: 1 / -1; width: min(48rem, calc(100vw - 2rem)); margin: .65rem auto .35rem; }
.spi-header-search > label { color: inherit; font-size: .82rem; }
.spi-header-search input { min-height: 2.75rem; color: #073b4c; background: #fffdf7; }
.spi-header-search button { min-height: 2.75rem; }
.spi-search-status { color: #526f76; }
.spi-search-results { display: grid; gap: .75rem; max-width: 58rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.spi-guide .spi-search-results a { display: block; padding: 1rem; color: inherit; text-decoration: none; background: #fff; border: 1px solid #d8e8e8; border-radius: .8rem; box-shadow: 0 .25rem 1rem rgba(7,45,57,.06); }
.spi-search-results a:hover strong { text-decoration: underline; }
.spi-search-results span { display: block; margin-bottom: .25rem; color: #087b83; font-size: .75rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.spi-search-results strong { color: #073b4c; font-size: 1.1rem; }
.spi-search-results p { margin: .35rem 0 0; color: #526f76; }

mark.spi-search-match { color: inherit; background: #ffe49a; box-shadow: 0 0 0 .08em #e3ae2b; border-radius: .12em; }
.spi-search-highlight-notice { display: flex; align-items: center; justify-content: space-between; gap: .65rem; max-width: 58rem; margin: 0 0 1rem; padding: .45rem .65rem; color: #073b4c; background: #fff7d8; border: 1px solid #e3c363; border-radius: .45rem; font-size: .9rem; }
.spi-search-highlight-notice button { padding: .25rem .45rem; color: #073b4c; background: transparent; border: 1px solid currentColor; border-radius: .3rem; font: inherit; font-weight: 750; cursor: pointer; }

@media (max-width: 760px) {
  .spi-easy-nav form { flex: 1 1 100%; order: 20; margin: .25rem 0 0; }
  .spi-easy-nav form input { flex: 1; width: auto; min-width: 8rem; }
  .spi-search-suggestions { width: 100%; }
  .spi-library-search form input { width: 100%; }
  .spi-library-search form button { width: 100%; margin: .4rem 0 0; }
  .spi-header-search { width: calc(100vw - 1.25rem); margin: .45rem auto; }
}
@media (max-width: 480px) {
  .spi-easy-nav form { grid-column: 1 / -1; }
  .spi-search-form__row { gap: .35rem; }
  .spi-search-form button { padding-inline: .65rem; }
  .spi-search-suggestions__footer { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .spi-search-highlight-notice { align-items: flex-start; flex-direction: column; }
}

/* Keep the existing Theme Studio brand and one search form in a compact rail.

   R84a (Dave): the task navigation is no longer a sibling that scrolls away --
   it is the header's SECOND ROW, inside the same sticky container, on the same
   background and under the same shadow. One section, one surface, one shadow.
   The conditions strip and the page body still start below the whole thing,
   because `--spi-floating-header-height` is measured from the container's own
   bounding box (spi-search.js) and that box now includes the nav row. */
html:has(body.spi-easy-shell) {
  overflow-x: clip;
  scroll-padding-top: calc(var(--spi-floating-header-height, 9rem) + .75rem);
}
body.spi-easy-shell { overflow-x: clip; }
.spi-easy-shell :is(.luperiq-ts-layout--header, .site-header)[data-spi-floating-header] {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem 2rem;
  padding: .7rem max(1rem, calc((100vw - var(--luperiq-container, 1180px)) / 2)) !important;
  overflow: visible;
  box-shadow: 0 .3rem 1rem rgba(3, 38, 55, .16) !important;
}
.spi-easy-shell [data-spi-floating-header] > :is(.luperiq-ts-layout-row:first-child, .header-inner) {
  display: block;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
}
.spi-easy-shell [data-spi-floating-header] :is(.luperiq-ts-brand, .header-brand) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .6rem;
}
.spi-easy-shell [data-spi-floating-header] :is(.luperiq-ts-brand-logo, .luperiq-ts-brand-logo-img, .header-brand-logo) {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
}
.spi-easy-shell [data-spi-floating-header] :is(.luperiq-ts-brand-name, .header-brand-name) {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.2;
}
.spi-easy-shell :is(.luperiq-ts-layout--header, .site-header)[data-spi-floating-header]
  :is(.header-nav-row, .header-phone-mobile, .luperiq-ts-block--nav-toggle, .lq-nav-cgm-hamburger) { display: none !important; }
.spi-easy-shell [data-spi-floating-header] > .spi-header-search {
  flex: 1 1 22rem;
  width: auto;
  max-width: 42rem;
  min-width: 0;
  margin: 0;
}
.spi-easy-shell [data-spi-floating-header] > .spi-header-search > label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.spi-easy-shell [data-spi-floating-header] .spi-search-suggestions { width: 100%; }
/* The second row of the floating header. `flex-basis: 100%` is what makes it a
   ROW rather than a third item on the brand/search line, and the background is
   deliberately absent: it inherits the header's own, which is the whole point
   of the change. */
.spi-easy-shell [data-spi-floating-header] > .spi-header-navigation {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: .15rem 0 0;
  background: none;
}
@media (max-width: 760px) {
  html:has(body.spi-easy-shell) { scroll-padding-top: calc(var(--spi-floating-header-height, 13rem) + .75rem); }
  .spi-easy-shell :is(.luperiq-ts-layout--header, .site-header)[data-spi-floating-header] { justify-content: flex-start; gap: .5rem; padding: .55rem .75rem !important; }
  .spi-easy-shell [data-spi-floating-header] > .spi-header-search { flex-basis: 100%; max-width: none; }
  .spi-easy-shell [data-spi-floating-header] :is(.luperiq-ts-brand-logo, .luperiq-ts-brand-logo-img, .header-brand-logo) {
    width: 36px; height: 36px; max-width: 36px; max-height: 36px;
  }
}

/* Brief 2 (Dave, 2026-09-23): "☕ Buy us a coffee", a small pill. Paper with
   ink text: quieter than the yellow newsletter pill, and it reads on the
   photo header and the pale news front page alike. Two copies, one shown at
   a time: beside the search on a wide screen (the task row is full at
   1280px, so a pill there wrapped and made the header 50px taller), in the
   task row below that, and a 38px cup at the end of the task row on a
   phone (the block further down). */
.spi-easy-shell [data-spi-floating-header] .spi-coffee-slot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  padding: .5rem .8rem;
  border: 1px solid rgba(7, 59, 76, .35);
  border-radius: 999px;
  color: #073b4c !important;
  background: #fffdf7 !important;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}
.spi-easy-shell [data-spi-floating-header] .spi-coffee-slot:hover,
.spi-easy-shell [data-spi-floating-header] .spi-coffee-slot:focus-visible { background: #fde68a !important; }
.spi-easy-shell [data-spi-floating-header] > .spi-coffee-slot.spi-coffee-slot--top { display: none; }
@media (min-width: 900px) and (min-height: 521px) {
  .spi-easy-shell [data-spi-floating-header] > .spi-coffee-slot.spi-coffee-slot--top { display: inline-flex; }
  .spi-easy-shell [data-spi-floating-header] .spi-header-navigation > .spi-coffee-slot { display: none; }
}

/* R85: on a phone the floating header is three short rows -- brand with the
   newsletter pill beside it, the search, and one sideways-scrolling task row.
   `display: contents` lifts the nav wrapper's two children into the header's
   grid without changing the markup the byte-diff verifiers already know. */
@media (max-width: 650px), (max-height: 520px) {
  html:has(body.spi-easy-shell) { scroll-padding-top: calc(var(--spi-floating-header-height, 9.5rem) + .75rem); }
  .spi-easy-shell :is(.luperiq-ts-layout--header, .site-header)[data-spi-floating-header] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand pill" "search search" "nav nav";
    align-items: center;
    gap: .35rem .5rem;
    padding: .4rem .6rem !important;
  }
  .spi-easy-shell [data-spi-floating-header] > :is(.luperiq-ts-layout-row:first-child, .header-inner) { grid-area: brand; min-width: 0; }
  .spi-easy-shell [data-spi-floating-header] :is(.luperiq-ts-brand-name, .header-brand-name) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .spi-easy-shell [data-spi-floating-header] > .spi-header-search { grid-area: search; width: 100%; max-width: none; margin: 0; }
  .spi-easy-shell [data-spi-floating-header] > .spi-header-search input,
  .spi-easy-shell [data-spi-floating-header] > .spi-header-search button { min-height: 2.5rem; }
  .spi-easy-shell [data-spi-floating-header] > .spi-header-navigation { display: contents; }
  .spi-easy-shell [data-spi-floating-header] .spi-header-navigation > .spi-easy-nav { grid-area: nav; }
  .spi-easy-shell [data-spi-floating-header] .spi-header-navigation > .spi-newsletter-slot {
    grid-area: pill; justify-self: end; flex: 0 0 auto; min-height: 34px; padding: .35rem .7rem; font-size: .8rem; white-space: nowrap;
  }
  /* Brief 2 (Dave): the phone header must not get taller. The coffee button
     is a 38px cup at the right end of the task row, in the task row's own
     grid cell: the row scrolls under it, fading out before it, and its last
     chip can still scroll clear. Its words stay for screen readers. */
  .spi-easy-shell [data-spi-floating-header] .spi-header-navigation > .spi-coffee-slot {
    grid-area: nav; justify-self: end; align-self: start; position: relative; z-index: 2;
    width: 38px; height: 38px; min-height: 38px; margin-top: .1rem; padding: 0; gap: 0; justify-content: center;
    font-size: 1.15rem; box-shadow: -.45rem 0 .55rem rgba(7, 59, 76, .28);
  }
  .spi-easy-shell [data-spi-floating-header] .spi-header-navigation > .spi-coffee-slot .spi-coffee-slot__words {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .spi-easy-shell [data-spi-floating-header] .spi-header-navigation:has(> .spi-coffee-slot) > .spi-easy-nav {
    padding-right: calc(38px + 1.6rem);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 38px - 2.4rem), transparent calc(100% - 38px - .45rem));
    mask-image: linear-gradient(to right, #000 calc(100% - 38px - 2.4rem), transparent calc(100% - 38px - .45rem));
  }
}

/* R87 (Dave): a phone turned sideways is ~390px tall, and a sticky header of
   any useful size is then all you can see. Below 520px of height the header
   keeps the compact three-row layout above but stops sticking: it scrolls
   away with the page and comes back at the top. Anchor scroll padding drops
   to its bare margin because nothing covers the top of the viewport any more. */
@media (max-height: 520px) {
  .spi-easy-shell :is(.luperiq-ts-layout--header, .site-header)[data-spi-floating-header] { position: static !important; }
  html:has(body.spi-easy-shell) { scroll-padding-top: .75rem; }
}