/* ReconHire: ads styles */

/* ---------- Ad sizes: banner (728 x 90 style) and half banner (468 x 60 style) ----------
   Layout: picture on the left, "Promoted" and the headline in the middle, the button centered on the right.
   "Picture only" ads (class .banner) are a full-width image strip with the label on top of it. */
body .card.ad-card.ad-shape{display:grid;grid-template-columns:160px minmax(0,1fr) auto;grid-template-rows:auto 1fr;grid-template-areas:"pic lbl cta" "pic txt cta";align-items:center;column-gap:14px;row-gap:2px;padding:10px 14px;min-height:0}
body .card.ad-card.ad-shape:not(.has-creative){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lbl cta" "txt cta"}
body .card.ad-card.ad-shape>.ad-label{grid-area:lbl;align-self:end;margin:0;font-size:.6rem;gap:6px}
body .card.ad-card.ad-shape .ad-tag{padding:3px 7px;font-size:.58rem}
body .card.ad-card.ad-shape>.ad-creative-link,body .card.ad-card.ad-shape>.ad-creative,body .card.ad-card.ad-shape>.ad-vid,body .card.ad-card.ad-shape>.f-yt,body .card.ad-card.ad-shape>.f-yt-frame{grid-area:pic;align-self:center;margin:0}
body .card.ad-card.ad-shape>.ad-body{grid-area:txt;align-self:start;min-width:0;gap:10px;align-items:center}
body .card.ad-card.ad-shape>.ad-body b{font-size:.92rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body .card.ad-card.ad-shape>.ad-body p{margin:1px 0 0;font-size:.8rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
body .card.ad-card.ad-shape>.ad-body .ad-ic{width:34px;height:34px;border-radius:9px}
body .card.ad-card.ad-shape>.btn.ad-cta,body .card.ad-card.ad-shape>a.ad-cta{grid-area:cta;justify-self:center;align-self:center;margin:0;padding:8px 14px;font-size:.84rem;border-radius:10px}
body .card.ad-card.ad-shape img.ad-creative,body .card.ad-card.ad-shape video.ad-creative{width:160px;height:84px;max-height:84px;object-fit:cover;border-radius:8px;display:block}
body .card.ad-card.ad-shape .ad-creative-link,body .card.ad-card.ad-shape .ad-vid{border-radius:8px;line-height:0}
body .card.ad-card.ad-shape .f-yt.ad-creative,body .card.ad-card.ad-shape .f-yt-frame.ad-creative{width:160px;height:84px;border-radius:8px;overflow:hidden;position:relative}
body .card.ad-card.ad-shape .f-yt.ad-creative img{width:100%;height:100%;object-fit:cover}
body .card.ad-card.ad-shape .f-yt-frame.ad-creative iframe{width:100%;height:100%;border:0}
body .card.ad-card.ad-shape .ad-ph{width:160px;height:84px;min-height:0;aspect-ratio:auto;padding:4px;font-size:.68rem;gap:3px}
body .card.ad-card.ad-shape .ad-ph .ico{width:18px;height:18px}
body .card.ad-card.ad-shape .ad-snd{width:26px;height:26px;right:4px;bottom:4px}
body .card.ad-card.ad-shape .ad-snd .ico{width:13px;height:13px}
/* picture only: the image is the ad */
body .card.ad-card.ad-shape.banner{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"lbl" "pic";padding:8px 10px 10px;row-gap:6px}
body .card.ad-card.ad-shape.banner>.ad-label{align-self:start}
body .card.ad-card.ad-shape.banner>.ad-creative-link~.ad-cta{display:none}
body .card.ad-card.ad-shape.banner>.ad-banner-link,body .card.ad-card.ad-shape.banner>.ad-creative{width:100%}
body .card.ad-card.ad-shape.banner img.ad-creative,body .card.ad-card.ad-shape.banner video.ad-creative{width:100%;height:auto;aspect-ratio:728/90;max-height:110px;object-fit:cover}
body .card.ad-card.ad-shape.banner .ad-ph{width:100%;height:auto;aspect-ratio:728/90;max-height:110px}
body .card.ad-card.ad-shape.banner .f-yt.ad-creative,body .card.ad-card.ad-shape.banner .f-yt-frame.ad-creative{width:100%;height:auto;aspect-ratio:16/9;max-height:none}
body .card.ad-card.ad-shape.banner>.btn.ad-cta{grid-area:auto;justify-self:center}
body .card.ad-card.ad-shape.banner ins.adsbygoogle{min-height:0}
body .card.ad-card.ad-shape.banner .ad-frame{border-radius:6px}
body .card.ad-card.ad-shape.shape-banner{max-width:760px;width:100%;margin-left:auto;margin-right:auto}
/* half banner: smaller and narrower */
body .card.ad-card.ad-shape.shape-half{max-width:468px;width:100%;margin-left:auto;margin-right:auto;grid-template-columns:96px minmax(0,1fr) auto;column-gap:10px;padding:8px 10px}
body .card.ad-card.ad-shape.shape-half:not(.has-creative){grid-template-columns:minmax(0,1fr) auto}
body .card.ad-card.ad-shape.shape-half.banner{grid-template-columns:minmax(0,1fr);padding:6px}
body .card.ad-card.ad-shape.shape-half img.ad-creative,body .card.ad-card.ad-shape.shape-half video.ad-creative,body .card.ad-card.ad-shape.shape-half .ad-ph,body .card.ad-card.ad-shape.shape-half .f-yt.ad-creative{width:96px;height:50px;max-height:50px}
body .card.ad-card.ad-shape.shape-half.banner img.ad-creative,body .card.ad-card.ad-shape.shape-half.banner video.ad-creative,body .card.ad-card.ad-shape.shape-half.banner .ad-ph{width:100%;height:auto;aspect-ratio:468/60;max-height:72px}
body .card.ad-card.ad-shape.shape-half>.ad-body b{font-size:.84rem;-webkit-line-clamp:2}
body .card.ad-card.ad-shape.shape-half>.ad-body p{display:none}
body .card.ad-card.ad-shape.shape-half>.ad-body .ad-ic{width:28px;height:28px;font-size:.85rem}
body .card.ad-card.ad-shape.shape-half>.btn.ad-cta{padding:6px 10px;font-size:.78rem}
body .card.ad-card.ad-shape.shape-half .ad-cta .ico{width:13px;height:13px}
/* narrow places (side columns, phones): the picture shrinks, the text stays readable */
@media (max-width:560px){
  body .card.ad-card.ad-shape{grid-template-columns:96px minmax(0,1fr) auto;column-gap:10px;padding:8px 10px}
  body .card.ad-card.ad-shape img.ad-creative,body .card.ad-card.ad-shape video.ad-creative,body .card.ad-card.ad-shape .ad-ph,body .card.ad-card.ad-shape .f-yt.ad-creative{width:96px;height:50px;max-height:50px}
  body .card.ad-card.ad-shape>.ad-body b{font-size:.84rem}
  body .card.ad-card.ad-shape>.ad-body p{display:none}
  body .card.ad-card.ad-shape>.btn.ad-cta{padding:6px 10px;font-size:.78rem}
  body .card.ad-card.ad-shape .ad-cta .ico{display:none}
}
.f-right .card.ad-card.ad-shape,.f-left .card.ad-card.ad-shape,.rail .card.ad-card.ad-shape{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"pic lbl" "pic txt" "cta cta";row-gap:6px}
.f-right .card.ad-card.ad-shape img.ad-creative,.f-left .card.ad-card.ad-shape img.ad-creative,.rail .card.ad-card.ad-shape img.ad-creative{width:72px;height:40px}
.f-right .card.ad-card.ad-shape>.ad-body p,.f-left .card.ad-card.ad-shape>.ad-body p{display:none}

/* ---------- Advertise: size picker, length and dates, previews ---------- */
.adv-sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.adv-size{display:grid;gap:3px;justify-items:start;text-align:left;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line2);background:var(--surface);color:var(--text);cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.adv-size:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.adv-size.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.adv-size b{font-size:.9rem}.adv-size small{font-size:.74rem;line-height:1.35}
.adv-size-pic{display:grid;gap:3px;width:100%;height:46px;padding:6px;border-radius:7px;background:color-mix(in srgb,var(--text) 5%,transparent);margin-bottom:4px;align-content:center}
.adv-size-pic i,.adv-size-pic em,.adv-size-pic u{display:block;border-radius:3px;text-decoration:none}
.adv-size-pic i{background:color-mix(in srgb,var(--accent) 40%,transparent)}
.adv-size-pic em{background:color-mix(in srgb,var(--text) 22%,transparent);height:4px}
.adv-size-pic u{background:var(--accent);height:6px;width:40%;justify-self:center}
.adv-size-pic.pic-card{grid-template-columns:1fr}.adv-size-pic.pic-card i{height:20px}
.adv-size-pic.pic-banner{grid-template-columns:30% 1fr 22%;grid-template-areas:"i e u";align-items:center}
.adv-size-pic.pic-banner i{grid-area:i;height:20px}.adv-size-pic.pic-banner em{grid-area:e;height:5px}.adv-size-pic.pic-banner u{grid-area:u;width:100%}
.adv-size-pic.pic-half{grid-template-columns:22% 1fr 20%;grid-template-areas:"i e u";align-items:center;width:70%;justify-self:center}
.adv-size-pic.pic-half i{grid-area:i;height:13px}.adv-size-pic.pic-half em{grid-area:e;height:4px}.adv-size-pic.pic-half u{grid-area:u;width:100%;height:5px}
.adv-fit{color:var(--accent);font-size:.74rem;font-weight:600}.adv-fit:empty{display:none}
.adv-len{display:grid;gap:6px}
.adv-len-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
.adv-len .err-t{color:#b91c1c}
.adv-sum>span{display:grid;gap:2px}.adv-sum>span small{font-size:.76rem}
.adv-dates{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.8rem}.adv-dates .ico{width:14px;height:14px;color:var(--accent);flex:none}
.adv-editor{grid-template-columns:minmax(0,1fr) 360px}
.adv-pv{display:grid;gap:6px}
.adv-pv.alt{opacity:.9}
.adv-pv .ad-card{margin:0;pointer-events:none}
.adv-pv-l{font:600 .72rem var(--font);color:var(--muted)}.adv-pv-l .dim{font-weight:400}
.adv-live{gap:12px}
.adv-agree{padding:10px 12px;border-radius:10px;border:1px solid var(--line2)}
.adv-agree:has(input:checked){border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 6%,transparent)}
.sell-len{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:820px){.adv-editor{grid-template-columns:1fr}}
@media (max-width:640px){.adv-sizes{grid-template-columns:1fr}.adv-size{grid-template-columns:96px 1fr;column-gap:10px;align-items:center}.adv-size-pic{grid-row:span 2;margin:0}.adv-len-row,.sell-len{grid-template-columns:1fr}}

/* ---------- Ad rules: policy page layout (Help and the purchase form) ---------- */
.adr{display:grid;gap:14px}
.adr-intro{margin:0;font-size:.95rem;color:var(--muted);line-height:1.55;padding:12px 14px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent);border-radius:0 10px 10px 0}
.adr-secs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.adr-sec{padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--surface)}
.adr-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.adr-h b{font-size:.95rem;color:var(--text)}
.adr-n{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font:700 .75rem var(--mono);color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,transparent)}
.adr-sec ul{margin:0;padding:0 0 0 34px;display:grid;gap:4px;list-style:none}
.adr-sec ul li{position:relative;font-size:.88rem;color:var(--muted);line-height:1.5}
.adr-sec ul li::before{content:"";position:absolute;left:-14px;top:.62em;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--accent) 60%,transparent)}
.adr-sec.adr-no{border-color:color-mix(in srgb,var(--bad) 30%,transparent);background:color-mix(in srgb,var(--bad) 4%,var(--surface))}
.adr-sec.adr-no .adr-n{color:#b91c1c;background:color-mix(in srgb,var(--bad) 12%,transparent)}
.adr-sec ul.adr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;padding-left:34px}
.adr-sec ul.adr-grid li{display:flex;gap:7px;align-items:flex-start;color:var(--text)}
.adr-sec ul.adr-grid li::before{display:none}
.adr-sec ul.adr-grid .ico{width:14px;height:14px;flex:none;margin-top:3px;color:#b91c1c}
.adr-sec.adr-rev{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.adr-foot{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:.86rem;color:var(--muted)}.adr-foot .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}
details.adr-box{border:1px solid var(--line2);border-radius:12px;background:color-mix(in srgb,var(--text) 2%,transparent)}
details.adr-box>summary{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;font-weight:600;font-size:.9rem;list-style:none}
details.adr-box>summary::-webkit-details-marker{display:none}
details.adr-box>summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg);transition:transform .15s}
details.adr-box[open]>summary::after{transform:rotate(-135deg)}
details.adr-box>summary .ico{width:16px;height:16px;color:var(--accent)}
details.adr-box>summary small{font-weight:400}
.adr-scroll{max-height:340px;overflow:auto;padding:4px 14px 14px;border-top:1px solid var(--line2)}
.adr-scroll .adr{gap:10px;padding-top:10px}
.adr-scroll .adr-sec{padding:10px 12px}
@media (max-width:640px){.adr-sec ul.adr-grid{grid-template-columns:1fr}.adr-sec ul{padding-left:20px}.adr-sec ul.adr-grid{padding-left:4px}}

