/* =========================================================
   PowerAdvice — AI Search Overlay
   Morphs from #openSearch (.search-btn.mast-ask) into the colorful AI dimension.

   MOTION TIMING (full motion — prefers-reduced-motion: 120ms root fade only)
   ─────────────────────────────────────────────────────────────────────────
   Anchor: --pa-ask-origin inset + --pa-ask-origin-radius (captureAskOrigin in ai-search.js)

   Stagger ladder (60ms steps; golden-ratio alt ≈ 0 / 97 / 157ms):
     t+0ms   Backdrop  — root opacity + scale; ::before gradient scale/saturate
     t+60ms  Panel     — .pa-search-top, .pa-search-body
     t+120ms Composer  — .pa-composer; ::after scanline sweep

   Durations & easing:
     backdrop fade       180ms  cubic-bezier(0.22, 1, 0.36, 1)   --pa-search-ease-open
     backdrop morph      480ms  cubic-bezier(0.2, 0.9, 0.16, 1)   --pa-search-ease-expand
     panel enter         320ms  cubic-bezier(0.22, 1, 0.36, 1)   delay 60ms
     composer enter      280ms  cubic-bezier(0.22, 1, 0.36, 1)   delay 120ms
     scanline sweep      520ms  cubic-bezier(0.2, 0.9, 0.16, 1)   delay 120ms
     scanline fade-in    160ms  cubic-bezier(0.22, 1, 0.36, 1)   delay 120ms
     close ease          cubic-bezier(0.65, 0, 0.35, 1)           --pa-search-ease-close
     motion complete     660ms  (longest path: scan 520 + 120)    --pa-search-motion-complete

   GPU: will-change while .is-opening / .is-closing (cleared when classes drop).
   Viewport: 100dvh shell + scanline (100vh fallback); safe-area on shell/composer.
   ========================================================= */

:root{
  --pa-search-motion-backdrop: 140ms;
  --pa-search-motion-expand: 320ms;
  --pa-search-motion-panel: 200ms;
  --pa-search-motion-composer: 180ms;
  --pa-search-motion-scan: 0ms;
  --pa-search-motion-complete: 380ms;
  --pa-search-stagger-panel: 24ms;
  --pa-search-stagger-composer: 48ms;
  --pa-search-transition-duration: var(--pa-search-motion-complete);
  --pa-search-ease-open: cubic-bezier(0.22, 1, 0.36, 1);
  --pa-search-ease-expand: cubic-bezier(0.18, 0.88, 0.16, 1);
  --pa-search-ease-close: cubic-bezier(0.65, 0, 0.35, 1);
  --pa-ask-origin-x: 50%;
  --pa-ask-origin-y: 12%;
  --pa-ask-origin-radius: 28px;
  --pa-ask-origin-top: 72px;
  --pa-ask-origin-right: 30vw;
  --pa-ask-origin-bottom: calc(100vh - 128px);
  --pa-ask-origin-left: 30vw;
}

