/* ================= MK-ADS (round 2, Meta / ads family, 2026-10-09) =================
   One real-world object = one base (DESIGN-PRINCIPLES §13). Loaded on the line after site.css; own phone rules at the end.
   Moves the Social hero window (.sm-ads) and its Meta / TikTok / Snapchat ads here unchanged, adds the Instagram surface, the compact thumbnail,
   and the monthly report page.
   · .mk-ads     window: wbar + shared .wtabs tab row + body (ad stack + info list). Add .wtabs .fit; tabs share one panel (itbTabs "solo")
   · .mk-ads-body  grid: .mk-ads-fr (ads stacked in ONE cell, sized to the tallest) | .mk-ads-info (one block per platform). Both use data-k
   · .mk-ad[data-p=fb|ig|tt|sc]   ad card. Parts: -hd (avatar, name, Sponsored) -copy -media -cta -rx (fb) -top/-side (tt) -bar (sc) -dot (compact)
   · .mk-ad.compact (.sq)         thumbnail: media + CTA label only; the platform dot sits on the media. Used where a creative is pictured in a tool
   · .mk-ad.float                 floating card on a page (Instagram ad in a case study): one soft shadow
   · .mk-report                   a monthly report page (paper, same in both themes): header, KPI strip, chart, table, what we shipped
   Platform signal colours are allowed on Social ads only. Generic ads say "Your Store", never a client. */
