/*
 * seo-proof.css: the sample post and the Search Console graph, shared by the
 * Business Apps hub and the SEO Article Authoring page (inc/parts/seo-proof.php).
 *
 * Every rule starts `.aad-page .sp-…` or `.aad-page .sg-…`, which is (0,3,0)
 * and clears both pages' element resets (`body:is(…) .aad-page p` is 0,2,2).
 */

/* ════════ THE SAMPLE POST: the article as it sits on the owner's site ════ */
.aad-page .sp-post { margin: 0; font-family: inherit }
.aad-page .sp-post p { margin: 0 }

.aad-page .sp-post .sp-post__cap {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: .2rem 1rem;
    margin-bottom: .7rem;
    font-weight: 600; font-size: .82rem; line-height: 1.3; color: var(--a-soft);
}
.aad-page .sp-post .sp-post__cap span { font-weight: 500 }

.aad-page .sp-post .sp-post__site {
    border: 1px solid var(--a-card-line); border-radius: var(--a-r);
    background: #fff;
    box-shadow: var(--a-card-shadow);
    overflow: hidden;
}

/* the owner's own site chrome, so the post reads as published, not as a card */
.aad-page .sp-post .sp-post__nav {
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem clamp(1rem, 2.6vw, 1.5rem);
    border-bottom: 1px solid var(--a-hair);
    font-size: .8rem; color: var(--a-soft);
}
.aad-page .sp-post .sp-post__brand { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--a-ink); white-space: nowrap }
.aad-page .sp-post .sp-post__brand i { width: 14px; height: 14px; border-radius: 4px; background: var(--a-ink); flex: none }
.aad-page .sp-post .sp-post__links { display: flex; gap: .9rem }
.aad-page .sp-post .sp-post__links .is-here { color: var(--a-ink); font-weight: 600 }
.aad-page .sp-post .sp-post__book.is-press { cursor: pointer }
.aad-page .sp-post .sp-post__book:focus-visible { outline: 2px solid var(--a-brand); outline-offset: 3px }
.aad-page .sp-post .sp-post__book.is-said { background: #fff; color: var(--a-brand); box-shadow: inset 0 0 0 1px var(--a-brand) }
.aad-page .sp-post .sp-post__book {
    margin-left: auto;
    padding: .36rem .7rem; border-radius: 7px;
    background: var(--a-brand); color: #fff;
    font-weight: 600; font-size: .76rem; white-space: nowrap;
}

.aad-page .sp-post .sp-post__article { padding: clamp(1.3rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.1rem) .9rem }
.aad-page .sp-post .sp-post__title {
    margin-bottom: .55rem;
    font-weight: 600; font-size: clamp(1.45rem, 2.5vw, 1.95rem); line-height: 1.14;
    letter-spacing: -.026em; color: var(--a-ink);
    text-wrap: balance;
}
.aad-page .sp-post .sp-post__meta { margin-bottom: 1.1rem; font-size: .8rem; color: var(--a-soft) }
.aad-page .sp-post .sp-post__lede {
    margin-bottom: 1.2rem;
    font-size: 1.06rem; line-height: 1.55; color: var(--a-ink);
    text-wrap: pretty;
}

/* the Fast read summary, one of the app's post extras */
.aad-page .sp-post .sp-post__fast {
    padding: .95rem 1.05rem 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--a-brand) 7%, #fff);
}
.aad-page .sp-post .sp-post__fast .sp-post__fast-head { margin-bottom: .3rem; font-weight: 700; font-size: .84rem; color: var(--a-brand) }
.aad-page .sp-post .sp-post__fast p { font-size: .93rem; line-height: 1.55; color: var(--a-ink) }

.aad-page .sp-post .sp-post__h { margin: 1.35rem 0 .45rem; font-weight: 600; font-size: 1.08rem; line-height: 1.3; color: var(--a-ink) }
.aad-page .sp-post .sp-post__text { font-size: .94rem; line-height: 1.66; color: var(--a-body) }
.aad-page .sp-post .sp-post__text sup { margin-left: .08em; font-size: .68em; font-weight: 700; color: var(--a-brand) }
/* 8 Nov: the sample's links are a picture of links and go nowhere, so they no
   longer dress as links (blue and underlined, they invited a click that did
   nothing). On the marked post the red pen underlines them instead. */
