/* screens/ads.css, „რეკლამა“. Prefix .ad- ; the shared components
   (.card .btn .pill .chip .field .toggle .seg .empty .modal .menu .hint)
   come from shell.css and are never redefined here.
   Tokens only: every colour, size and radius below is a token from
   tokens.css, there is no raw px font size and no new colour. */

/* .ad-top retired: the lane tabs of #/marketing are .ps-sub, one strip. */
.ad-host{display:block}
.ad-lab{font-size:var(--fs-label);font-weight:700;color:var(--muted-2);letter-spacing:.06em;margin-bottom:var(--sp-8)}
.ad-loading{margin:var(--sp-20) 0;font-size:var(--fs-sm);color:var(--muted)}
.ad-fail{margin:var(--sp-20) 0;display:flex;gap:var(--sp-12);align-items:center;flex-wrap:wrap}

/* ── locked: the ads line is off ─────────────────────────────────────────── */
.ad-lock{padding:var(--sp-24);display:flex;flex-direction:column;gap:var(--sp-12);align-items:flex-start;max-width:640px}
.ad-lock__t{margin:0;font-size:var(--fs-2xl);font-weight:700;line-height:var(--lh-tight);color:var(--ink)}
.ad-lock__s{margin:0;font-size:var(--fs-row);line-height:var(--lh-body);color:var(--muted)}
.ad-lock__price{display:flex;align-items:baseline;gap:var(--sp-6)}
.ad-lock__p{font-size:var(--fs-3xl);font-weight:700;color:var(--ink);line-height:1}
.ad-lock__pm{font-size:var(--fs-sm);font-weight:600;color:var(--muted-2)}
.ad-lock__l{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--sp-8)}
.ad-lock__l li{position:relative;padding-left:var(--sp-20);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink)}
.ad-lock__l li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:var(--r-circle);background:var(--live)}
.ad-lock__need,.ad-lock__trial,.ad-lock__spend{margin:0}
.ad-lock__acts{display:flex;gap:var(--sp-8);flex-wrap:wrap;margin-top:var(--sp-4)}

/* ── the entitlement strip (trial days, creatives quota, paused) ─────────── */
.ad-strip{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap;margin:0 0 var(--sp-14);
  padding:var(--sp-8) var(--sp-12);border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line)}
.ad-strip__t{font-size:var(--fs-hint);font-weight:600;color:var(--muted-2)}
.ad-strip__n{margin-left:auto;font-size:var(--fs-meta);font-weight:700;color:var(--ink)}
.ad-strip--warn{background:var(--warn-soft);border-color:var(--warn-line)}
.ad-strip--warn .ad-strip__t{color:var(--warn)}

