<%

  var st = !!locals.showStaff;
  var LABEL = { owned: 'Your site', controlled: 'Your profile', positive: 'Positive', neutral: 'Neutral', negative: 'Negative', namesake: 'Someone else', unclassified: 'Not labelled' };
  var SRC = { serp: 'Google', ai: 'AI answer', review: 'Review', mention: 'Mention', autocomplete: 'Autocomplete', question: 'Google questions', manual: 'Added by hand' };
  var PATH = { '': 'Not decided yet', remove: 'Get it removed', correct: 'Ask for a correction', suppress: 'Push it down', respond: 'Reply publicly', fix: 'Fix the cause', monitor: 'Keep an eye on it' };
  var p1 = m.page1 || [];
  var blocks = []; for (var i = 1; i <= 10; i++) { blocks.push(p1.find(function (r) { return r.pos === i; }) || null); }
  var delta = function (now, was, lowerIsBetter) { if (was == null || now == null || now === was) return ''; var up = now > was, good = lowerIsBetter ? !up : up; return '<span class="ov-d ' + (good ? 'good' : 'bad') + '">' + (up ? '▲ ' : '▼ ') + Math.abs(now - was) + ' since last check</span>'; };
  var openClaims = claims.filter(function (c) { return c.status === 'open'; });
  var byType = {}; claims.forEach(function (c) { byType[c.type] = (byType[c.type] || 0) + 1; });
  var memory = claims.filter(function (c) { return c.retrieval === 'memory'; }).length;
  var unanswered = reviews.reduce(function (n, r) { return n + r.unansweredNeg; }, 0);
  var sev = function (s) { return s >= 15 ? 'hi' : s >= 6 ? 'md' : 'lo'; };
  var path = function (u) { try { var x = new URL(u); return x.hostname.replace(/^www\./, '') + (x.pathname.length > 1 ? decodeURIComponent(x.pathname).slice(0, 40) : ''); } catch (e) { return u || ''; } };
  var waiting = draftsWaiting.length + assetsWaiting.length + (locals.piecesWaiting || []).length;
%>
<%- include('../partials/rep-shell') %>

