/* The site search [M Oct 23 1:41 PM: "super smooth and modern with smart search"; 1:48 PM his TikTok reference: a glass pill, a thin light outline,
   a divider and the magnifier at the right, small caps under it; round 1 marked Keep 2:02-2:04 PM; C build, `1023 CTO`]. The pill's round ends are
   the one place the square-corner rule bends (--radius-pill, his reference). Tokens only: no px font-size, margin, padding or gap (brand lint F).
   The pill is drawn once (templates/_brand.html › search_pill); static/search.js mounts the same markup in the overlay. */

/* the bar's magnifier, beside the four words */
.srch-open { position: relative; flex: none; width: 32px; height: var(--tap); padding: 0; margin: 0 calc(var(--space-1) * -1) 0 0; display: grid; place-items: center; background: none; border: 0; color: var(--ink); cursor: pointer; border-radius: var(--radius-none); }
.srch-open::after { content: ""; position: absolute; inset: 0 calc(var(--space-2) * -0.75); }
.srch-open svg { width: 20px; height: 20px; display: block; }
.srch-open:hover { color: var(--forest); }

/* the pill */
.srch-pill { position: relative; display: flex; align-items: center; height: var(--button-height); border-radius: var(--radius-pill); border: 1.5px solid var(--ink-30); background: var(--ground); color: var(--ink); transition: border-color var(--dur-beat) var(--ease-settle), background-color var(--dur-beat) var(--ease-settle); }
.srch-pill:focus-within { border-color: var(--ink); }
.srch-pill .sp-field { position: relative; flex: 1; min-width: 0; height: 100%; }
.srch-pill input { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; padding: 0 var(--space-3) 0 var(--gutter); font-family: var(--font-name); font-weight: 600; font-size: var(--type-field); color: inherit; outline: none; -webkit-appearance: none; appearance: none; border-radius: var(--radius-none); }
.srch-pill input::placeholder { color: transparent; }
.srch-pill input::-webkit-search-cancel-button, .srch-pill input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.srch-pill .sp-ghost, .srch-pill .sp-ph { position: absolute; inset: 0; padding: 0 var(--space-3) 0 var(--gutter); display: flex; align-items: center; font-family: var(--font-name); font-weight: 600; font-size: var(--type-field); white-space: pre; overflow: hidden; pointer-events: none; }
.srch-pill .sp-ghost { color: transparent; }
.srch-pill .sp-ghost i { font-style: normal; color: var(--ink-45); }
.srch-pill .sp-ph { color: var(--ink-45); }
.srch-pill [hidden] { display: none; }
.srch-pill .sp-typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: var(--space-1); vertical-align: -0.12em; background: currentColor; animation: srch-blink 1s steps(1) infinite; }
@keyframes srch-blink { 50% { opacity: 0; } }
.srch-pill .sp-clr, .srch-pill .sp-back { flex: none; width: var(--tap); height: var(--tap); border: 0; background: none; display: grid; place-items: center; color: var(--ink-66); cursor: pointer; border-radius: var(--radius-dot); }
.srch-pill .sp-back { display: none; margin-left: var(--space-1); color: var(--ink); }
.srch-pill .sp-div { width: 1.5px; align-self: stretch; margin-block: var(--space-3); background: currentColor; opacity: .3; }
.srch-pill .sp-go { flex: none; width: 58px; height: 100%; border: 0; background: none; display: grid; place-items: center; color: inherit; cursor: pointer; border-radius: var(--radius-pill); }
.srch-pill svg { width: 22px; height: 22px; display: block; }
.srch-under { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-2); padding-inline: var(--gutter) var(--space-1); }
.srch-under .sp-cap { font-family: var(--font-name); font-weight: 600; font-size: var(--type-cap); letter-spacing: .14em; text-transform: uppercase; }
.srch-under .sp-keys { font-family: var(--font-name); font-size: var(--type-cap); letter-spacing: .03em; opacity: .85; }
@media (hover: none) { .srch-under .sp-keys { display: none; } }

