/* The ad library chat (features/ask): the front door's library box, /ask, and the X-ray's question box. Tokens from
   mobile-tokens.css. The library is one dark panel with a mono kicker and a live dot: it is a thing we own, so it looks
   like one. Answers read as text, not bubbles; the ads they name are cards with the days running big, each a link to
   Meta's Ad Library. Phone first. Reduced motion: no dot pulse, no rise, no shimmer. */
.ask-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ask-lib{position:relative;display:flex;flex-direction:column;gap:18px;padding:22px 16px 18px;border-radius:var(--radius-sheet,24px);
  background:radial-gradient(120% 60% at 0% 0%,rgba(255,121,74,.10) 0%,transparent 55%),linear-gradient(180deg,#15181b 0%,#0e1012 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),var(--elev-2)}
.ask-lib::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 28px);mask:linear-gradient(180deg,#000 0%,transparent 60%)}
.ask-lib-head{position:relative;display:flex;flex-direction:column;gap:10px}
.ask-lib-k{display:flex;align-items:center;gap:8px;font:600 .6875rem/1 var(--mono,'IBM Plex Mono',ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--link)}
.ask-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(255,121,74,.55);animation:ask-pulse 2.4s var(--ease-out,ease-out) infinite}
.ask-lib h1,.ask-lib h2{margin:0;font-size:1.75rem;font-weight:850;letter-spacing:var(--track-display,-.03em);line-height:1.05}
.ask-lib.is-page h1{font-size:2.25rem}
.ask-lib-lead{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.5;max-width:40em}
.ask-lib-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:4px 22px;margin:4px 0 0}
.ask-lib-stats div{display:flex;flex-direction:column-reverse;gap:2px}
.ask-lib-stats dd{margin:0;font-size:1.25rem;font-weight:850;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.ask-lib-stats dt{font-size:.75rem;color:var(--faint)}
.ask-fine{position:relative;margin:0;color:var(--faint);font-size:.8125rem;line-height:1.5}

/* the chat */
.ask{position:relative;display:flex;flex-direction:column;gap:12px}
.ask-thread{display:flex;flex-direction:column;gap:12px}
.ask-thread:empty{display:none}
.ask-form{position:relative;display:flex}
.ask-input{width:100%;min-height:56px;padding:14px 60px 14px 16px;border:0;border-radius:var(--radius-control,14px);background:var(--bg-deep);color:var(--ink);font:inherit;font-size:1rem;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45),inset 0 0 0 1px var(--line-strong);transition:box-shadow var(--dur-hover,.15s) var(--ease-press,ease)}
.ask-input::placeholder{color:var(--faint)}
.ask-input:focus{outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.45),inset 0 0 0 1.5px var(--accent)}
.ask-send{position:absolute;right:6px;top:6px;bottom:6px;width:44px;display:grid;place-items:center;border:0;border-radius:11px;background:var(--grad-accent);color:var(--on-accent);box-shadow:var(--btn-primary);cursor:pointer}
.ask-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ask-send:active{transform:scale(.94)}
.is-busy .ask-send{opacity:.5;pointer-events:none}
.ask-starters,.ask-next{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ask-starters button,.ask-next button,.ask-cat button{min-height:36px;padding:8px 12px;border:0;border-radius:var(--radius-pill,999px);background:rgba(255,255,255,.06);color:var(--ink);font:inherit;font-size:.8125rem;font-weight:600;line-height:1.25;text-align:left;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:background var(--dur-hover,.15s)}
.ask-starters button:hover,.ask-next button:hover,.ask-cat button:hover{background:rgba(255,121,74,.14)}
.ask-next button{color:var(--link)}

.ask-q{align-self:flex-end;max-width:88%;margin:0;padding:10px 14px;border-radius:18px 18px 6px 18px;background:var(--accent-tint);box-shadow:inset 0 0 0 1px rgba(255,121,74,.25);font-weight:650;font-size:.9375rem;line-height:1.4;overflow-wrap:anywhere}
.ask-a{display:flex;flex-direction:column;gap:12px;padding:2px 0 0}
.ask-a.is-in{animation:ask-rise .45s var(--ease-out,ease-out) both}
.ask-text p{margin:0 0 .7em;font-size:1rem;line-height:1.55;color:var(--ink)}
.ask-text p:last-child{margin:0}
.ask-reading{margin:0;font:500 .8125rem/1.4 var(--mono,'IBM Plex Mono',ui-monospace,monospace);color:var(--muted);
  background:linear-gradient(90deg,var(--muted) 0%,var(--ink) 50%,var(--muted) 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ask-shine 1.6s linear infinite}
.ask-reading::after{content:'…'}
.ask-a.is-error{color:var(--error);font-size:.9375rem}
.ask-mode{margin:0;color:var(--faint);font-size:.75rem}

/* the ads an answer names: days big, brand, format, the link out */
.ask-ads{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:8px;margin:0;padding:0 0 4px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ask-ads::-webkit-scrollbar{display:none}
.ask-ads li{scroll-snap-align:start}
.ask-ad{display:flex;flex-direction:column;gap:2px;height:100%;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:var(--ink);text-decoration:none;transition:background var(--dur-hover,.15s),box-shadow var(--dur-hover,.15s)}
.ask-ad:hover{background:rgba(255,121,74,.08);box-shadow:inset 0 0 0 1px var(--accent-ring)}
.ask-ad-days{font-size:1.75rem;font-weight:850;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.ask-ad-unit{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--link);margin-bottom:6px}
.ask-ad-brand{font-weight:750;font-size:.9375rem;line-height:1.25}
.ask-ad-meta{color:var(--muted);font-size:.75rem;line-height:1.35}
.ask-ad-go{display:flex;align-items:center;gap:4px;margin-top:auto;padding-top:8px;color:var(--faint);font-size:.75rem;font-weight:600}
.ask-ad-go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* the offer, once, after the first answer */
.ask-offer{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:14px;background:linear-gradient(180deg,rgba(255,121,74,.13),rgba(255,121,74,.05));box-shadow:inset 0 0 0 1px rgba(255,121,74,.3)}
.ask-offer-h{margin:0;font-weight:800;font-size:1rem;letter-spacing:-.01em}
.ask-offer-s{margin:0;color:var(--muted);font-size:.875rem;line-height:1.45}
.ask-offer-go{display:inline-flex;align-items:center;gap:4px;margin-top:6px;color:var(--link);font-weight:750;font-size:.9375rem;text-decoration:none}
.ask-offer-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* the email gate */
.ask-gate{padding:14px;border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-strong)}
.ask-gate-h{margin:0;font-weight:800;font-size:1rem}
.ask-gate-s,.ask-gate-note{margin:0;color:var(--muted);font-size:.875rem;line-height:1.45}
.ask-gate-note:empty{display:none}
.ask-gate-note{color:var(--error)}
.ask-gate-form{display:flex;flex-direction:column;gap:8px}
.ask-gate-form .ask-input{padding-right:16px}
.ask-gate-go{min-height:52px;border:0;border-radius:var(--radius-control,14px);background:var(--grad-accent);color:var(--on-accent);box-shadow:var(--btn-primary);font:inherit;font-weight:800;font-size:1rem;cursor:pointer}

/* /ask */
.ask-page{width:min(100% - 32px,760px);margin:0 auto;padding:8px 0 calc(48px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px}
.ask-cats{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line)}
.ask-cats summary{cursor:pointer;font-weight:750}
.ask-cats-grid{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.ask-cat h3{margin:0 0 8px;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ask-cat ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ask-dev table{width:100%;border-collapse:collapse;font-size:.8125rem}
.ask-dev td,.ask-dev th{padding:6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}

/* inside the X-ray */
.ask-lib.is-seam{margin-top:8px}

@media (min-width:48rem){
  .ask-lib{padding:32px 32px 24px}
  .ask-lib h2{font-size:2.25rem}
  .ask-lib.is-page h1{font-size:2.75rem}
  .ask-ads{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible}
}
@keyframes ask-pulse{0%{box-shadow:0 0 0 0 rgba(255,121,74,.55)}70%,100%{box-shadow:0 0 0 8px rgba(255,121,74,0)}}
@keyframes ask-shine{to{background-position:-200% 0}}
@keyframes ask-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ask-dot,.ask-reading{animation:none}.ask-reading{-webkit-text-fill-color:var(--muted)}.ask-a.is-in{animation:none}}
.hw a[href="#library"]{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}