/* The hero search pill (Otis, 2026-10-11). A trigger for the finder modal:
   nothing opens under it, so no hero overflow can clip anything. Every colour, radius and face comes from
   the theme's tokens through --askp-*; a theme (or a sister brand) restyles
   it by setting those on .askp or any ancestor. Phone first, 44px targets. */
.askp{
  --askp-ink:var(--plum-night,var(--humus,#2e1b29));
  --askp-accent:var(--plum,var(--moss-deep,#6a3c5f));
  --askp-accent-2:var(--plum-deep,var(--moss-night,#54304c));
  --askp-ring:var(--violet,var(--ochre,#8d6d97));
  --askp-soft:var(--lilac,var(--bone,#eee9f0));
  --askp-soft-2:var(--lilac-deep,var(--lichen,#e4dce8));
  --askp-card:var(--white,#ffffff);
  --askp-muted:var(--quiet,var(--humus-soft,#6d5f6b));
  --askp-line:var(--rule,var(--line,rgba(36,23,34,.15)));
  --askp-shade:rgba(46,27,41,.55);
  --askp-shade-2:rgba(46,27,41,.06);
  --askp-halo:rgba(141,109,151,.28);
  --askp-mark:var(--sage-ink,var(--moss,#5f6f43));
  --askp-radius:var(--radius,22px);
  --askp-radius-sm:var(--radius-sm,12px);
  --askp-font:var(--sans,var(--body,"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif));
  --askp-serif:var(--serif,var(--display,"IBM Plex Serif",Georgia,serif));
  position:relative;width:100%;max-width:640px;margin:0;text-align:left;
  font:400 16px/1.5 var(--askp-font);color:var(--askp-ink);-webkit-text-size-adjust:100%
}
.askp *,.askp *::before,.askp *::after{box-sizing:border-box}
.askp-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.askp-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.askp-form{margin:0}

/* the pill */
.askp-field{position:relative;display:flex;align-items:center;gap:2px;min-height:60px;padding:6px 6px 6px 16px;
  background:var(--askp-card);border:1px solid transparent;border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 22px 44px -26px var(--askp-shade),0 0 0 1px var(--askp-shade-2);
  transition:box-shadow .18s ease,border-color .18s ease}
.askp--line .askp-field{border-color:var(--askp-line);box-shadow:none}
.askp-field:focus-within{border-color:var(--askp-accent);box-shadow:0 0 0 4px var(--askp-halo),0 22px 44px -26px var(--askp-shade)}
.askp-lens{flex:none;display:grid;place-items:center;color:var(--askp-accent)}
.askp-box{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.askp-input{width:100%;min-width:0;height:46px;margin:0;padding:0 8px;border:0;outline:0;background:transparent;
  font:400 17px/1.2 var(--askp-font);color:var(--askp-ink);-webkit-appearance:none;appearance:none;border-radius:0}
.askp-input::placeholder{color:var(--askp-muted);opacity:1}
.askp.is-live .askp-input::placeholder{color:transparent}
/* the turning question: an overlay so it can fade; never read aloud (the label is fixed) */
.askp-ph{position:absolute;left:8px;right:4px;top:50%;transform:translateY(-50%);pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--askp-muted);font:400 17px/1.2 var(--askp-font)}
.askp-ph[hidden],.askp:not(.is-live) .askp-ph{display:none}
.askp-ph-t{display:inline;transition:opacity .3s ease,transform .3s ease}
.askp-ph.is-out .askp-ph-t{opacity:0;transform:translateY(-6px);display:inline-block}
.askp-go{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:48px;height:48px;padding:0 16px 0 18px;border:0;border-radius:999px;
  background:var(--askp-accent);color:#fff;font:600 15px/1 var(--askp-font);letter-spacing:.01em;cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease,transform .15s ease}
.askp-go:active{transform:scale(.97)}
@media (hover:hover){.askp-go:hover{background:var(--askp-accent-2)}}
@media (max-width:359px){.askp-go{padding:0;width:48px}.askp-go-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* the pill is a door: pointer over the whole field, never a text cursor */
.askp.is-live .askp-field{cursor:pointer}
.askp.is-live .askp-input{cursor:pointer}

/* quick searches under the pill (option chips): each opens the finder */
.askp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.askp-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--askp-line);border-radius:999px;
  background:var(--askp-card);color:var(--askp-ink);font:500 14.5px/1.2 var(--askp-font);cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;transition:background .15s ease,border-color .15s ease}
.askp--light .askp-chip{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.14);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (hover:hover){.askp-chip:hover{background:var(--askp-soft)}.askp--light .askp-chip:hover{background:rgba(255,255,255,.26)}}

/* the notice: not advice, 911 and 988, always visible under the pill */
.askp-note{margin:10px 6px 0;font-size:13px;line-height:1.5;color:var(--askp-muted)}
.askp-note a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;
  padding:12px 0;margin:-12px 0;touch-action:manipulation}
.askp--light .askp-note{color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(20,10,18,.5)}

/* focus: a clear ring, everywhere */
.askp a:focus-visible,.askp button:focus-visible{outline:2px solid var(--askp-accent);outline-offset:2px}
.askp .askp-input:focus-visible{outline:0}

@media (min-width:640px){
  .askp-field{min-height:66px;padding-left:22px}
  .askp-input,.askp-ph{font-size:18px}
  .askp-go{height:52px;padding:0 20px 0 22px}
}
@media (prefers-reduced-motion:reduce){
  .askp-ph-t,.askp-field,.askp-go,.askp-chip{transition:none}
}

/* shades follow the theme's ink and ring (fallback: the literals above) */
@supports (color:color-mix(in srgb,red 50%,blue)){
  .askp{
    --askp-shade:color-mix(in srgb,var(--askp-ink) 55%,transparent);
    --askp-shade-2:color-mix(in srgb,var(--askp-ink) 6%,transparent);
    --askp-halo:color-mix(in srgb,var(--askp-ring) 28%,transparent)
  }
}