/* Softriver Hub — Ads (ads.js). On the Hub's design system: white cards on the grey page, gradient stat tiles, Geist Mono
   for numbers. Ads get their pictures large (4:5, like the feed). Charts: thin marks, one axis each, colour by job: Stripe
   and MER in blue, Meta spend in grey, Meta ROAS in aqua; angle cells diverge blue (above the account) to red (below)
   around grey; status colours (rising, slipping, fatigued) always come with an icon and a word. */
.ads{--c-in:#2a78d6;--c-meta:#1baf7a;--c-spend:#cfcfd6;--c-good:#0ca30c;--c-good-t:#006300;--c-warn:#fab219;--c-warn-t:#8a5a00;--c-bad:#d03b3b;--c-band:rgba(42,120,214,.07);--c-grid:#ececf0}
.ads .ad-head{margin-bottom:16px}
.ads .ad-head .sub b{color:var(--ink)}
.ad-tabs{margin-bottom:22px;display:flex;width:max-content;max-width:100%}
.ad-tabs button .ico{width:15px;height:15px}
.ad-conn{display:flex;align-items:center;gap:9px;width:100%;border:0;background:#fff6dc;color:#7a4d00;font:inherit;font-size:13px;text-align:left;padding:11px 16px;border-radius:16px;margin-bottom:16px;cursor:pointer}
.ad-conn .ico{width:16px;height:16px;flex:none}
.ad-conn:hover{background:#ffefc2}

/* the numbers that open the read */
.ad-kpis .stat .d{display:flex;flex-direction:column;gap:3px;min-height:34px}
.ad-kn{font-size:12px;color:rgba(255,255,255,.72)}
.ad-d{display:inline-block;font:400 12.5px/1.35 var(--mono);letter-spacing:-.02em}
.ad-d .ico{width:13px;height:13px;display:inline-block;vertical-align:-2px;margin-right:4px}
.ad-d small{font-family:var(--font);font-size:11.5px;opacity:.75;letter-spacing:0}
.stats.hero .ad-d{color:#fff}
.ad-d.good{color:var(--c-good-t)} .ad-d.bad{color:var(--c-bad)} .ad-d.flat{color:var(--ink-3)}
.stats.hero .ad-d.good,.stats.hero .ad-d.bad,.stats.hero .ad-d.flat{color:#fff}
.stats.hero .ad-d.bad{opacity:.95}
.stats.hero .ad-d.bad .ico{transform:none}

/* the read */
.ad-read{padding:22px 24px 20px}
.ad-read-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ad-headline{font:500 clamp(18px,.8vw + 12px,22px)/1.32 var(--head);letter-spacing:-.022em;max-width:62ch;margin-bottom:14px;text-wrap:pretty}
.ad-sum{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px;max-width:84ch}
.ad-sum li{position:relative;padding-left:18px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ad-sum li::before{content:"";position:absolute;left:3px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.ad-facts{display:flex;flex-wrap:wrap;gap:8px}
.ad-facts span{background:var(--fill);border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--ink-2)}
.ad-facts b{font:400 12.5px var(--mono);color:var(--ink);margin-right:3px}
.ad-notes ul{margin:10px 0 0;padding-left:18px;color:var(--ink-2);font-size:13px;display:grid;gap:4px}

.ad-two{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;margin-top:14px;align-items:start}
.ad-two.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.ad-two>.card+.card{margin-top:0}
.ad-side{display:grid;gap:14px;min-width:0}
.ad-side>.card+.card{margin-top:0}
.card>h2 .ico{width:17px;height:17px;color:var(--ink-3)}

/* the to-do list */
.ad-acts{display:grid}
.ad-act{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--rl)}
.ad-act:first-child{border-top:0;padding-top:2px}
.ad-act .grow{flex:1;min-width:0;display:grid;gap:4px}
.ad-act>.grow>b{font-weight:500;font-size:14.5px;line-height:1.35;letter-spacing:-.01em}
.ad-act-h{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ad-act-h .chip{height:22px;font-size:11.5px;padding:0 9px}
.ad-tick{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);background:#fff;flex:none;display:grid;place-items:center;cursor:pointer;color:transparent;margin-top:1px;transition:background .15s,border-color .15s,color .15s}
.ad-tick .ico{width:14px;height:14px}
.ad-tick:hover{border-color:var(--ink);color:var(--ink-3)}
.ad-act.is-done .ad-tick{background:var(--ink);border-color:var(--ink);color:#fff}
.ad-act.is-done>.grow>b{text-decoration:line-through;text-decoration-color:var(--ink-3);color:var(--ink-3)}
.ad-act.is-done .note{color:var(--ink-3)}
.ad-kind{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:999px;font-size:11.5px;font-weight:500}
.ad-kind .ico{width:12px;height:12px}
.ad-kind.t-red{background:#fde8e7;color:#b42318} .ad-kind.t-green{background:#e3f6e5;color:#036b03} .ad-kind.t-amber{background:#fff3e0;color:#8a5a00}
.ad-kind.t-violet{background:#efeaff;color:#5b3fd0} .ad-kind.t-blue{background:#e6f0fc;color:#1c5cab} .ad-kind.t-gray{background:var(--fill);color:var(--ink-2)}
.ad-imp{display:inline-block;font:400 12px var(--mono);letter-spacing:-.02em;color:var(--ink);background:var(--fill);border-radius:6px;padding:1px 6px;margin-left:2px}
.ad-act-pics{display:flex;gap:4px;flex:none}
.ad-skip{flex:none;align-self:center}
.ad-act:not(:hover) .ad-skip{opacity:0}
@media (hover:none){.ad-act .ad-skip{opacity:1}}

/* little pictures */
.ad-mini{display:block;width:40px;flex:none;border-radius:9px;overflow:hidden;background:var(--fill)}
.ad-mini .ad-pic{border-radius:0}
.ad-mini .ad-ph em,.ad-mini .ad-fmtb,.ad-mini .ad-stb{display:none}
.ad-mini>img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}

/* alerts and calls */
.ad-alert{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--rl)}
.ad-alert:first-of-type{border-top:0;padding-top:0}
.ad-alert p{flex:1;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.ad-alert .dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px;background:var(--ink-3)}
.ad-alert.k-fatigue .dot{background:#ec835a} .ad-alert.k-waste .dot{background:var(--c-bad)} .ad-alert.k-tracking .dot{background:var(--c-warn)} .ad-alert.k-budget .dot{background:var(--c-in)}
.ad-call{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--rl)}
.ad-call:first-of-type{border-top:0;padding-top:0}
.ad-call b{display:block;font-weight:500;font-size:13.5px}
.ad-call small{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.ad-calls .btn{margin-top:8px}
.ad-call.big{display:grid;gap:6px;border:0;padding:18px 20px}
.ad-call.big b{font-size:15px}
.ad-callk{display:inline-grid;place-items:center;height:22px;padding:0 9px;border-radius:999px;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;flex:none;background:var(--fill);color:var(--ink-2);width:max-content}
.ad-callk.c-scale{background:#e3f6e5;color:#036b03} .ad-callk.c-stop{background:#fde8e7;color:#b42318} .ad-callk.c-test{background:#e6f0fc;color:#1c5cab}

/* sections */
.ad-sec{margin-top:26px}
.ad-sec-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ad-sec-h h3{margin-right:auto}
.ad-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(208px,232px);gap:12px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.ad-strip>*{scroll-snap-align:start}
.ad-grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.ad-grid3>.card+.card{margin-top:0}

/* an ad: the tile */
.ad-tile{display:flex;flex-direction:column;background:var(--card);border-radius:20px;overflow:hidden;box-shadow:var(--lift);text-decoration:none;color:inherit;min-width:0;transition:transform .25s var(--spring),box-shadow .25s}
a.ad-tile:hover{transform:translateY(-3px);box-shadow:0 18px 38px -22px rgba(11,11,15,.32),var(--lift)}
.ad-pic{position:relative;display:block;aspect-ratio:4/5;background:linear-gradient(150deg,#ececf3,#e3e1ef 55%,#efe9f3);overflow:hidden;border-radius:0}
.ad-pic.big{border-radius:24px;box-shadow:var(--lift)}
.ad-pic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
/* only a 64 px frame so far (Meta sends the full one once it's connected): the frame as a soft backdrop, the hook on top */
.ad-pic.lo>img{filter:blur(10px) saturate(1.15);transform:scale(1.25)}
.ad-pic.lo>.ad-ph{z-index:2;background:linear-gradient(180deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.72));color:var(--ink)}
.ad-pic.lo>.ad-ph .ico{color:rgba(11,11,15,.55)}
.ad-ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:14px;color:var(--ink-2)}
.ad-ph .ico{width:22px;height:22px;color:var(--ink-3);margin-bottom:auto}
.ad-ph em{font:500 15px/1.25 var(--head);font-style:normal;letter-spacing:-.02em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.ad-fmtb{position:absolute;top:10px;left:10px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(11,11,15,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff}
.ad-fmtb .ico{width:13px;height:13px;fill:currentColor;stroke:none}
.ad-fmtb .ico path[d^="M3 7.5"],.ad-fmtb .ico rect{fill:none;stroke:currentColor}
.ad-stb{position:absolute;top:10px;right:10px;z-index:2}
.ad-tb{display:flex;flex-direction:column;gap:7px;padding:13px 14px 14px;min-width:0;flex:1}
.ad-name{font-weight:500;font-size:13.5px;line-height:1.3;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ad-hook{font-size:12.5px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ad-ms{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--fill);border-radius:12px;padding:8px 10px}
.ad-ms span{display:flex;flex-direction:column;font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-family:var(--mono)}
.ad-ms b{font:400 15px/1.2 var(--mono);letter-spacing:-.04em;color:var(--ink);text-transform:none}
.ad-tf{display:flex;align-items:center;gap:6px;margin-top:auto;min-width:0}
.ad-tf .chip{height:22px;font-size:11.5px;padding:0 9px;min-width:0}
.ad-tf .ad-spark{margin-left:auto;flex:none}
.ad-when{font-size:12px;color:var(--ink-3)}
.ad-verdict{display:flex;gap:6px;font-size:12.5px;line-height:1.42;color:var(--ink-2);background:#f6f3ff;border-radius:10px;padding:8px 10px}
.ad-verdict .ico{width:14px;height:14px;color:#6e3ff3;flex:none;margin-top:2px}
.ad-tile .ad-verdict{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ad-tile .ad-verdict .ico{display:inline-block;vertical-align:-2px;margin-right:5px}

/* status and format */
.ad-st{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px 0 7px;border-radius:999px;font-size:11.5px;font-weight:500;background:#fff;color:var(--ink-2);box-shadow:0 1px 2px rgba(11,11,15,.08)}
.ad-st .ico{width:12px;height:12px}
.ad-st.s-rising{color:var(--c-good-t)} .ad-st.s-rising .ico{color:var(--c-good)}
.ad-st.s-slipping{color:var(--c-warn-t)} .ad-st.s-slipping .ico{color:#c98500}
.ad-st.s-fatigued{background:var(--c-bad);color:#fff;box-shadow:none} .ad-st.s-fatigued .ico{color:#fff}
.ad-st.s-paused,.ad-st.s-off{color:var(--ink-3)}
.ad-fmt{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:999px;background:var(--fill);font-size:11.5px;color:var(--ink-2)}
.ad-fmt .ico{width:12px;height:12px}

/* the ROAS line on a tile */
.ad-spark{width:76px;height:24px;overflow:visible}
.ad-spark path{fill:none;stroke:var(--ink);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.ad-spark .ref{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.ad-spark circle{fill:var(--ink);stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke}

/* rows */
.ad-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--rl);text-decoration:none;color:inherit}
.ad-row:first-of-type{border-top:0;padding-top:0}
.ad-row .ad-pic{width:46px;flex:none;border-radius:10px}
.ad-row .ad-ph em,.ad-row .ad-fmtb,.ad-row .ad-stb{display:none}
.ad-row .grow{min-width:0;flex:1}
.ad-row b{display:block;font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-row small{display:block;font-size:12.5px;color:var(--ink-3)}
.ad-row:hover b{text-decoration:underline;text-underline-offset:3px}
.ad-big{font:400 17px var(--mono);letter-spacing:-.04em;flex:none}
.ad-big.good{color:var(--c-good-t)} .ad-big.bad{color:var(--c-bad)}

/* fatigue */
.ad-fat{display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit;padding:14px}
.ad-fat>.ad-pic{width:86px;flex:none;border-radius:14px}
.ad-fat .ad-ph em,.ad-fat .ad-stb{display:none}
.ad-fat .grow{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.ad-fat small{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.ad-fat-h{display:flex;align-items:center;gap:8px}
.ad-drop{font:400 14px var(--mono);letter-spacing:-.03em;margin-left:auto}
.ad-fat.s-fatigued .ad-drop{color:var(--c-bad)} .ad-fat.s-rising .ad-drop{color:var(--c-good-t)}
.ad-fat .ad-spark{width:100%;height:30px;margin-top:2px}
.ad-need{display:inline-flex;align-self:flex-start;font-size:11.5px;font-weight:500;color:#b42318;background:#fde8e7;border-radius:999px;padding:2px 9px}
a.ad-fat:hover{box-shadow:0 18px 38px -22px rgba(11,11,15,.3),var(--lift)}

/* a read in progress */
.ad-prog{margin-bottom:14px}
.ad-prog b{display:flex;align-items:center;gap:8px;font-weight:500}
.ad-prog b .ico{width:16px;height:16px;animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ad-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ad-steps span{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--fill);color:var(--ink-3)}
.ad-steps span.ok{color:var(--ink-2)} .ad-steps span.ok::before{content:"✓ "}
.ad-steps span.now{background:var(--ink);color:#fff}
.note.bad{color:var(--c-bad);margin-top:8px}

/* ideas */
.ad-ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px;align-items:start}
.ad-ideas>.card+.card{margin-top:0}
.ad-idea{display:flex;flex-direction:column;gap:9px;padding:18px 18px 16px}
.ad-idea-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ad-idea-h .chip{height:22px;font-size:11.5px;padding:0 9px}
.ad-idea-h .spacer{flex:1}
select.mini.ad-ist{height:30px;font-size:12.5px;padding:0 30px 0 12px}
.ad-src.s-iteration{background:#e6f0fc;color:#1c5cab} .ad-src.s-flip{background:#efeaff;color:#5b3fd0} .ad-src.s-remake,.ad-src.s-test{background:#fff3e0;color:#8a5a00}
.ad-src.s-radar{background:#fdecf5;color:#b3195a} .ad-src.s-new_angle{background:#e3f6e5;color:#036b03}
.ad-idea-t{font:500 16px/1.3 var(--head);letter-spacing:-.018em;color:var(--ink);text-transform:none;margin:0}
.ad-idea-hook{font:500 15px/1.35 var(--head);letter-spacing:-.016em;color:var(--ink);background:var(--fill);border-radius:12px;padding:10px 12px;margin:0}
.ad-alt{margin:0;padding:0;list-style:none;display:grid;gap:3px}
.ad-alt li{font-size:12.5px;color:var(--ink-2);padding-left:14px;position:relative}
.ad-alt li::before{content:"or";position:absolute;left:0;font:400 10px/1.9 var(--mono);color:var(--ink-3)}
.ad-brief summary{font-size:13px}
.ad-brief p{margin-top:8px;font-size:13px;line-height:1.55;color:var(--ink-2);white-space:pre-line}
.ad-why{display:flex;gap:7px;font-size:12.5px}
.ad-why .ico{width:14px;height:14px;flex:none;color:var(--ink-3);margin-top:2px}
.ad-idea-f{display:flex;align-items:center;gap:10px;margin-top:2px;padding-top:10px;border-top:1px solid var(--rl)}
.ad-idea-f .spacer{flex:1}
.ad-ref{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);text-decoration:none;min-width:0}
.ad-ref .ad-pic{width:30px;flex:none;border-radius:7px}
.ad-ref .ad-ph em,.ad-ref .ad-fmtb,.ad-ref .ad-stb{display:none}
.ad-ref span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-ref b{font-weight:500;color:var(--ink)}
.ad-refimg{width:30px;aspect-ratio:4/5;object-fit:cover;border-radius:7px}
.ad-ref.plain{color:var(--ink-2)}

/* radar themes */
.ad-theme,.ad-untried{display:flex;flex-direction:column;gap:7px;padding:18px 20px}
.ad-theme b,.ad-untried b{font-weight:500;font-size:15px;letter-spacing:-.012em}
.ad-tpics{display:flex;gap:6px;margin-top:4px}
.ad-tpics .ad-mini{width:52px}
.ad-tpics img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}

/* winners */
.ad-filters{margin-bottom:10px}
.ad-q{flex:1;min-width:200px;max-width:360px;height:38px;background:var(--ctl)}
.ad-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;margin-top:6px}
.ad-wall.radar{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.ad-tile.rt .ad-rb{display:flex;flex-direction:column}
.ad-tile.rt .ad-rb b{font-weight:500;font-size:14px}
.ad-tile.rt .ad-rb small{font-size:12px;color:var(--ink-3)}
.ad-body3{font-size:12.5px;color:var(--ink-2);line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ad-tacts{display:flex;gap:6px;flex-wrap:wrap;padding-top:4px}
.ad-tacts .btn{flex:1}

/* one ad */
.ad-back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);text-decoration:none;font-size:13.5px;margin-bottom:16px}
.ad-back .ico{width:16px;height:16px}
.ad-back:hover{color:var(--ink)}
.ad-detail{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:26px;align-items:start}
.ad-left{position:sticky;top:84px;display:grid;gap:14px;min-width:0}
.ad-links{display:flex;flex-wrap:wrap;gap:6px}
.ad-kv{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:13px;background:var(--card);border-radius:18px;padding:14px 16px;box-shadow:var(--lift)}
.ad-kv dt{color:var(--ink-3);font:400 11px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.ad-kv dd{margin:0;color:var(--ink-2);min-width:0;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ad-copy{background:var(--card);border-radius:18px;padding:12px 16px;box-shadow:var(--lift);margin-top:0}
.ad-copy .ad-h1{font-weight:500;margin-top:10px}
.ad-copy .ad-body{font-size:13px;color:var(--ink-2);white-space:pre-line;margin-top:8px;padding-top:8px;border-top:1px solid var(--rl)}
.ad-right{min-width:0;display:grid;gap:14px}
.ad-right>.card+.card{margin-top:0}
.ad-right>.toolbar{margin:0}
.ad-title h1{font-size:clamp(22px,1vw + 16px,30px);margin-top:8px;overflow-wrap:anywhere}
.ad-bighook{font:500 17px/1.35 var(--head);letter-spacing:-.018em;color:var(--ink-2);margin-top:10px;max-width:60ch}
.ad-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ad-mt{background:var(--card);border-radius:18px;padding:14px 16px;box-shadow:var(--lift);display:flex;flex-direction:column;gap:2px;min-width:0}
.ad-mt span{font-size:12.5px;color:var(--ink-3)}
.ad-mt b{font:400 24px/1.15 var(--mono);letter-spacing:-.05em}
.ad-mt small{font-size:11.5px;color:var(--ink-3)}
.ad-mt small.good{color:var(--c-good-t)} .ad-mt small.bad{color:var(--c-bad)}
.ad-mt.hi{background:var(--g-violet);background-blend-mode:overlay,normal;color:#fff;box-shadow:var(--rim),0 20px 40px -28px rgba(60,60,180,.5)}
.ad-mt.hi span,.ad-mt.hi small,.ad-mt.hi small.good,.ad-mt.hi small.bad{color:rgba(255,255,255,.85)}
.ad-charts{display:grid;gap:16px}
.ad-charts>h2{margin-bottom:0}
.ad-cl h4{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.ad-legend{display:inline-flex;align-items:center;gap:6px;font:400 11px var(--mono);color:var(--ink-3);text-transform:none;letter-spacing:0;flex-wrap:wrap}
.ad-legend i{display:inline-block;width:14px;height:2px;border-radius:2px;margin-left:6px}
.ad-legend i.l1{background:var(--c-in)} .ad-legend i.l2{background:var(--c-meta)} .ad-legend i.ref{background:repeating-linear-gradient(90deg,var(--ink-3) 0 3px,transparent 3px 6px)}
.ad-legend i.bar{width:9px;height:9px;background:var(--c-spend);border-radius:2px} .ad-legend i.bandk{width:12px;height:9px;background:var(--c-band);border:1px solid rgba(42,120,214,.25)}
.ad-study{display:grid;gap:10px}
.ad-study>h2{margin-bottom:0}
.ad-study h4{margin-top:8px}
.ad-verdict-big{font:500 18px/1.4 var(--head);letter-spacing:-.02em;margin:0;text-wrap:pretty}
.ad-break{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.ad-break>div{background:var(--fill);border-radius:14px;padding:10px 12px}
.ad-break span{font:400 10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.ad-break p{font-size:13px;line-height:1.45;color:var(--ink);margin-top:3px}
.ad-why-l,.ad-watch{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.ad-why-l li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.ad-why-l li::before{content:"";position:absolute;left:3px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--c-good)}
.ad-watch li{display:flex;gap:7px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.ad-watch .ico{width:15px;height:15px;color:#c98500;flex:none;margin-top:3px}
.ad-next{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.ad-nx{border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.ad-nx b{font-weight:500;font-size:14px;line-height:1.3}
.ad-nx .ad-idea-hook{font-size:13.5px;padding:8px 10px}
.ad-nx .btn{align-self:flex-start;margin-top:auto}

/* charts */
.ad-chart{position:relative;width:100%}
.ad-chart svg{width:100%;height:auto;overflow:visible}
.ad-chart .g{stroke:var(--c-grid);stroke-width:1;vector-effect:non-scaling-stroke}
.ad-chart .tk{font:400 11px var(--mono);fill:var(--ink-3)}
.ad-chart .b{fill:var(--c-spend)}
.ad-chart .l1{fill:none;stroke:var(--c-in);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.ad-chart .l2{fill:none;stroke:var(--c-meta);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
#adc2 .l2{stroke:var(--ink-3);stroke-dasharray:3 4;stroke-width:1.2}
.ad-chart .band{fill:var(--c-band)}
.ad-chart .xh{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.35}
.ad-chart .mk line{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke;opacity:.7}
.ad-chart .mk circle{fill:var(--ink);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.ad-chart .mk.t-up circle{fill:var(--c-good-t)} .ad-chart .mk.t-down circle{fill:var(--c-bad)} .ad-chart .mk.t-flag circle{fill:#c98500}
.ad-chart .mk text{font:500 10px var(--mono);fill:#fff}
.ad-tip{position:absolute;top:0;z-index:5;pointer-events:none;background:var(--ink);color:#fff;border-radius:12px;padding:9px 12px;font-size:12px;line-height:1.45;display:grid;gap:1px;box-shadow:0 12px 30px -12px rgba(11,11,15,.5);min-width:170px}
.ad-tip b{font-weight:500}
.ad-tip span{color:rgba(255,255,255,.78);font-family:var(--mono);font-size:11.5px;letter-spacing:-.02em}
.ad-tip .mkn{color:#fff;font-family:var(--font);margin-top:3px}

/* angles */
.ad-angles{padding:8px 10px 14px}
.ad-at{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(96px,1fr)) minmax(90px,.8fr);overflow-x:auto}
.ad-at-h,.ad-at-r,.ad-at-f{display:contents}
.ad-at-h span,.ad-at-f span{font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:12px 10px 8px}
.ad-at-f span{border-top:1px solid var(--line);padding-top:12px;color:var(--ink-2)}
.ad-at-f span.mono{font-size:13px;text-transform:none;color:var(--ink)}
.ad-at-n{display:flex;flex-direction:column;gap:6px;padding:12px 10px;border-top:1px solid var(--rl);min-width:0}
.ad-at-n b{font-weight:500;font-size:14px}
.ad-at-n .ad-callk{height:20px;font-size:10px}
.ad-at-pics{display:flex;gap:4px}
.ad-at-pics .ad-mini{width:30px;border-radius:7px}
.ad-at-c{position:relative;margin:4px;border-radius:12px;padding:10px 10px 14px;display:flex;flex-direction:column;justify-content:center;gap:1px;background:var(--fill);min-width:0}
.ad-at-c b{font:400 17px var(--mono);letter-spacing:-.04em}
.ad-at-c small{font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-at-c i{position:absolute;left:10px;bottom:7px;height:3px;border-radius:3px;background:rgba(11,11,15,.28);width:var(--w);max-width:calc(100% - 20px)}
.ad-at-c.p3{background:#9ec5f4} .ad-at-c.p2{background:#cde2fb} .ad-at-c.p1{background:#e8f1fc} .ad-at-c.n0{background:#f1f1f3}
.ad-at-c.m1{background:#fbeceb} .ad-at-c.m2{background:#f6d2d0} .ad-at-c.m3{background:#f0aeac} .ad-at-c.empty{background:transparent}
.ad-at-t{display:flex;align-items:center;padding:12px 10px;border-top:1px solid var(--rl)}
.ad-at-t .ad-spark{width:100%;height:30px}
.ad-legend2{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 10px 0;font-size:12px}
.ad-legend2 .sw{display:inline-block;width:14px;height:14px;border-radius:4px;margin-left:6px}
.ad-legend2 .sw.p3{background:#9ec5f4} .ad-legend2 .sw.p1{background:#e8f1fc} .ad-legend2 .sw.n0{background:#f1f1f3;box-shadow:inset 0 0 0 1px var(--line)} .ad-legend2 .sw.m1{background:#fbeceb} .ad-legend2 .sw.m3{background:#f0aeac}

/* radar */
.ad-brands{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:6px;scrollbar-width:thin}
.ad-brand{flex:none;border:0;background:var(--card);box-shadow:var(--lift);border-radius:16px;padding:10px 14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;font:inherit;color:inherit;transition:transform .2s var(--spring)}
.ad-brand b{font-weight:500;font-size:13.5px;white-space:nowrap}
.ad-brand small{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.ad-brand:hover{transform:translateY(-2px)}
.ad-brand[aria-pressed="true"]{background:var(--ink);color:#fff}
.ad-brand[aria-pressed="true"] small{color:rgba(255,255,255,.7)}

/* history */
.ad-hist{display:grid;gap:8px}
.ad-hist>h2{margin-bottom:4px}
.ad-h2b{margin-top:18px}
.ad-moments{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.ad-moments>.card+.card{margin-top:0}
.ad-moment{display:flex;gap:12px;padding:14px 16px}
.ad-moment .n{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font:500 11px var(--mono);color:#fff;background:var(--ink)}
.ad-moment.t-up .n{background:var(--c-good-t)} .ad-moment.t-down .n{background:var(--c-bad)} .ad-moment.t-flag .n{background:#c98500}
.ad-moment small{display:block;font:400 11px var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.ad-moment b{display:block;font-weight:500;font-size:14px;margin:2px 0}
.ad-tbl{width:100%;border-collapse:collapse;font-size:13px}
.ad-tbl th{font:400 10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);text-align:right;padding:6px 8px;border-bottom:1px solid var(--line)}
.ad-tbl th:first-child,.ad-tbl td:first-child{text-align:left}
.ad-tbl td{padding:8px;border-bottom:1px solid var(--rl);text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ad-tbl td:first-child{font-family:var(--font);letter-spacing:0}
.ad-tbl td b{font-weight:500}
.ad-past{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--rl);text-decoration:none;color:inherit;font-size:13px}
.ad-past:first-of-type{border-top:0;padding-top:0}
.ad-past .mono{font-size:12px;color:var(--ink-3);flex:none;width:150px}
.ad-past .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-past:hover .grow{text-decoration:underline;text-underline-offset:3px}

/* settings */
.ad-connl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ad-cn{display:flex;gap:10px;align-items:flex-start;background:var(--fill);border-radius:14px;padding:10px 12px}
.ad-cn i{width:9px;height:9px;border-radius:50%;background:var(--c-warn);flex:none;margin-top:6px}
.ad-cn.on i{background:var(--c-good)}
.ad-cn b{display:block;font-weight:500;font-size:13.5px}
.ad-cn small{display:block;font-size:12px;color:var(--ink-3)}
.ad-access{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ad-bl{display:grid;gap:2px;max-height:220px;overflow:auto}
.ad-br{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--rl)}
.ad-br .grow{min-width:0;display:flex;flex-direction:column}
.ad-br b{font-weight:500;font-size:13.5px}

@media (max-width:1100px){
  .ad-two,.ad-two.even{grid-template-columns:minmax(0,1fr)}
  .ad-detail{grid-template-columns:minmax(0,1fr)}
  .ad-left{position:static;grid-template-columns:minmax(200px,280px) minmax(0,1fr);align-items:start}
  .ad-left>.ad-pic{grid-row:span 3}
}
@media (max-width:760px){
  .ad-tabs{width:100%;margin-bottom:16px}
  .ad-tabs button{padding:0 11px}
  .ad-tabs button .ico{display:none}
  .ad-left{grid-template-columns:minmax(0,1fr)}
  .ad-left>.ad-pic{grid-row:auto;max-width:360px;width:100%;justify-self:center}
  .ad-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ad-wall .ad-ms b{font-size:13.5px}
  .ad-wall .ad-tb{padding:10px 11px 12px}
  .ad-ideas,.ad-grid3,.ad-moments{grid-template-columns:minmax(0,1fr)}
  .ad-strip{grid-auto-columns:minmax(176px,200px)}
  .ad-act-pics{display:none}
  .ad-connl,.ad-access{grid-template-columns:minmax(0,1fr)}
  .ad-q{max-width:none;flex-basis:100%}
  .ad-past .mono{width:auto}
  .ad-at{grid-template-columns:minmax(150px,1fr) repeat(4,minmax(84px,1fr)) minmax(80px,.8fr)}
}
