/* SEO and GEO case study - Search Console panel (assets/seo-chart.js).
   An English recreation of the Google Search Console performance report:
   four metric tiles and the daily clicks / impressions chart.
   Everything is prefixed .sgc so nothing reaches the rest of the site. */
#site .sgc { --sgc-c: #2C5FD8; --sgc-i: #7A52C7; --sgc-ink: #0B1B33; --sgc-mu: #45556E; --sgc-line: rgba(11,27,51,.12);
  margin: 0; background: #fff; border: 1px solid rgba(11,27,51,.12); border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 36px -24px rgba(11,27,51,.22); }

/* header: title, period and legend */
#site .sgc-hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 18px 24px 16px; border-bottom: 1px solid var(--sgc-line); }
/* an h2 since 2026-10-20 (heading order); keeps the old h3 look */
#site .sgc-hd h2, #site .sgc-hd h3 { line-height: 1.6; max-width: none; margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; color: var(--sgc-ink); }
#site .sgc-hd p { margin: 3px 0 0; font-size: 13px; color: var(--sgc-mu); }
#site .sgc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--sgc-line); border-radius: 100px; font-size: 13px; color: var(--sgc-mu); white-space: nowrap; }
#site .sgc-pill i { width: 7px; height: 7px; border-radius: 50%; background: #47A045; }

/* the four metric tiles */
#site .sgc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--sgc-line); }
#site .sgc-t { position: relative; padding: 18px 22px 18px; border-right: 1px solid var(--sgc-line); }
#site .sgc-t:last-child { border-right: 0; }
#site .sgc-t::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tc, transparent); }
#site .sgc-t.is-c { --tc: var(--sgc-c); }
#site .sgc-t.is-i { --tc: var(--sgc-i); }
#site .sgc-l { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--sgc-mu); }
#site .sgc-l i { width: 10px; height: 10px; border-radius: 3px; background: var(--tc, rgba(11,27,51,.2)); flex: none; }
#site .sgc-t:not(.is-c):not(.is-i) .sgc-l i { background: transparent; border: 1.5px solid rgba(11,27,51,.25); }
#site .sgc-v { margin: 10px 0 0; font-size: clamp(1.6rem, 2.6vw, 2.15rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--sgc-ink); font-variant-numeric: tabular-nums; }
#site .sgc-cmp { margin: 9px 0 0; font-size: 13px; line-height: 1.4; color: var(--sgc-mu); }
#site .sgc-cmp b { font-weight: 600; color: #3D4E68; font-variant-numeric: tabular-nums; }

/* chart */
#site .sgc-body { padding: 16px 16px 8px; }
#site .sgc-leg { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 8px 6px; padding: 0; list-style: none; }
#site .sgc-leg li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--sgc-mu); }
#site .sgc-leg li::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--lc); }
#site .sgc-plot { position: relative; outline: none; touch-action: pan-y; cursor: crosshair; border-radius: 8px; }
#site .sgc-plot:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sgc-c); }
#site .sgc-plot svg { display: block; width: 100%; max-width: none; overflow: visible; }
#site .sgc-plot text { font-family: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; font-size: 13px; fill: var(--sgc-mu); font-variant-numeric: tabular-nums; }
#site .sgc-plot .ax-t { font-size: 13px; font-weight: 600; fill: #3D4E68; }
#site .sgc-plot .grid { stroke: rgba(11,27,51,.08); stroke-width: 1; }
#site .sgc-plot .base { stroke: rgba(11,27,51,.28); stroke-width: 1; }
#site .sgc-plot .tick { stroke: rgba(11,27,51,.28); stroke-width: 1; }
#site .sgc-plot .ln { fill: none; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
#site .sgc-plot .ln-c { stroke: var(--sgc-c); }
#site .sgc-plot .ln-i { stroke: var(--sgc-i); }
#site .sgc-plot .ar-c { fill: url(#sgc-gc); }
#site .sgc-plot .cur { stroke: rgba(11,27,51,.35); stroke-width: 1; stroke-dasharray: 3 3; }
#site .sgc-plot .dot { stroke: #fff; stroke-width: 2; }
#site .sgc-plot .hov { opacity: 0; transition: opacity .15s; }
#site .sgc-plot.on .hov { opacity: 1; }

/* tooltip */
#site .sgc-tip { position: absolute; top: 8px; left: 0; z-index: 2; min-width: 176px; padding: 10px 13px 11px; border-radius: 10px; background: #0B1B33; color: #fff;
  box-shadow: 0 16px 34px -16px rgba(11,27,51,.6); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
#site .sgc-plot.on .sgc-tip { opacity: 1; transform: none; }
#site .sgc-tip p { margin: 0; font-size: 13px; line-height: 1.5; color: #C9D4E6; display: flex; align-items: center; gap: 8px; }
#site .sgc-tip p.d { margin-bottom: 5px; font-size: 13.5px; font-weight: 600; color: #fff; }
#site .sgc-tip p i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
#site .sgc-tip p b { margin-left: auto; padding-left: 14px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }

#site .sgc-src { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin: 0; padding: 12px 24px 16px; border-top: 1px solid var(--sgc-line); font-size: 14.5px; line-height: 1.55; color: var(--sgc-mu); }
#site .sgc-hint { white-space: nowrap; }

/* the numbered approach steps in the prose */
#site .prose .sgc-steps { list-style: none; margin: 4px 0 20px; padding: 0; counter-reset: sgcs; border-top: 1px solid rgba(11,27,51,.12); }
#site .prose .sgc-steps li { counter-increment: sgcs; position: relative; margin: 0; padding: 15px 0 15px 50px; border-bottom: 1px solid rgba(11,27,51,.12); }
#site .prose .sgc-steps li::before { content: counter(sgcs, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: "JetBrains Mono", monospace; font-size: 13.5px; font-weight: 500; color: var(--cb); }
#site .prose .sgc-steps strong { display: block; margin-bottom: 2px; }

@media (max-width: 860px) {
  #site .sgc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #site .sgc-t:nth-child(2) { border-right: 0; }
  #site .sgc-t:nth-child(-n+2) { border-bottom: 1px solid var(--sgc-line); }
}
@media (max-width: 560px) {
  #site .sgc-hd { padding: 16px 16px 14px; }
  #site .sgc-t { padding: 15px 14px 15px; }
  #site .sgc-body { padding: 12px 6px 6px; }
  #site .sgc-leg { margin: 0 10px 6px; }
  #site .sgc-src { padding: 12px 16px 14px; }
  #site .sgc-hint { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  #site .sgc-tip, #site .sgc-plot .hov { transition: none; }
}