/* ── the ad account step ─────────────────────────────────────────────────── */
.ad-acc{padding:var(--sp-20);margin-bottom:var(--sp-14);display:flex;flex-direction:column;gap:var(--sp-12)}
.ad-acc__t{margin:0;font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.ad-acc__s{margin:0}
.ad-acc__row{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap}
.ad-acc__id{font-size:var(--fs-sm);font-weight:700;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.ad-acc__nm{font-size:var(--fs-hint);color:var(--muted-2);min-width:0}
.ad-acc__row .btn{margin-left:auto}
.ad-acc__load{margin:0}

/* the one-button connect: ad accounts hang off the person, not off the page */
.ad-acc__go{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-10)}
.ad-acc__fb{display:inline-flex;align-items:center;gap:var(--sp-8)}
.ad-acc__fbm{display:inline-flex;width:18px;height:18px;flex:none}
.ad-acc__fbm svg{width:100%;height:100%;display:block}
.ad-acc__why{margin:0;max-width:56ch}

.ad-acc__pick{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-12)}
.ad-acc__list{display:flex;flex-direction:column;gap:var(--sp-8);align-self:stretch}
.ad-acc__opt{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) var(--sp-12);
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--card);transition:border-color var(--t);flex-wrap:wrap}
.ad-acc__opt:hover{border-color:var(--ink)}
.ad-acc__opt b{font-size:var(--fs-sm);font-weight:700;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.ad-acc__opt span.num{font-size:var(--fs-meta);color:var(--muted-2);flex:none}
.ad-acc__opt .btn{margin-left:auto;flex:none}
.ad-acc__uns{flex:none}

/* „გაფართოებული“: the act_ id field, for a portfolio the token cannot list */
.ad-acc__advw{display:flex;flex-direction:column;gap:var(--sp-10);align-items:flex-start}
.ad-acc__adv{appearance:none;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:var(--fs-hint);font-weight:600;color:var(--muted-2);text-decoration:underline;
  text-underline-offset:3px;transition:color var(--t)}
.ad-acc__adv:hover{color:var(--ink)}
.ad-acc__manual{display:flex;gap:var(--sp-8);align-items:flex-end;flex-wrap:wrap;align-self:stretch}
.ad-acc__manual .field{flex:1 1 220px;min-width:0}
.ad-acc__err{margin:0;font-size:var(--fs-hint);font-weight:600;color:var(--danger)}
.ad-acc__acts{display:flex;gap:var(--sp-8);flex-wrap:wrap}

@media (max-width:560px){
  .ad-acc__opt .btn{margin-left:0;width:100%}
  .ad-acc__opt span.num{margin-left:auto}
}

/* ── the caps row ────────────────────────────────────────────────────────── */
.ad-caps{padding:var(--sp-20);margin-bottom:var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-12)}
.ad-caps__t{margin:0;font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.ad-caps__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:var(--sp-16);align-items:end}
.ad-caps__grid .btn{align-self:end}
.ad-caps__spent{display:flex;gap:var(--sp-20);flex-wrap:wrap}
.ad-caps__one{min-width:0;flex:1 1 180px}
.ad-caps__ol{font-size:var(--fs-meta);font-weight:700;color:var(--muted-2);letter-spacing:.05em}
.ad-caps__ov{margin-top:var(--sp-4);font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.ad-caps__ov small{font-size:var(--fs-hint);font-weight:600;color:var(--muted-2)}
.ad-meter{margin-top:var(--sp-6);height:6px;border-radius:var(--r-pill);background:var(--tint-1);overflow:hidden}
.ad-meter i{display:block;height:100%;background:var(--ink);border-radius:var(--r-pill)}
.ad-meter--full i{background:var(--warn-bold)}
.ad-caps__note{margin:0}

/* ── the campaign board ──────────────────────────────────────────────────── */
.ad-board{display:flex;flex-direction:column;gap:var(--sp-14)}
.ad-c{padding:var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-12)}
.ad-c__top{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
.ad-c__name{margin:0;font-size:var(--fs-lg);font-weight:700;line-height:var(--lh-tight);color:var(--ink);
  min-width:0;overflow-wrap:anywhere}
.ad-c__st{margin-left:auto;flex:none}
.ad-c__mx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-12)}
.ad-c__m{min-width:0;padding:var(--sp-10) var(--sp-12);border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line)}
.ad-c__ml{font-size:var(--fs-meta);font-weight:700;color:var(--muted-2);letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-c__mv{margin-top:var(--sp-4);font-size:var(--fs-lg);font-weight:700;color:var(--ink);line-height:1.15;overflow-wrap:anywhere}
.ad-c__aud{margin:0;font-size:var(--fs-hint);color:var(--muted-2);line-height:var(--lh-body)}
.ad-c__acts{display:flex;gap:var(--sp-8);flex-wrap:wrap}

/* the spend by day bars: plain DOM, no canvas, no library */
.ad-spark{padding:var(--sp-12);border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line)}
.ad-spark__in{min-width:0}
.ad-spark__plot{display:flex;align-items:flex-end;gap:4px;height:64px;margin:0;padding:0;list-style:none}
/* a nine day campaign must not paint nine black slabs across the card: the
   bars keep a real bar width and the row simply ends where the days end */