/* ---------- Automatic checks: reasons on ads, admin panel ---------- */
.pol-box{display:grid;gap:6px;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,#d97706 35%,transparent);background:color-mix(in srgb,#f59e0b 7%,transparent)}
.pol-t,.pol-ok,.pol-ai{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600}
.pol-t .ico,.pol-ok .ico,.pol-ai .ico{width:14px;height:14px;flex:none}
.pol-t{color:#92400e}.pol-ok{color:var(--good);font-weight:500}.pol-ai{font-weight:400;color:var(--muted);flex-wrap:wrap}
.pol-hits{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.pol-hit{display:flex;gap:8px;align-items:baseline;font-size:.83rem;line-height:1.4}
.pol-hit .chip{flex:none}
.pol-box .chip.amber,.pol-card .chip.amber,.pol-rec .chip.amber{background:#fef3c7;color:#92400e}
.pol-card .md-tips{margin:0}
.pol-table{display:grid;border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.pol-tr{display:grid;grid-template-columns:minmax(0,2.4fr) 90px 130px 60px 170px;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--line2);font-size:.86rem}
.pol-tr:first-child{border-top:0}
.pol-tr>span:first-child{display:grid;gap:1px}.pol-tr small{font-size:.74rem}
.pol-th{background:color-mix(in srgb,var(--text) 4%,transparent);font:600 .72rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.pol-tr .input.sm{padding:6px 8px;font-size:.82rem}
.pol-opts{display:grid;gap:10px}
.pol-opts .switch{align-items:flex-start}.pol-opts .switch>span{display:grid;gap:2px}.pol-opts .switch small{font-size:.78rem}
.pol-test{display:grid;gap:8px;padding:12px 14px;border:1px dashed var(--line2);border-radius:12px}
.pol-out{display:grid;gap:8px}.pol-out:empty{display:none}
.pol-verdict{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
details.pol-recent-box>summary{cursor:pointer;font-weight:600;font-size:.9rem}
.pol-recent{display:grid;gap:8px;margin-top:10px;max-height:420px;overflow:auto}
.pol-rec{display:grid;gap:5px;padding:9px 12px;border:1px solid var(--line2);border-radius:10px;font-size:.84rem}
.pol-cats{gap:5px;flex-wrap:wrap}
.chip.sm{padding:3px 8px;font-size:.72rem}
@media (max-width:760px){.pol-th{display:none}.pol-tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name on" "sev act" "scope act"}.pol-tr>span:nth-child(1){grid-area:name}.pol-tr>span:nth-child(2){grid-area:sev}.pol-tr>span:nth-child(3){grid-area:scope;font-size:.76rem}.pol-tr>label{grid-area:on;justify-self:end}.pol-tr>select{grid-area:act;width:150px}}
/* the purchase form's preview column is narrow: show banners the way they look on a phone or in a narrow column */
.adv-live .card.ad-card.ad-shape{grid-template-columns:96px minmax(0,1fr) auto;column-gap:10px;padding:8px 10px}
.adv-live .card.ad-card.ad-shape:not(.has-creative){grid-template-columns:minmax(0,1fr) auto}
.adv-live .card.ad-card.ad-shape.banner{grid-template-columns:minmax(0,1fr)}
.adv-live .card.ad-card.ad-shape:not(.banner) img.ad-creative,.adv-live .card.ad-card.ad-shape:not(.banner) video.ad-creative,.adv-live .card.ad-card.ad-shape:not(.banner) .ad-ph,.adv-live .card.ad-card.ad-shape:not(.banner) .f-yt.ad-creative{width:96px;height:50px;max-height:50px}
.adv-live .card.ad-card.ad-shape>.ad-body b{font-size:.84rem}
.adv-live .card.ad-card.ad-shape>.ad-body p{display:none}
.adv-live .card.ad-card.ad-shape>.btn.ad-cta{padding:6px 10px;font-size:.78rem}
.adv-live .card.ad-card.ad-shape .ad-cta .ico{display:none}
/* small preview boxes (review queue, campaign list, moderation): picture and headline on top, button below */
.sell-prev .card.ad-card.ad-shape:not(.banner),.adv-prev .card.ad-card.ad-shape:not(.banner),.md-ad-prev .card.ad-card.ad-shape:not(.banner),.f-right .card.ad-card.ad-shape:not(.banner),.f-left .card.ad-card.ad-shape:not(.banner),.rail .card.ad-card.ad-shape:not(.banner){grid-template-columns:72px minmax(0,1fr);grid-template-areas:"pic lbl" "pic txt" "cta cta";row-gap:6px;column-gap:10px;padding:10px}
.sell-prev .card.ad-card.ad-shape:not(.banner):not(.has-creative),.adv-prev .card.ad-card.ad-shape:not(.banner):not(.has-creative),.md-ad-prev .card.ad-card.ad-shape:not(.banner):not(.has-creative){grid-template-columns:minmax(0,1fr);grid-template-areas:"lbl" "txt" "cta"}
.sell-prev .card.ad-card.ad-shape:not(.banner) img.ad-creative,.adv-prev .card.ad-card.ad-shape:not(.banner) img.ad-creative,.md-ad-prev .card.ad-card.ad-shape:not(.banner) img.ad-creative,.sell-prev .card.ad-card.ad-shape .ad-ph,.adv-prev .card.ad-card.ad-shape .ad-ph,.md-ad-prev .card.ad-card.ad-shape .ad-ph{width:72px;height:40px;max-height:40px}
.sell-prev .card.ad-card.ad-shape>.ad-body p,.adv-prev .card.ad-card.ad-shape>.ad-body p,.md-ad-prev .card.ad-card.ad-shape>.ad-body p{display:none}
.sell-prev .card.ad-card.ad-shape>.btn.ad-cta,.adv-prev .card.ad-card.ad-shape>.btn.ad-cta,.md-ad-prev .card.ad-card.ad-shape>.btn.ad-cta{justify-self:center}

/* YouTube Shorts in ads: a tall 9:16 player, centered, never taller than 460px */
.ad-card .yt-short{aspect-ratio:9/16;width:auto;max-width:100%;height:min(460px,70vh);margin:0 auto;display:block;border-radius:14px;overflow:hidden;background:#000}
.ad-card .f-yt.yt-short img{width:100%;height:100%;object-fit:cover}
.ad-card .f-yt-frame.yt-short iframe{width:100%;height:100%;border:0}
.ad-card.shape-banner .yt-short,.ad-card.shape-half .yt-short{height:auto;aspect-ratio:auto;max-height:110px}

/* ---------- wide ad spaces (bottom of pages, feed, lists): a tidy horizontal card ----------
   creative on the left (16:9, or a tall 9:16 thumbnail for YouTube Shorts), headline and text beside it,
   and the button right under the text instead of floating in the middle */
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner){
  grid-template-columns:clamp(200px,28%,320px) minmax(0,1fr);grid-template-areas:"lbl lbl" "pic txt" "pic cta";
  column-gap:22px;row-gap:10px;align-items:start;padding:16px 18px;border-style:solid;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface) 55%)}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>:is(.ad-creative-link,.ad-creative){grid-area:pic;align-self:stretch;border-radius:12px;overflow:hidden}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner) :is(img.ad-creative,video.ad-creative,.f-yt.ad-creative,.f-yt-frame){width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:cover}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>.ad-body{grid-area:txt;align-self:end;max-width:72ch}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>.ad-body b{font-family:var(--hfont);font-size:1.12rem;line-height:1.25}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>.ad-body p{margin-top:4px;line-height:1.5}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>:is(.btn,.ad-cta){grid-area:cta;justify-self:start;align-self:start;margin:4px 0 0}
/* YouTube Shorts in a wide space: a tall thumbnail, not a cropped wide one */
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.ad-yt-short.has-creative:not(.banner){grid-template-columns:auto minmax(0,1fr)}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.ad-yt-short .yt-short{aspect-ratio:9/16!important;height:clamp(200px,32vh,300px)!important;width:auto!important;max-height:none}
@media (max-width:640px){
  :is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner){grid-template-columns:1fr;grid-template-areas:"lbl" "pic" "txt" "cta"}
  :is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>:is(.btn,.ad-cta){justify-self:stretch;text-align:center}
  :is(.page-ad,.f-mid,.list,.rail-main) .ad-card.ad-yt-short.has-creative:not(.banner){grid-template-columns:1fr}
  :is(.page-ad,.f-mid,.list,.rail-main) .ad-card.ad-yt-short .yt-short{height:min(420px,60vh)!important;margin:0 auto}
}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>.ad-cta{justify-self:start!important;align-self:start!important}
:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>.ad-body{align-self:center}
@media (max-width:640px){:is(.page-ad,.f-mid,.list,.rail-main) .ad-card.sz-standard.has-creative:not(.banner)>.ad-cta{justify-self:stretch!important;justify-content:center}}

/* ===== LinkedIn-style ad spaces (network-ui.js: sponsoredPost, textAds, spotlightAd, promotedJob, leadForm) ===== */
/* sponsored post: a member-post lookalike */
.f-post.ad-post{border-color:color-mix(in srgb,var(--accent2) 28%,var(--line))}
.ad-post-av{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;font:700 1.1rem var(--hfont);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ad-post-name{font:600 .98rem var(--hfont)}
.ad-post .f-p-head small .ad-tag{display:inline-flex;align-items:center;gap:5px;font:600 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.ad-post-link{display:block;margin:10px -16px 0;background:#000}
.ad-post-media{display:block;width:100%;max-height:420px;object-fit:cover}
.ad-post-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -16px -14px;padding:12px 16px;background:color-mix(in srgb,var(--accent) 6%,var(--surface2));border-top:1px solid var(--line)}
.ad-post-cta b{display:block;font:600 .95rem var(--hfont)}
.ad-post-cta .btn.ad-cta{flex:none;margin:0}
/* text ads: three tiny ads in one card */
.ad-text-card{display:grid;gap:6px;padding:12px 12px 8px}
.ad-text{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:12px;color:var(--text);text-decoration:none;text-align:left;background:none;border:0;font:inherit;cursor:pointer;width:100%;transition:background .15s}
.ad-text:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);text-decoration:none}
.ad-text-ic{width:44px;height:44px;flex:none;border-radius:10px;object-fit:cover;display:grid;place-items:center;font:700 1rem var(--hfont);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ad-text-t{display:grid;gap:2px;min-width:0}
.ad-text-t b{font-size:.9rem;line-height:1.25}
.ad-text-t small{color:var(--muted);font-size:.78rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ad-text-t em{font:600 .62rem/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2)}
/* spotlight: the viewer next to the sponsor */
.ad-spot{display:grid;justify-items:center;text-align:center;gap:10px;padding:16px;position:relative;overflow:hidden;background:radial-gradient(260px 140px at 50% 0%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 70%),var(--surface)}
.ad-spot::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.ad-spot .ad-label{justify-self:stretch}
.ad-spot-pair{display:flex;align-items:center;gap:10px}
.ad-spot-pair .avatar,.ad-spot-pair img,.ad-spot-pair .nav-av{width:56px;height:56px;border-radius:50%}
.ad-spot-plus{font:700 1.2rem var(--hfont);color:var(--muted)}
.ad-spot-logo{width:56px;height:56px;border-radius:50%;object-fit:cover;display:grid;place-items:center;font:700 1.3rem var(--hfont);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 24px -12px var(--accent2)}
.ad-spot-h{font:700 1.05rem/1.3 var(--hfont)}
.ad-spot-p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.45}
/* promoted job: a job card with a tag */
.jobcard.ad-job{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;border-color:color-mix(in srgb,var(--accent2) 35%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 7%,var(--surface)),var(--surface));cursor:default}
.ad-job-top{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.ad-job-top .ad-tag{display:inline-flex;align-items:center;gap:5px;font:600 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.ad-job-logo{width:44px;height:44px;border-radius:12px;object-fit:cover}
.ad-job-cta{margin:0;white-space:nowrap}
/* lead form */
.ad-lead-h{display:flex;align-items:center;gap:12px}
.ad-lead-h .ad-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:700 1.1rem var(--hfont);color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.ad-lead-rows{display:grid;gap:8px}
.ad-lead-rows>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.ad-lead-rows b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){.ad-post-cta{flex-direction:column;align-items:stretch}.jobcard.ad-job{grid-template-columns:auto minmax(0,1fr)}.ad-job-cta{grid-column:1/-1;justify-self:start}}
.adv-lead{padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent2) 35%,var(--line));background:color-mix(in srgb,var(--accent2) 5%,var(--surface));font-size:.88rem;line-height:1.45}
.adv-leads{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);font-size:.9rem}
.adv-leads .ico{width:16px;height:16px;color:var(--accent)}
.ad-lead-h>div{display:grid;gap:2px}
/* promote a post */
.pp-prev{padding:12px 14px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);display:grid;gap:6px}
.pp-prev .ad-tag{justify-self:start;display:inline-flex;align-items:center;gap:5px;font:600 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.pp-prev p{margin:0;font-size:.92rem;line-height:1.45}
.pr-weeks{display:flex}
.ad-member-post{border-color:color-mix(in srgb,var(--accent2) 35%,var(--line))}
.ad-tag-post{display:inline-flex;align-items:center;gap:5px;font:600 .62rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)}
.as-rv-post{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent2) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent2) 30%,var(--line));font-size:.9rem;line-height:1.45}.as-rv-post .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent2)}

