/* ==========================================================================
   aisearch.css — /ai-search-visibility. Loads after feature-v2, feature-v3,
   show.css and home.css.
   Four blocks: the hero verdict card (three assistants, one line each), the
   ask device, which is the product's own AI query panel with its live-check
   lane (DashboardListings/AiQueryPanel.js), the two ported screens as an
   asymmetric split (the league row from AiSearchView.js, the assistant card
   from VenueListing.js), and the three-column cadence strip.
   Nothing in a mock is under 13px. Muted text is #5b6076 or darker on a tint
   and #6b7088 or darker on white, and #5b6178 on the tinted "You" row, where
   4.5:1 needs the extra step. The product runs 11 to 12.5px on the chips, the
   league and the assistant card; every one is lifted to 13 here.
   ========================================================================== */

/* ---------- section rhythm: the shared 104px top padding leaves a hole under a device ---------- */
.ai-page .ai-sec-ask { padding-top: 0; }
.ai-page .ai-sec-ask { padding-bottom: clamp(56px, 6vw, 80px); }
.ai-page .ai-sec-cards, .ai-page .ai-sec-plan { padding-top: clamp(44px, 4.5vw, 60px); }
.ai-page .ai-sec-plan { padding-bottom: clamp(32px, 3.5vw, 44px); }
/* the bottom third was three blank runs and a quote floating in them */
.ai-page .tq-section { padding: clamp(44px, 4.5vw, 68px) 0; }
.ai-page .closing { padding-top: clamp(20px, 2.5vw, 36px); }

