/*
 * The audience section on an ad's detail page (#622): the age × gender table,
 * the country split, the region table, and the targeting the advertiser asked
 * for.
 *
 * Filament loads only its own compiled bundle and does NOT scan our Blade
 * views, so Tailwind utilities written there produce no CSS. These are explicit
 * `.ssmt-*` classes, registered through FilamentAsset — same arrangement as
 * engagement-history.css, and the same reason.
 *
 * COLOUR RULE (#124): a hex literal may only appear where it DEFINES a custom
 * property. Everything here comes from a design-system token, and a
 * `CssTokensTest` fails the build on a stray hex.
 *
 * ⚠️ No fixed `height` / `min-height` / `line-height` in px anywhere in here.
 * A box frozen in pixels cannot absorb larger text and breaks WCAG 1.4.4
 * (resize to 200%) and 1.4.12 (text spacing) on the spot. Every size below is
 * in rem, em or a percentage.
 */

.ssmt-audience {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.ssmt-audience__panel {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ssmt-audience__title {
    font-family: var(--tew-font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--tew-color-text);
    margin: 0;
}

/* The sentence that says WHAT KIND of number the table under it holds. It is
   the load-bearing text of this whole section, not a caption: three of the
   four platforms publish something that looks like reach and is not. */
.ssmt-audience__note {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--tew-color-text-subtle);
    max-width: 68ch;
    text-wrap: pretty;
    margin: 0 0 0.5rem;
}

/* A narrow column must scroll the table rather than crush it: `nowrap` on the
   cells keeps the figures readable, and the box scrolls under them. */
.ssmt-audience__scroll {
    overflow-x: auto;
    max-width: 100%;
}

.ssmt-audience__table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
    color: var(--tew-color-text);
}

.ssmt-audience__table caption {
    text-align: start;
    font-size: 0.8rem;
    color: var(--tew-color-text-subtle);
    padding-bottom: 0.5rem;
}

.ssmt-audience__table th,
.ssmt-audience__table td {
    text-align: end;
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--tew-color-border);
    white-space: nowrap;
    vertical-align: top;
}

.ssmt-audience__table tbody th[scope='row'],
.ssmt-audience__table th:first-child,
.ssmt-audience__table td:first-child {
    text-align: start;
    font-weight: 600;
}

.ssmt-audience__table thead th {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tew-color-text-subtle);
    font-weight: 600;
    border-bottom-color: var(--tew-color-border-strong);
}

.ssmt-audience__table tbody tr:last-child td,
.ssmt-audience__table tbody tr:last-child th {
    border-bottom: 0;
}

.ssmt-audience__table tfoot td {
    border-bottom: 0;
    text-align: start;
    font-size: 0.78rem;
    color: var(--tew-color-text-subtle);
    white-space: normal;
}

/* ------------------------------------------------------------------
   The cells

   The bar sits BEHIND the number, not beside it: a separate bar column
   costs a third of the width on a table that already carries three
   genders plus a total, and on a phone that width is the difference
   between reading the figures and scrolling for them.
   ------------------------------------------------------------------ */

.ssmt-audience__cell {
    position: relative;
    font-family: var(--tew-font-mono);
}

.ssmt-audience__value {
    position: relative;
}

.ssmt-audience__total {
    font-family: var(--tew-font-mono);
    font-weight: 600;
}

.ssmt-audience__empty {
    color: var(--tew-color-text-subtle);
}

/* ⚠️ Decoration, and marked `aria-hidden` in the template. The figure it
   stands for is the text in the same cell, so nothing is lost when the bar
   is not rendered — which is exactly what happens on a bucketed platform.

   The width arrives as `--ssmt-bar`, an inline custom property: the value is
   per-row data, and Tailwind's JIT never sees a Blade view anyway. */
.ssmt-audience__bar {
    position: absolute;
    inset-block: 0.15em;
    inset-inline-end: 0;
    width: var(--ssmt-bar, 0%);
    border-radius: 0.15rem;
    /* Behind the number and light enough to leave it at full contrast: the
       text keeps its 4.5:1 against the surface, not against the bar. */
    opacity: 0.22;
}

.ssmt-audience__bar--male {
    background: var(--tew-chart-1);
}

.ssmt-audience__bar--female {
    background: var(--tew-chart-3);
}

.ssmt-audience__bar--unknown {
    background: var(--tew-color-text-subtle);
}

.ssmt-audience__bar--share {
    background: var(--tew-chart-5);
}

/* ------------------------------------------------------------------
   Surfaces, chips and the targeting facts
   ------------------------------------------------------------------ */

.ssmt-audience__surfaces {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--tew-color-text-subtle);
}

.ssmt-audience__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}

.ssmt-audience__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--tew-color-border);
    font-size: 0.78rem;
}

.ssmt-audience__chip--on {
    border-color: var(--tew-color-border-strong);
    color: var(--tew-color-text);
}

.ssmt-audience__chip--off {
    color: var(--tew-color-text-subtle);
}

/* ⚠️ The on/off word, not a colour. WCAG 1.4.1: colour may not be the only
   carrier of meaning, and here the meaning IS the state — "aimed at 25-34"
   and "not aimed at 25-34" are opposite readings of the same chip. Small and
   quiet, but present in the DOM and read aloud. */
.ssmt-audience__chip-state {
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--tew-color-text-subtle);
}

.ssmt-audience__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 1rem;
    margin: 0.25rem 0 0;
    font-size: 0.84rem;
}

.ssmt-audience__facts dt {
    color: var(--tew-color-text-subtle);
    font-weight: 600;
}

.ssmt-audience__facts dd {
    margin: 0;
    color: var(--tew-color-text);
    /* The LinkedIn location string is a list of 44 provinces on one line. It
       wraps here rather than pushing the panel wide. */
    overflow-wrap: anywhere;
}

/* Below the fold of a narrow column the two-column grid becomes a stack:
   `max-content` on a 44-province value would otherwise reserve a column
   nothing else needs. In `em` so it follows the reader's font size. */
@media (max-width: 34em) {
    .ssmt-audience__facts {
        grid-template-columns: 1fr;
        gap: 0.1rem 0;
    }

    .ssmt-audience__facts dd {
        margin-bottom: 0.5rem;
    }
}