/* ad fit: a creative is always shown whole (never cropped or squashed); the card grows to hold it */
.n-left .ad-mini img.ad-creative,.n-left .ad-mini video.ad-creative,.ng-left .ad-mini img.ad-creative,.ng-left .ad-mini video.ad-creative,.ng-mini .ad-card img.ad-creative,.ng-mini .ad-card video.ad-creative,
.ad-left img.ad-creative,.ad-left video.ad-creative,.rail-ad img.ad-creative,.rail-ad video.ad-creative{width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:10px;display:block;background:#05060f}
.n-left .ad-mini .ad-creative-link,.ng-left .ad-mini .ad-creative-link,.ad-left .ad-creative-link,.n-left .ad-mini .ad-vid,.ng-left .ad-mini .ad-vid,.ad-left .ad-vid{display:block;width:100%;height:auto;max-height:none;line-height:0;border-radius:10px;overflow:hidden}
.n-left .ad-mini,.ng-left .ad-mini,.ad-left{overflow:hidden}
/* sponsored feed post: the call-to-action bar sits inside the card, flush with its bottom edge */
html body .f-post.ad-post{padding:16px 18px 0!important}
html body .f-post.ad-post .f-p-head .pop,html body .f-post.ad-post .f-p-head .menu{overflow:visible}
html body .f-post.ad-post .ad-post-link{margin:10px -18px 0!important;border-radius:0}
html body .f-post.ad-post .ad-post-cta{margin:0 -18px!important;border-radius:0 0 var(--radius) var(--radius)}
@media (max-width:600px){html body .f-post.ad-post{padding:14px 12px 0!important}html body .f-post.ad-post .ad-post-link{margin:10px -12px 0!important}html body .f-post.ad-post .ad-post-cta{margin:0 -12px!important}}

/* text-only ads: stack so narrow sidebars never squeeze the copy or push the button out */
body .card.ad-card.ad-shape:not(.has-creative):not(.banner){grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"lbl" "txt" "cta";row-gap:8px;overflow:hidden}
body .card.ad-card.ad-shape:not(.has-creative):not(.banner)>.ad-body{align-items:flex-start}
body .card.ad-card.ad-shape:not(.has-creative):not(.banner)>.ad-body p{-webkit-line-clamp:3}
body .card.ad-card.ad-shape:not(.has-creative):not(.banner)>.btn.ad-cta,body .card.ad-card.ad-shape:not(.has-creative):not(.banner)>a.ad-cta{justify-self:start;max-width:100%}
.f-right .card.ad-card.ad-shape:not(.has-creative),.f-left .card.ad-card.ad-shape:not(.has-creative),.rail .card.ad-card.ad-shape:not(.has-creative){grid-template-columns:minmax(0,1fr);grid-template-areas:"lbl" "txt" "cta"}

/* left-rail / settings-rail ads: one column that can never grow past the rail; copy fills the width */
.ad-left{grid-template-columns:minmax(0,1fr);padding:12px;gap:8px;max-width:100%;box-sizing:border-box}
.ad-left>*{min-width:0;max-width:100%}
.ad-left .ad-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.ad-left .ad-body>div{min-width:0;overflow-wrap:anywhere}
.ad-left .ad-body b{font-size:.9rem;line-height:1.25}
.ad-left .ad-body p{font-size:.78rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ad-left .ad-ic{width:32px;height:32px}
.ad-left .btn.ad-cta{justify-self:stretch;width:100%;box-sizing:border-box;justify-content:center;padding:7px 12px;font-size:.8rem;white-space:normal;text-align:center}

/* compact text-only ads in narrow rails (feed left/right columns, settings rail): stack instead of text | button side by side */
:is(.ng-left,.ng-mini,.n-left,.ng-right,.rail,.f-left,.f-right,.st-left,.hx-left,.jh-left) .ad-card.compact:not(.has-creative),.ad-left.compact:not(.has-creative){grid-template-columns:minmax(0,1fr)}
:is(.ng-left,.ng-mini,.n-left,.ng-right,.rail,.f-left,.f-right,.st-left,.hx-left,.jh-left) .ad-card.compact:not(.has-creative)>.ad-body{min-width:0}
:is(.ng-left,.ng-mini,.n-left,.ng-right,.rail,.f-left,.f-right,.st-left,.hx-left,.jh-left) .ad-card.compact:not(.has-creative)>.ad-body>div{min-width:0;overflow-wrap:anywhere}
:is(.ng-left,.ng-mini,.n-left,.ng-right,.rail,.f-left,.f-right,.st-left,.hx-left,.jh-left) .ad-card.compact:not(.has-creative) .btn.ad-cta{justify-self:stretch;width:100%;box-sizing:border-box;justify-content:center;margin-top:2px}

/* ONE rule for every text-only ad, everywhere (feed, rails, settings, lists, jobs): copy gets the room, the button wraps under it when the card is narrow */
html body .card.ad-card.ad-card:not(.has-creative):not(.banner){display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;box-sizing:border-box;max-width:100%;min-width:0}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.ad-label{flex:0 0 100%;margin:0}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.ad-body{flex:1 1 220px;min-width:0;display:flex;gap:10px;align-items:flex-start}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.ad-body>div{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.ad-body b{display:block;font-size:.9rem;line-height:1.25;-webkit-line-clamp:unset;overflow:visible}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.ad-body p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:.8rem;line-height:1.35;margin:2px 0 0}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.ad-body .ad-ic{flex:none;width:34px;height:34px}
html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>.btn.ad-cta,html body .card.ad-card.ad-card:not(.has-creative):not(.banner)>a.ad-cta{flex:0 0 auto;max-width:100%;margin:0;box-sizing:border-box;justify-self:auto;white-space:normal;text-align:center}


/* v1.90.4 ads never wider than their column (image, video and placeholder creatives were overflowing narrow side columns and covering the page) */
body .card.ad-card{min-width:0;max-width:100%;overflow:hidden}
body .card.ad-card .ad-creative-link{min-width:0;max-width:100%;box-sizing:border-box}
body .card.ad-card :is(.ad-creative,.ad-ph,img.ad-creative,video.ad-creative,.f-yt,.f-yt-frame,.ad-vid,.yt-short){max-width:100%;box-sizing:border-box}
body .card.ad-card.compact:not(.ad-shape) .ad-creative-link{width:100%;height:auto}
body .card.ad-card.compact:not(.ad-shape) :is(.ad-creative,.ad-ph,img.ad-creative,video.ad-creative,.f-yt,.f-yt-frame){width:100%;height:auto;max-height:240px;aspect-ratio:16/9;object-fit:cover}
body .card.ad-card.compact:not(.ad-shape) .yt-short{width:auto;max-width:100%;height:min(300px,45vh)}
body .card.ad-card .ad-cta,body .card.ad-card .btn{max-width:100%}

/* v1.91 ads in lists and at the bottom of pages: readable text on narrow screens (the headline and text were squeezed beside the button and creative) */
body .card.ad-card .ad-body p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
body .card.ad-card .ad-body>div{min-width:0}
@media (max-width:820px){
  body .card.ad-card.compact:not(.ad-shape):not(.has-creative){display:flex;flex-direction:column;align-items:stretch;gap:10px}
  body .card.ad-card.compact:not(.ad-shape):not(.has-creative) .ad-cta,body .card.ad-card.compact:not(.ad-shape):not(.has-creative)>.btn{align-self:stretch;width:100%;text-align:center;justify-content:center;margin:0}
  :is(.page-ad,.f-mid,.list,.list-col,.rail-main) .ad-card.has-creative:not(.banner),:is(.page-ad,.f-mid,.list,.list-col,.rail-main) .ad-card.ad-yt-short.has-creative:not(.banner){
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"lbl" "pic" "txt" "cta";row-gap:12px;padding:14px}
  :is(.page-ad,.f-mid,.list,.list-col,.rail-main) .ad-card.has-creative:not(.banner)>:is(.ad-creative-link,.ad-creative){grid-area:pic;width:100%;max-height:260px}
  :is(.page-ad,.f-mid,.list,.list-col,.rail-main) .ad-card.has-creative:not(.banner) :is(img.ad-creative,video.ad-creative,.f-yt.ad-creative,.f-yt-frame,.ad-vid video,.yt-short){width:100%;max-height:260px;height:auto;aspect-ratio:16/9;object-fit:cover}
  :is(.page-ad,.f-mid,.list,.list-col,.rail-main) .ad-card.has-creative:not(.banner)>.ad-body{grid-area:txt;max-width:none}
  :is(.page-ad,.f-mid,.list,.list-col,.rail-main) .ad-card.has-creative:not(.banner)>:is(.btn,.ad-cta){grid-area:cta;justify-self:stretch;width:100%;text-align:center;justify-content:center;margin:0}
}
/* banner ads sit in the content column, not centred under the sidebar */
.page-ad .ad-card.banner,.page-ad .ad-card.shape-banner{max-width:100%;margin-left:0;margin-right:0}