.aad-page .sp-post .sp-post__inlink { color: var(--a-ink); font-weight: 600 }
/* the article carries on below the fold */
.aad-page .sp-post .sp-post__h--next { opacity: .6 }
.aad-page .sp-post .sp-post__text--fade {
    -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 95%);
    mask-image: linear-gradient(180deg, #000 10%, transparent 95%);
}

.aad-page .sp-post .sp-post__foot {
    padding: .85rem clamp(1.2rem, 3vw, 2.1rem) 1rem;
    border-top: 1px solid var(--a-hair);
}
.aad-page .sp-post .sp-post__foot p { font-size: .78rem; line-height: 1.5; color: var(--a-soft) }
.aad-page .sp-post .sp-post__foot p + p { margin-top: .3rem }
.aad-page .sp-post .sp-post__foot b { margin-right: .35rem; font-weight: 600; color: var(--a-ink) }

@media (max-width: 460px) {
    .aad-page .sp-post .sp-post__links { display: none }
}

/* ════════ THE LONG POST: the parts only the marked version has ═════════ */
.aad-page .sp-post--long .sp-post__table {
    width: 100%; margin: 1.3rem 0 .4rem;
    border-collapse: collapse;
    font-size: .86rem; line-height: 1.45; color: var(--a-body);
}
.aad-page .sp-post--long .sp-post__table caption { margin-bottom: .5rem; text-align: left; font-weight: 600; font-size: .92rem; color: var(--a-ink) }
.aad-page .sp-post--long .sp-post__table th,
.aad-page .sp-post--long .sp-post__table td { padding: .55rem .6rem; border-bottom: 1px solid var(--a-hair); text-align: left; vertical-align: top }
.aad-page .sp-post--long .sp-post__table thead th { font-weight: 600; color: var(--a-ink); border-bottom-color: var(--a-line) }
.aad-page .sp-post--long .sp-post__table tbody th { font-weight: 600; color: var(--a-ink); white-space: nowrap; padding-left: 0 }
.aad-page .sp-post--long .sp-post__table + .rp-note,
.aad-page .sp-post--long .sp-post__text { margin-top: .9rem }

.aad-page .sp-post--long .sp-post__tip {
    margin: 1.3rem 0 0;
    padding: .9rem 1.05rem 1rem;
    border: 1px solid var(--a-hair);
    background: #f6f7f9;
    border-radius: 12px;
}
.aad-page .sp-post--long .sp-post__tip-head { margin-bottom: .3rem; font-weight: 700; font-size: .84rem; color: var(--a-ink) }
.aad-page .sp-post--long .sp-post__tip p:last-child { font-size: .93rem; line-height: 1.55; color: var(--a-ink) }

.aad-page .sp-post--long .sp-post__more { margin-top: 1.2rem; padding: .85rem 1rem; border: 1px solid var(--a-hair); border-radius: 10px }
.aad-page .sp-post--long .sp-post__more-head { margin-bottom: .35rem; font-weight: 700; font-size: .8rem; color: var(--a-soft) }
.aad-page .sp-post--long .sp-post__more p + p { margin-top: .25rem }
.aad-page .sp-post--long .sp-post__more .sp-post__inlink { font-size: .92rem }