/* on the hero: glass over the clip */
.srch-hero { max-width: 620px; margin-top: var(--space-4); }
.srch-hero .srch-pill { border-color: var(--glass-line); background: var(--glass); color: var(--on-glass); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.srch-hero .srch-pill:focus-within { border-color: var(--on-glass); background: var(--glass-focus); }
.srch-hero .sp-ph, .srch-hero .sp-clr { color: var(--on-glass-dim); }
.srch-hero .srch-under { color: var(--on-glass-dim); }

/* the overlay: full screen on a phone, a panel under the bar on a wider screen */
.srch { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; background: rgba(29,33,30,.32); padding: calc(env(safe-area-inset-top) + var(--space-7)) max(var(--space-4), env(safe-area-inset-right)) var(--space-4) max(var(--space-4), env(safe-area-inset-left)); }
.srch[hidden] { display: none; }
.srch-panel { width: 100%; max-width: 720px; max-height: 100%; display: flex; flex-direction: column; background: var(--ground); box-shadow: 0 18px 50px rgba(20,24,21,.28); border-radius: var(--radius-none); overflow: hidden; }
.srch-panel > .srch-pill { margin: var(--space-3); flex: none; }
.srch-sheet { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: var(--space-4); }
@media (max-width: 700px) {
  .srch { padding: env(safe-area-inset-top) 0 0; background: var(--ground); }
  .srch-panel { max-width: none; height: 100%; box-shadow: none; border-radius: var(--radius-none); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
  .srch-panel .sp-back { display: grid; }
  .srch-panel > .srch-pill { margin: var(--space-3) var(--space-3) var(--space-2); }
}
html.srch-on, html.srch-on body { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .srch:not([hidden]) .srch-panel { animation: srch-in var(--dur-beat) var(--ease-settle); }
  @keyframes srch-in { from { transform: translateY(-8px); opacity: 0; } }
}

/* inside the sheet */
.sr-grp { padding: var(--space-2) var(--space-4); }
.sr-grp + .sr-grp { border-top: 1px solid var(--ink-15); }
.sr-h { margin: var(--space-1) 0; color: var(--ink-66); font-family: var(--font-name); font-weight: 600; font-size: var(--type-cap); letter-spacing: .12em; text-transform: uppercase; display: flex; justify-content: space-between; gap: var(--space-2); }
.sr-h a { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--type-small); color: var(--forest); }
.sr-h .sr-n { text-transform: none; letter-spacing: 0; font-weight: 500; }
.sr-sug, .sr-pl, .sr-lnk, .sr-top { border-radius: var(--radius-none); text-decoration: none; color: inherit; }
.sr-sug { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); padding: var(--space-1) var(--space-2); margin-inline: calc(var(--space-2) * -1); cursor: pointer; }
.sr-sug svg { width: 20px; height: 20px; flex: none; color: var(--ink-45); }
.sr-sug .q { font-family: var(--font-name); font-weight: 500; font-size: var(--type-ui); color: var(--ink-75); }
.sr-sug .q b { color: var(--ink); font-weight: 700; }
.sr-sug .tail { margin-left: auto; font-size: var(--type-small); color: var(--ink-45); white-space: nowrap; }
.sr-sug[aria-selected="true"], .sr-sug:hover, .sr-pl[aria-selected="true"], .sr-pl:hover, .sr-lnk[aria-selected="true"], .sr-lnk:hover, .sr-top:hover, .sr-top[aria-selected="true"] { background: var(--ink-05); }
.sr-ans { margin: var(--space-2) var(--space-4) var(--space-3); padding: var(--space-4); background: var(--ed-plaster); border-left: 3px solid var(--sage); }
.sr-ans .k { font-family: var(--font-name); font-weight: 600; font-size: var(--type-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--sage-dk); }
.sr-ans h3 { font-family: var(--font-editorial); font-weight: 300; font-size: var(--type-display); line-height: 1.2; margin: var(--space-1) 0; text-wrap: balance; }
.sr-ans .sk { font-family: var(--font-name); font-weight: 600; font-size: var(--type-ui); margin: 0 0 var(--space-2); }
.sr-ans p { margin: 0 0 var(--space-2); font-size: var(--type-ui); max-width: 62ch; }
.sr-ans .src { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: baseline; font-size: var(--type-small); }
.sr-ans .src a { color: var(--forest); font-weight: 500; }
.sr-ans .from { color: var(--ink-45); }
.sr-ans .more { display: none; } .sr-ans.open .more { display: block; }
.sr-ans .tg { background: none; border: 0; padding: 0; color: var(--forest); font: inherit; font-weight: 500; font-size: var(--type-small); cursor: pointer; text-decoration: underline; text-decoration-color: var(--ink-30); text-underline-offset: .16em; }
.sr-sf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); margin: var(--space-2) 0 var(--space-3); }
.sr-sf div { background: var(--ground); padding: var(--space-2) var(--space-3); }
.sr-sf span { display: block; font-family: var(--font-name); font-weight: 600; font-size: var(--type-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); }
.sr-sf strong { font-family: var(--font-name); font-weight: 700; font-size: var(--type-ui); }
.sr-sf .safe strong { color: var(--forest); } .sr-sf .bad strong { color: var(--clay); }
.sr-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0 var(--space-4) var(--space-2); }
.sr-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--ink-30); background: var(--ground); color: var(--ink); font-family: var(--font-name); font-weight: 600; font-size: var(--type-small); cursor: pointer; }
.sr-chip.on { background: var(--forest); color: var(--ground); border-color: var(--forest); }
.sr-chip.on::after { content: "×"; font-weight: 500; opacity: .8; }
.sr-chip .n { font-weight: 500; opacity: .6; }
.sr-note { padding: 0 var(--space-4); margin: var(--space-2) 0 var(--space-1); font-size: var(--type-small); color: var(--ink-66); }
.sr-pl { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-1) var(--space-2); margin-inline: calc(var(--space-2) * -1); }
.sr-pl img, .sr-top img { width: 56px; height: 56px; object-fit: contain; background: var(--photo); border-radius: var(--radius-none); }
.sr-pl .nm { font-family: var(--font-name); font-weight: 600; font-size: var(--type-ui); line-height: 1.25; }
.sr-pl .nm mark, .sr-top .nm mark { background: none; color: inherit; font-weight: 800; }
.sr-pl .la, .sr-top .la { font-style: italic; color: var(--ink-45); font-size: var(--type-small); }
.sr-pl .ln { font-size: var(--type-small); color: var(--ink-66); line-height: 1.35; }
.sr-pl .rt { text-align: right; font-size: var(--type-small); color: var(--ink-66); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-pl .rt b { display: block; font-family: var(--font-name); font-weight: 600; font-size: var(--type-cap); letter-spacing: .12em; text-transform: uppercase; }
.sr-c-forever { color: var(--corner-forever); } .sr-c-friend { color: var(--sage-dk); } .sr-c-fling { color: var(--sage-dk); } .sr-c-foe { color: var(--corner-foe); }
.sr-buy { display: inline-block; font-family: var(--font-name); font-weight: 700; font-size: var(--type-cap); letter-spacing: .06em; color: var(--forest); }
.sr-top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-1) var(--space-2) var(--space-2); margin-inline: calc(var(--space-2) * -1); }
.sr-top img { width: 96px; height: 96px; border-radius: var(--radius-none); }
.sr-top .nm { font-family: var(--font-name); font-weight: 700; font-size: var(--type-head); }
.sr-top .cn { font-family: var(--font-name); font-weight: 600; font-size: var(--type-cap); letter-spacing: .12em; text-transform: uppercase; margin-left: var(--space-2); }
.sr-top .one { font-family: var(--font-editorial); font-style: italic; font-weight: 300; font-size: var(--type-ui); line-height: 1.35; margin: var(--space-1) 0; }
.sr-gl { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--type-small); color: var(--ink-75); }
.sr-gl b { font-family: var(--font-name); font-weight: 600; font-size: var(--type-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); margin-right: var(--space-1); }
.sr-lnk { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2); margin-inline: calc(var(--space-2) * -1); }
.sr-lnk .t { font-family: var(--font-name); font-weight: 600; font-size: var(--type-ui); }
.sr-lnk .d { font-size: var(--type-small); color: var(--ink-66); }
.sr-lnk .ty { margin-left: auto; flex: none; font-family: var(--font-name); font-weight: 600; font-size: var(--type-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); }
.sr-none { padding: var(--space-3) var(--space-4); font-size: var(--type-ui); }
.sr-none p { margin: 0 0 var(--space-2); }
.sr-none a { color: var(--forest); font-weight: 500; }
.sr-ask { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.sr-ask input { flex: 1; min-width: 0; height: var(--tap); border: 1px solid var(--ink-30); border-radius: var(--radius-pill); padding: 0 var(--space-4); background: var(--ground); font: inherit; font-size: var(--type-ui); }
.sr-ask button { height: var(--tap); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--forest); color: var(--ground); font-family: var(--font-name); font-weight: 700; font-size: var(--type-small); cursor: pointer; }
.sr-foot { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4) 0; border-top: 1px solid var(--ink-15); margin-top: var(--space-1); font-size: var(--type-cap); color: var(--ink-45); }
@media (max-width: 700px) {
  .sr-pl { grid-template-columns: 56px minmax(0, 1fr); }
  .sr-pl .rt { grid-column: 2; text-align: left; display: flex; gap: var(--space-2); align-items: baseline; }
  .sr-pl .rt b { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .srch-pill .sp-typed::after { animation: none; } }