/* ================= MOCK-UPS, GOOGLE FAMILY (mk-*, round 2, 2026-10-09) =================
   DESIGN-PRINCIPLES §13: one real-world object = one base component; pages supply data and choose parts, never restyle.
   Linked right after site.css on the pages that use it. Helpers: js/mk-google.js (itbSerp, itbChart, itbCmp). Own phone rules at the end.
   1. .mk-serp   Google results page (base = the approved SEO hero), themed like the page. Parts: bar, nav, shop, org, ad, snippet, paa, local, pager, note
   2. .mk-tool   fixed-white tool window shell + .mk-table row grammar + .mk-pos pill (Search Console, Merchant Center, PageSpeed; Meta tools later via data-tool)
   3. .mk-gsc    Search Console views (performance, indexing) + .mk-chart (itbChart) + .mk-rank + .mk-cmp + .mk-donut                                     */

/* ---------- 1. SERP ---------- */
.mk-serp{--mk-gl:#1a0dab;--mk-gs:#fbbc04;--mk-gu:#4d5156;
  --mk-s-bg:var(--plane);--mk-s-card:var(--ink);--mk-s-tx:var(--text);--mk-s-mu:var(--muted);--mk-s-ln:var(--line);--mk-s-ln2:var(--line-strong);--mk-s-soft:var(--plane-2);--mk-s-ac:var(--accent);
  flex:1;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--mk-s-bg);border-radius:var(--r-lg);overflow:hidden;position:relative;min-width:0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mk-serp{--mk-gl:#8ab4f8;--mk-gu:#bdc1c6}}
:root[data-theme="dark"] .mk-serp{--mk-gl:#8ab4f8;--mk-gu:#bdc1c6}
/* .light = a fixed white results card (ads inside another window, e.g. the Social hero); same parts, same sizes */
:root:root .mk-serp.light{--mk-gl:#1a0dab;--mk-gu:#4d5156;--mk-s-bg:#fff;--mk-s-card:#fff;--mk-s-tx:#202124;--mk-s-mu:#5f6368;--mk-s-ln:#ebebeb;--mk-s-ln2:#dfe1e5;--mk-s-soft:#f1f3f4;--mk-s-ac:#1a73e8;color:#202124;background:#fff}
.mk-serp .wbar em{margin-left:auto;font-style:normal}
.mk-serp-bar{display:flex;align-items:center;gap:.875rem;padding:.75rem 1rem .5rem}
.mk-serp-logo{font:600 1.125rem/1 var(--body);letter-spacing:-.02em}
.mk-serp-logo i{font-style:normal}.mk-serp-logo i:nth-child(1),.mk-serp-logo i:nth-child(4){color:#4285f4}.mk-serp-logo i:nth-child(2),.mk-serp-logo i:nth-child(6){color:#ea4335}.mk-serp-logo i:nth-child(3){color:#fbbc04}.mk-serp-logo i:nth-child(5){color:#34a853}
.mk-serp-q{flex:1;display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border:1px solid var(--mk-s-ln2);border-radius:var(--r-lg);background:var(--mk-s-card);font-size:.875rem;min-width:0}
.mk-serp-q span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-serp-q svg{width:.9375rem;height:.9375rem;color:var(--mk-s-mu);flex:none;margin-left:auto}
.mk-serp-nav{display:flex;gap:1.125rem;padding:0 1rem .5rem 4.875rem;border-bottom:1px solid var(--mk-s-ln);font-size:.75rem;color:var(--mk-s-mu)}
.mk-serp-nav b{font-weight:500;color:var(--mk-s-tx);box-shadow:inset 0 -2px var(--mk-gl);padding-bottom:.375rem}
.mk-serp-body{flex:1;display:grid;align-content:space-evenly;gap:.625rem;padding:.625rem 1.25rem .75rem 1.25rem;position:relative}
.mk-serp-part{position:relative;border-radius:var(--r-sm)}
.mk-serp-page{display:flex;flex-direction:column}
/* the view tabs of the hero are the shared .wtabs; this keeps its approved look (display-font title, mono subtitle, 1rem padding) */
.mk-serp.wtabs{--wt-pad:0}
.mk-serp.wtabs>.wtabs-body{display:grid}
.mk-serp.wtabs>.wtabs-body>.mk-serp-page{min-height:0}
.mk-serp.wtabs .wtabs-bar [role="tab"]{padding:.75rem 1rem;gap:.125rem;min-height:0;align-content:stretch;border-bottom:2px solid transparent}
.mk-serp.wtabs .wtabs-bar [role="tab"][aria-selected="true"]{box-shadow:none;border-bottom-color:var(--accent)}
.mk-serp.wtabs .wtabs-bar b{font:500 .9375rem var(--display);white-space:normal;overflow:visible}
.mk-serp.wtabs .wtabs-bar small{font:400 .6875rem var(--mono);white-space:normal;overflow:visible}
/* shopping carousel (Products, or Sponsored · Shopping) */
.mk-serp-shop h5{margin:0 0 .5rem;font:500 .875rem var(--body)}
.mk-serp-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.mk-serp-card{border:1px solid var(--mk-s-ln);border-radius:var(--r);background:var(--mk-s-card);overflow:hidden;font-size:.6875rem;line-height:1.35}
.mk-serp-card .im{aspect-ratio:1/0.62;display:block;background:#fff;overflow:hidden}
.mk-serp-card .im img{width:100%;height:100%;object-fit:contain;display:block;padding:.25rem;box-sizing:border-box}
.mk-serp-card div{padding:.375rem .5rem .5rem;display:grid;gap:.0625rem}
.mk-serp-card b{font-weight:500;color:var(--mk-s-tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-serp-card strong{font-weight:600;font-size:.75rem}
.mk-serp-card small{color:var(--mk-s-mu)}
.mk-serp-card .st{color:var(--mk-gs);letter-spacing:.04em}
.mk-serp-card.me{border-color:var(--mk-gl)}
/* organic result + sponsored text ad (same anatomy; the ad adds a label) */
.mk-serp-site{display:flex;align-items:center;gap:.5rem;font-size:.75rem;line-height:1.3}
.mk-serp-site .fv{width:1.625rem;height:1.625rem;flex:none;border-radius:50%;background:var(--mk-s-soft);border:1px solid var(--mk-s-ln);display:grid;place-items:center;font:700 .625rem var(--body);color:var(--mk-s-ac)}
.mk-serp-site b{display:block;font-weight:500;color:var(--mk-s-tx)}
.mk-serp-site span{color:var(--mk-gu)}
.mk-serp-t{display:block;margin-top:.25rem;font:400 1.0625rem/1.3 var(--body);color:var(--mk-gl)}
.mk-serp-d{font-size:.8125rem;line-height:1.5;color:var(--mk-gu);margin-top:.25rem;min-height:3em}
.mk-serp-rich{display:flex;flex-wrap:wrap;gap:.25rem .75rem;font-size:.75rem;color:var(--mk-gu);margin-top:.375rem;align-items:center}
.mk-serp-rich .st{color:var(--mk-gs);letter-spacing:.06em;font-size:.8125rem}
.mk-serp-rich .ok{color:#188038}
.mk-serp-links{display:grid;grid-template-columns:1fr 1fr;gap:.125rem 1.5rem;margin-top:.5rem;font-size:.8125rem}
.mk-serp-links span{color:var(--mk-gl);padding:.25rem 0;border-bottom:1px solid var(--mk-s-ln)}
.mk-serp-sp{display:block;font:700 .75rem var(--body);color:var(--mk-s-tx);margin-bottom:.375rem}
.mk-serp-org.thumb{display:grid;grid-template-columns:minmax(0,1fr) 4.5rem;gap:.75rem;align-items:start}
.mk-serp-org.thumb .mk-serp-d{min-height:0}
.mk-serp-thumb{aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:#f3f3f3}
.mk-serp-thumb img{display:block;width:100%;height:100%;object-fit:cover}
/* featured answer + people also ask */
.mk-serp-snippet{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem;gap:1rem;padding:.875rem;border:1px solid var(--mk-s-ln);border-radius:var(--r);background:var(--mk-s-card)}
.mk-serp-snippet img{width:100%;height:100%;max-height:8.5rem;object-fit:cover;border-radius:var(--r-sm)}
.mk-serp-snippet ol{margin:.5rem 0 0;padding-left:1.25rem;display:grid;gap:.25rem;font-size:.8125rem;color:var(--mk-s-tx)}
.mk-serp-snippet .mk-serp-t{margin-top:.5rem}
.mk-serp-paa h5{margin:0 0 .25rem;font:600 .875rem var(--body)}
.mk-serp-paa div{display:flex;justify-content:space-between;padding:.5rem 0;border-top:1px solid var(--mk-s-ln);font-size:.8125rem}
.mk-serp-paa i{font-style:normal;color:var(--mk-s-mu)}
/* local pack: map + three listings (Maps tab selected) */
.mk-serp-map{position:relative;height:8.5rem;overflow:hidden;border-radius:var(--r-sm);
  background:linear-gradient(118deg,transparent 46%,var(--mk-s-card) 46.5%,var(--mk-s-card) 49%,transparent 49.5%),
  linear-gradient(32deg,transparent 60%,var(--mk-s-card) 60.5%,var(--mk-s-card) 62.5%,transparent 63%),
  linear-gradient(90deg,transparent 30%,color-mix(in srgb,#fbbc04 38%,var(--mk-s-soft)) 30.3%,color-mix(in srgb,#fbbc04 38%,var(--mk-s-soft)) 32%,transparent 32.3%),var(--mk-s-soft)}
.mk-serp-map .park{position:absolute;left:62%;top:8%;width:26%;height:40%;background:color-mix(in srgb,#34a853 26%,var(--mk-s-soft));border-radius:40%}
.mk-serp-map .pin{position:absolute;width:1.5rem;height:1.5rem;margin:-1.5rem 0 0 -.75rem;background:#ea4335;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.mk-serp-map .pin::after{content:"";position:absolute;inset:32%;border-radius:50%;background:#fff}
.mk-serp-map .pin.me{width:2.1rem;height:2.1rem;margin:-2.1rem 0 0 -1.05rem;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.mk-serp-list>div{display:flex;gap:.75rem;align-items:center;justify-content:space-between;padding:.625rem .25rem;border-top:1px solid var(--mk-s-ln);font-size:.8125rem}
.mk-serp-list>div.me{background:color-mix(in srgb,var(--mk-gl) 8%,transparent)}
.mk-serp-list span{display:grid;gap:.125rem;min-width:0}
.mk-serp-list b{font-weight:500;color:var(--mk-s-tx)}
.mk-serp-list small{color:var(--mk-gu);font-size:.75rem}
.mk-serp-list small em{font-style:normal;color:var(--mk-s-tx)}.mk-serp-list small i{font-style:normal;color:var(--mk-gs);letter-spacing:.05em}
.mk-serp-list u{text-decoration:none;color:#188038}.mk-serp-list u.x{color:#d93025}
.mk-serp-list .bt{display:flex;gap:.375rem}.mk-serp-list .bt i{font-style:normal;font-size:.75rem;color:var(--mk-gl);border:1px solid var(--mk-s-ln2);border-radius:var(--r-lg);padding:.25rem .625rem;white-space:nowrap}
/* "not on page 1" state of the hero: pager over the sitelinks box */
.mk-serp-pager{position:absolute;inset:0;display:grid;align-content:center;gap:.5rem;visibility:hidden;font-size:.75rem;color:var(--mk-gu)}
.mk-serp-pager .pg{display:flex;gap:.875rem;align-items:center;font-size:.8125rem;color:var(--mk-gl)}
.mk-serp-pager .pg .on{color:var(--mk-s-tx);font-weight:600}
.mk-serp-pager .pg .you{outline:1.5px solid #d9534f;outline-offset:.2rem;border-radius:2px;color:#d9534f;font-weight:600}
.mk-serp-pager b{color:#d9534f;font-weight:600}
.mk-serp[data-view="0"] .mk-serp-pager{visibility:visible}
.mk-serp[data-view="0"] .mk-serp-rich,.mk-serp[data-view="0"] .mk-serp-links,.mk-serp[data-view="1"] .mk-serp-links{visibility:hidden}
.mk-serp[data-view="0"] .mk-serp-card.me,.mk-serp[data-view="1"] .mk-serp-card.me{border-color:var(--mk-s-ln)}
/* narrow = the 15rem ad column of the Social hero: no wordmark, no nav, sponsored first, shopping row scrolls sideways */
.mk-serp.narrow{display:grid;gap:.5rem;padding:.75rem;font-size:.75rem;line-height:1.35;border-radius:var(--r);flex:none}
.mk-serp.narrow .mk-serp-bar{padding:0;gap:0}
.mk-serp.narrow .mk-serp-body,.mk-serp.narrow .mk-serp-ad{display:contents}
.mk-serp.narrow .mk-serp-logo{display:none}
.mk-serp.narrow .mk-serp-q{border-color:#dfe1e5;border-radius:var(--r-lg);padding:.375rem .75rem;color:#444;font-size:inherit;background:#fff}
.mk-serp.narrow .mk-serp-q svg{display:none}
.mk-serp.narrow .mk-serp-sp{font:600 .6875rem/1.35 var(--body);margin:0}
.mk-serp.narrow .mk-serp-site{gap:.375rem;font-size:inherit;color:#202124}
.mk-serp.narrow .mk-serp-site .fv{width:1.25rem;height:1.25rem;border:0;background:#1f2a44;color:#fff;font:600 .5625rem var(--body)}
.mk-serp.narrow .mk-serp-site b{font-weight:inherit;color:inherit}
.mk-serp.narrow .mk-serp-site>span{color:#202124}.mk-serp.narrow .mk-serp-site>span>span{font-size:.6875rem;color:#4d5156}
.mk-serp.narrow .mk-serp-t{margin:0;font:400 .9375rem/1.25 var(--body)}
.mk-serp.narrow .mk-serp-d{margin:0;min-height:0;font-size:inherit;line-height:1.35;color:#4d5156}
.mk-serp.narrow .mk-serp-links{display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin:0;font-size:inherit}
.mk-serp.narrow .mk-serp-links span{padding:0;border:0}
.mk-serp.narrow .mk-serp-shop h5{display:none}
.mk-serp.narrow .mk-serp-cards{grid-template-columns:repeat(4,44%);overflow-x:auto;scrollbar-width:none;gap:.375rem;border-top:1px solid #ebebeb;padding-top:.5rem}
.mk-serp.narrow .mk-serp-card{border-color:#ebebeb;border-radius:var(--r-sm);font-size:.625rem;line-height:1.25}
.mk-serp.narrow .mk-serp-card .im{aspect-ratio:1;background:#fff}
.mk-serp.narrow .mk-serp-card .im img{padding:0;object-fit:cover}
.mk-serp.narrow .mk-serp-card div{display:flex;flex-direction:column;gap:0;padding:.25rem .375rem}
.mk-serp.narrow .mk-serp-card b{white-space:normal;overflow:visible;font-weight:400;color:#202124}
.mk-serp.narrow .mk-serp-card strong{order:-1;font-size:inherit}
.mk-serp.narrow .mk-serp-card small{display:none}
.mk-serp.narrow .mk-serp-card.me{border-color:#1a73e8}
/* our annotation (position, "not on page 1"): drawn outside the Google chrome so it never reads as a Google element */
.mk-serp-cap{display:block;margin-top:auto;padding:.6rem 1.1rem;border-top:1px solid var(--mk-s-ln);background:var(--mk-s-soft);color:var(--mk-s-mu);font-size:.6875rem;line-height:1.35}
.mk-note{display:inline-flex;align-items:center;gap:.375rem;justify-self:start;padding:.1875rem .625rem;border-radius:999px;background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--text);font:600 .75rem var(--body)}
.mk-note::before{content:"";width:.4375rem;height:.4375rem;border-radius:50%;background:var(--ok)}

/* ---------- 2. TOOL WINDOW: fixed white like the real tool (window frame + title bar follow the page theme, the tool itself never does) ---------- */
.mk-tool{--mk-t-bg:#fff;--mk-t-ink:#202124;--mk-t-mut:#5f6368;--mk-t-line:#e8eaed;--mk-t-sep:#f1f3f4;--mk-t-head:#f8f9fa;--mk-t-ok:#188038;--mk-t-wip:#b06000;--mk-t-bad:#d93025;--mk-t-acc:#1a73e8;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink);overflow:hidden;min-width:0;display:flex;flex-direction:column}
.mk-tool>.wbar em{margin-left:auto;font-style:normal}
.mk-tool-bd{flex:1;display:flex;flex-direction:column;background:var(--mk-t-bg);color:var(--mk-t-ink);font:400 .8125rem/1.35 var(--body);text-align:left}
.mk-tool-bd.pad{padding:1rem;gap:1rem}
.mk-tool.lg .mk-tool-bd{font-size:.875rem}
.mk-tool-cap{display:block;margin-top:auto;padding:.6em 1.1em;border-top:1px solid var(--mk-t-line);background:var(--mk-t-head);color:var(--mk-t-mut);font-size:.85em}
.mk-tool .ok{color:var(--mk-t-ok)}.mk-tool .wip{color:var(--mk-t-wip)}.mk-tool .bad{color:var(--mk-t-bad)}
.mk-tool-hd{display:flex;align-items:center;gap:.75em;padding:.8em 1.1em;border-bottom:1px solid var(--mk-t-line)}
.mk-tool-hd b{font-size:1.1em;font-weight:500}.mk-tool-hd>span{margin-left:auto;color:var(--mk-t-mut);font-size:.9em}
.mk-tool-sum{display:flex;gap:.5em;flex-wrap:wrap}.mk-tool-sum i{font-style:normal;font-size:.85em;padding:.15em .55em;border-radius:1em;background:var(--mk-t-sep)}
/* row grammar: one grid per table (--cols), one grid per row; .r = right-aligned figure, .mk-th = header row */
.mk-table{display:grid}
.mk-tr{display:grid;grid-template-columns:var(--cols,1fr auto);column-gap:.75em;align-items:center;padding:.45em 1.1em;border-top:1px solid var(--mk-t-sep)}
.mk-tr>span{min-width:0;display:grid;align-content:center}
.mk-tr b{font-weight:500}.mk-tr small{color:var(--mk-t-mut);font-size:.85em}
.mk-tr .r{text-align:right;font-variant-numeric:tabular-nums;justify-items:end}
.mk-tr em{font-style:normal;font-size:.85em;font-weight:500;white-space:nowrap}
.mk-tr img{width:2.6em;height:2.6em;object-fit:cover;border-radius:.35em;background:var(--mk-t-sep)}
.mk-th{border-top:0;color:var(--mk-t-mut);font-size:.85em;font-weight:500}
.mk-tool .mk-table.bt{border-top:1px solid var(--mk-t-line)}
/* a tool window inside a service tab fills the panel: the window stretches and the table marked .grow takes the spare height as taller rows (never blank space) */
.mk-tool-bd>.grow{flex:1}
/* status tabs under the tool header (Merchant Center, Ads Manager): the open one underlined */
.mk-subnav{display:flex;gap:1.4em;padding:0 1.1em;border-bottom:1px solid var(--mk-t-line);color:var(--mk-t-mut);overflow:hidden}
.mk-subnav>*{padding:.6em 0;white-space:nowrap;font-weight:400}.mk-subnav b{color:var(--mk-t-acc);font-weight:500;box-shadow:inset 0 -2px var(--mk-t-acc)}
.mk-subnav em{font-style:normal;margin-left:.3em;padding:.05em .45em;border-radius:1em;background:var(--mk-t-sep);font-size:.85em}
/* Search Console experience card: Core Web Vitals split bar */
.mk-cwvb{display:grid;gap:.4em;padding:.7em 1.1em .8em;border-top:1px solid var(--mk-t-line);font-size:.85em;color:var(--mk-t-mut)}
.mk-cwvb-bar{display:flex;height:.7em;border-radius:.2em;overflow:hidden;gap:2px}.mk-cwvb-bar i{min-width:.35em}
.mk-cwvb-bar .g{background:var(--mk-t-ok)}.mk-cwvb-bar .n{background:#f9ab00}.mk-cwvb-bar .p{background:var(--mk-t-bad)}
/* position pill: one look everywhere */
.mk-pos{display:inline-block;font-style:normal;min-width:2.25em;text-align:center;padding:.0625em .375em;border-radius:var(--r-xs);background:#e6f4ea;color:#137333;font-weight:500;font-variant-numeric:tabular-nums}
/* tool palettes (tokens only; the shell never changes) */
.mk-tool[data-tool="meta"]{--mk-t-line:#e4e6eb;--mk-t-sep:#f0f2f5;--mk-t-head:#f7f8fa;--mk-t-mut:#65676b;--mk-t-ink:#1c1e21;--mk-t-acc:#0866ff}

/* ---------- 3. SEARCH CONSOLE VIEWS ---------- */
.mk-gsc-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.mk-gsc-tiles>div{background:var(--t,#1a73e8);color:#fff;padding:.6em .75em;display:grid;gap:.15em}
.mk-gsc-tiles span{font-size:.75em}.mk-gsc-tiles b{font-size:1.35em;font-weight:500}
.mk-gsc-big{padding:1em 1.1em .5em;display:grid;gap:.125em}
.mk-gsc-big strong{font:600 clamp(1.75rem,2.6vw,2.375rem)/1 var(--display);letter-spacing:-.02em}
.mk-gsc-big span{font-size:.9em;color:var(--mk-t-mut)}
.mk-gsc-kpi{display:grid;grid-template-columns:1fr 1fr}
.mk-gsc-kpi>div{display:grid;gap:.1em;padding:.7em 1.1em;color:#fff}.mk-gsc-kpi .no{background:#5f6368}.mk-gsc-kpi .yes{background:#188038}
.mk-gsc-kpi span{font-size:.85em}.mk-gsc-kpi b{font-size:1.8em;font-weight:500;line-height:1.1}.mk-gsc-kpi small{font-size:.8em;opacity:.85}
.mk-gsc-bars{display:flex;align-items:flex-end;gap:2.5%;height:5.5em;padding:.9em 1.1em .3em}
.mk-gsc-bars i{flex:1;height:100%;display:flex;flex-direction:column-reverse}.mk-gsc-bars b{background:#188038}.mk-gsc-bars s{background:#bdc1c6}
.mk-gsc-axis{display:flex;justify-content:space-between;padding:0 1.1em .5em;color:var(--mk-t-mut);font-size:.8em}
.mk-gsc-chart{padding:.75em 1.1em .5em;border-bottom:1px solid var(--mk-t-line)}
.mk-gsc-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.mk-gsc-split>*+*{border-left:1px solid var(--mk-t-line)}
.mk-gsc-note{margin:0;padding:.6em 1.1em;color:var(--mk-t-mut);font-size:.85em}
/* chart (itbChart): svg for lines only, everything with text or a round shape is HTML positioned in % so it stays crisp at any width */
.mk-chart{--mk-c:var(--mk-t-acc,#1a73e8);position:relative;display:grid;grid-template-columns:2.75em minmax(0,1fr);padding:1.1em .75em 0 0;font:400 .6875rem/1 var(--mono);color:var(--mk-t-mut)}
.mk-chart-y{position:relative}
.mk-chart-y span{position:absolute;right:.5em;translate:0 50%;white-space:nowrap}
.mk-chart-plot{position:relative;height:var(--mk-chart-h,12rem);touch-action:pan-y;cursor:crosshair}
.mk-chart-plot svg{display:block;width:100%;height:100%;overflow:visible}
.mk-chart-plot .g{stroke:var(--mk-t-line);stroke-width:1;vector-effect:non-scaling-stroke}
.mk-chart-plot .a{fill:color-mix(in srgb,var(--mk-c) 14%,transparent)}
.mk-chart-plot .l{fill:none;stroke:var(--mk-c);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mk-chart-plot .l.d{stroke-dasharray:4 4;stroke-linecap:butt}
.mk-chart-dot{position:absolute;width:.5625rem;height:.5625rem;margin:-.28125rem 0 0 -.28125rem;border-radius:50%;background:var(--mk-c);border:2px solid #fff;box-sizing:content-box;translate:-2px -2px;pointer-events:none}
.mk-chart-dot.s{background:#202124}
.mk-chart-dot.hollow{background:#fff;border-color:var(--mk-c)}
.mk-chart-plot.static{cursor:default}
.mk-chart-lb.e{translate:-100% -1.5em}.mk-chart-lb.s{translate:0 -1.5em}
.mk-chart-lb{position:absolute;translate:-50% -1.5em;font:500 .6875rem/1 var(--mono);color:#202124;white-space:nowrap;pointer-events:none}
.mk-chart-tip{position:absolute;top:0;translate:-50% -1.5em;font:500 .6875rem/1 var(--mono);background:#202124;color:#fff;padding:.3125rem .5rem;border-radius:var(--r-xs);white-space:nowrap;pointer-events:none;z-index:1}
.mk-chart-x{grid-column:2;position:relative;height:2.25em;margin-top:.75em}
.mk-chart-x span{position:absolute;top:0;translate:-50% 0;text-align:center;white-space:nowrap;line-height:1.25}
.mk-chart-x:empty{display:none}
.mk-chart-x span.s{translate:0 0;text-align:left}.mk-chart-x span.e{translate:-100% 0;text-align:right}
.mk-chart-x small{display:block;font-size:inherit;opacity:.7}
/* ranking table: query + one position pill */
.mk-rank{--cols:minmax(0,1fr) auto;border-top:0}
.mk-rank .mk-tr{padding-block:.5em}
.mk-rank .mk-tr>span:first-child{display:block}
.mk-rank-note{margin:0;padding:.6em 1.1em;border-top:1px solid var(--mk-t-sep);color:var(--mk-t-mut);font-size:.85em}
/* comparison bars: Shopify, Meta and Analytics figures (never drawn as Search Console); bars grow once when seen (itbCmp) */
.mk-cmp{--mk-c:var(--mk-t-acc,#1a73e8);--mk-cmp-l:6.5rem;display:grid;gap:1.25rem;padding:1.1em}
.mk-cmp-g{display:grid;gap:.5rem}
.mk-cmp-g>span{font-size:.9em;color:var(--mk-t-mut)}
.mk-cmp-b{display:grid;grid-template-columns:var(--mk-cmp-l) minmax(0,1fr) auto;gap:.75rem;align-items:center;font-size:1em}
.mk-cmp-b i{height:.625rem;border-radius:2px;background:#dadce0;width:var(--w);transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mk-cmp-b.hi i{background:var(--mk-c)}
.mk-cmp.in .mk-cmp-b i{transform:none}
.mk-cmp-b em{font:500 .9em var(--mono);font-style:normal}
.mk-cmp-b>span{color:var(--mk-t-mut)}.mk-cmp-b.hi>span,.mk-cmp-b.hi em{color:var(--mk-t-ink)}
.mk-cmp-note{margin:0;font-size:.85em;color:var(--mk-t-mut)}
.mk-cmp.tall .mk-cmp-b i{height:.875rem}
/* donut: one ring, three shares (single use so far, SEO results) */
.mk-donut{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;align-items:center}
.mk-donut svg{width:100%;rotate:-90deg}
.mk-donut-leg{display:grid;gap:.5rem}
.mk-donut-leg div{display:grid;grid-template-columns:.75rem 1fr auto;gap:.5rem;align-items:center}
.mk-donut-leg i{width:.75rem;height:.75rem;border-radius:var(--r-xs)}
.mk-donut-leg b{font:500 .9em var(--mono)}
.mk-big{display:block;font:600 clamp(1.75rem,3vw,2.5rem)/1 var(--display);color:var(--mk-t-acc)}
.mk-big small{font:400 .8125rem var(--body);color:var(--mk-t-mut);margin-left:.5rem}
.mk-tool-bd.pad .mk-cmp,.mk-tool-bd.pad .mk-chart{padding-inline:0}
@media (prefers-reduced-motion:reduce){.mk-cmp-b i{transition:none}}
@media (max-width:1100px){.mk-gsc-split{grid-template-columns:1fr}.mk-gsc-split>*+*{border-left:0;border-top:1px solid var(--mk-t-line)}}

/* ---------- phone (own rules; keep last in this file) ---------- */
@media (max-width:760px){
 .mk-tool:not(.lg) .mk-tool-bd{font-size:.6875rem}
 .mk-tool>.wbar em{display:none}
 .mk-serp.wtabs .wtabs-bar small{display:none}
 .mk-serp.wtabs.fit .wtabs-bar [role="tab"]{padding-inline:1rem}
 .mk-serp-nav,.mk-serp-body{padding-left:1rem}
 .mk-serp-cards{grid-template-columns:repeat(4,34%);overflow-x:auto;scrollbar-width:none}.mk-serp-card .im{aspect-ratio:1/0.75}.mk-serp .wbar em{display:none}
 .mk-serp-links{grid-template-columns:1fr}.mk-serp-logo{display:none}
 .mk-serp.narrow .mk-serp-cards{grid-template-columns:repeat(4,44%)}.mk-serp.narrow .mk-serp-card .im{aspect-ratio:1}
 .mk-serp-snippet{grid-template-columns:1fr}.mk-serp-snippet img{display:none}.mk-serp-paa{display:none}
 .mk-serp-list .bt{display:none}
 .mk-chart{--mk-chart-h:9.5rem}.mk-chart-x .opt{display:none}
 .mk-cmp{--mk-cmp-l:5.5rem}
 .mk-gsc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}