.pa-search-overlay{
  position:fixed;inset:0;z-index:100;
  isolation:isolate;
  opacity:0;pointer-events:none;
  overflow:hidden;
  transform:translateZ(0);
  transform-origin:var(--pa-ask-origin-x) var(--pa-ask-origin-y);
  -webkit-clip-path:inset(var(--pa-ask-origin-top) var(--pa-ask-origin-right) var(--pa-ask-origin-bottom) var(--pa-ask-origin-left) round var(--pa-ask-origin-radius));
  clip-path:inset(var(--pa-ask-origin-top) var(--pa-ask-origin-right) var(--pa-ask-origin-bottom) var(--pa-ask-origin-left) round var(--pa-ask-origin-radius));
  transition:
    opacity var(--pa-search-motion-backdrop) var(--pa-search-ease-close),
    -webkit-clip-path var(--pa-search-motion-expand) var(--pa-search-ease-close),
    clip-path var(--pa-search-motion-expand) var(--pa-search-ease-close);
}
.pa-search-overlay.is-opening,
.pa-search-overlay.is-closing{
  will-change:opacity, clip-path;
}
.pa-search-overlay.is-opening,
.pa-search-overlay.is-open{
  transition-timing-function:var(--pa-search-ease-open);
}
.pa-search-overlay.is-closing{
  opacity:1;
  pointer-events:none;
  transition-timing-function:var(--pa-search-ease-close);
  transition-duration:140ms, var(--pa-search-motion-expand), var(--pa-search-motion-expand);
}
.pa-search-overlay.is-open{
  opacity:1;pointer-events:auto;
  transform:translateZ(0);
  -webkit-clip-path:inset(0 0 0 0 round 0);
  clip-path:inset(0 0 0 0 round 0);
  transition-timing-function:var(--pa-search-ease-expand);
}
.pa-search-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(900px 520px at 85% 8%, rgba(34,200,200,.32), transparent 60%),
    radial-gradient(1000px 580px at 12% 95%, rgba(198,232,44,.16), transparent 58%),
    radial-gradient(1400px 780px at 18% -10%, rgba(98,36,248,.85), transparent 60%),
    linear-gradient(160deg, #1a0b48 0%, #0A0A12 55%, #080614 100%);
  transform:none;
  transform-origin:var(--pa-ask-origin-x) var(--pa-ask-origin-y);
  opacity:0;
  filter:saturate(0.72) brightness(0.9);
  transition:
    transform var(--pa-search-motion-expand) var(--pa-search-ease-close),
    opacity var(--pa-search-motion-expand) var(--pa-search-ease-close),
    filter var(--pa-search-motion-expand) var(--pa-search-ease-close);
}
.pa-search-overlay.is-opening::before,
.pa-search-overlay.is-closing::before{
  will-change:opacity, transform, filter;
}
.pa-search-overlay.is-closing::before{
  opacity:0;
  transition-duration:260ms, 260ms, 260ms;
}
.pa-search-overlay.is-opening::before,
.pa-search-overlay.is-open::before{
  transition-timing-function:var(--pa-search-ease-expand);
}
.pa-search-overlay.is-open::before{
  transform:none;
  opacity:1;
  filter:saturate(1) brightness(1);
}
.pa-search-overlay::after{
  content:none;
  display:none;
}

.pa-search-shell{
  position:relative;
  display:flex;flex-direction:column;
  height:100vh;
  height:100dvh;
  min-height:-webkit-fill-available;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  color:#fff;
}
.pa-search-top,
.pa-search-body{
  opacity:0;
  transform:translate3d(0, -8px, 0);
  transition:
    opacity var(--pa-search-motion-panel) var(--pa-search-ease-close),
    transform var(--pa-search-motion-panel) var(--pa-search-ease-close);
  transition-delay:0ms;
}
.pa-search-overlay.is-open .pa-search-top,
.pa-search-overlay.is-open .pa-search-body{
  opacity:1;
  transform:translate3d(0, 0, 0);
  transition-delay:var(--pa-search-stagger-panel);
  transition-timing-function:var(--pa-search-ease-open);
}
.pa-search-overlay.is-opening .pa-search-top,
.pa-search-overlay.is-opening .pa-search-body,
.pa-search-overlay.is-closing .pa-search-top,
.pa-search-overlay.is-closing .pa-search-body{
  will-change:opacity, transform;
}
.pa-search-overlay.is-closing .pa-search-top,
.pa-search-overlay.is-closing .pa-search-body{
  transition-delay:0ms;
  transition-duration:160ms, 160ms;
  transition-timing-function:var(--pa-search-ease-close);
}