.aad-page .sp-post--long .sp-post__cta {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem 1rem;
    margin: 1.5rem 0 .6rem; padding: 1rem 1.1rem;
    border-radius: 12px; background: color-mix(in srgb, var(--a-brand) 7%, #fff);
}
.aad-page .sp-post--long .sp-post__cta p { font-weight: 600; font-size: .98rem; color: var(--a-ink) }
.aad-page .sp-post--long .sp-post__cta .sp-post__book { margin-left: 0; font-size: .82rem; padding: .5rem .9rem }

.aad-page .sp-post--long .sp-post__sources ol { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .78rem; line-height: 1.5; color: var(--a-soft) }
.aad-page .sp-post--long .sp-post__sources li + li { margin-top: .1rem }

/* the result as it shows in Google */
.aad-page .sp-post .sp-serp { margin-top: 1.6rem }
.aad-page .sp-post .sp-serp__label { margin-bottom: .55rem; font-weight: 600; font-size: .82rem; color: var(--a-soft) }
.aad-page .sp-post .sp-serp__card {
    padding: 1rem 1.15rem 1.05rem;
    border: 1px solid var(--a-card-line); border-radius: 14px; background: #fff;
    font-family: Arial, Helvetica, sans-serif; /* impeccable-disable-line overused-font -- Google's own results face, because this is a picture of a Google result */
}
.aad-page .sp-post .sp-serp__site { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; font-size: .84rem; color: #202124 }
.aad-page .sp-post .sp-serp__site span { color: #4d5156 }
.aad-page .sp-post .sp-serp__site i { width: 18px; height: 18px; border-radius: 50%; background: var(--a-ink); flex: none }
.aad-page .sp-post .sp-serp__title { margin-bottom: .25rem; font-size: 1.18rem; line-height: 1.3; color: #1a0dab }
.aad-page .sp-post .sp-serp__desc { font-size: .86rem; line-height: 1.55; color: #4d5156 }

/* ════════ THE RED PEN ══════════════════════════════════════════════════════
   Marked like a school essay: the marks on the page, the notes out in the
   margin (both margins on a wide screen, the right one below that), and an
   arrow from each note to its mark, each drawn differently by seo-proof.js.
   Every mark draws from --m, which the script sets on each [data-rp] spot
   from its place on screen; the default is 1, so with no script or reduced
   motion every mark is already on the page (the arrows need the script). */
.aad-page .rp {
    --rp-ink: #c8261e;   /* 5.6:1 on white */
    --rp-hand: "Apex Hand", "Bradley Hand", "Segoe Print", cursive;   /* Kalam, Lachlan 4 Nov. Caveat read as type (29 Oct), Reenie Beanie too hard to read */
    --rp-pad: clamp(.95rem, 3vw, 2.2rem);   /* the article's side padding */
    --rp-gap: clamp(.7rem, 2vw, 1.4rem);    /* card edge to note */
    --rp-mw: clamp(7.2rem, 31vw, 15rem);    /* the right margin, below 1200 (vw: a % would mean the spot in a note's width) */
    position: relative;
    max-width: calc(37.5rem + var(--rp-mw)); margin-inline: auto;
    padding-right: var(--rp-mw);
}
.aad-page .rp [data-rp] { --m: 1 }
.aad-page .rp .rp-spot { position: relative }
.aad-page .rp .sp-post__site { overflow: visible }
.aad-page .rp .sp-post__nav { border-radius: var(--a-r) var(--a-r) 0 0 }
.aad-page .rp .sp-post__article { padding-inline: var(--rp-pad) }

.aad-page .rp svg path {
    fill: none; stroke: var(--rp-ink); stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--m));
}

/* rings: round a phrase, or a looser box round a whole block */
.aad-page .rp .rp-ring { position: relative; white-space: nowrap }
.aad-page .rp .rp-ring--block { display: block; white-space: normal }
.aad-page .rp .rp-ring__svg {
    position: absolute; left: -5%; top: -30%; width: 110%; height: 160%;
    overflow: visible; pointer-events: none;
}
.aad-page .rp .rp-ring--block > .rp-ring__svg { left: -6%; top: -14%; width: 112%; height: 128% }
.aad-page .rp .rp-ring--block > .rp-ring__svg path { stroke-width: 1.35 }
.aad-page .rp .sp-post__title.rp-ring--block { width: fit-content; max-width: min(13em, calc(100% - 3.4rem)) }

/* the grade, top right of the paper */
.aad-page .rp .rp-grade {
    position: absolute; right: -.2rem; top: -.6rem;
    display: grid; place-items: center;
    width: 3.2rem; height: 3.2rem;
    font-family: var(--rp-hand); font-size: 2.9rem; line-height: 1; color: var(--rp-ink);
    rotate: -8deg;
    opacity: var(--m);
}
.aad-page .rp .rp-grade .rp-ring__svg { left: -4%; top: -4%; width: 108%; height: 108% }

/* a stock line struck through */
.aad-page .rp .rp-strike {
    background: linear-gradient(var(--rp-ink), var(--rp-ink)) 0 58% / calc(var(--m) * 100%) 2px no-repeat;
    color: color-mix(in srgb, currentColor calc(100% - var(--m) * 45%), transparent);
}
/* a wavy line under the joke */
.aad-page .rp .rp-wave {
    text-decoration: underline wavy; text-decoration-thickness: 1.5px; text-underline-offset: .22em;
    text-decoration-color: color-mix(in srgb, var(--rp-ink) calc(var(--m) * 100%), transparent);
}
/* two lines under the keyword */
.aad-page .rp .rp-double {
    padding-bottom: 5px;
    background:
        linear-gradient(var(--rp-ink), var(--rp-ink)) 0 calc(100% - 4px) / calc(var(--m) * 100%) 1.6px no-repeat,
        linear-gradient(var(--rp-ink), var(--rp-ink)) 2px 100% / calc(var(--m) * 92%) 1.6px no-repeat;
}
/* one firm line under the links to older posts */
.aad-page .rp .rp-under {
    text-decoration: none;
    background: linear-gradient(var(--rp-ink), var(--rp-ink)) 0 100% / calc(var(--m) * 100%) 2px no-repeat;
    padding-bottom: 1px;
}
/* a bracket down the Fast read */
.aad-page .rp .rp-bracket { position: relative }
.aad-page .rp .rp-bracket__svg { position: absolute; left: calc(var(--rp-pad) * -.62); top: 2px; width: .7rem; height: calc(100% - 4px); overflow: visible }
/* a tick on the table, a star on the tip */
.aad-page .rp .rp-tick { display: inline-block; width: 1.9rem; height: 1.4rem; margin-left: .35rem; vertical-align: -.25rem; overflow: visible }
.aad-page .rp .rp-star { display: inline-block; width: 1.25rem; height: 1.25rem; margin-left: .4rem; vertical-align: -.25rem; overflow: visible }
.aad-page .rp .rp-star path { stroke-width: 1.8 }
/* a brace beside the sources, two bars beside the search description */
.aad-page .rp .sp-post__sources { position: relative; padding-right: 1.4rem }
.aad-page .rp .rp-brace { position: absolute; right: 0; top: 0; width: .8rem; height: 100%; overflow: visible }
.aad-page .rp .sp-serp__desc { position: relative }
.aad-page .rp .rp-bars { position: absolute; left: -.85rem; top: 0; width: .55rem; height: 100%; overflow: visible }
.aad-page .rp .rp-bars path { stroke-width: 1.8 }

/* the notes: always in the margin, written in once their spot is on screen */
.aad-page .rp .rp-note {
    position: absolute; top: 0; z-index: 1;
    left: calc(100% + var(--rp-pad) + var(--rp-gap));
    width: calc(var(--rp-mw) - var(--rp-gap));
    font-family: var(--rp-hand); font-weight: 400; font-size: clamp(1.65rem, 2.5vw, 2rem); line-height: .95; color: var(--rp-ink);
    rotate: -1.5deg;
    translate: 0 var(--push, 0px);
    text-wrap: pretty;
}
.aad-page .rp .rp-note--big { font-size: clamp(1.85rem, 2.9vw, 2.35rem) }
.aad-page .rp :is(.rp-spot--edge, .sp-serp) > .rp-note { left: calc(100% + var(--rp-gap)) }
.aad-page .rp .rp-note__text { display: block }
/* apps-light.css sets the sans on every span of an app page at (0,2,2); the pen's spans keep the hand */
.aad-page .rp .rp-note span { font-family: inherit }
.aad-page .rp .rp-note__short { display: none }
.aad-page .rp .rp-nb { white-space: nowrap }
.aad-page .rp.is-live .rp-note__text {
    clip-path: inset(-.4em 100% -.4em -.4em);
    transition: clip-path .5s ease-in;
}
.aad-page .rp.is-live .is-in > .rp-note .rp-note__text {
    clip-path: inset(-.4em -.4em -.4em -.4em);
    transition: clip-path .9s cubic-bezier(.4, .1, .3, 1) .25s;
}
.aad-page .rp .sp-serp > .rp-note { top: auto; bottom: 1.4rem }

/* the arrows, drawn by the script over the whole figure */
.aad-page .rp .rp-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2 }
.aad-page .rp .rp-ink path { stroke-width: 1.9 }
.aad-page .rp .rp-ink .rp-ink__head { stroke-dasharray: none; stroke-dashoffset: 0; transition: opacity .25s ease }

/* Wide: both margins, the paper keeps its reading width in the middle */
@media (min-width: 1200px) {
    .aad-page .rp { --rp-mw: 0px; max-width: 37.5rem; padding-right: 0; --rp-gap: 2.6rem }
    .aad-page .rp .rp-note { width: clamp(10rem, 13vw, 13rem) }
    .aad-page .rp .rp-note--l { left: auto; right: calc(100% + var(--rp-pad) + var(--rp-gap)); text-align: right; rotate: 1.5deg }
    .aad-page .rp :is(.rp-spot--edge, .sp-serp) > .rp-note--l { left: auto; right: calc(100% + var(--rp-gap)) }
    .aad-page .rp .rp-note--big { width: clamp(11rem, 15vw, 15rem) }
}

/* Phones: a smaller paper so the margin has room */
@media (max-width: 640px) {
    .aad-page .rp .sp-post__nav { gap: .5rem; padding-inline: .8rem; font-size: .7rem }
    .aad-page .rp .sp-post__book { padding: .3rem .5rem; font-size: .66rem }
    .aad-page .rp .sp-post__title { font-size: 1.22rem }
    .aad-page .rp .sp-post__lede { font-size: .92rem }
    .aad-page .rp :is(.sp-post__text, .sp-post__fast p, .sp-post__tip p:last-child) { font-size: .84rem; line-height: 1.55 }
    .aad-page .rp .sp-post__h { font-size: .96rem }
    .aad-page .rp .sp-post__table { font-size: .7rem }
    .aad-page .rp .sp-post__table :is(th, td) { padding: .4rem .3rem }
    .aad-page .rp .sp-post__table tbody th { white-space: normal }
    .aad-page .rp .sp-post__foot { padding-inline: .8rem }
    .aad-page .rp .sp-post__cta { padding: .8rem }
    .aad-page .rp .sp-serp__card { padding: .8rem .85rem }
    .aad-page .rp .sp-serp__title { font-size: 1rem }
    .aad-page .rp .rp-note { rotate: -3deg; font-size: 1.45rem; line-height: .92 }
    .aad-page .rp .rp-note__long { display: none }
    .aad-page .rp .rp-note__short { display: inline }
}

@media (prefers-reduced-motion: reduce) {
    .aad-page .rp.is-live .rp-note__text { clip-path: none; transition: none }
}

/* ════════ THE SEARCH CONSOLE GRAPH ═══════════════════════════════════════
   Built to read as the chart an owner opens: Google's two colours, the date
   chip, the metric tiles that fill when they are on, both scales, and a red
   line on the day the scheduled posts start. White on #1a73e8 is 4.5:1 and on
   #5e35b1 is 7.3:1, so the tile text passes on both. */
.aad-page .sg-graph { margin: 0; font-family: inherit }
.aad-page .sg-graph .sg-graph__card {
    padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2.4vw, 1.5rem) clamp(.8rem, 2vw, 1.1rem);
    border: 1px solid var(--a-card-line); border-radius: var(--a-r);
    background: #fff;
    box-shadow: var(--a-card-shadow);
}
.aad-page .sg-graph .sg-graph__bar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem;
    margin-bottom: 1rem;
}
.aad-page .sg-graph .sg-graph__title { margin: 0; font-weight: 600; font-size: .95rem; color: var(--a-ink) }