.mk-ad{--mk-ad-c:#0866ff;font-size:.75rem;color:#111;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line)}
.mk-ad[data-p="ig"]{--mk-ad-c:#e1306c}
.mk-ad[data-p="tt"]{--mk-ad-c:#fe2c55}
.mk-ad[data-p="sc"]{--mk-ad-c:#e6c800}
.mk-ad-av{width:1.75rem;height:1.75rem;border-radius:50%;background:#1f2a44;color:#fff;display:grid;place-items:center;font:600 .75rem var(--body);flex:none}
.mk-ad-media{overflow:hidden;background:#eee}
.mk-ad-media img{width:100%;height:100%;object-fit:cover;display:block}

/* Meta (Facebook feed): header, text, 1:1 photo, link bar, reactions */
.mk-ad[data-p="fb"] .mk-ad-hd{display:flex;gap:.5rem;align-items:center;padding:.5rem .625rem}
.mk-ad[data-p="fb"] .mk-ad-hd b{display:block;font-weight:600}
.mk-ad[data-p="fb"] .mk-ad-hd small{color:#65676b;font-size:.6875rem}
.mk-ad[data-p="fb"] .mk-ad-copy{padding:0 .625rem .5rem;margin:0;line-height:1.35}
.mk-ad[data-p="fb"] .mk-ad-media{aspect-ratio:1}
.mk-ad[data-p="fb"] .mk-ad-cta{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.5rem .625rem;background:#f0f2f5}
.mk-ad[data-p="fb"] .mk-ad-cta>span:first-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mk-ad[data-p="fb"] .mk-ad-cta small{display:block;color:#65676b;font-size:.625rem;text-transform:uppercase}
.mk-ad[data-p="fb"] .mk-ad-cta span{background:#e4e6eb;padding:.375rem .625rem;border-radius:var(--r-sm);font-weight:600;white-space:nowrap}
.mk-ad-rx{display:flex;justify-content:space-around;padding:.4375rem;color:#65676b;border-top:1px solid #e4e6eb;font-weight:500}

/* TikTok (For You) and Snapchat (Story): 9:16, full-bleed photo, overlays */
.mk-ad[data-p="tt"],.mk-ad[data-p="sc"]{aspect-ratio:9/16;max-height:26rem;position:relative;color:#fff;border:0;width:auto!important;justify-self:center}
.mk-ad[data-p="tt"]{background:#121212}
.mk-ad[data-p="tt"] .mk-ad-media,.mk-ad[data-p="sc"] .mk-ad-media{position:absolute;inset:0}
.mk-ad[data-p="tt"] .mk-ad-media::after,.mk-ad[data-p="sc"] .mk-ad-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 22%,transparent 60%,rgba(0,0,0,.6))}
.mk-ad-top{position:absolute;top:.75rem;left:0;right:0;text-align:center;font-weight:600;font-size:.75rem}
.mk-ad-top span{opacity:.6;margin-right:.75rem}
.mk-ad-side{position:absolute;right:.5rem;bottom:5.5rem;display:grid;gap:.75rem;justify-items:center;font-size:.625rem}
.mk-ad-side i{width:1.75rem;height:1.75rem;border-radius:50%;background:rgba(255,255,255,.18)}
.mk-ad-side .mk-ad-av{border:2px solid #fff}
.mk-ad[data-p="tt"] .mk-ad-copy{position:absolute;left:.75rem;right:3rem;bottom:3.25rem;display:grid;gap:.25rem;line-height:1.3}
.mk-ad[data-p="tt"] .mk-ad-copy small{background:rgba(255,255,255,.2);padding:.0625rem .375rem;border-radius:var(--r-xs);justify-self:start;font-size:.625rem}
.mk-ad[data-p="tt"] .mk-ad-cta{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;background:#fe2c55;text-align:center;padding:.5rem;border-radius:var(--r-xs);font-weight:600}
.mk-ad[data-p="sc"] .mk-ad-hd{position:absolute;top:.625rem;left:.625rem;right:.625rem;display:flex;gap:.5rem;align-items:center}
.mk-ad[data-p="sc"] .mk-ad-hd b{display:block;font-weight:600}
.mk-ad[data-p="sc"] .mk-ad-hd small{opacity:.75;font-size:.625rem}
.mk-ad-bar{position:absolute;top:.3rem;left:.625rem;right:.625rem;height:2px;background:rgba(255,255,255,.35)}
.mk-ad-bar i{display:block;width:40%;height:100%;background:#fff}
.mk-ad[data-p="sc"] .mk-ad-cta{position:absolute;left:.75rem;right:.75rem;bottom:1rem;background:#fffc00;color:#111;text-align:center;padding:.5rem;border-radius:var(--r-sm);font-weight:600}
.mk-ad[data-p="sc"] .mk-ad-cta small{display:block;font-weight:400;font-size:.625rem}

/* Instagram feed: story-ring avatar, 4:5 photo, CTA bar, caption under it */
.mk-ad[data-p="ig"]{width:min(100%,18rem);font-size:.8125rem;line-height:1.4;color:#17191c}
.mk-ad[data-p="ig"] .mk-ad-hd{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem}
.mk-ad[data-p="ig"] .mk-ad-av{background:#17191c;font-size:.6875rem;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--mk-ad-c)}
.mk-ad[data-p="ig"] .mk-ad-hd b{font:600 .75rem var(--body)}
.mk-ad[data-p="ig"] .mk-ad-hd small{display:block;color:#5f656c;font-size:.75rem}
.mk-ad[data-p="ig"] .mk-ad-media{aspect-ratio:4/5;background:#f3f3f3}
.mk-ad[data-p="ig"] .mk-ad-cta{display:flex;justify-content:space-between;align-items:center;padding:.5rem .625rem;background:#0866ff;color:#fff;font:600 .75rem var(--body)}
.mk-ad[data-p="ig"] .mk-ad-copy{padding:.5rem .625rem .75rem;margin:0;font-size:.75rem}
.mk-ad.float{border:0;border-radius:10px;box-shadow:var(--mk-sh);justify-self:center}

/* Compact: the thumbnail of a creative inside a tool (creative test, content planner). Media + CTA label; the dot names the platform */
.mk-ad.compact{position:relative;border:0;border-radius:0;background:#f0f2f5;width:auto}
.mk-ad.compact .mk-ad-media{aspect-ratio:4/5;background:#f0f2f5}
.mk-ad.compact.sq{border-radius:.25em}
.mk-ad.compact.sq .mk-ad-media{aspect-ratio:1}
.mk-ad.compact .mk-ad-cta{position:absolute;left:.5em;right:.5em;bottom:.5em;display:block;background:rgba(0,0,0,.65);color:#fff;font-weight:600;font-size:.92em;padding:.3em .45em;border-radius:.25em}
.mk-ad-dot{position:absolute;top:.35em;left:.35em;width:.7em;height:.7em;border-radius:50%;background:var(--mk-ad-c);box-shadow:0 0 0 2px #fff}

/* WINDOW: wbar + shared tab row (.wtabs) + body. The tab row is the shared pattern; the body keeps the old hero padding */
.mk-ads{flex:1;--wt-pad:0}
.mk-ads .wbar em{margin-left:auto;font-style:normal}
/* tab subtitles may wrap to two lines (as the hero tab row did), never cut with an ellipsis */
.mk-ads .wtabs-bar small{white-space:normal;overflow:visible}
.mk-ads-body{flex:1;display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(1rem,2.4vw,2rem);padding:clamp(1rem,2.4vw,1.75rem);align-items:center}
.mk-ads-fr{display:grid;justify-items:center}
.mk-ads-fr>[data-k]{grid-area:1/1;visibility:hidden;width:100%}
.mk-ads-fr>[data-k].on{visibility:visible}
.mk-ads-info{display:grid;gap:.875rem;align-content:center}
.mk-ads-info>div{grid-area:1/1;visibility:hidden;display:grid;gap:.75rem}
.mk-ads-info>div.on{visibility:visible}
.mk-ads-info h3{font:500 1.375rem/1.2 var(--display)}
.mk-ads-info dl{margin:0;display:grid;border-top:1px solid var(--line)}
.mk-ads-info dl div{display:grid;grid-template-columns:7rem 1fr;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.8125rem}
.mk-ads-info dt{font:600 .6875rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-top:.125rem}
.mk-ads-info dd{margin:0}

/* A TikTok ad on a phone (the services tab): the ad fills the screen */
.mk-phone .mk-ad[data-p="tt"]{width:100%!important;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;font-size:.6875rem}
.mk-phone .mk-ad[data-p="tt"] .mk-ad-side{bottom:5rem}

/* TOOLS (Meta): Ads Manager, Events Manager, Creative test, Content planner, TikTok phone view. Shell = .mk-tool[data-tool="meta"] and
   rows = .mk-table (css/mk-google.css); only the Meta palette and the small parts below live here */
.mk-tool[data-tool="meta"]{--mk-t-ok:#1f7a3a;--mk-t-bd:#ced0d4}
.mk-tool[data-tool="meta"] .mk-tool-hd{flex-wrap:wrap}
.mk-tool-hd>span b{font-size:inherit;font-weight:600}
.mk-btn{background:var(--mk-t-acc);color:#fff;font-weight:600;font-size:.85em;padding:.3em .8em;border-radius:.35em}
.mk-tool-hd>.mk-btn{margin-left:0;color:#fff}
.mk-chip{color:var(--mk-t-ink);border:1px solid var(--mk-t-bd);border-radius:.35em;padding:.2em .6em;font-size:.85em}
.mk-tool-hd>.mk-chip{color:var(--mk-t-ink);font-size:.85em}
.mk-nm{color:var(--mk-t-acc)}
/* toggle and delivery dot (Ads Manager) */
.mk-tg{display:block;width:1.9em;height:1.1em;border-radius:1em;background:var(--mk-t-bd);position:relative}
.mk-tg::after{content:"";position:absolute;top:.15em;left:.15em;width:.8em;height:.8em;border-radius:50%;background:#fff}
.mk-tg.on{background:var(--mk-t-acc)}.mk-tg.on::after{left:auto;right:.15em}
.mk-tr>.mk-dl{display:flex;align-items:center;gap:.4em;color:var(--mk-t-mut)}
.mk-dl::before,.mk-dot{content:"";width:.5em;height:.5em;border-radius:50%;background:#bcc0c4;flex:none}
.mk-dl.on{color:var(--mk-t-ink)}.mk-dl.on::before{background:var(--mk-t-ok)}
.mk-tr>.mk-ev{display:flex;align-items:center;gap:.5em}.mk-dot{display:block;background:var(--mk-t-ok)}
.mk-dl.wip{color:var(--mk-t-ink)}.mk-dl.wip::before{background:#f9ab00}
/* totals row (Ads Manager "Results from n campaigns") */
.mk-tr.mk-tot{background:var(--mk-t-head);font-weight:600;border-top:1px solid var(--mk-t-line)}
/* small results strip along the bottom of a tool: three figures, label over value */
.mk-stat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--mk-t-line)}
.mk-stat>div{display:grid;gap:.1em;padding:.65em 1.1em}.mk-stat>div+div{border-left:1px solid var(--mk-t-line)}
.mk-stat span{color:var(--mk-t-mut);font-size:.85em}.mk-stat b{font-size:1.35em;font-weight:500;line-height:1.15}
/* TikTok view: a phone beside the formats we cut */
.mk-tt{display:grid;grid-template-columns:minmax(0,13em) 1fr;gap:1.1em;padding:1em 1.1em;align-items:center;flex:1}.mk-tt .mk-phone{--mk-ph-h:21rem}
.mk-tt-note{display:grid;gap:.55em;align-self:center}.mk-tt-note div{display:flex;gap:.5em;align-items:center}.mk-tt-note i{width:.5em;height:.5em;border-radius:1px;background:var(--c)}
.mk-tt-note .h{font-weight:500;color:var(--mk-t-mut);font-size:.85em}
/* creative test: three compact ads, hook + result under each, the winner outlined */
.mk-cr{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;padding:1em 1.1em}
.mk-cr>div{border:1px solid var(--mk-t-line);border-radius:.5em;overflow:hidden}
.mk-cr>div.best{border-color:var(--mk-t-ok);box-shadow:0 0 0 2px color-mix(in srgb,var(--mk-t-ok) 25%,transparent)}
.mk-cr-v{padding:.6em 1.1em;border-top:1px solid var(--mk-t-line);color:var(--mk-t-mut)}.mk-cr-v b{color:var(--mk-t-ok);font-weight:600;margin-right:.35em}
.mk-cr-m{display:grid;gap:.15em;padding:.5em .6em .6em}.mk-cr-m small{color:var(--mk-t-mut)}.mk-cr-m em{font-style:normal;color:var(--mk-t-ok);font-weight:600;font-size:.85em}
/* content planner: one week, a column per day, each post a compact ad with its status */
.mk-legend{margin-left:auto;display:flex;align-items:center;gap:.35em;color:var(--mk-t-mut);font-size:.8em}
.mk-legend i{width:.5em;height:.5em;border-radius:50%;background:var(--c);margin-left:.5em}
.mk-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-height:14em;flex:1}
.mk-cal-d{display:flex;flex-direction:column;gap:.4em;padding:.5em .35em;border-right:1px solid var(--mk-t-sep);min-width:0}.mk-cal-d:last-child{border-right:0}
.mk-cal-d.today{background:color-mix(in srgb,var(--mk-t-acc) 6%,#fff)}
.mk-cal-dh{display:flex;justify-content:space-between;align-items:baseline;padding:0 .15em .2em;font-size:.8em;color:var(--mk-t-mut)}.mk-cal-dh b{font-weight:500}
.mk-cal-dh em{font-style:normal}.mk-cal-d.today .mk-cal-dh em{background:var(--mk-t-acc);color:#fff;border-radius:1em;padding:0 .45em}
.mk-cal-p{display:grid;gap:.25em;background:#fff;border:1px solid var(--mk-t-line);border-radius:.4em;padding:.25em;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.mk-cal-m{display:flex;align-items:center;gap:.3em;font-size:.72em;color:var(--mk-t-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-cal-s{font-size:.68em;font-weight:600;border-radius:.25em;padding:.1em .3em;justify-self:start}
.mk-cal-t{font-size:.68em;color:var(--mk-t-mut)}
.mk-cal-s.pub{background:var(--mk-t-sep);color:var(--mk-t-ink)}.mk-cal-s.sch{background:color-mix(in srgb,var(--mk-t-acc) 12%,#fff);color:#0a54d6}
.mk-cal-s.ok{background:#e6f4ea;color:var(--mk-t-ok)}.mk-cal-s.rev{background:#fef3e0;color:#9a5200}
.mk-cal-foot{display:flex;gap:1.5em;flex-wrap:wrap;padding:.6em 1.1em;border-top:1px solid var(--mk-t-line);color:var(--mk-t-mut);font-size:.85em}.mk-cal-foot b{color:var(--mk-t-ink)}

/* REPORT: the monthly page we send. Paper, same in both themes; platform colours allowed (Social only). Base = a real report page:
   client + period, KPI strip, 30-day chart, platform table, what we shipped */
.mk-report{background:var(--mk-paper);color:var(--mk-ink);border-radius:var(--r);box-shadow:var(--mk-sh);padding:clamp(1rem,2.4vw,1.5rem);display:grid;gap:1.125rem;font:400 .8125rem/1.4 var(--body);text-align:left;min-width:0}
.mk-report{--mk-t-mut:var(--mk-mut);--mk-t-line:var(--mk-line);--mk-t-acc:#1a73e8}  /* tokens for parts borrowed from the tool kit (itbChart, .mk-pos) */
.mk-report-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--mk-ink)}
.mk-report-hd b{display:block;font:600 1.125rem/1.2 var(--display)}
.mk-report-hd span{color:var(--mk-mut);font-size:.75rem}
.mk-report-per{text-align:right}
.mk-report-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--mk-line);border:1px solid var(--mk-line);border-radius:var(--r-sm);overflow:hidden}
.mk-report-kpi>div{background:var(--mk-paper);padding:.625rem .75rem;display:grid;gap:.125rem;align-content:start}
.mk-report-kpi span{font:600 .75rem var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--mk-mut)}
.mk-report-kpi b{font:600 1.5rem/1.1 var(--display)}
.mk-report-kpi em{font-style:normal;font-size:.75rem;color:var(--mk-ok)}
.mk-report-kpi.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-report-line{margin-left:-.25rem}
.mk-report-sec{display:grid;gap:.5rem}
.mk-report-sec h4{margin:0;font:600 .75rem var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--mk-mut)}
.mk-report-ch svg{width:100%;height:auto;display:block}
.mk-report table{width:100%;border-collapse:collapse;font-size:.8125rem}
.mk-report th{font:600 .75rem var(--body);text-transform:uppercase;letter-spacing:.04em;color:var(--mk-mut);text-align:right;padding:.375rem 0;border-bottom:1px solid var(--mk-line)}
.mk-report th:first-child,.mk-report td:first-child{text-align:left}
.mk-report td{text-align:right;padding:.4375rem 0;border-bottom:1px solid var(--mk-line);font:400 .8125rem var(--mono);font-variant-numeric:tabular-nums}
.mk-report td:first-child{font-family:var(--body)}
.mk-report td i:not(.mk-pos){display:inline-block;width:.5rem;height:.5rem;background:var(--c);margin-right:.5rem}
.mk-report-do{list-style:none;margin:0;padding:0;display:grid;gap:.375rem}
.mk-report-do li{display:flex;gap:.5rem;align-items:baseline}
.mk-report-do li::before{content:"✓";color:var(--mk-ok);font-weight:600;flex:none}
.mk-report-ft{margin:0;padding-top:.5rem;border-top:1px solid var(--mk-line);color:var(--mk-mut);font-size:.75rem}

/* PHONE (≤760px) */
@media (max-width:760px){
 .mk-ads-body{grid-template-columns:1fr;justify-items:center}
 .mk-ads-info{display:none}
 .mk-ads-fr{width:min(15rem,100%)}
 .mk-ad[data-p="tt"],.mk-ad[data-p="sc"]{max-height:22rem}
 .mk-ads .wbar em{display:none}
 .mk-ad[data-p="ig"]{width:min(100%,19rem)}
 .mk-tt{grid-template-columns:auto 1fr}.mk-tt .mk-phone{--mk-ph-h:16rem}
 .mk-am{--cols:minmax(0,1fr) 5em 5em 4em!important}.mk-am .mk-xs{display:none}
 .mk-cal{grid-template-columns:repeat(4,minmax(0,1fr))}.mk-cal-d:nth-child(-n+3){display:none}.mk-legend{display:none}
 .mk-report-kpi,.mk-report-kpi.k3{grid-template-columns:1fr 1fr}.mk-report-kpi.k3>div:first-child{grid-column:1/-1}
 .mk-report-hd{flex-wrap:wrap}
 .mk-report th,.mk-report td{padding-left:.5rem}
 .mk-report th:first-child,.mk-report td:first-child{padding-left:0}
 .mk-report th{letter-spacing:0;vertical-align:bottom;line-height:1.2}
 .mk-report td{font-size:.75rem}
}
/* below 1000px the service-tab windows are narrow (a ~330px column on tablets, full phone width on phones): the extra Ads Manager rows (.mk-opt) wait for more room */
@media (max-width:1000px){.mk-tr.mk-opt{display:none}}
/* narrow window (phones and the 761–900px band, where the hero column is about 420px wide): compact tab row */
@media (max-width:900px){.mk-ads .wtabs-bar [role="tab"]{padding-inline:.5rem}.mk-ads .wtabs-bar b{font-size:.8125rem}.mk-ads .wsq{margin-right:.3125rem}}
@media (max-width:360px){.mk-ads .wtabs-bar [role="tab"]{padding-inline:.375rem}.mk-ads .wtabs-bar b{font-size:.75rem}.mk-ads .wsq{margin-right:.25rem}}