.ad-spark__col{flex:1 1 0;min-width:0;max-width:26px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.ad-spark__b{display:block;width:100%;min-height:2px;border-radius:var(--r-xxs);background:var(--ink)}
/* the axis spans the CARD, never the bar row: two dates squeezed into a 60px
   box ran together into one unreadable number on a two day campaign */
.ad-spark__ax{display:flex;justify-content:space-between;gap:var(--sp-8);margin-top:var(--sp-6);
  font-size:var(--fs-meta);font-weight:600;color:var(--muted-2)}
.ad-spark__ax--one{justify-content:flex-start}

/* one ad inside a campaign */
.ad-ads{display:flex;flex-direction:column;gap:var(--sp-8)}
.ad-ad{display:flex;gap:var(--sp-12);align-items:flex-start;min-width:0;padding:var(--sp-10);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.ad-ad__th{width:56px;height:56px;flex:none;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--card-2)}
.ad-ad__body{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--sp-4)}
.ad-ad__h{font-size:var(--fs-sm);font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.ad-ad__p{font-size:var(--fs-hint);color:var(--muted);line-height:var(--lh-body);overflow-wrap:anywhere}
.ad-ad__mx{display:flex;gap:var(--sp-12);flex-wrap:wrap;font-size:var(--fs-meta);color:var(--muted-2)}
.ad-ad__st{flex:none}

/* the analyst notes */
.ad-an{padding:var(--sp-12);border-radius:var(--r-md);background:var(--card-2);border:1px solid var(--line)}
.ad-an__sum{margin:0 0 var(--sp-8);font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink);overflow-wrap:anywhere}
.ad-an__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-8)}
.ad-an__l li{display:flex;flex-direction:column;gap:2px;min-width:0}
.ad-an__n{font-size:var(--fs-hint);color:var(--ink);line-height:var(--lh-body);overflow-wrap:anywhere}
.ad-an__e{font-size:var(--fs-meta);color:var(--muted-2);overflow-wrap:anywhere}
.ad-an__at{margin:var(--sp-8) 0 0;font-size:var(--fs-meta);color:var(--muted-2)}

/* the activation gates and Meta's own complaints: the whole red list, in the
   engine's own Georgian, never one error at a time */
.ad-gate{padding:var(--sp-10) var(--sp-12);border-radius:var(--r-md);
  background:var(--warn-soft);border:1px solid var(--warn-line)}
.ad-gate .ad-lab{color:var(--warn);margin-bottom:var(--sp-6)}
.ad-gate ul{margin:0;padding-left:var(--sp-16);display:flex;flex-direction:column;gap:4px}
.ad-gate li{font-size:var(--fs-hint);color:var(--warn);line-height:var(--lh-body);overflow-wrap:anywhere}
.ad-gate--err{background:var(--danger-soft);border-color:var(--danger-line)}
.ad-gate--err .ad-lab,.ad-gate--err li{color:var(--danger)}
.ad-an__prop{margin:var(--sp-8) 0 0}
.ad-sync{margin:var(--sp-12) 0 0}

/* ── the new campaign modal ──────────────────────────────────────────────── */
.ad-n__row{margin-top:var(--sp-14)}
.ad-n__two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:start}
.ad-n__age{display:flex;gap:var(--sp-8);align-items:center}
.ad-n__age input{width:80px}
.ad-n__age span{font-size:var(--fs-hint);color:var(--muted-2)}
.ad-n__pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp-8);
  max-height:240px;overflow-y:auto}
/* the picker is a chooser, not a gallery: short thumbs keep the whole
   modal, actions included, on one screen */
.ad-n__pick .ad-cr__th{height:72px;aspect-ratio:auto}
.ad-n__pick .ad-cr__pickrow{padding:var(--sp-8)}
.ad-n__none{margin:var(--sp-8) 0 0}
.ad-n__err{margin:var(--sp-14) 0 0;font-size:var(--fs-hint);font-weight:600;color:var(--danger)}
.ad-n__warn{margin:var(--sp-10) 0 0}

/* ── creatives ───────────────────────────────────────────────────────────── */
.ad-gen{padding:var(--sp-20);margin-bottom:var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-12)}
.ad-gen__t{margin:0;font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.ad-gen__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16);align-items:start}
.ad-gen__acts{display:flex;gap:var(--sp-8);flex-wrap:wrap;align-items:center}
.ad-gen__probs{margin-top:var(--sp-4)}
.ad-gen__chips{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.ad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sp-12)}
.ad-cr{padding:0;overflow:hidden;display:flex;flex-direction:column}
.ad-cr__th{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--card-2);
  border-bottom:1px solid var(--line)}
