<%

  var r = locals.rep || {};
  var G = r.google || {}, B = r.bing || {};
  var GA = G.ai || {}, BA = B.ai || {};
  var _isStaff = !!(locals.showStaff);
  var pct = function (v) { return v == null ? '—' : (Math.round(v * 1000) / 10) + '%'; };
  var pos = function (v) { return v ? (Math.round(v * 10) / 10) : '—'; };
  var n = function (v) { return v == null ? '—' : h.int(Math.round(v)); };
  var path = function (u) { try { var x = new URL(u); return decodeURIComponent(x.pathname + (x.search || '')) || '/'; } catch (e) { return u || ''; } };
  var share = function (a, b) { return b ? Math.round(a / b * 1000) / 10 : 0; };
  var cname = function (c) { var u = String(c || '').toUpperCase(); try { return new Intl.DisplayNames(['en'], { type: 'region' }).of(u) || u; } catch (e) { return u; } };
  var change = function (cur, prev) { if (!prev) return ''; var d = Math.round((cur - prev) / prev * 1000) / 10; return (d > 0 ? '▲ ' : d < 0 ? '▼ ' : '') + Math.abs(d) + '% vs previous period'; };

  var chart = function (cur, prev, key) {
    if (!cur || cur.length < 2) return '';
    var all = cur.map(function (x) { return x[key]; }).concat((prev || []).map(function (x) { return x[key]; }));
    var mx = Math.max.apply(null, all) || 1, out = '<div class="ga-chart"><div class="ga-bars">';
    cur.forEach(function (t) { out += '<div class="ga-col" title="' + t.key + ': ' + h.int(t[key]) + '"><i style="height:' + Math.max(2, Math.round(t[key] / mx * 100)) + '%"></i></div>'; });
    out += '</div>';
    if (prev && prev.length > 1) {
      var pts = prev.map(function (t, i) { return (i / (prev.length - 1) * 100).toFixed(2) + ',' + (100 - t[key] / mx * 100).toFixed(2); }).join(' ');
      out += '<svg class="ga-prev" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><polyline points="' + pts + '" vector-effect="non-scaling-stroke"/></svg>';
    }
    out += '<div class="ga-axis"><span>' + cur[0].key + '</span><span>' + cur[cur.length - 1].key + '</span></div></div>';
    if (prev && prev.length > 1) out += '<div class="ga-legend"><span><i class="cur"></i>This period</span><span><i class="prv"></i>Previous period</span></div>';
    return out;
  };
  var waitPanel = function (what, who) { return '<div class="ga-empty"><b>' + what + '</b><span>Shows here on its own once ' + who + ' opens this report to other tools.</span></div>'; };
%>
<div class="pg-head" style="margin-bottom:0">
  <div><div class="eyebrow">AI Search / Generative AI</div></div>
  <div class="ph-right" style="display:flex; gap:10px; align-items:center; flex-wrap:wrap">
    <%- include('../partials/range-picker') %>
  </div>
</div>

