/* ============================================================================
   gooey.css · post search for a blog index (zackjudson.ai, rapidimpactlabs.com)

   Ink shapes on a light ground: a Search pill, a 46px orb and up to five
   result capsules, all inside .goo__stage, which carries the goo filter defined
   in gooey.js. The round ends are deliberate. The filter needs them to neck and
   pinch, and the zackjudson.ai brand already owns this family: the Metaball marks
   ("the soft counterpoint. Hard-edged solids, constructed curves"), with capsules
   the one shape BRAND_LINEAGE allows radius on. The threshold keeps edges hard.

   Themes only swap tokens. Default: zackjudson.ai (blueprint ink on the sheet,
   sky, amber). .goo--ri: Rapid Impact (ink on paper, lime, General Sans).

   Moving values are custom properties that gooey.js writes (defaults = closed):
     --w pill width   --w1 open width   --ol orb x   --oo orb opacity      (px, 0-1)
     --go --gs --gx --gb   glyph opacity, scale, x, blur
     --rsv   height the form adds under the pill so the list makes room for matches
     per row: --y --s --b --to   y, scale, blur, text opacity
   --e is 0 under the filter and 5px without it: the inset that stands in for the
   ~5px the threshold erodes from every edge, so both modes read the same size.
   ========================================================================== */