.ad-cr__b{padding:var(--sp-12);display:flex;flex-direction:column;gap:var(--sp-6);flex:1 1 auto;min-width:0}
.ad-cr__h{font-size:var(--fs-sm);font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.ad-cr__p{font-size:var(--fs-hint);color:var(--muted);line-height:var(--lh-body);overflow-wrap:anywhere}
.ad-cr__flags{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.ad-cr__flags li{font-size:var(--fs-meta);color:var(--warn);line-height:var(--lh-body);overflow-wrap:anywhere}
.ad-cr__meta{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;margin-top:auto}
.ad-cr__sz{font-size:var(--fs-micro);font-weight:700;color:var(--muted-2);background:var(--tint-1);
  border-radius:var(--r-pill);padding:2px 8px}
.ad-cr__acts{display:flex;gap:var(--sp-6);flex-wrap:wrap;padding:0 var(--sp-12) var(--sp-12)}
.ad-cr--retired .ad-cr__th{opacity:.45}
.ad-cr--pick{cursor:pointer}
.ad-cr__pickrow{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12);
  border-top:1px solid var(--line)}
.ad-cr__pickrow input{width:16px;height:16px;flex:none;accent-color:var(--ink);cursor:pointer}
.ad-cr__pickrow span{font-size:var(--fs-hint);font-weight:600;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-cr--on{border-color:var(--ink);box-shadow:var(--e2)}

/* ── narrow: the phone ───────────────────────────────────────────────────── */
@media (max-width:900px){
  .ad-c__mx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ad-caps__grid{grid-template-columns:1fr 1fr}
  .ad-caps__grid .btn{grid-column:1 / -1}
}
@media (max-width:720px){
  .ad-lock{padding:var(--sp-16)}
  .ad-lock__acts .btn{flex:1 1 46%}
  .ad-acc,.ad-caps,.ad-gen{padding:var(--sp-16)}
  .ad-caps__grid{grid-template-columns:1fr}
  .ad-n__two,.ad-gen__grid{grid-template-columns:1fr}
  .ad-c__st{margin-left:0}
  .ad-acc__row .btn{margin-left:0}
  .ad-c__acts .btn{flex:1 1 46%}
  .ad-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* ── the manual lane (trust ladder, 2026-09-06) ─────────────────────────────
   Shown instead of campaign creation while the ladder holds the API path
   shut: two downloads and the way back in. The trust card and the warm-up
   checklist above it live in screens/trust.css. */
.ad-man{
  padding:var(--sp-16);
  display:flex;flex-direction:column;gap:var(--sp-12);
  margin:0 0 var(--sp-grid);
  border-color:var(--line-2);
}
.ad-man__t{margin:0;font-size:var(--fs-lg);font-weight:700;color:var(--ink);line-height:var(--lh-tight)}
.ad-man__b{margin:0;font-size:var(--fs-sm);font-weight:500;color:var(--muted);line-height:var(--lh-body)}
.ad-man__rows{display:flex;flex-direction:column;gap:var(--sp-10)}
.ad-man__r{
  display:flex;align-items:flex-start;gap:var(--sp-12);flex-wrap:wrap;
  padding:var(--sp-12);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card-2);
}
.ad-man__x{flex:1;min-width:190px;display:flex;flex-direction:column;gap:var(--sp-2)}
.ad-man__x b{font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.ad-man__x span{font-size:var(--fs-hint);font-weight:500;color:var(--muted-2);line-height:var(--lh-body)}
.ad-man__a{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-8);flex:none;max-width:100%}
.ad-man__a .hint{text-align:right;max-width:34ch}
.ad-man__c{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap;justify-content:flex-end}
.ad-man__cn{font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.ad-man__cb{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}

@media (max-width: 560px){
  .ad-man{padding:var(--sp-12)}
  .ad-man__a{align-items:stretch;width:100%}
  .ad-man__a .hint{text-align:left;max-width:none}
  .ad-man__c{justify-content:flex-start}
}