/* ----- overlay chrome (logo + close only; not the newspaper masthead) ----- */
.pa-search-top{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto;
  grid-template-areas:"brand actions";
  align-items:center;
  gap:24px;
  box-sizing:border-box;
  min-height:calc(var(--pa-masthead-logo-height, 68px) + 24px);
  height:auto;
  padding:12px var(--pa-space-8, 32px);
  border-bottom:1px solid rgba(255,255,255,.08);
  max-width:1320px;margin:0 auto;width:100%;
}
.pa-search-overlay .pa-search-top .brand{
  grid-area:brand;
  justify-self:start;
  justify-content:flex-start;
  background:transparent;
  border:0;
  box-shadow:none;
}
.pa-search-overlay .pa-search-top .brand .brand-lockup{
  /* Supplied wordmark is black on transparent; invert to white for the
     dark Ask surface and size by width (the lockup is ~18:1).
     LONG-1108 (Doug, June 12): match the enlarged home-page masthead wordmark. */
  width:min(100%, clamp(208px, 21vw, 280px));
  height:auto;
  max-width:100%;
  filter:invert(1);
}
.pa-search-actions{
  align-items:center;
  gap:18px;
  display:flex;
  gap:16px;
  grid-area:actions;
  justify-self:end;
  min-width:0;
}
.pa-search-edition-stack{
  display:grid;
  gap:4px;
  justify-items:end;
  text-align:right;
}
.pa-search-tagline{
  color:var(--pa-white, #fff);
  font-family:var(--pa-font-serif, Georgia, serif);
  font-size:14px;
  font-style:italic;
  font-weight:600;
  line-height:1.25;
  white-space:nowrap;
}
.pa-search-edition{
  color:var(--pa-white, #fff);
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  line-height:1.25;
  white-space:nowrap;
}
.pa-search-overlay.is-open .pa-search-top{
  border-bottom-color:rgba(255,255,255,.1);
}
.pa-search-close,
.pa-search-reset{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:12px;
  color:rgba(255,255,255,.85);
  background:transparent;cursor:pointer;
  transition: background var(--pa-dur-base) var(--pa-ease-out), color var(--pa-dur-base) var(--pa-ease-out);
  justify-self:end;
}
.pa-search-reset{
  display:none;
  width:auto;
  padding:0 12px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
}
.pa-search-overlay.is-answer .pa-search-reset{display:inline-flex}
.pa-search-close:hover,
.pa-search-reset:hover{background:rgba(255,255,255,.06);color:#fff}
.pa-search-close svg{width:18px;height:18px}

/* ----- body (part of the page, not a scroll region) ----- */
.pa-search-body{
  flex:1;
  padding:56px 28px 34px;
  overflow-y:auto;
  min-height:0;
}
/* LONG-1108 (Doug, June 12): in the idle (pre-search) state, size the body to
   its content so the Ask bar sits directly under the three starter boxes
   instead of being pushed to the bottom of the viewport where it can get
   hidden. Once a search runs, .pa-idle is replaced by results and the body
   returns to flex:1 (scrolling chat), so the results UX is unchanged. */
.pa-search-overlay .pa-search-body:has(.pa-idle){
  flex:0 1 auto;
}
.pa-search-inner{
  max-width: 880px;margin:0 auto;
}

/* ----- idle state ----- */
.pa-idle{
  padding-top:8px;
}
.pa-idle h1{
  margin:0;
  max-width:780px;
  color:#fff;
  font-family:var(--pa-font-serif);
  /* LONG-1108 (Doug, June 12): smaller so "What would you like to know today?"
     fits on one line, two at most (was wrapping to three). */
  font-size:clamp(34px, 4.4vw, 54px);
  font-weight:560;
  letter-spacing:0;
  line-height:1.02;
}
.pa-idle h1 em{
  color:var(--pa-lime);
  font-style:italic;
  font-weight:520;
}
.pa-idle .sub{
  max-width:620px;
  margin:20px 0 30px;
  color:rgba(255,255,255,.68);
  font-size:17px;
  line-height:1.55;
}
.pa-sr-only{
  border:0;
  clip:rect(0,0,0,0);
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  white-space:nowrap;
  width:1px;
}
.pa-link-button{
  border:0;background:transparent;color:var(--pa-lime);font-size:12px;font-weight:800;cursor:pointer;
}

/* ----- static conversation starters ----- */
.pa-starter-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:8px;
  padding:4px 1px 12px;
}
.pa-starter{
  min-height:146px;
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:8px;
  align-items:flex-start;
  text-align:left;
  padding:16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  color:#fff;
  cursor:pointer;
  opacity:0;
  animation:pa-starter-rise 440ms var(--pa-ease-out) forwards;
  animation-delay:calc(var(--pa-starter-index, 0) * 55ms);
  transition:transform var(--pa-dur-base) var(--pa-ease-out),border-color var(--pa-dur-base) var(--pa-ease-out),background var(--pa-dur-base) var(--pa-ease-out);
}
.pa-starter:hover,
.pa-starter:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(198,232,44,.58);
  background:rgba(198,232,44,.11);
  outline:0;
}
.pa-starter-kicker{
  color:rgba(255,255,255,.5);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.pa-starter-label{font-size:15px;line-height:1.25;font-weight:700;color:#fff}
@keyframes pa-starter-rise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ----- answer state ----- */
.pa-answer h2.q{
  font-size:32px;line-height:1.1;letter-spacing:0;font-weight:600;
  margin:0 0 24px;color:#fff;
}
.pa-answer-section{margin-bottom:46px}
.pa-answer-section .head{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.pa-sources-stage{position:relative}
.pa-sources-shell{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin:0;
}
.pa-sources{
  display:flex;
  gap:16px;
  min-width:0;
  overflow-x:auto;
  padding:4px 1px 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.pa-sources::-webkit-scrollbar{height:6px}
.pa-sources::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
.pa-sources::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--pa-teal),var(--pa-lime));border-radius:999px}
.pa-source-scroll{
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.76);
  cursor:pointer;
  transition:background var(--pa-dur-base) var(--pa-ease-out), color var(--pa-dur-base) var(--pa-ease-out), border-color var(--pa-dur-base) var(--pa-ease-out);
}
.pa-source-scroll:hover{background:rgba(255,255,255,.06);border-color:rgba(198,232,44,.55);color:#fff}
.pa-source-scroll:disabled{opacity:.34;cursor:default}
.pa-source-scroll:disabled:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.76)}
.pa-sources-empty{display:block}
.pa-source{
  flex:0 0 clamp(260px, 31vw, 318px);
  scroll-snap-align:start;
  padding:14px;border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:12px;min-height:250px;
  cursor:pointer;
  transition: background var(--pa-dur-base) var(--pa-ease-out), border-color var(--pa-dur-base) var(--pa-ease-out);
}
.pa-source:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.pa-source .site{
  display:flex;align-items:center;gap:8px;font-size:11px;color:rgba(255,255,255,.6);
}
.pa-source .site span:not(.fav){
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pa-source .site b{
  margin-left:auto;
  flex-shrink:0;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
}
.pa-source .fav{
  width:16px;height:16px;border-radius:4px;background:var(--pa-violet);
  display:grid;place-items:center;font-size:9px;font-weight:800;color:#fff;
  flex-shrink:0;
}
.pa-source .fav.t{background:var(--pa-teal)}
.pa-source .fav.l{background:var(--pa-lime);color:var(--pa-ink-900)}
.pa-source .fav.i{background:#fff;color:var(--pa-ink-900)}
.pa-source .fav.logo{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  padding:2px;
}
.pa-source .fav.sponsor{
  background:#fff;
  color:var(--pa-ink-900);
}
.pa-source .fav.logo img{
  width:100%;height:100%;object-fit:contain;display:block;
}
.pa-source .title{
  font-size:13px;line-height:1.35;font-weight:700;color:#fff;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pa-source{position:relative}
.pa-source-media{
  height:124px;border-radius:7px;overflow:hidden;
  background:linear-gradient(135deg,rgba(98,36,248,.35),rgba(34,200,200,.18),rgba(198,232,44,.18));
  border:1px solid rgba(255,255,255,.08);
}
.pa-source-media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.pa-source-fallback{
  height:100%;display:flex;align-items:center;justify-content:center;gap:4px;
}
.pa-source-fallback span{
  width:12px;height:12px;border-radius:4px;border:1.5px solid currentColor;
}
.pa-source-fallback span:nth-child(1){color:var(--pa-lime)}
.pa-source-fallback span:nth-child(2){color:var(--pa-teal)}
.pa-source-fallback span:nth-child(3){color:var(--pa-violet-200)}
.pa-source.pa-skeleton{
  flex:0 0 clamp(260px, 31vw, 318px);
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.10),rgba(255,255,255,.04));
  background-size:200% 100%;animation:pa-shimmer 1.4s linear infinite;
  border-color:rgba(255,255,255,.06);min-height:92px;
}
.pa-source.pa-empty{
  flex-basis:100%;
  color:rgba(255,255,255,.55);font-size:13px;text-align:center;
  padding:20px;cursor:default;
}
.pa-source.pa-empty:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.pa-source .excerpt{
  font-size:12px;line-height:1.45;color:rgba(255,255,255,.68);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
a.pa-source{text-decoration:none;color:inherit}
.pa-answer-text table{
  width:100%;
  border-collapse:collapse;
  margin:18px 0;
  overflow:hidden;
  border-radius:10px;
}
.pa-answer-text th,.pa-answer-text td{
  border:1px solid rgba(255,255,255,.1);
  padding:10px 12px;
  text-align:left;
}
.pa-answer-text th{
  color:#fff;
  background:rgba(255,255,255,.08);
}
.pa-chart{
  margin:18px 0;
  padding:16px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}
.pa-chart-title{
  margin-bottom:14px;
  color:#fff;
  font-size:13px;
  font-weight:800;
}
.pa-chart-bars{
  display:grid;
  gap:10px;
}
.pa-chart-row{
  display:grid;
  grid-template-columns:minmax(110px,180px) 1fr auto;
  gap:10px;
  align-items:center;
  color:rgba(255,255,255,.7);
  font-size:12px;
}
.pa-chart-row i{
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--pa-teal),var(--pa-lime));
}
.pa-chart-row b{
  color:#fff;
}
@keyframes pa-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* answer body */
.pa-answer-text{
  max-width:76ch;
  font-size:18px;line-height:1.82;color:rgba(255,255,255,.94);
}
.pa-answer-text p{margin:0 0 14px}
.pa-answer-text strong{color:#fff;font-weight:700}
.pa-answer-text h2,
.pa-answer-text h3,
.pa-answer-text h4{
  margin:22px 0 8px;
  font-size:15px;
  line-height:1.35;
  color:#fff;
}
.pa-cite{
  display:inline-block;
  font-size:10px;font-weight:700;
  background:rgba(34,200,200,.18);
  color:var(--pa-teal);
  padding:2px 6px;border-radius:6px;margin:0 2px;
  cursor:pointer;vertical-align: 2px;
  transition: background var(--pa-dur-base) var(--pa-ease-out);
}
.pa-cite:hover{background:rgba(34,200,200,.32)}
.pa-answer-text ul{margin:8px 0 14px;padding-left:20px}
.pa-answer-text li{margin-bottom:6px}
.pa-answer-reveal{animation:pa-starter-rise 220ms var(--pa-ease-out) both}
.pa-error-panel{
  padding:16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.045);
}
.pa-error-panel button{
  margin-top:10px;
  border:1px solid var(--pa-lime);
  border-radius:10px;
  padding:8px 12px;
  background:var(--pa-lime);
  color:var(--pa-ink-900);
  font-weight:800;
  cursor:pointer;
}
/* streaming cursor */
.pa-stream::after{
  content:"";display:inline-block;width:8px;height:18px;
  background:var(--pa-lime);vertical-align:-3px;margin-left:3px;
  animation: paCursor 1s steps(2) infinite;
}
@keyframes paCursor{50%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  :root{
    --pa-search-motion-complete: 120ms;
    --pa-search-transition-duration: 120ms;
  }
  .pa-search-overlay{
    transition:opacity 120ms var(--pa-ease-out);
  }
  .pa-search-overlay,
  .pa-search-overlay::before,
  .pa-search-overlay::after,
  .pa-search-top,
  .pa-search-body,
  .pa-composer,
  .pa-starter,
  .pa-answer-reveal,
  .pa-composer .send,
  .pa-source.pa-skeleton,
  .pa-stream::after{
    animation:none;
  }
  .pa-search-overlay.is-opening,
  .pa-search-overlay.is-closing,
  .pa-search-overlay.is-opening::before,
  .pa-search-overlay.is-closing::before,
  .pa-search-overlay.is-opening::after,
  .pa-search-overlay.is-closing::after,
  .pa-search-overlay.is-opening .pa-search-top,
  .pa-search-overlay.is-opening .pa-search-body,
  .pa-search-overlay.is-closing .pa-search-top,
  .pa-search-overlay.is-closing .pa-search-body,
  .pa-search-overlay.is-opening .pa-composer,
  .pa-search-overlay.is-closing .pa-composer{
    will-change:auto;
  }
  .pa-search-overlay::before,
  .pa-search-overlay::after,
  .pa-search-top,
  .pa-search-body,
  .pa-composer{
    transition:none;
  }
  .pa-search-overlay{transform:none}
  .pa-search-overlay{
    -webkit-clip-path:none;
    clip-path:none;
  }
  .pa-search-overlay::before{transform:none;opacity:1;filter:none}
  .pa-search-overlay::after{display:none}
  .pa-search-top,
  .pa-search-body,
  .pa-composer{opacity:1;transform:none}
  .pa-starter{opacity:1}
}