/* the date filter, drawn as Search Console's chip */
.aad-page .sg-graph .sg-graph__range {
    position: relative;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 0 .55rem 0 .8rem; border: 1px solid #c4c7cc; border-radius: 999px;
    font-size: .8rem; font-weight: 600; color: #1f3d7a;
    background: #fff;
    cursor: pointer;
}
.aad-page .sg-graph .sg-graph__range:hover { background: #f4f7fd }
.aad-page .sg-graph .sg-graph__range select {
    appearance: none; -webkit-appearance: none;
    padding: .42rem 1.3rem .42rem 0; border: 0; background: transparent;
    font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit;
    cursor: pointer;
}
.aad-page .sg-graph .sg-graph__range::after {
    content: ""; position: absolute; right: .75rem; top: 50%;
    width: 6px; height: 6px; margin-top: -4px;
    border: solid currentColor; border-width: 0 1.6px 1.6px 0;
    rotate: 45deg; pointer-events: none;
}
.aad-page .sg-graph .sg-graph__range select:focus-visible { outline: none }
.aad-page .sg-graph .sg-graph__range:focus-within { outline: 2px solid #1a73e8; outline-offset: 2px }

/* the metric tiles: filled when on, white when off, like Search Console */
.aad-page .sg-graph .sg-graph__keys { display: grid; grid-template-columns: repeat(2, minmax(0, 11.5rem)); gap: .6rem; margin-bottom: 1rem }
.aad-page .sg-graph .sg-key {
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .15rem .5rem;
    padding: .7rem .9rem .8rem .75rem; border: 1px solid #dadce0; border-radius: 8px;
    background: #fff; color: #5f6368;
    font-family: inherit; text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.aad-page .sg-graph .sg-key i {
    position: relative; flex: none;
    width: 15px; height: 15px; border-radius: 3px; border: 1.6px solid currentColor;
}
.aad-page .sg-graph .sg-key__label { font-weight: 600; font-size: .8rem; line-height: 1.2 }
.aad-page .sg-graph .sg-key__num {
    grid-column: 1 / -1;
    font-weight: 500; font-size: clamp(1.45rem, 2.4vw, 1.85rem); line-height: 1.1; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.aad-page .sg-graph .sg-key.is-on { color: #fff }
.aad-page .sg-graph .sg-key--clicks.is-on { background: #1a73e8; border-color: #1a73e8 }
.aad-page .sg-graph .sg-key--imp.is-on { background: #5e35b1; border-color: #5e35b1 }
.aad-page .sg-graph .sg-key.is-on i { background: #fff; border-color: #fff }
.aad-page .sg-graph .sg-key.is-on i::after {
    content: ""; position: absolute; left: 3.5px; top: 0;
    width: 4px; height: 8px;
    border: solid; border-width: 0 2px 2px 0;
    rotate: 45deg;
}
.aad-page .sg-graph .sg-key--clicks.is-on i::after { color: #1a73e8 }
.aad-page .sg-graph .sg-key--imp.is-on i::after { color: #5e35b1 }
.aad-page .sg-graph .sg-key:not(.is-on):hover { background: #f8f9fa }
.aad-page .sg-graph .sg-key:focus-visible { outline: 2px solid var(--a-ink); outline-offset: 2px }

.aad-page .sg-graph .sg-graph__plot { position: relative; height: clamp(220px, 32vw, 310px); touch-action: pan-y }
.aad-page .sg-graph .sg-graph__plot svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible }
.aad-page .sg-graph .sg-grid { stroke: #ebedf0; stroke-width: 1 }
.aad-page .sg-graph .sg-grid--base { stroke: #c4c7cc }
.aad-page .sg-graph .sg-tick { font-size: 11px; fill: #5f6368; font-variant-numeric: tabular-nums }
.aad-page .sg-graph .sg-ax { font-size: 11px; font-weight: 600 }
.aad-page .sg-graph .sg-ax--clk { fill: #1a73e8 }
.aad-page .sg-graph .sg-ax--imp { fill: #5e35b1 }
.aad-page .sg-graph .sg-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round }
.aad-page .sg-graph .sg-line--imp { stroke: #5e35b1 }
.aad-page .sg-graph .sg-line--clk { stroke: #1a73e8 }
.aad-page .sg-graph .sg-start { stroke: #d93025; stroke-width: 1.6; stroke-dasharray: 4 3 }
.aad-page .sg-graph .sg-start__label { font-size: 11.5px; font-weight: 700; fill: #c5221f }
.aad-page .sg-graph .sg-hair { stroke: #9aa0a6; stroke-width: 1; opacity: 0 }
.aad-page .sg-graph .sg-hair.is-on { opacity: 1 }

.aad-page .sg-graph .sg-graph__tip {
    position: absolute; top: 1.4rem; z-index: 2;
    display: grid; gap: .15rem;
    padding: .55rem .75rem; border-radius: 8px;
    background: #fff; box-shadow: 0 2px 10px rgba(10, 23, 48, .18);
    font-size: .76rem; line-height: 1.35; color: #3c4043; white-space: nowrap;
    pointer-events: none;
}
.aad-page .sg-graph .sg-graph__tip[hidden] { display: none }
.aad-page .sg-graph .sg-graph__tip b { font-weight: 600; color: #202124 }
.aad-page .sg-graph .sg-graph__tip span { display: flex; justify-content: space-between; gap: 1.2rem }
.aad-page .sg-graph .sg-graph__tip em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums }
.aad-page .sg-graph .sg-tip__clk em { color: #1a73e8 }
.aad-page .sg-graph .sg-tip__imp em { color: #5e35b1 }
.aad-page .sg-graph .sg-graph__tip small { font-size: .72rem; color: #5f6368 }
.aad-page .sg-graph .sg-graph__plot { cursor: crosshair }
.aad-page .sg-graph .sg-graph__plot:focus { outline: none }
.aad-page .sg-graph .sg-graph__plot:focus-visible { outline: 2px solid #1a73e8; outline-offset: 4px; border-radius: 4px }

/* 8 Nov: the egg on "Last 7 days", in the site's blue pen. The button is the
   line's own last words and switches the range. */
.aad-page .sg-graph .sg-graph__pen {
    margin: .7rem 0 0;
    font: 400 1.55rem/1.15 "Apex Hand", cursive; color: #1f5fd6;
    text-wrap: balance;
}
.aad-page .sg-graph .sg-graph__pen[hidden] { display: none }
.aad-page .sg-graph .sg-graph__pen button {
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: inherit;
    text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .16em;
}
.aad-page .sg-graph .sg-graph__pen button:hover { color: var(--a-ink) }
.aad-page .sg-graph .sg-graph__pen button:focus-visible { outline: 2px solid #1f5fd6; outline-offset: 3px; border-radius: 4px }

/* The draw. The finished chart is the default; the script arms it (wipes the
   lines back to the left edge) and lets them run across, linear, so the flat
   months before the red line take their real share of the time. */
.aad-page .sg-graph.is-armed .sg-graph__lines { clip-path: inset(-4px 100% -4px 0) }
.aad-page .sg-graph.is-armed.is-drawn .sg-graph__lines {
    clip-path: inset(-4px 0 -4px 0);
    transition: clip-path var(--sg-ms, 3400ms) cubic-bezier(.3, .1, .6, .95);
}

.aad-page .sg-graph .sg-graph__cap { margin: .85rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--a-soft) }

@media (max-width: 520px) {
    .aad-page .sg-graph .sg-graph__keys { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (prefers-reduced-motion: reduce) {
    .aad-page .sg-graph.is-armed .sg-graph__lines { clip-path: none; transition: none }
    .aad-page .sg-graph .sg-key { transition: none }
}