<div id="ga-view">
<h1 class="claim"><%= title %></h1>
<% if (locals.pending) { %>
  <p class="claim-lede">Reading Google and Bing for <%= from %> to <%= to %>…</p>
  <p class="claim-sub">A few seconds the first time. After that it is kept for 6 hours.</p>
  <div class="ga-load"><span></span><span></span><span></span></div>
  <script>
  (function () {
    var u = new URL(location.href); u.searchParams.set('load', '1');
    fetch(u.toString(), { headers: { Accept: 'text/html' }, credentials: 'same-origin' })
      .then(function (x) { return x.text(); })
      .then(function (html) {
        var f = new DOMParser().parseFromString(html, 'text/html').getElementById('ga-view');
        var cur = document.getElementById('ga-view');
        if (f && cur) { cur.replaceWith(f); document.dispatchEvent(new CustomEvent('voctos:refreshed', { detail: { selector: '#ga-view' } })); }
        else location.href = u.toString();
      })
      .catch(function () { location.href = u.toString(); });
  })();
  </script>
<% } else { var gq = (G.search && G.search.questions) || null; %>
  <p class="claim-lede">How often Google's and Bing's AI answers show or cite your site, <%= r.from %> to <%= r.to %>.</p>
  <p class="claim-sub">Google AI Overviews and AI Mode from Search Console; Microsoft Copilot and Bing AI summaries from Bing Webmaster Tools. Updated <%= h.time(r.at) %>.</p>

  <div class="bento" style="margin-top:22px">

  <div class="card shelf-c b3 sc-violet"><div class="cl">Google AI impressions</div><div class="cv tnum"><%= GA.available ? h.int(GA.impressions) : '—' %></div>
    <div class="rr-meta" style="margin-top:4px"><%= GA.available ? (change(GA.impressions, GA.prevImpressions) || 'AI Overviews and AI Mode') : 'waiting for Google' %></div></div>
  <div class="card shelf-c b3 sc-sky"><div class="cl">Copilot &amp; Bing AI citations</div><div class="cv tnum"><%= BA.available ? h.int(BA.citations) : '—' %></div>
    <div class="rr-meta" style="margin-top:4px"><%= !B.connected ? 'Bing not connected' : (BA.available ? 'times your pages were cited' : 'waiting for Bing') %></div></div>
  <div class="card shelf-c b3 sc-lime"><div class="cl">Average cited pages</div><div class="cv tnum"><%= BA.available && BA.avgPages != null ? (Math.round(BA.avgPages * 10) / 10) : '—' %></div>
    <div class="rr-meta" style="margin-top:4px">pages cited per day in Bing AI</div></div>
  <div class="card shelf-c b3 sc-navy"><div class="cl">Question-style searches</div><div class="cv tnum"><%= gq ? h.int(gq.impressions) : '—' %></div>
    <div class="rr-meta" style="margin-top:4px"><%= gq ? 'impressions on Google, ' + share(gq.impressions, G.search.impressions) + '% of all' : 'Search Console not connected' %></div></div>

  <div class="card b12 ga-src">
    <div class="card-h ga-h">
      <div><h3>Google AI Overviews &amp; AI Mode</h3><div class="rr-meta">Times links to your site were shown in Google's AI answers. Search Console · Generative AI performance.</div></div>
      <span class="chip <%= GA.available ? 'pos' : (G.connected ? 'warn' : 'flat') %>"><%= GA.available ? 'live' : (G.connected ? 'waiting for Google' : 'not connected') %></span>
    </div>
    <div class="card-p">
      <% if (!G.connected) { %>
        <div class="ga-empty"><b>Search Console is not connected for this account.</b><span><%= _isStaff && G.reason ? G.reason : 'Your VOCTOS team connects it.' %></span></div>
      <% } else { %>
        <div class="ga-metrics">
          <div><div class="ga-v tnum"><%= GA.available ? h.int(GA.impressions) : '—' %></div><div class="rr-meta">Impressions</div></div>
          <div><div class="ga-v tnum"><%= GA.available && GA.prevImpressions != null ? h.int(GA.prevImpressions) : '—' %></div><div class="rr-meta">Previous period</div></div>
          <div><div class="ga-v tnum"><%= GA.available ? (GA.pages || []).length : '—' %></div><div class="rr-meta">Pages shown</div></div>
          <div><div class="ga-v tnum"><%= GA.available ? (GA.countries || []).length : '—' %></div><div class="rr-meta">Countries</div></div>
        </div>
        <%- GA.available ? chart(GA.daily, GA.prevDaily, 'impressions') : '' %>
        <div class="ga-tabs" role="tablist">
          <% [['g-pages', 'Pages'], ['g-countries', 'Countries'], ['g-devices', 'Devices'], ['g-dates', 'Dates']].forEach(function (t, i) { %><button type="button" class="ga-tab<%= i ? '' : ' on' %>" data-gt="<%= t[0] %>"><%= t[1] %></button><% }) %>
        </div>
        <% [['g-pages', 'pages', 'Page'], ['g-countries', 'countries', 'Country'], ['g-devices', 'devices', 'Device'], ['g-dates', 'daily', 'Date']].forEach(function (t, i) { var list = GA.available ? (GA[t[1]] || []) : []; %>
          <div class="ga-panel<%= i ? '' : ' on' %>" data-gp="<%= t[0] %>">
            <% if (!GA.available) { %><%- waitPanel('Impressions by ' + t[2].toLowerCase(), 'Google') %>
            <% } else if (!list.length) { %><div class="rr-meta">Nothing recorded for these dates.</div>
            <% } else { var tot = GA.impressions; %>
              <div class="ga-tbl"><table class="tbl"><thead><tr><th><%= t[2] %></th><th class="tnum">Impressions</th><th class="tnum">Share</th></tr></thead><tbody>
                <% (t[1] === 'daily' ? list.slice().reverse() : list).forEach(function (it) { %><tr>
                  <td><%= t[1] === 'pages' ? path(it.key) : (t[1] === 'countries' ? cname(it.key) : (t[1] === 'devices' ? it.key.charAt(0) + it.key.slice(1).toLowerCase() : it.key)) %></td>
                  <td class="tnum"><%= h.int(it.impressions) %></td><td class="tnum"><%= share(it.impressions, tot) %>%</td></tr><% }) %>
              </tbody></table></div>
            <% } %>
          </div>
        <% }) %>
        <% if (!GA.available) { %>
          <p class="ga-note">Google records this report in Search Console only, for now. Your Search Console is connected, so the impressions chart, the comparison with the previous period, and the Pages, Countries, Devices and Dates tables fill in here as soon as Google opens it to other tools.<% if (_isStaff) { %> <span class="muted">Tried: <%= (GA.tried || []).join(', ') %> (env GSC_AI_TYPES).<%= GA.error ? ' ' + GA.error : '' %></span><% } %></p>
        <% } %>
      <% } %>
    </div>
  </div>

  <div class="card b12 ga-src">
    <div class="card-h ga-h">
      <div><h3>Microsoft Copilot &amp; Bing AI summaries</h3><div class="rr-meta">Times your pages were cited as a source in AI answers. Bing Webmaster Tools · AI Performance.</div></div>
      <span class="chip <%= BA.available ? 'pos' : (B.connected ? 'warn' : 'flat') %>"><%= BA.available ? 'live' : (B.connected ? 'waiting for Bing' : 'not connected') %></span>
    </div>
    <div class="card-p">
      <% if (!B.connected) { %>
        <div class="ga-empty"><b>Bing Webmaster Tools is not connected for this account yet.</b>
          <span><% if (_isStaff) { %>Add the site and API key under <a href="/staff/clients/<%= locals.workspace && workspace.slug %>/edit#cardBing">Edit client → Integrations → Bing Webmaster Tools</a>.<% } else { %>Your VOCTOS team connects it. Ask on <a href="/messages">Messages</a>.<% } %></span></div>
      <% } %>
      <div class="ga-metrics<%= B.connected ? '' : ' dim' %>">
        <div><div class="ga-v tnum"><%= BA.available ? h.int(BA.citations) : '—' %></div><div class="rr-meta">Total citations</div></div>
        <div><div class="ga-v tnum"><%= BA.available && BA.avgPages != null ? (Math.round(BA.avgPages * 10) / 10) : '—' %></div><div class="rr-meta">Average cited pages</div></div>
        <div><div class="ga-v tnum"><%= BA.available ? (BA.queries || []).length : '—' %></div><div class="rr-meta">Grounding queries</div></div>
        <div><div class="ga-v tnum"><%= BA.available ? (BA.pages || []).length : '—' %></div><div class="rr-meta">Cited pages</div></div>
      </div>
      <%- BA.available ? chart(BA.timeline, null, 'citations') : '' %>
      <div class="ga-tabs<%= B.connected ? '' : ' dim' %>" role="tablist">
        <% [['b-queries', 'Grounding queries'], ['b-pages', 'Pages'], ['b-intents', 'Intents'], ['b-topics', 'Topics']].forEach(function (t, i) { %><button type="button" class="ga-tab<%= i ? '' : ' on' %>" data-gt="<%= t[0] %>"><%= t[1] %></button><% }) %>
      </div>
      <% var bw = function (what) { return B.connected ? waitPanel(what, 'Bing') : '<div class="ga-empty"><b>' + what + '</b><span>Connect Bing Webmaster Tools first.</span></div>'; }; %>
      <div class="ga-panel on" data-gp="b-queries">
        <% if (!BA.available) { %><%- bw('Grounding queries, with their intent, topic and your citation share') %>
        <% } else if (!BA.queries.length) { %><div class="rr-meta">No grounding queries for these dates.</div>
        <% } else { %>
          <div class="ga-tbl"><table class="tbl"><thead><tr><th>Grounding query</th><th>Intent</th><th>Topic</th><th class="tnum">Citations</th><th class="tnum">Citation share</th><th class="tnum">Pages</th></tr></thead><tbody>
            <% BA.queries.forEach(function (q) { %><tr><td <%- h.dirAttr(q.key) %>><%= q.key %></td><td><% if (q.intent) { %><span class="chip flat"><%= q.intent %></span><% } %></td><td class="muted"><%= q.topic %></td><td class="tnum"><%= h.int(q.citations) %></td><td class="tnum"><%= q.share == null ? '—' : (q.share > 1 ? q.share : q.share * 100).toFixed(1) + '%' %></td><td class="tnum"><%= n(q.pages) %></td></tr><% }) %>
          </tbody></table></div>
        <% } %>
      </div>
      <div class="ga-panel" data-gp="b-pages">
        <% if (!BA.available) { %><%- bw('Cited pages, with how many grounding queries led to each') %>
        <% } else if (!BA.pages.length) { %><div class="rr-meta">No cited pages for these dates.</div>
        <% } else { %>
          <div class="ga-tbl"><table class="tbl"><thead><tr><th>Page</th><th class="tnum">Citations</th><th class="tnum">Grounding queries</th></tr></thead><tbody>
            <% BA.pages.forEach(function (p) { %><tr><td><a href="<%= p.key %>" target="_blank" rel="noopener"><%= path(p.key) %></a></td><td class="tnum"><%= h.int(p.citations) %></td><td class="tnum"><%= n(p.queries) %></td></tr><% }) %>
          </tbody></table></div>
        <% } %>
      </div>
      <% [['b-intents', 'intents', 'Intent', 'Citations by what the person was trying to do: learn, compare, plan, buy, find a place'], ['b-topics', 'topics', 'Topic', 'Citations grouped into the broader themes Bing sees in your grounding queries']].forEach(function (t) { var list = BA.available ? (BA[t[1]] || []) : []; %>
      <div class="ga-panel" data-gp="<%= t[0] %>">
        <% if (!BA.available) { %><%- bw(t[3]) %>
        <% } else if (!list.length) { %><div class="rr-meta">Bing gave no <%= t[1] %> for these dates.</div>
        <% } else { %>
          <div class="ga-bars-list">
            <% list.forEach(function (it) { var s = share(it.citations, BA.citations); %>
              <div><div class="row-between" style="font-size:13px; gap:10px"><span><%= it.key %></span><span class="tnum"><%= h.int(it.citations) %> <span class="rr-meta">· <%= s %>%</span></span></div><div class="ga-bar"><i style="width:<%= Math.min(100, s) %>%"></i></div></div>
            <% }) %>
          </div>
        <% } %>
      </div>
      <% }) %>
      <% if (B.connected && !BA.available) { %>
        <p class="ga-note">Bing shows this report in Webmaster Tools only, for now. This site is connected, so total citations, average cited pages, the citation timeline and the four tables fill in here once Bing adds it to its API.<% if (_isStaff) { %> <span class="muted">Tried: <%= (BA.tried || []).join(', ') || 'nothing new in the last 24 hours' %> (env BING_AI_METHODS, BING_AI_QUERY_METHODS, BING_AI_PAGE_METHODS).<%= BA.error ? ' ' + BA.error : '' %></span><% } %></p>
      <% } %>
    </div>
  </div>

  <div class="b12 ga-sec"><h2>The searches behind AI answers</h2><p class="rr-meta">AI Overviews and Copilot answer questions, comparisons and long requests. These are the ones people already make on Google and Bing where your site appears. Live from Search Console<%= B.connected ? ' and Bing Webmaster Tools' : '' %>.</p></div>

  <% if (G.connected && G.search && G.search.error) { %>
    <div class="card b12 card-p"><div class="rr-meta">Search Console did not answer: <%= G.search.error %></div></div>
  <% } else if (G.connected && G.search) { var S = G.search; %>
    <div class="card b8">
      <div class="card-h ga-h"><div><h3>Questions asked on Google</h3><div class="rr-meta"><%= h.int(gq.count) %> of <%= h.int(gq.of) %> searches · <%= h.int(gq.impressions) %> impressions · <%= h.int(gq.clicks) %> clicks (<%= share(gq.clicks, S.clicks) %>% of all Google clicks)</div></div></div>
      <div class="card-p">
        <% if (!gq.top.length) { %><div class="rr-meta">None in these dates.</div><% } else { %>
        <div class="ga-tbl"><table class="tbl"><thead><tr><th>Search</th><th class="tnum">Impressions</th><th class="tnum">Clicks</th><th class="tnum">CTR</th><th class="tnum">Position</th></tr></thead><tbody>
          <% gq.top.forEach(function (q) { %><tr><td <%- h.dirAttr(q.key) %>><%= q.key %></td><td class="tnum"><%= h.int(q.impressions) %></td><td class="tnum"><%= h.int(q.clicks) %></td><td class="tnum"><%= pct(q.ctr) %></td><td class="tnum"><%= pos(q.position) %></td></tr><% }) %>
        </tbody></table></div>
        <% } %>
      </div>
    </div>
    <div class="card b4 ga-fill">
      <div class="card-h ga-h"><div><h3>Top pages on Google</h3><div class="rr-meta"><%= h.int(S.clicks) %> clicks from <%= h.int(S.impressions) %> impressions</div></div></div>
      <div class="card-p ga-bars-list">
        <% var pmx = Math.max.apply(null, (S.pages || []).map(function (p) { return p.clicks; }).concat([1])); %>
        <% (S.pages || []).forEach(function (p) { %>
          <div><div class="row-between" style="font-size:13px; gap:10px"><a href="<%= p.key %>" target="_blank" rel="noopener" style="word-break:break-word"><%= path(p.key) %></a><span class="tnum"><%= h.int(p.clicks) %></span></div><div class="ga-bar"><i style="width:<%= Math.round(p.clicks / pmx * 100) %>%"></i></div></div>
        <% }) %>
      </div>
    </div>
  <% } %>

  <% if (B.connected && B.search && B.search.error) { %>
    <div class="card b12 card-p"><div class="rr-meta">Bing did not answer: <%= B.search.error %></div></div>
  <% } else if (B.connected && B.search) { var BS = B.search, bq = BS.questions; var bl = bq.top.length ? bq.top : (BS.queries || []); %>
    <div class="card b8">
      <div class="card-h ga-h"><div><h3>Questions asked on Bing</h3><div class="rr-meta"><%= h.int(bq.count) %> of <%= h.int(bq.of) %> searches · <%= h.int(bq.impressions) %> impressions · <%= h.int(bq.clicks) %> clicks. Bing also feeds Copilot's web answers.</div></div></div>
      <div class="card-p">
        <% if (!bl.length) { %><div class="rr-meta">No Bing searches in these dates.</div><% } else { %>
        <div class="ga-tbl"><table class="tbl"><thead><tr><th>Search</th><th class="tnum">Impressions</th><th class="tnum">Clicks</th><th class="tnum">Position</th></tr></thead><tbody>
          <% bl.forEach(function (q) { %><tr><td <%- h.dirAttr(q.key) %>><%= q.key %></td><td class="tnum"><%= h.int(q.impressions) %></td><td class="tnum"><%= h.int(q.clicks) %></td><td class="tnum"><%= pos(q.position) %></td></tr><% }) %>
        </tbody></table></div>
        <% } %>
      </div>
    </div>
    <div class="card b4 ga-fill">
      <div class="card-h ga-h"><div><h3>Top pages on Bing</h3><div class="rr-meta"><%= h.int(BS.clicks) %> clicks from <%= h.int(BS.impressions) %> impressions</div></div></div>
      <div class="card-p ga-bars-list">
        <% if (!(BS.pages || []).length) { %><span class="rr-meta">Nothing recorded.</span><% } %>
        <% var bmx = Math.max.apply(null, (BS.pages || []).map(function (p) { return p.impressions; }).concat([1])); %>
        <% (BS.pages || []).forEach(function (p) { %>
          <div><div class="row-between" style="font-size:13px; gap:10px"><span style="word-break:break-word"><%= path(p.key) %></span><span class="tnum"><%= h.int(p.impressions) %></span></div><div class="ga-bar"><i style="width:<%= Math.round(p.impressions / bmx * 100) %>%"></i></div></div>
        <% }) %>
      </div>
    </div>
  <% } %>

  </div>
<% } %>
</div>

