/* Search this page (assets/page-search.js). Big, dark text: Paul finds small grey text hard to read. */
.page-search { position: relative; margin: 0 0 28px; font-family: var(--f-sans); }
.ps-label { display: block; font-weight: 700; font-size: 1.15rem; color: var(--ink); margin: 0 0 10px; }
.ps-field { position: relative; }
.ps-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.page-search input {
  width: 100%; min-height: 64px; padding: 14px 56px 14px 56px; font: 500 1.25rem/1.3 var(--f-sans); color: var(--ink);
  background: var(--sheet); border: 2px solid var(--line-2); border-radius: 16px; -webkit-appearance: none; appearance: none;
  box-shadow: var(--shadow-sm);
}
.page-search input::placeholder { color: var(--ink-soft); opacity: 1; }
.page-search input:focus { outline: none; border-color: var(--post); box-shadow: 0 0 0 4px var(--post-soft); }
.page-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; height: 22px; width: 22px; cursor: pointer;
  background: currentColor; color: var(--ink-soft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.ps-key { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 600 0.95rem/1 var(--f-mono); color: var(--ink-soft);
  border: 1.5px solid var(--line-2); border-radius: 7px; padding: 5px 9px; background: var(--bg-2); pointer-events: none; }
.ps-key[hidden] { display: none; }
.ps-count { margin: 10px 2px 0; font-size: 1.05rem; color: var(--ink); min-height: 0; }
.ps-count:empty { display: none; }
.ps-results {
  list-style: none; margin: 10px 0 0; padding: 8px; position: absolute; left: 0; right: 0; z-index: 40;
  background: var(--sheet); border: 1.5px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow-lg);
  max-height: min(70vh, 640px); overflow-y: auto; overscroll-behavior: contain;
}
.ps-results[hidden] { display: none; }
.ps-results li { margin: 0; padding: 0; }
.ps-results a { display: block; padding: 14px 16px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.ps-results [aria-selected="true"] a { background: var(--post-soft); }
.ps-results small { display: block; font: 600 0.95rem/1.3 var(--f-sans); color: var(--ink-soft); margin-bottom: 4px; }
.ps-results b { display: block; font: 700 1.2rem/1.35 var(--f-sans); color: var(--ink); }
.ps-results span { display: block; font-size: 1.05rem; line-height: 1.5; color: var(--ink); margin-top: 4px; }
.ps-results mark, mark.ps-hit { background: #ffe066; color: #101215; border-radius: 3px; padding: 0 1px; }
.ps-none { padding: 14px 16px; font-size: 1.1rem; color: var(--ink); }
.ps-target { animation: ps-flash 2.4s ease-out 1; outline: none; }
@keyframes ps-flash { 0%, 30% { background: var(--post-soft); box-shadow: 0 0 0 10px var(--post-soft); } 100% { background: transparent; box-shadow: 0 0 0 10px transparent; } }
.ps-fab {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--bg); font: 700 1.1rem/1 var(--f-sans); cursor: pointer; box-shadow: var(--shadow-lg);
}
.ps-fab[hidden] { display: none; }
.ps-fab:hover { background: var(--post); color: #fff; }
@media (max-width: 680px) {
  .page-search input { min-height: 60px; font-size: 1.15rem; padding-right: 18px; }
  .ps-key { display: none; }
  .ps-results { max-height: 60vh; }
  .ps-fab span { display: none; }
  .ps-fab { padding: 0; width: 60px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ps-target { animation: none; } }
/* In a narrow side column (the developers page): a smaller box, and results wide enough to read over the page. */
@media (min-width: 961px) {
  .ps-side input { font-size: 1.1rem; padding-right: 16px; }
  .ps-side .ps-key { display: none; }
  .ps-side .ps-results { right: auto; width: min(660px, 62vw); }
}