/* ---------- hero: what the three assistants said, which is the one thing only this page can show ---------- */
.ai-page .hero-moment { display: flex; justify-content: flex-end; padding: 12px 0; }
.ai-page .hero-copy .fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.ai-page .hero-copy .fine a:hover { color: var(--blue); }
.ai-page .hero-moment .moment { max-width: 430px; gap: 14px; }
.ai-page .m-from { font-size: 13px; }
.ai-hm-q { margin-top: 4px; padding: 11px 13px; border-radius: 12px; background: var(--v2-card); font: 500 15.5px/1.4 var(--font-display); color: var(--ink); }
.ai-hv { margin-top: 6px; }
.ai-hv li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--v2-line); }
.ai-hv li:first-child { border-top: 0; padding-top: 14px; }
.ai-hv b { font: 600 15px/1.3 var(--font-display); color: var(--ink); }
.ai-hv span { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1.3 var(--font-display); color: #6b7088; }
.ai-hv .icon { width: 17px; height: 17px; }
.ai-hv .is-hit { color: #0c7a52; }

/* ---------- the device: put the question to all three ---------- */
.ask { margin-top: 40px; }
/* .cardTitle (listings.module.scss:733-737): 14.5px/700, the panel's own name */
.ask-title { margin-bottom: 16px; font: 700 15px/1.35 var(--font-display); color: var(--ink); }
.ask-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 20px; padding-bottom: 20px; border-bottom: 1px solid var(--v2-line); }

/* the question chooser is the product's own query list: a small panel, one row a question, a tick on the chosen row */
.ask-qs { grid-column: 1; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line); overflow: hidden; }
.ask-qs-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 11px 15px; }
.ask-qs-h b { font: 600 14px/1.35 var(--font-display); color: var(--ink); }
.ask-qs-h span { font: 400 13px/1.35 var(--font-body); color: #6b7088; }
/* one query row, the way the product's matrix prints one: the query, then what kind it is
   ("core" for a canonical question, AiQueryPanel.js:336-340) */
.ask-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; padding: 12px 15px; border-top: 1px solid var(--v2-line); background: #f4f7ff; }
.ask-q > b { font: 600 15px/1.35 var(--font-display); color: var(--ink); }
.ask-q > span { font: 400 13px/1.35 var(--font-body); color: #5b6076; }

.ask-go { grid-column: 2; padding: 14px 22px; font-size: 15px; white-space: nowrap; }
.ask-go.is-busy { opacity: .55; }
.ask-fine { grid-column: 1 / -1; max-width: 72ch; font: 400 13.5px/1.55 var(--font-body); color: var(--v2-body); }

.ask-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.ask-p { display: flex; flex-direction: column; padding: 16px 18px 15px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--v2-line), 0 20px 44px -32px rgba(15, 13, 25, .4); }
.ask-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--v2-line); }
.ask-h b { font: 600 15.5px/1.3 var(--font-display); color: var(--ink); }
.ask-tag { flex: none; padding: 3px 8px; border-radius: 6px; background: var(--v2-card); font: 500 13px/1.35 var(--font-display); color: #6b7088; }
.ask-body { flex: 1 1 auto; display: grid; padding-top: 12px; }
.ask-ans { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .3s var(--ease-out); }
.ask-ans.is-on { visibility: visible; opacity: 1; }
.ask-intro { font: 400 14px/1.5 var(--font-body); color: var(--v2-body); }
.ask-list { margin-top: 8px; counter-reset: ai-b; }
.ask-list li { display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--v2-line); counter-increment: ai-b; }
.ask-list li::before { content: counter(ai-b); grid-row: span 2; font: 600 13px/1.4 var(--font-display); color: #6b7088; }
.ask-list b { font: 600 14.5px/1.3 var(--font-display); color: var(--ink); }
.ask-list > li > span { grid-column: 2; font: 400 13px/1.35 var(--font-body); color: #6b7088; }
.ask-list em { grid-column: 3; grid-row: span 2; padding: 3px 8px; border-radius: 999px; background: var(--blue); color: #fff; font: 600 13px/1.3 var(--font-display); font-style: normal; transition: opacity .3s var(--ease-out); }
.ask-list li.is-you { margin: 0 -10px; padding: 8px 10px; border-radius: 12px; border-top-color: transparent; background: #eef2ff; transition: background-color .3s var(--ease-out); }
.ask-list li.is-you + li { border-top-color: transparent; }
/* #6b7088 clears 4.5:1 on white but not on the tinted row, and that row is the one the page is about */
.ask-list li.is-you::before, .ask-list li.is-you > span { color: #5b6178; }
/* the typed and untyped halves of one string: the tail keeps its space so nothing reflows as it fills in */
.ask-ans i { font-style: normal; }
.ask-ans i.r { color: transparent; }
/* while a panel is typing, the row highlight and the You tag hold back so the verdict is not given away early */
.ask-p.is-run .ask-list li.is-you { background: transparent; }
.ask-p.is-run .ask-list em { opacity: 0; }

.ask-foot { display: grid; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--v2-line); }
/* visibility, not opacity alone: an opacity-0 pill stays in the accessibility tree, and a finished panel would read
   "Asking" and then "Named 2nd" */
.ask-wait, .ask-chip { grid-area: 1 / 1; justify-self: start; visibility: hidden; opacity: 0; transition: opacity .25s var(--ease-out); }
.ask-wait { display: flex; align-items: center; gap: 9px; font: 600 13.5px/1.4 var(--font-display); color: #6b7088; }
.ask-wait.is-on, .ask-chip.is-on { visibility: visible; opacity: 1; }
.ask-wait::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
/* .chip + .chipGood / .chipWarn (listings.module.scss:535-565): a 999px pill, 3px 10px, 12px/600 lifted to 13.5 */
.ask-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font: 600 13.5px/1.5 var(--font-display); }
.ask-chip--good { background: #e4f8f0; color: #00694a; }
.ask-chip--warn { background: #fff4d6; color: #8a5300; }
@media (prefers-reduced-motion: no-preference) {
  .ask-wait.is-on::before { animation: ask-pulse 1.1s ease-in-out infinite; }
  @keyframes ask-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
}

.ask-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--v2-line); }
.ask-sum b { font: 600 17px/1.4 var(--font-display); color: var(--ink); }
.ask-sum span { font: 400 14px/1.4 var(--font-body); color: #6b7088; }
.ask .calc-note { max-width: 72ch; font-size: 13.5px; }

/* ---------- the two mocks: copy left, mock right, stacked, so the band is not a third equal grid ---------- */
.ai-head { max-width: 660px; margin-bottom: 32px; }
.ai-cards { grid-template-columns: minmax(0, 1fr); }
.ai-shot { font-family: var(--font-body); }
.ai-shot .shot-h { font-size: 13px; }
.ai-shot .shot-ht { font-style: normal; }
/* the band: one denominator, venues, in the product's own sentence (AiSearchView.js:65-76) */
.ai-band { font: 400 13.5px/1.45 var(--font-body); color: #5b6076; }
.ai-band b { font: 800 21px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
/* the toolbar: the product's filter pills and its sort, which is what "worst first" means on screen */
.ai-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 10px; }
.ai-pill { padding: 4px 10px; border-radius: 999px; background: #f1f2f7; font: 600 13px/1.4 var(--font-display); color: #5b6076; white-space: nowrap; }
.ai-pill.is-on { background: #e6ecff; color: var(--blue); }
.ai-sort { margin-left: auto; padding: 4px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--v2-line); font: 500 13px/1.4 var(--font-display); color: #5b6076; white-space: nowrap; }
/* a league row: name (with a crit dot when the facts are wrong), the share-of-voice track and its percentage, one text
   state per assistant, and the flips since the last sweep (AiSearchView.js:425-460) */
.ai-lt-r { display: grid; grid-template-columns: minmax(0, 1fr) 108px auto 44px; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--v2-line); }
.ai-lt-r:last-child { border-bottom: 0; }
.ai-lt-n { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font: 600 13.5px/1.35 var(--font-display); color: var(--ink); }
.ai-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #c93a3a; }
.ai-sov { display: inline-flex; align-items: center; gap: 9px; }
.ai-track { flex: 1; height: 6px; border-radius: 3px; background: #eef0f6; overflow: hidden; }
.ai-track i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.ai-sov b { flex: none; min-width: 34px; text-align: right; font: 700 13.5px/1.35 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
/* the product marks each assistant with a coloured pip carrying a title; on a page nobody can hover, the assistant is
   named in text instead, in the chip shape the rest of the screen already uses */
.ai-asst { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.ai-asst em { padding: 3px 8px; border-radius: 999px; background: #f1f2f7; font: 600 13px/1.35 var(--font-display); font-style: normal; color: #5b6076; }
.ai-asst em.is-hit { background: #e4f8f0; color: #00694a; }
.ai-flips { display: flex; justify-content: flex-end; gap: 6px; font: 700 13px/1.35 var(--font-display); }
.ai-flips i { font-style: normal; }
.ai-flips .is-up { color: #00694a; }
.ai-flips .is-down { color: #b0143c; }

/* the assistant card (VenueListing.js:1097-1186): the venue's own row per assistant, each state as a chip with the
   query or the observed value beside it */
.ai-vt { font: 700 15px/1.35 var(--font-display); color: var(--ink); }
.ai-vrow { margin-top: 12px; padding: 12px 13px; border-radius: 12px; background: var(--v2-card); }
.ai-vhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ai-vname { font: 700 14px/1.4 var(--font-display); color: var(--ink); }
.ai-vsub { font: 400 13px/1.5 var(--font-body); color: #5b6076; }
.ai-vline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin-top: 9px; }
.ai-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font: 600 13px/1.5 var(--font-display); white-space: nowrap; }
.ai-chip.is-warn { background: #fff4d6; color: #8a5300; }
.ai-chip.is-crit { background: #fdecec; color: #a52020; }
.ai-vcite { margin-top: 10px; font: 400 13px/1.5 var(--font-body); color: #5b6076; }

/* ---------- when the questions get asked: a three-column cadence strip, one rule across the top ---------- */
.ai-page .ai-sec-plan .head { max-width: 800px; margin-inline: 0; text-align: left; }
.ai-page .ai-sec-plan .head .sub { margin-inline: 0; }
.ai-when { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; margin-top: 34px; padding-top: 2px; border-top: 2px solid var(--v2-line); }
.ai-when li { position: relative; padding-top: 26px; }
.ai-when li::before { content: ""; position: absolute; left: 0; top: -2px; width: 46px; height: 2px; background: var(--blue); }
.ai-when > li > b { font: 600 15px/1.4 var(--font-display); color: var(--blue); }
.ai-when p { margin-top: 8px; max-width: 40ch; font: 400 15px/1.6 var(--font-body); color: var(--v2-body); }
.ai-hand { max-width: 640px; margin: 34px 0 0; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); }
.ai-hand a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ai-hand a:hover { color: var(--blue); }

/* ---------- breakpoints ---------- */
@media (min-width: 992px) {
  /* the mock takes the wider half and bleeds to the card's right and bottom edges */
  .ai-cards .card { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 34px; min-height: 0; padding: 28px 0 0 28px; }
  .ai-cards .card > h3 { grid-column: 1; grid-row: 1; align-self: start; }
  .ai-cards .card > p { grid-column: 1; grid-row: 2; max-width: 44ch; margin-bottom: 28px; align-self: start; }
  .ai-cards .card > .shot { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; margin: 0; width: 100%; }
}
@media (max-width: 991px) {
  .ai-page .hero-moment { justify-content: center; }
  .ai-when { grid-template-columns: 1fr; gap: 22px; }
  .ai-when li { padding-top: 20px; }
  .ai-when li + li { border-top: 1px solid var(--v2-line); }
  .ask-top { grid-template-columns: 1fr; }
  .ask-go { grid-column: 1; justify-self: start; }
  /* three assistants side by side stop being readable before the site's main breakpoint: below it they stack, so the
     verdict moves up beside the assistant's name and the count moves above the panels. A reader scrolling three
     stacked panels then meets name, verdict, answer, and never has to carry a verdict down the page. */
  .ask-panels { grid-template-columns: 1fr; }
  .ask { display: flex; flex-direction: column; }
  .ask > * { order: 4; }
  .ask-title { order: 0; }
  .ask-top { order: 1; }
  .ask-sum { order: 2; margin-top: 18px; }
  .ask-panels { order: 3; }
  .ask-p { padding: 14px 16px 13px; }
  .ask-h { order: -2; }
  .ask-foot { order: -1; margin-top: 0; padding-top: 10px; border-top: 0; }
  .ask-body { padding-top: 10px; border-top: 1px solid var(--v2-line); }
}
@media (max-width: 760px) {
  .ask-go { width: 100%; justify-content: center; }
  .ask-sum { gap: 4px; }
  .ask-sum b, .ask-sum span { width: 100%; }
}
@media (max-width: 620px) {
  /* four tracks will not fit: the name takes the first line, and the measure, the assistants and the flips the second */
  .ai-lt-r { grid-template-columns: minmax(0, 1fr) auto; }
  .ai-lt-n { grid-column: 1 / -1; }
  .ai-sov { grid-column: 1; }
  .ai-asst { grid-column: 1 / -1; justify-content: flex-start; }
  .ai-flips { grid-column: 2; grid-row: 2; }
  .ai-sort { margin-left: 0; }
}
@media (max-width: 479px) {
  .ai-hm-q { font-size: 15px; }
  .ask-q { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ask-ans, .ask-wait, .ask-chip, .ask-list em, .ask-list li.is-you { transition: none; }
}
.no-motion .ask-wait::before { animation: none; }