/* ==========================================================================
   Connect 2026 - Topic filter chips                                     T-16
   --------------------------------------------------------------------------
   The "FILTER BY TOPIC" row on 6 of the 7 designed listings. News is the
   exception - it has no chip row in the design, which may be an omission.

   MEASURED on artboard p2:
     label   "FILTER BY TOPIC" 6.0pt Medium x2.4 = 14px, --cn-ink-muted,
             uppercase and letter-spaced
     chip    27px tall, label 15px white, fully rounded
     gaps    ~9px horizontal, ~12px vertical, wrapping onto two rows

   Fill colours live in topic.css, with the accessibility note.

   MULTI-SELECT. Chips are <button aria-pressed>, not links - selecting one
   filters in place rather than navigating. The filtering behaviour is T-33;
   this file provides the markup contract and the visual states.

   DEPENDS ON: tokens.css, components/topic.css
   ========================================================================== */

/*
   p6: intro ends ~485, the label sits at 496 and the first chip row at 513.2 -
   about 11 above the label and nothing between label and chips. 20 and 12 put
   16 of air in that gap and pushed everything below the row down.
*/
.cn-chips { margin-block: var(--cn-space-3); }

.cn-chips__label {
  margin-bottom: var(--cn-space-1);
  font-size: var(--cn-text-label);
  font-weight: var(--cn-fw-medium);
  letter-spacing: var(--cn-tracking-label);
  text-transform: uppercase;
  color: var(--cn-ink-muted);
}

.cn-chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-3) var(--cn-space-2);
  list-style: none;
}

.cn-chip {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  /*
     Measured across the p2/p6 chip row: "Cyber" is 68.8 wide, "Credit Risk"
     100.5, "AI and Technology (including Fintech)" 311.4 - about 10px of
     padding a side. The row is a fixed 1256 with 14 fixed labels, so chip
     padding decides the row count. It is not a free choice - see the token.
  */
  padding: 0 var(--cn-chip-pad);
  border: 2px solid transparent;
  border-radius: var(--cn-radius-pill);
  font-size: var(--cn-text-chip);
  font-weight: var(--cn-fw-medium);
  line-height: 1.2;
  cursor: pointer;
  transition: opacity var(--cn-dur) var(--cn-ease),
              border-color var(--cn-dur) var(--cn-ease);
}

/* Unselected chips sit back so the selected ones read as active. */
.cn-chips[data-has-selection="true"] .cn-chip[aria-pressed="false"] { opacity: .45; }

.cn-chip:hover { opacity: 1; }

/* Selected state needs to survive the topic fill, so it is an outline rather
   than a colour change - a colour change would fight 14 different fills. */
.cn-chip[aria-pressed="true"] {
  opacity: 1;
  border-color: var(--cn-navy);
}

/* ======================================================== DISCLOSURE ===== */
/*
   T-40 DECISION: on mobile the 14 chips collapse behind a "Filter by topic"
   disclosure. Fourteen chips is roughly four rows on a 375px screen, which is
   most of the viewport before any content appears.

   Built on native <details>/<summary>, so it needs NO JavaScript and degrades
   correctly with JS off. The markup is <details open> - desktop simply hides
   the summary and always shows the list.
*/

/* Desktop and tablet: the disclosure control does not exist. */
.cn-chips__toggle { display: none; }

/*
   Safeguard. A closed <details> hides its content via UA behaviour, not just
   via the summary - so a user who collapses the chips on a phone and then
   rotates or resizes up would find them missing, with no control to reopen
   them because the summary is hidden above 767px.

   This is the ONE place the codebase uses min-width, deliberately, because
   the rule has to be the inverse of the disclosure.
*/
@media (min-width: 768px) {
  .cn-chips > .cn-chips__list { display: flex; }
  .cn-chips > .cn-chips__label { display: block; }
}

/* Never let the browser's default marker through - we draw our own. */
.cn-chips__toggle::-webkit-details-marker { display: none; }
.cn-chips__toggle::marker { content: ""; }

/* =========================================================== RESPONSIVE == */

@media (max-width: 1279px) {
  /* Tablet: wrap freely. Two or three rows is acceptable at this width. */
  .cn-chips__list { gap: var(--cn-space-3) var(--cn-space-2); }
}

@media (max-width: 767px) {
  .cn-chips__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cn-space-3);
    /* 44px tap target - see the T-40 checklist. */
    min-height: 44px;
    padding: var(--cn-space-2) var(--cn-space-4);
    border: 1px solid var(--cn-border);
    border-radius: var(--cn-radius-pill);
    font-size: var(--cn-text-label);
    font-weight: var(--cn-fw-semibold);
    letter-spacing: var(--cn-tracking-label);
    text-transform: uppercase;
    color: var(--cn-ink);
    cursor: pointer;
    list-style: none;
  }

  .cn-chips__toggle::after {
    content: "+";
    font-size: var(--cn-text-card);
    line-height: 1;
    color: var(--cn-cyan);
  }
  .cn-chips[open] .cn-chips__toggle::after { content: "\2212"; }

  /* The label above the row is redundant once the summary carries it. */
  .cn-chips__label { display: none; }

  .cn-chips__list {
    gap: var(--cn-space-2);
    margin-top: var(--cn-space-4);
  }

  /*
     44, not 36. The artboard draws 27px chips and 36 was a compromise between
     that and the touch target - which satisfied neither. These are the primary
     filter control on eight listing screens, and they sit behind the
     disclosure, so the extra height costs nothing until the user opens it.
  */
  .cn-chip {
    min-height: 44px;
    font-size: var(--cn-text-label);
  }
}