<% if (!snaps.length && !claims.length && !reviews.length) { %>
  <p class="claim-lede"><%= running ? 'First check running for ' + entity.name + '.' : 'No data yet for ' + entity.name + '.' %></p>
  <p class="claim-sub"><%= st ? 'Review the names and searches in Settings, then press Run now.' : 'Your VOCTOS team runs the first check.' %></p>
<% } else { %>
  <p class="claim-lede"><% if (m.negTop10) { %><em><%= m.negTop10 %> negative result<%= m.negTop10 === 1 ? '' : 's' %></em> on Google's first page for <%= entity.name %><%= m.aboveFold ? ', and ' + m.aboveFold + ' of them in the top three' : '' %>.<% } else if (snaps.length) { var _negAll = series.length ? series[series.length - 1].neg : 0; %><em>Clean</em> first page on Google for <%= entity.name %><%= _negAll ? '. ' + _negAll + ' negative page' + (_negAll === 1 ? ' shows' : 's show') + ' up in the other searches' : '' %>.<% } else { %>Reputation for <%= entity.name %>.<% } %></p>
  <p class="claim-sub"><%= snaps.length %> Google searches · <%= claims.length %> open AI points · <%= reviews.length %> review site<%= reviews.length === 1 ? '' : 's' %></p>
<% } %>

<div class="bento" style="margin-top:18px">
  <% if (waiting) { %>
  <section class="card b12 rp-sec ov-wait">
    <div class="rp-sh"><div><div class="rp-kick"><%= st ? 'Client' : 'You' %></div><h3><%= waiting %> waiting for approval</h3></div></div>
    <ul class="rp-list">
      <% draftsWaiting.forEach(function (r) { %><li class="rp-item"><div class="rp-lead"><%= r.rating || '' %>★</div><div><div class="rp-src">Reply to <%= r.author || 'a reviewer' %></div><p class="rp-sn rp-clamp" <%- h.dirAttr(r.draft.text) %>><%= r.draft.text %></p></div><div class="rp-side"><a class="btn btn-sm btn-primary" href="/reputation/reviews#q-<%= r._id %>"><%= st ? 'Open' : 'Review' %></a></div></li><% }) %>
      <% (locals.piecesWaiting || []).forEach(function (a) { %><li class="rp-item"><div class="rp-lead">✎</div><div><div class="rp-src"><%= ((locals.KINDS || {})[a.repKind] || { label: 'Article' }).label %> to approve</div><div class="rp-t"><%= a.title %></div></div><div class="rp-side"><a class="btn btn-sm btn-primary" href="/reputation/content/<%= a._id %>"><%= st ? 'Open' : 'Read' %></a></div></li><% }) %>
            <% assetsWaiting.forEach(function (a) { %><li class="rp-item"><div class="rp-lead">↑</div><div><div class="rp-src"><%= path(a.url) %></div><div class="rp-t"><%= a.title || path(a.url) %></div></div><div class="rp-side"><a class="btn btn-sm btn-primary" href="/reputation/suppression#a-<%= a._id %>"><%= st ? 'Open' : 'Review' %></a></div></li><% }) %>
    </ul>
  </section>
  <% } %>

  <section class="card b12 rp-sec">
    <div class="rp-sh">
      <div><div class="rp-kick"><%= m.primaryQuery ? 'Search: ' + m.primaryQuery : 'Google' %></div><h3>Page one</h3></div>
      <div class="rp-sm"><a href="/reputation/search">All searches →</a></div>
    </div>
    <div class="rp-body">
      <% if (!p1.length) { %><div class="rp-empty"><b>No Google check yet</b></div><% } else { %>
      <div class="ov-serp">
        <% var _maxPos = p1.reduce(function (n, r) { return Math.max(n, r.pos); }, 0); %>
        <% blocks.forEach(function (r, i) { if (i + 1 > _maxPos) return; %>
          <% if (r) { %><a class="ov-blk rc-<%= r.cls %>" href="<%= r.url %>" target="_blank" rel="noopener nofollow" title="#<%= r.pos %> <%= r.title %>"><b><%= r.pos %></b><span><%= r.domain %></span><em><%= LABEL[r.cls] %></em></a>
          <% } else { %><div class="ov-blk ov-x"><b><%= i + 1 %></b><span>not shown</span></div><% } %>
        <% }) %>
        <% if (_maxPos < 10) { %><div class="ov-blk ov-x ov-few" style="grid-column:span <%= 10 - _maxPos %>"><b>Only <%= p1.length %></b><span>Google shows only <%= p1.length %> result<%= p1.length === 1 ? '' : 's' %> for this search. The rest of page one is ads, videos or nothing.</span></div><% } %>
      </div>
      <div class="rp-filters" style="margin-top:14px; font-size:12px">
        <% ['owned', 'controlled', 'positive', 'neutral', 'negative', 'namesake'].forEach(function (c) { %><span class="rp-lab rc-<%= c %>" style="font-weight:500"><%= LABEL[c] %></span><% }) %>
      </div>
      <% } %>
    </div>
  </section>

  <% if (series.length) {
       var sl = series[series.length - 1], sf = series[0];
       var L = 44, R = 676, TOP = 22, BOT = 196, n = series.length;
       var ymax = Math.max(4, Math.max.apply(null, series.map(function (s) { return Math.max(s.neg, s.good); })));
       ymax = Math.ceil(ymax / 4) * 4;
       var X = function (i) { return n === 1 ? L + 28 : L + (R - L) * i / (n - 1); };
       var nextAt = new Date(+new Date(sl.at) + (watch.every || 14) * 864e5);
       var Y = function (v) { return BOT - (BOT - TOP) * v / ymax; };
       var pts = function (k) { return series.map(function (s, i) { return Math.round(X(i)) + ',' + Math.round(Y(s[k])); }).join(' '); };
       var area = function (k) { return 'M' + Math.round(X(0)) + ',' + BOT + ' L' + pts(k).replace(/ /g, ' L') + ' L' + Math.round(X(n - 1)) + ',' + BOT + ' Z'; };
       var ticks = n <= 6 ? series.map(function (s, i) { return i; }) : [0, Math.round((n - 1) / 3), Math.round(2 * (n - 1) / 3), n - 1];
       var chartPts = series.map(function (s, i) { return { x: Math.round(X(i)), label: h.date(s.at), rows: [
         { k: 'Good pages', v: String(s.good), y: Math.round(Y(s.good)), c: 'var(--pos)', d: i ? s.good - series[i - 1].good : null },
         { k: 'Negative pages', v: String(s.neg), y: Math.round(Y(s.neg)), c: 'var(--neg)' }
       ] }; });
       var dGood = sl.good - sf.good, dNeg = sl.neg - sf.neg;
  %>
  <section class="card b8 rp-sec">
    <div class="rp-sh">
      <div><div class="rp-kick">Google, page one, all <%= sl.searches %> searches</div><h3>Good pages vs negative pages</h3></div>
      <div class="ov-leg"><span><i style="background:var(--pos)"></i>Good <b><%= sl.good %></b></span><span><i style="background:var(--neg)"></i>Negative <b><%= sl.neg %></b></span></div>
    </div>
    <div class="rp-body">
      <p class="ov-say">
        <% if (n === 1) { %>First check on <%= h.date(sl.at) %>: <b class="g"><%= sl.good %> good</b> and <b class="<%= sl.neg ? 'r' : 'g' %>"><%= sl.neg %> negative</b> out of <%= sl.total %> pages. The lines continue from the next check, around <%= h.date(nextAt) %>.
        <% } else if (dGood > 0 && dNeg < 0) { %><b class="g">+<%= dGood %> good</b> and <b class="g"><%= Math.abs(dNeg) %> fewer negative</b> pages since <%= h.date(sf.at) %>.
        <% } else if (dGood > 0) { %><b class="g">+<%= dGood %> good page<%= dGood === 1 ? '' : 's' %></b> on page one since <%= h.date(sf.at) %>.
        <% } else if (dNeg < 0) { %><b class="g"><%= Math.abs(dNeg) %> fewer negative page<%= dNeg === -1 ? '' : 's' %></b> on page one since <%= h.date(sf.at) %>.
        <% } else if (dNeg > 0) { %><b class="r">+<%= dNeg %> negative</b> since <%= h.date(sf.at) %>. The cases below show what we're doing about them.
        <% } else { %>Steady since <%= h.date(sf.at) %>, across <%= n %> checks.<% } %>
      </p>
      <div class="vchart-wrap">
        <svg class="chart vchart" viewBox="0 0 700 226" role="img" tabindex="0" data-points="<%= JSON.stringify(chartPts) %>"
             aria-label="Good pages from <%= sf.good %> to <%= sl.good %>, negative pages from <%= sf.neg %> to <%= sl.neg %>, over <%= n %> checks.">
          <% [0, ymax / 4, ymax / 2, ymax * 3 / 4, ymax].forEach(function (v) { %>
            <line x1="<%= L %>" y1="<%= Y(v) %>" x2="<%= R %>" y2="<%= Y(v) %>" stroke="var(--line-2)" stroke-width="1"/>
            <text x="<%= L - 10 %>" y="<%= Y(v) + 4 %>" text-anchor="end" font-size="11" fill="var(--muted-2)"><%= v %></text>
          <% }) %>
          <path d="<%= area('good') %>" fill="var(--pos)" opacity=".08"/>
          <path d="<%= area('neg') %>" fill="var(--neg)" opacity=".06"/>
          <polyline points="<%= pts('good') %>" fill="none" stroke="var(--pos)" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
          <polyline points="<%= pts('neg') %>" fill="none" stroke="var(--neg)" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
          <% series.forEach(function (s, i) { %>
            <circle cx="<%= Math.round(X(i)) %>" cy="<%= Math.round(Y(s.good)) %>" r="3.5" fill="var(--surface)" stroke="var(--pos)" stroke-width="2"/>
            <circle cx="<%= Math.round(X(i)) %>" cy="<%= Math.round(Y(s.neg)) %>" r="3.5" fill="var(--surface)" stroke="var(--neg)" stroke-width="2"/>
          <% }) %>
          <% if (n === 1) { %>
            <line x1="<%= X(0) %>" y1="<%= Y(sl.good) %>" x2="<%= R %>" y2="<%= Y(sl.good) %>" stroke="var(--pos)" stroke-width="1.6" stroke-dasharray="4 5" opacity=".45"/>
            <line x1="<%= X(0) %>" y1="<%= Y(sl.neg) %>" x2="<%= R %>" y2="<%= Y(sl.neg) %>" stroke="var(--neg)" stroke-width="1.6" stroke-dasharray="4 5" opacity=".45"/>
            <text x="<%= X(0) + 12 %>" y="<%= Y(sl.good) - 9 %>" font-size="12" font-weight="700" fill="var(--pos)"><%= sl.good %> good</text>
            <text x="<%= X(0) + 12 %>" y="<%= Y(sl.neg) + (Math.abs(Y(sl.neg) - Y(sl.good)) < 22 && sl.neg < sl.good ? 20 : -9) %>" font-size="12" font-weight="700" fill="var(--neg)"><%= sl.neg %> negative</text>
            <text x="<%= R %>" y="<%= BOT + 18 %>" text-anchor="end" font-size="11" fill="var(--muted-2)">Next check ~ <%= h.date(nextAt) %></text>
          <% } %>
          <% ticks.forEach(function (i) { %>
            <text x="<%= Math.round(X(i)) %>" y="<%= BOT + 18 %>" text-anchor="<%= i === 0 ? 'start' : i === n - 1 ? 'end' : 'middle' %>" font-size="11" fill="var(--muted-2)"><%= h.date(series[i].at) %></text>
          <% }) %>
          <line class="vc-cross" x1="0" y1="<%= TOP - 8 %>" x2="0" y2="<%= BOT %>"/>
          <circle class="vc-dot" cx="0" cy="0" r="6"/><circle class="vc-dot" cx="0" cy="0" r="6"/>
        </svg>
        <div class="vchart-tip" hidden aria-live="polite"></div>
      </div>
    </div>
    <div class="rp-note"><b>Good</b> means your site, your profiles or a positive page. Each page counts once, even when it shows up in several searches.</div>
  </section>

  <% var W = [
       [wins.negGone, 'negative page' + (wins.negGone === 1 ? '' : 's') + ' off page one'],
       [wins.goodNew, 'new good page' + (wins.goodNew === 1 ? '' : 's') + ' on page one'],
       [wins.removalsWon, 'removal request' + (wins.removalsWon === 1 ? '' : 's') + ' approved'],
       [wins.claimsFixed, 'AI answer' + (wins.claimsFixed === 1 ? '' : 's') + ' corrected'],
       [wins.repliesPosted, 'review repl' + (wins.repliesPosted === 1 ? 'y' : 'ies') + ' posted'],
       [wins.assetsRanking, 'new page' + (wins.assetsRanking === 1 ? '' : 's') + ' of yours ranking'],
       [wins.casesDone, 'case' + (wins.casesDone === 1 ? '' : 's') + ' closed']
     ].filter(function (x) { return x[0] > 0; }); %>
  <section class="card b4 rp-sec ov-wins">
    <div class="rp-sh"><div><div class="rp-kick"><%= wins.since ? 'Since ' + h.date(wins.since) : 'So far' %></div><h3><%= W.length ? 'What has changed' : 'What we watch for you' %></h3></div></div>
    <% if (W.length) { %>
      <ul class="ov-wl"><% W.forEach(function (x) { %><li><b><%= x[0] %></b><span><%= x[1] %></span></li><% }) %></ul>
    <% } else { %>
      <p class="rp-help" style="padding:14px 22px 0; margin:0">From the next check, this shows what has changed: negative pages that dropped off, new good pages, removals approved, AI answers corrected and cases closed.</p>
    <% } %>
    <ul class="ov-watch">
      <li><b><%= watch.searches %></b> Google search<%= watch.searches === 1 ? '' : 'es' %></li>
      <li><b><%= watch.questions %></b> question<%= watch.questions === 1 ? '' : 's' %> on <b><%= watch.engines %></b> AI engine<%= watch.engines === 1 ? '' : 's' %></li>
      <li><b><%= watch.sites %></b> review site<%= watch.sites === 1 ? '' : 's' %>, read daily</li>
      <li>Google checked every <b><%= watch.every %></b> day<%= watch.every === 1 ? '' : 's' %><%= rep.crisis && rep.crisis.on ? ' (crisis mode)' : '' %></li>
    </ul>
  </section>
  <% } %>

  <a class="card b4 rp-sec ov-panel" href="/reputation/search">
    <div class="rp-body">
      <div class="rp-kick">Google</div>
      <div class="ov-big tnum <%= m.negTop10 ? 'bad' : '' %>"><%= snaps.length ? m.negTop10 : '—' %></div>
      <div class="ov-cap">negative results, page one <%- prev ? delta(m.negTop10, prev.negTop10, true) : '' %></div>
      <% if (trend.length > 1) { var tmax = Math.max.apply(null, trend.map(function (t) { return t.neg; }).concat([1])); %>
        <div class="ov-trend" title="<%= trend.map(function (t) { return h.date(t.at) + ': ' + t.neg; }).join(', ') %>"><% trend.forEach(function (t) { %><i class="<%= t.neg ? 'bad' : '' %>" style="height:<%= Math.max(3, Math.round(t.neg / tmax * 26)) %>px"></i><% }) %><span><%= trend.length %> checks</span></div>
      <% } %>
    </div>
    <dl class="ov-kv">
      <div><dt>In the top three</dt><dd><%= snaps.length ? m.aboveFold : '—' %></dd></div>
      <div><dt>On page two</dt><dd><%= snaps.length ? (m.negTop20 - m.negTop10) : '—' %></dd></div>
      <div><dt>Owned or positive</dt><dd><%= m.control == null ? '—' : m.control + '%' %></dd></div>
      <div><dt>Autocomplete</dt><dd><%= !snaps.length ? '—' : negAuto.length ? negAuto.length + ' bad suggestion' + (negAuto.length === 1 ? '' : 's') : 'none' %></dd></div>
    </dl>
  </a>

  <a class="card b4 rp-sec ov-panel" href="/reputation/ai">
    <div class="rp-body">
      <div class="rp-kick">AI answers</div>
      <div class="ov-big tnum <%= openClaims.length ? 'bad' : '' %>"><%= claims.length || rep.lastAiAt ? openClaims.length : '—' %></div>
      <div class="ov-cap">open point<%= openClaims.length === 1 ? '' : 's' %> in AI answers</div>
    </div>
    <dl class="ov-kv">
      <div><dt>Made up</dt><dd><%= (byType.invented || 0) %></dd></div>
      <div><dt>Out of date or mixed up</dt><dd><%= (byType.stale || 0) + (byType.merged || 0) %></dd></div>
      <div><dt>Recommends others</dt><dd><%= byType.omission || 0 %></dd></div>
      <div><dt>From model memory</dt><dd><%= memory %></dd></div>
    </dl>
  </a>

  <a class="card b4 rp-sec ov-panel" href="/reputation/reviews">
    <div class="rp-body">
      <div class="rp-kick">Reviews</div>
      <% if (!reviews.length) { %><div class="ov-big">—</div><div class="ov-cap">no review sites yet</div><% } else { %>
      <div class="ov-big tnum <%= unanswered ? 'bad' : '' %>"><%= unanswered %></div>
      <div class="ov-cap">low review<%= unanswered === 1 ? '' : 's' %> with no reply</div>
      <% } %>
    </div>
    <% if (reviews.length) { %><dl class="ov-kv">
      <% reviews.slice(0, 4).forEach(function (r) { %><div><dt><%= r.profile.platform.replace('Google Business Profile', 'Google') %></dt><dd><%= r.profile.rating ? '★ ' + r.profile.rating : '—' %><%= r.profile.count != null ? ' (' + r.profile.count + ')' : '' %></dd></div><% }) %>
    </dl><% } %>
  </a>

  <section class="card b12 rp-sec">
    <div class="rp-sh"><div><h3>Open cases</h3></div><div class="rp-sm"><a href="/reputation/cases"><%= openCases > cases.length ? 'All ' + openCases + ' cases →' : 'Cases →' %></a></div></div>
    <% if (!cases.length) { %><div class="rp-empty"><b>No open cases</b></div><% } else { %>
    <ul class="rp-list">
      <% cases.forEach(function (c) { %>
        <li class="rp-item">
          <div class="rp-lead"><span class="rep-sev <%= sev(c.severity || 0) %>" title="How serious"><%= c.severity != null ? c.severity : '—' %></span></div>
          <div>
            <div class="rp-src"><%= SRC[c.source.type] === 'AI answer' || SRC[c.source.type] === 'Review' ? c.source.label : SRC[c.source.type] %><%= c.due ? ' · due ' + h.date(c.due) : '' %></div>
            <a class="rp-t" href="/reputation/cases?open=<%= c._id %>#c-<%= c._id %>" <%- h.dirAttr(c.title) %>><%= c.title %></a>
            <div class="rp-why"><b><%= PATH[c.path || ''] %></b><%= c.nextStep ? '. Next: ' + c.nextStep : '' %></div>
          </div>
          <div class="rp-side"><span class="rp-lab sc-<%= c.status %>"><%= c.status === 'in_progress' ? 'In progress' : 'Open' %></span></div>
        </li>
      <% }) %>
    </ul>
    <% } %>
  </section>
</div>

<style>
  .ov-leg{display:flex; gap:14px; font-size:12.5px; color:var(--muted)} .ov-leg span{display:inline-flex; align-items:center; gap:6px} .ov-leg i{width:10px; height:3px; border-radius:2px} .ov-leg b{color:var(--ink)}
  .ov-say{margin:0 0 6px; font-size:14px; color:var(--ink-2)} .ov-say b.g, .ov-one b.g{color:var(--pos)} .ov-say b.r, .ov-one b.r{color:var(--neg)}
  .ov-one{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px} .ov-one div{padding:14px 16px; border-radius:12px; background:var(--surface-2)}
  .ov-one b{display:block; font-size:28px; font-weight:800; color:var(--ink); letter-spacing:-.02em} .ov-one span{font-size:12.5px; color:var(--muted)}
  .ov-wins{display:flex; flex-direction:column}
  .ov-wl{list-style:none; margin:0; padding:10px 22px 4px}
  .ov-wl li{display:flex; align-items:baseline; gap:12px; padding:8px 0; border-top:1px solid var(--line-2)} .ov-wl li:first-child{border-top:0}
  .ov-wl b{min-width:34px; font-size:22px; font-weight:800; color:var(--pos); letter-spacing:-.02em} .ov-wl span{font-size:13.5px; color:var(--ink)}
  .ov-watch{list-style:none; margin:auto 0 0; padding:14px 22px 18px; background:var(--surface-2); display:flex; flex-direction:column; gap:7px; font-size:13px; color:var(--ink-2)}
  .ov-watch li::before{content:"✓"; color:var(--pos); font-weight:700; margin-right:8px} .ov-watch b{color:var(--ink)}
  @media (max-width:700px){ .ov-one b{font-size:22px} }
  .ov-serp{display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); gap:8px}
  @media (max-width:900px){ .ov-serp{grid-template-columns:repeat(5, minmax(0, 1fr))} .ov-few{grid-column:1 / -1 !important} }
  .ov-blk.ov-few span{white-space:normal; line-height:1.45} .ov-blk.ov-few{justify-content:center}
  .ov-blk{display:flex; flex-direction:column; gap:3px; min-height:96px; padding:10px; border-radius:12px; background:color-mix(in srgb, var(--c) 14%, var(--surface)); border:1px solid color-mix(in srgb, var(--c) 35%, transparent); color:var(--ink); overflow:hidden; transition:transform .15s}
  .ov-blk:hover{transform:translateY(-2px)}
  .ov-blk b{font-size:18px; font-weight:800; color:var(--ink)} .ov-blk span{font-size:11.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ov-blk em{margin-top:auto; font-style:normal; font-size:11px; font-weight:700; color:var(--ink-2)}
  .ov-blk.rc-negative{background:var(--neg); border-color:var(--neg)} .ov-blk.rc-negative *{color:#fff}
  .ov-x{background:var(--surface-2); border:1px dashed var(--line)} .ov-x b, .ov-x span{color:var(--muted)}
  .ov-panel{color:inherit; display:flex; flex-direction:column; transition:box-shadow .15s} .ov-panel:hover{box-shadow:var(--shadow-hover)}
  .ov-big{font-size:44px; font-weight:800; line-height:1; color:var(--ink); margin-top:10px; letter-spacing:-.03em} .ov-big.bad{color:var(--neg)}
  .ov-cap{font-size:13px; color:var(--muted); margin-top:6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
  .ov-d{font-size:11.5px; font-weight:700; padding:1px 7px; border-radius:6px} .ov-d.good{color:var(--pos); background:var(--pos-tint)} .ov-d.bad{color:var(--neg); background:var(--neg-tint)}
  .ov-trend{display:flex; align-items:flex-end; gap:3px; height:30px; margin-top:12px} .ov-trend i{display:block; width:8px; border-radius:2px; background:var(--pos)} .ov-trend i.bad{background:var(--neg)} .ov-trend span{font-size:11px; color:var(--muted); margin-left:8px; align-self:center}
  .ov-wait{border:1px solid var(--accent-strong)}
</style>
<%- include('../partials/rep-foot') %>
