/* Wave 9, the roster filters Katie asked for: paid or barter and the month
   added as pills next to the operators pill, the Added line on each row,
   and the "Added this month" line over the analytics table. Loads after
   every earlier wave file (alphabetical), so equal specificity here wins.
   Tokens from hub.css and wave5-tokens.css. */

/* The three selects as one group. On a laptop they sit in the filter bar's
   flow like the operators pill always did; the group only exists so the
   phone rule below can put them on one shared row. */
.filter-selects {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.filter-selects .input-pill {
  min-width: 0;
}

/* When she came in, under her handle, in the same quiet size. */
.person-added {
  font-size: 12px;
  margin-top: 1px;
}

/* The count line over the analytics creators table sits at the far end,
   after the heading and its chip. */
.analytics-added {
  margin-left: auto;
}

@media (max-width: 760px) {
  /* The three pills share one row, one size down, the chevron pulled in.
     A native select takes its width from its longest option, so equal
     thirds cut "Paid and barter" to an ellipsis; the row is split by how
     long each label is instead. The selector matches the chevron rule in
     hub.css (select.input.input-sm) so the padding here wins. */
  .filter-selects {
    width: 100%;
    flex-wrap: nowrap;
    gap: 4px;
  }

  .filter-selects select.input.input-pill {
    flex: 1 1 0;
    width: auto;
    font-size: 12px;
    padding-left: 8px;
    padding-right: 20px;
    background-position: right 6px center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Same specificity as the rule above plus the name, or its flex shorthand
     would reset these. */
  .filter-selects select.input.input-pill[name="assigned_to_id"] {
    flex-grow: 1.05;
  }

  .filter-selects select.input.input-pill[name="type"] {
    flex-grow: 1.25;
  }

  .filter-selects select.input.input-pill[name="added"] {
    flex-grow: .9;
  }

  /* Four pills once the operator one shows (managers and admins) do not fit
     one row on a phone, so they split two by two. */
  .filter-selects:has(> select:nth-of-type(4)) {
    flex-wrap: wrap;
  }

  .filter-selects:has(> select:nth-of-type(4)) select.input.input-pill {
    flex: 1 1 calc(50% - 2px);
  }

  /* Five views in the Who control since the preferred list joined (the
     stage views and Preferred). One size down they fit a 390px screen;
     on anything narrower the control scrolls sideways rather than cutting
     the last pill in half. */
  .filter-bar .segments[aria-label="Who"] {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filter-bar .segments[aria-label="Who"] .segment {
    padding: 7px 8px;
    font-size: 12px;
  }
}

/* Denise's preferred list. The star is the same mark everywhere: filled
   when she is on the list, outlined when she is not. A filled lucide star
   is the outline with its own colour poured in. */
.icon.is-filled {
  fill: currentColor;
}

/* By her name on the roster row: a warm star, no border, so the row stays
   a name and a star rather than a name and a badge. */
.preferred-mark {
  display: inline-flex;
  align-items: center;
  color: var(--warn-ink);
}

/* The toggle on her page and under a cut in review. Shaped like the chips
   next to it; the pressed state is the filled star and a warm tint. */
.preferred-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.preferred-toggle:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}

.preferred-toggle.is-on {
  background: var(--warn-soft);
  border-color: rgba(201, 138, 43, .4);
  color: var(--warn-ink);
}

.preferred-toggle.is-static {
  cursor: default;
}

/* The scripts pane when her script is being swapped: one warm line over
   the candidates saying what Send does now. */
.decision-swap {
  margin: var(--s2) 0 var(--s3);
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--warn-soft);
  color: var(--warn-ink);
  font-size: 13px;
}

/* Download all: one zip of every file she sent (Katie, 29 October 2026). */
.download-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.download-all .page-sub {
  margin-inline-start: 2px;
}