/* follow-ups */
.pa-follow{
  display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.08);
  margin-top:24px;
}
.pa-follow-item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);
  cursor:pointer;color:rgba(255,255,255,.88);
  transition: color var(--pa-dur-base) var(--pa-ease-out);
}
.pa-follow-item:hover{color:var(--pa-lime)}
.pa-follow-item .t{font-size:15px;font-weight:500}
.pa-follow-item .plus{
  width:24px;height:24px;border-radius:999px;border:1px solid currentColor;
  display:grid;place-items:center;opacity:.6;
}

/* ----- composer (inline, part of the page) ----- */
.pa-composer{
  padding:0 28px calc(48px + env(safe-area-inset-bottom, 0px));
  opacity:0;
  transform:translate3d(0, 10px, 0);
  transition:
    opacity var(--pa-search-motion-composer) var(--pa-search-ease-close),
    transform var(--pa-search-motion-composer) var(--pa-search-ease-close);
  transition-delay:0ms;
}
.pa-search-overlay.is-open .pa-composer{
  opacity:1;
  transform:translate3d(0, 0, 0);
  position:relative;
  bottom:auto;
  padding:18px 28px calc(24px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, rgba(10,10,18,0) 0%, rgba(10,10,18,.86) 34%, rgba(10,10,18,.98) 100%);
  z-index:2;
  transition-delay:var(--pa-search-stagger-composer);
  transition-timing-function:var(--pa-search-ease-open);
}
.pa-search-overlay.is-opening .pa-composer,
.pa-search-overlay.is-closing .pa-composer{
  will-change:opacity, transform;
}
.pa-search-overlay.is-closing .pa-composer{
  transition-delay:0ms;
  transition-duration:160ms, 160ms;
  transition-timing-function:var(--pa-search-ease-close);
}
.pa-composer-inner{
  max-width:880px;margin:0 auto;
}
.pa-question-strip:empty{display:none}
.pa-question-strip span{
  color:rgba(255,255,255,.46);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.pa-question-strip button{
  max-width:100%;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.82);
  cursor:pointer;
  font-size:12px;
  font-weight:650;
  line-height:1.2;
  padding:7px 10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pa-question-strip button:hover{border-color:rgba(198,232,44,.55);color:#fff}
.pa-composer .box{
  display:flex;align-items:center;gap:10px;
  padding:8px 8px 8px 18px;
  box-sizing:border-box;
  min-width:0;
  border-radius:18px;
  background:rgba(30,30,46,.9);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
  transition: border-color var(--pa-dur-base) var(--pa-ease-out), box-shadow var(--pa-dur-base) var(--pa-ease-out);
}
.pa-composer .box:focus-within{
  border-color:var(--pa-lime);
  box-shadow:0 24px 48px rgba(0,0,0,.4), 0 0 0 3px rgba(198,232,44,.18);
}
/* LONG-1108 (Doug, June 12): the three-ring mark was removed from the Ask box
   ("remove the three rings in both"); the input now leads the composer. */
.pa-composer input{
  flex:1;min-width:0;background:transparent;border:0;outline:0;
  color:#fff;font: 500 16px/1.4 var(--pa-font-sans);
  padding:10px 0;
}
.pa-composer input::placeholder{color:rgba(255,255,255,.4)}
.pa-composer .tools{display:flex;gap:6px;align-items:center}
.pa-composer .tools button{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;color:rgba(255,255,255,.7);
  background:transparent;cursor:pointer;
  transition: background var(--pa-dur-base) var(--pa-ease-out), color var(--pa-dur-base) var(--pa-ease-out);
}
.pa-composer .tools button:hover{background:rgba(255,255,255,.06);color:#fff}
.pa-composer .send{
  width:44px;height:44px;border-radius:14px;
  background:var(--pa-lime);color:var(--pa-ink-900);
  display:grid;place-items:center;cursor:pointer;flex-shrink:0;
  transition: transform var(--pa-dur-base) var(--pa-ease-out), background var(--pa-dur-base) var(--pa-ease-out);
}
.pa-composer .send:hover{transform:translateY(-1px);background:#fff}

/* body lock when open — newspaper chrome recedes via chrome.css */
body.pa-search-open,
body.is-ask-closing{overflow:hidden}
body.pa-search-open #blackflag-feedback-widget-host,
body.pa-search-open [data-bfd-feedback-host],
body.pa-search-open [data-analytics-consent-banner],
body.pa-search-open .pa-cookie-banner{
  display:none!important;
}

/* ----- responsive ----- */
@media (max-width: 820px){
  .pa-search-top{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand actions";
    gap:14px;
    min-height:64px;
    padding:12px max(16px, env(safe-area-inset-left, 0px)) 12px max(16px, env(safe-area-inset-right, 0px));
  }
  .pa-search-overlay .pa-search-top .brand .brand-lockup{max-width:210px}
  .pa-search-edition-stack{display:none}
  .pa-composer-inner{max-width:none}
  .pa-idle h1{font-size:32px}
  .pa-starter-grid{grid-template-columns:1fr}
  .pa-starter{min-height:0}
  .pa-sources-shell{
    grid-template-columns:36px minmax(0,1fr) 36px;
    gap:8px;
    margin:0;
  }
  .pa-source-scroll{width:36px;height:40px}
  .pa-sources{padding-inline:0}
  .pa-source,
  .pa-source.pa-skeleton{flex-basis:min(78vw, 330px)}
  .pa-answer h2.q{font-size:24px}
}

/* Phone tier (≤480px) — keep the composer usable and the source cards
   readable on iPhone-class viewports (360–414px). */
@media (max-width: 480px){
  .pa-idle h1{font-size:26px;line-height:1.1}
  .pa-idle .sub{font-size:15px;margin:14px 0 22px}
  .pa-search-body{padding:32px 18px 24px}
  .pa-source,
  .pa-source.pa-skeleton{flex-basis:82vw}
  .pa-answer h2.q{font-size:20px;line-height:1.15}
  .pa-composer{padding:0 12px calc(16px + env(safe-area-inset-bottom))}
  .pa-search-overlay.is-open .pa-composer{padding:14px 12px calc(16px + env(safe-area-inset-bottom))}
  .pa-composer-inner{padding:0}
  .pa-composer .box input{font-size:16px}
  .pa-composer .tools{display:none}
}