<style>
  .ga-h{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
  .ga-h h3{margin:0 0 4px}
  .ga-h .chip{flex:none; margin-top:2px}
  .ga-metrics{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line)}
  .ga-metrics>div{min-width:0}
  .ga-v{font-size:26px; font-weight:700; color:var(--ink); line-height:1.15; margin-bottom:2px}
  .ga-metrics.dim, .ga-tabs.dim{opacity:.55}
  .ga-chart{position:relative; margin-top:18px}
  .ga-bars{display:flex; align-items:flex-end; gap:2px; height:120px}
  .ga-col{flex:1; height:100%; display:flex; align-items:flex-end; min-width:0}
  .ga-col i{display:block; width:100%; background:var(--accent-strong); border-radius:3px 3px 0 0; opacity:.85}
  .ga-prev{position:absolute; left:0; top:0; width:100%; height:120px; overflow:visible; pointer-events:none}
  .ga-prev polyline{fill:none; stroke:var(--ink-2); stroke-width:1.5; stroke-dasharray:4 3; opacity:.7}
  .ga-axis{display:flex; justify-content:space-between; font-size:11px; color:var(--muted-2); margin-top:6px}
  .ga-legend{display:flex; gap:16px; font-size:12px; color:var(--muted); margin-top:6px}
  .ga-legend i{display:inline-block; width:14px; height:3px; vertical-align:middle; margin-right:6px; border-radius:2px}
  .ga-legend i.cur{background:var(--accent-strong)} .ga-legend i.prv{border-top:2px dashed var(--ink-2); height:0}
  .ga-tabs{display:flex; gap:4px; flex-wrap:wrap; margin:18px 0 12px; border-bottom:1px solid var(--line)}
  .ga-tab{appearance:none; background:none; border:0; border-bottom:2px solid transparent; padding:8px 12px; margin-bottom:-1px; font:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer}
  .ga-tab:hover{color:var(--ink)}
  .ga-tab.on{color:var(--ink); border-bottom-color:var(--accent-strong)}
  .ga-panel{display:none} .ga-panel.on{display:block}
  .ga-empty{display:flex; flex-direction:column; gap:4px; padding:22px 18px; border:1px dashed var(--line); border-radius:12px; background:var(--surface-2); text-align:center}
  .ga-empty b{font-size:13.5px; color:var(--ink-2); font-weight:600}
  .ga-empty span{font-size:12.5px; color:var(--muted)}
  .ga-note{margin:14px 0 0; font-size:12.5px; color:var(--muted); line-height:1.55}
  .ga-sec{margin-top:14px}
  .ga-sec h2{font-size:18px; margin:0 0 4px}
  .ga-sec p{margin:0; max-width:820px}
  .ga-bars-list{display:flex; flex-direction:column; gap:10px; max-height:420px; overflow-y:auto; scrollbar-width:thin}
  .ga-bar{height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-top:4px}
  .ga-bar i{display:block; height:100%; border-radius:99px; background:var(--accent-strong)}
  .ga-tbl{overflow:auto; max-height:60vh}

  .ga-fill{display:flex; flex-direction:column}
  .ga-fill .ga-bars-list{flex:1 1 0; min-height:200px; max-height:none}
  .ga-tbl thead th{position:sticky; top:0; z-index:2; background:var(--surface); box-shadow:inset 0 -1px 0 var(--line)}
  .ga-load{display:flex; gap:8px; margin:26px 0}
  .ga-load span{width:10px; height:10px; border-radius:50%; background:var(--accent-strong); animation:gap 1s infinite ease-in-out}
  .ga-load span:nth-child(2){animation-delay:.15s} .ga-load span:nth-child(3){animation-delay:.3s}
  @keyframes gap{0%,80%,100%{opacity:.25; transform:scale(.8)} 40%{opacity:1; transform:none}}
  @media (max-width: 760px){ .ga-metrics{grid-template-columns:repeat(2, minmax(0, 1fr))} .ga-h{flex-direction:column} }
</style>
<script>
(function () {
  if (window.__gaTabs) return; window.__gaTabs = true;

  document.addEventListener('click', function (e) {
    var b = e.target.closest && e.target.closest('#ga-view .ga-tab');
    if (!b) return;
    var card = b.closest('.ga-src'), id = b.getAttribute('data-gt');
    card.querySelectorAll('.ga-tab').forEach(function (x) { x.classList.toggle('on', x === b); });
    card.querySelectorAll('.ga-panel').forEach(function (p) { p.classList.toggle('on', p.getAttribute('data-gp') === id); });
  });
})();
</script>