.goo {
  --goo-ink: var(--blueprint, #023047);
  --goo-text: var(--sheet, #f7f8f8);
  --goo-soft: var(--sky, #8ecae6);
  --goo-hot: var(--amber, #ffd000);
  --goo-num: var(--goo-soft);
  --goo-ring: var(--blue-deep, #176d82);
  --goo-font: var(--sc-font-text, "Instrument Sans", sans-serif);
  --goo-mono: var(--sc-font-mono, ui-monospace, monospace);
  --e: 0px;
  --w: 108;
  --w1: 420;
  --ol: 17;
  --oo: 0;
  --go: 0;
  --gs: 0.8;
  --gx: -4;
  --gb: 5;
  --rsv: 0;
  position: relative;
  z-index: 3;
  height: calc(44px + var(--rsv) * 1px);
  margin: var(--sc-5, 1.5rem) 0 0;
}
/* Rapid Impact: ink goo on paper, lime voltage, General Sans (the log on rapidimpactlabs.com) */
.goo--ri {
  --goo-ink: var(--ink, #18171c);
  --goo-text: var(--paper, #fcfeed);
  --goo-soft: #c9c9c0;
  --goo-hot: var(--lime, #e3f850);
  --goo-num: var(--lime, #e3f850);
  --goo-ring: var(--moss-deep, #2d8a4e);
  --goo-font: var(--font-body, "General Sans", sans-serif);
  --goo-mono: var(--font-mono, ui-monospace, monospace);
}
.goo[hidden] { display: none; }
.goo--nogoo { --e: 5px; }
.goo__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the goo stage: sized to hold the open pill, the orb and five slots, so the
   filter region (its box +10%) always covers every shape. Clicks pass through
   everywhere except the shapes themselves. */
.goo__stage {
  position: absolute; left: 0; top: 0;
  width: calc(var(--w1) * 1px + 64px);
  height: calc(44px + 5 * 50px + 16px);
  filter: url(#goo-filter);
  pointer-events: none;
}
.goo--nogoo .goo__stage { filter: none; }

/* ---- the pill ---- */
.goo__pill {
  position: absolute; left: var(--e); top: var(--e);
  box-sizing: border-box;
  width: calc(var(--w) * 1px - 2 * var(--e));
  height: calc(44px - 2 * var(--e));
  padding: 0 calc(20px - var(--e)) 0 calc(22px - var(--e));
  display: flex; align-items: center;
  border-radius: 999px;
  background: var(--goo-ink);
  pointer-events: auto;
  transition: scale 0.32s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.goo:not(.is-open) .goo__pill:hover { scale: 1.05; }   /* source whileHover, closed only */
.goo__pill:active { scale: 0.95; }                     /* source whileTap */

.goo .goo__open {
  position: absolute; inset: 0;
  margin: 0; padding: 0 0 0 calc(22px - var(--e));
  border: 0; border-radius: inherit;
  background: transparent;
  color: var(--goo-soft);
  font-family: var(--goo-font);
  font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: -0.01em;
  text-align: left; text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
}
.goo__label { display: inline-block; white-space: nowrap; }
.goo.show-input .goo__open { display: none; }

.goo .goo__input {
  display: none;
  flex: 1 1 auto; min-width: 0;
  height: 100%;
  margin: 0; padding: 0;
  border: 0; border-radius: 0;
  background: transparent;
  color: var(--goo-text);
  caret-color: var(--goo-hot);
  font-family: var(--goo-font);
  font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.01em;   /* 16px keeps iOS from zooming */
  appearance: none; -webkit-appearance: none;
  outline: 0;
}
.goo.show-input .goo__input { display: block; }
.goo__input::placeholder { color: var(--goo-soft); opacity: 1; }
.goo__input::-webkit-search-decoration,
.goo__input::-webkit-search-cancel-button,
.goo__input::-webkit-search-results-button { -webkit-appearance: none; appearance: none; display: none; }
.goo__input:-webkit-autofill { -webkit-box-shadow: 0 0 0 44px var(--goo-ink) inset; -webkit-text-fill-color: var(--goo-text); }

/* ---- the orb: buds off the pill's end, settles 5px clear ---- */
.goo .goo__orb {
  position: absolute; left: 0; top: calc(var(--e) - 1px);
  width: calc(46px - 2 * var(--e)); height: calc(46px - 2 * var(--e));
  margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--goo-ink);
  color: var(--goo-hot);
  display: grid; place-items: center;
  transform: translateX(calc(var(--ol) * 1px + var(--e)));
  opacity: var(--oo);
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
}
.goo.is-open .goo__orb { pointer-events: auto; }
.goo.is-open .goo__orb:hover,
.goo.is-open .goo__orb:focus-visible { background: var(--goo-hot); color: var(--goo-ink); }

.goo__glyph, .goo__spin {
  width: 20px; height: 20px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square;
}
.goo__glyph {
  opacity: var(--go);
  transform: translateX(calc(var(--gx) * 1px)) scale(var(--gs));
  filter: blur(calc(var(--gb) * 1px));
}
.goo__spin { display: none; }
.goo.is-loading .goo__glyph { display: none; }
.goo.is-loading .goo__spin { display: block; animation: goo-spin 0.5s linear infinite; }
@keyframes goo-spin { to { transform: rotate(180deg); } }

/* ---- the matches: capsules that condense out of the pill's underside ---- */
.goo .goo__rows {
  position: absolute; left: 0; top: 0; z-index: -1;   /* behind the pill, as in the source */
  width: 0; height: 0;
  margin: 0; padding: 0;
  list-style: none;
}
.goo .goo__row {
  --y: 0; --s: 0.3; --b: 0; --to: 0;
  position: absolute; left: var(--e); top: var(--e);
  box-sizing: border-box;
  width: calc(var(--w1) * 1px - 2 * var(--e));
  height: calc(46px - 2 * var(--e));
  margin: 0; padding: 0;
  list-style: none;
  border-radius: 999px;
  background: var(--goo-ink);
  transform: translateY(calc(var(--y) * 1px)) scale(var(--s));
  filter: blur(calc(var(--b) * 1px));
  pointer-events: auto;
  transition: scale 0.2s ease-out, background-color 0.15s linear;
}
.goo .goo__row::before, .goo .goo__row::marker { content: none; }
.goo .goo__row.is-leaving, .goo .goo__row--none { pointer-events: none; }
.goo .goo__row:not(.is-leaving):hover { scale: 1.02; }      /* source whileHover */
.goo .goo__row:not(.is-leaving):hover,
.goo .goo__row:focus-within { background: var(--goo-hot); }

.goo .goo__hit,
.goo .goo__hit:hover,
.goo .goo__hit:focus {
  display: flex; align-items: center; gap: 12px;
  box-sizing: border-box;
  height: 100%;
  padding: 0 calc(22px - var(--e));
  border: 0; border-radius: inherit;
  background: transparent; box-shadow: none;
  color: var(--goo-text);
  font-family: var(--goo-font);
  font-size: 14px; font-style: normal; font-weight: 400; line-height: 21px;
  text-decoration: none; text-transform: none; letter-spacing: normal;
  outline: 0;
}
.goo__hit > span { opacity: var(--to); }
.goo__n {
  flex: 0 0 auto;
  font-family: var(--goo-mono);
  font-size: 9px; letter-spacing: 0.14em; line-height: 1;
  color: var(--goo-num);
}
.goo__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goo__row--none .goo__t { color: var(--goo-soft); }
.goo .goo__row:not(.is-leaving):hover .goo__hit,
.goo .goo__row:focus-within .goo__hit,
.goo .goo__row:not(.is-leaving):hover .goo__n,
.goo .goo__row:focus-within .goo__n { color: var(--goo-ink); }

/* ---- outside the filter: a keyboard ring for the closed pill, the live count ---- */
.goo__ring {
  position: absolute; left: 1px; top: 1px;
  box-sizing: border-box;
  width: calc(var(--w) * 1px - 2px); height: 42px;
  border: 2px solid var(--goo-ring);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
}
.goo.is-kbd:not(.show-input) .goo__ring { opacity: 1; }

.goo .goo__status {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .goo__pill, .goo .goo__row { transition: none; }
  .goo.is-loading .goo__spin { animation: none; }
}

@media (max-width: 700px) {
  .goo { margin-top: var(--sc-4, 1rem); }
}