/* ================================================================ META ADS
 * What the advertising actually cost and what it brought back.
 *
 * Every rule is os-ads__*. Nothing here redefines an .asgt-* class: the
 * design-system figure, panel, table and badge components are used exactly as
 * they are and only POSITIONED from here. Colours, sizes, radii and spacing
 * are --asgt-* tokens, never literals.
 *
 * Its own file rather than a block in tokens-v2.css, which is being deleted
 * screen by screen; a new screen must not tie its life to that sheet.
 *
 * Logical properties throughout, so dir="rtl" is the whole Arabic change.
 */

.os-ads {
  block-size: 100%;
  overflow-y: auto;
  padding-block: var(--asgt-s-6);
  padding-inline: var(--asgt-s-6);
  background: var(--asgt-canvas);
  color: var(--asgt-text);
  font-family: var(--asgt-font-ui);
}

.os-ads__inner {
  max-inline-size: var(--asgt-content-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--asgt-s-5);
}

.os-ads__head { display: flex; align-items: flex-start; gap: var(--asgt-s-4); flex-wrap: wrap; }
.os-ads__title {
  margin: 0;
  font-size: var(--asgt-t-xl);
  line-height: var(--asgt-lh-tight);
  font-weight: 800;
}
.os-ads__sub {
  margin: var(--asgt-s-1) 0 0;
  font-size: var(--asgt-t-sm);
  color: var(--asgt-text-muted);
  max-inline-size: 70ch;
}
/* When the figures were last refreshed. A number with no age is a number you
   cannot act on, so this is never hidden. */
.os-ads__synced {
  margin-inline-start: auto;
  font-family: var(--asgt-font-data);
  font-size: var(--asgt-t-2xs);
  color: var(--asgt-text-faint);
  text-align: end;
}

/* A grid that POSITIONS .asgt-figure components. The figures themselves are
   untouched design-system parts. */
.os-ads__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--asgt-s-3);
}

/* The second, quieter band: the whole history, under the recent window. */
.os-ads__lifetime {
  display: flex;
  flex-wrap: wrap;
  gap: var(--asgt-s-3) var(--asgt-s-6);
  padding-block: var(--asgt-s-4);
  padding-inline: var(--asgt-s-5);
}

/* Campaign names are long and arrive from Meta unedited. Clamp rather than
   truncate with an ellipsis in the markup, so the full name stays selectable
   and reachable by search. */
.os-ads__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-inline-size: 42ch;
}

/* The limits panel. --info, never the brand magenta: magenta is the primary
   action, and a statement of what the data cannot tell you is not an action. */
.os-ads__limits { font-size: var(--asgt-t-sm); color: var(--asgt-text-muted); }
.os-ads__limits li { margin-block-end: var(--asgt-s-2); }
.os-ads__limits li:last-child { margin-block-end: 0; }

@media (max-width: 720px) {
  .os-ads { padding-inline: var(--asgt-s-4); }
  .os-ads__synced { margin-inline-start: 0; text-align: start; inline-size: 100%; }
}