/* css/channel-chips.css — the row of destinations (js/channel-chips.js).
 *
 * ⚠️ THIS ONE *DOES* USE OUR DESIGN TOKENS, unlike its neighbours
 * facebook-preview.css and social-preview.css. Those two are facsimiles of
 * somebody else's product and deliberately hard-code that product's greys. This
 * is OUR control, on OUR screen, so it is app-shell tokens throughout and a raw
 * hex here would be the mistake. The only literal colours below are the six
 * brand squares, which are each platform's own — a Facebook chip in our purple
 * is a chip nobody recognises at a glance.
 *
 * ⚠️ EVERYTHING HERE IS `.cch-*` AND NOTHING IN HERE STYLES A `.sc-*`, `.cc-*`
 * OR `.gs-*` CLASS. The row mounts inside three different surfaces (A7), and
 * reaching into any of them from here is how one surface starts quietly
 * restyling another — the .cc-* / .cpg-* collision of 2026-08-07 is the
 * recorded precedent.
 *
 * ⚠️ AND NOTHING HERE FIGHTS `.cc-page .btn`. That selector is (0,2,0) and has
 * beaten a bare class four times in this project. The chips are NOT .btn; they
 * are their own `.cch` element, so there is nothing to fight.
 */

.cch-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
/* One wrapper per chip so the off switch can sit OVER the chip's right padding
   while staying its sibling in the DOM — see the note in channel-chips.js. */
.cch-wrap { position: relative; display: inline-flex; }
/* Room for the × on the open chip, and only on the open chip: reserving it on
   every chip would make the whole row jump each time one is opened. */
.cch-wrap[data-open="1"] .cch { padding-right: 32px; }

/* ── The chip ────────────────────────────────────────────────────────────── */
.cch {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font: 14px/1 inherit; cursor: pointer;
  /* ⚠️ 40px, not "whatever the padding gives". This row is thumb-operated on a
     390px screen and a 32px chip is a mis-tap waiting to happen. */
  min-height: var(--rk-touch-target, 40px);
  transition: border-color 120ms, background 120ms, color 120ms;
}
.cch:hover { border-color: var(--accent); }
.cch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── The four states. One attribute, so a chip can never be two of them ──── */
.cch[data-state="on-not-read"],
.cch[data-state="read"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--text);
}
.cch[data-state="off"] { opacity: .82; }
/* Dashed, not hidden. A locked chip SELLS — see the note in channel-chips.js. */
.cch[data-state="locked"] {
  border-style: dashed; border-color: var(--border-strong);
  background: var(--surface-2); color: var(--text-3);
}
/* The open chip. A ring rather than another fill, so "open" reads as separate
   from "on" — a chip can be on without being the one you are looking at. */
.cch[aria-current="true"] { box-shadow: 0 0 0 2px var(--accent); }

.cch-label { white-space: nowrap; }

/* ── The state marker ────────────────────────────────────────────────────── */
.cch-st { font-size: 12px; min-width: 11px; text-align: center; line-height: 1; }
.cch-st-tick { color: var(--good); font-weight: 700; }
.cch-st-dot { color: var(--warn); font-weight: 700; font-size: 15px; }
.cch-st-lock {
  color: var(--accent); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; min-width: 0;
}

/* ⚠️ THE MARKERS ARE COLOUR AND SHAPE, AND NEITHER IS A LABEL. A green tick and
   an amber dot are indistinguishable to a screen reader and to a good number of
   people looking straight at them, so every chip also carries its state in
   words. Visually hidden, not display:none — display:none is not read out. */
.cch-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── The off switch, on the open chip only ───────────────────────────────── */
.cch-off {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--text-3); font-size: 17px; line-height: 1; cursor: pointer;
}
.cch-off:hover { background: var(--surface-3); color: var(--text); }
.cch-off:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── The brand squares ───────────────────────────────────────────────────
   ⚠️ LETTERS, NOT LOGOS, AND THAT IS DELIBERATE. We are not licensed to
   reproduce these companies' marks, and a redrawn logo in the wrong weight
   looks worse than an honest initial. The COLOURS are each platform's own,
   because that is what makes the row scannable at a glance. */
.cch-mark {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 5px; flex: 0 0 18px;
  font-size: 10px; font-weight: 700; color: #fff; line-height: 1;
}
.cch-mark-community       { background: var(--accent); }
.cch-mark-community_email { background: var(--text-2); }
.cch-mark-facebook        { background: #1877f2; }
.cch-mark-instagram       { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.cch-mark-linkedin        { background: #0a66c2; font-size: 9px; }
.cch-mark-x               { background: #0f1419; }

@media (max-width: 500px) {
  /* The row wraps rather than scrolls: a horizontally scrolling chip row hides
     destinations off-screen, and a destination the coach cannot see is one they
     cannot tell is switched on. */
  .cch-row { gap: 6px; }
  .cch { padding: 7px 10px; font-size: 13px; gap: 6px; }
  .cch-label { white-space: normal; }
  .cch-wrap[data-open="1"] .cch { padding-right: 30px; }

  /* ⚠️ THE WORD "UPGRADE" COMES OFF ON A PHONE, AND THE SELL DOES NOT. Measured
     at 390: four locked chips each carrying the word wrapped one per line and
     the row took FIVE lines of a composer sheet that is already short on
     height. The dashed border, the grey and the padlock still read as locked at
     a glance; the actual selling happens where it works — in the panel, which
     shows the copy Maya would have written. */
  .cch-st-lock { font-size: 0; }
  .cch-st-lock::before { content: '🔒'; font-size: 11px; filter: grayscale(1); }
}

/* ── A5 · the stale-on-edit question ─────────────────────────────────────
   ⚠️ IT ASKS, IT DOES NOT ACT. Alex, 2026-09-02: *"It definitely should not
   happen silently ever really unless it's something that doesn't touch any
   experience of a tenant or their audience."* Rewriting five versions because a
   typo was fixed in one is exactly a silent change to what an audience gets, so
   neither button is pre-selected and neither fires on its own.

   Styled as a question rather than as a warning: nothing has gone wrong, the
   coach has simply made a change with a consequence worth naming. Red here
   would teach them to dread editing. */
.cch-stale {
  margin-top: 10px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-2);
}
.cch-stale-q { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--text); }
.cch-stale-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* ⚠️ NOT `.btn` — see the header note. `.cc-page .btn` is (0,2,0) and has beaten
   a bare class four times in this project; these carry their own look so there
   is nothing to fight. */
.cch-stale-yes, .cch-stale-no {
  min-height: var(--rk-touch-target, 40px);
  padding: 9px 15px; border-radius: 9px; font: 600 13px/1 inherit; cursor: pointer;
}
.cch-stale-yes {
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
}
.cch-stale-no {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
}
.cch-stale-yes:focus-visible, .cch-stale-no:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── A6 · the locked panel ───────────────────────────────────────────────
   ⚠️ IT SELLS. The copy Maya would have written is shown, greyed, because a
   locked chip that hid its version would be a feature nobody knows to want.
   Greyed enough to read as unavailable, legible enough to be worth wanting. */
.cch-locked {
  margin-top: 10px; padding: 14px; border-radius: 12px;
  border: 1px dashed var(--border-strong); background: var(--surface-2);
}
.cch-locked-why { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--text); }
.cch-locked-lead { margin: 0 0 8px; font-size: 12.5px; color: var(--text-3); }
.cch-locked-copy {
  margin: 0 0 14px; padding: 12px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-3); font-size: 13px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.cch-locked-cta {
  min-height: var(--rk-touch-target, 40px);
  padding: 10px 18px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: 600 13px/1 inherit;
}
.cch-locked-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* No dead button — see the note in channel-chips.js. */
.cch-locked-cta-missing { margin: 0; font-size: 12.5px; color: var(--text-3); }

/* ── The setup state, and the two markers ────────────────────────────────
   ⚠️ NOT RED, AND THAT IS A PLATFORM RULE RATHER THAN A TASTE. Red here means
   "you can act on this now" (CC-5), and an unconnected channel is a fact about
   the account, not a job waiting in the Control Centre sense. Carried over from
   schedule-composer.js's kind row along with the state itself. */
.cch[data-state="setup"] {
  border-style: solid; border-color: var(--border-strong);
  background: var(--surface); color: var(--text-2);
}
/* A chevron, not a dot: the unread marker IS a dot, and at 390px two amber dots
   on adjacent chips read as one state. The chevron says "this takes you
   somewhere", which is what pressing it does. */
.cch-st-setup { color: var(--text-3); font-size: 15px; font-weight: 700; }

/* ⚠️ ALREADY ON THE CALENDAR — A CALENDAR MARK, NOT A SECOND TICK. It shipped
   as ✓, which is what the READ marker is, so a chip that was both read and
   already scheduled drew two identical green ticks and neither meant anything.
   Found at 390px. Muted rather than green, and before the label, because it is
   a fact about the DAY rather than about this post. */
.cch-done { display: inline-flex; color: var(--text-3); }

/* ⚠️ AN UNFINISHED DRAFT — A RING, NOT A FILLED DOT, FOR THE SAME REASON. The
   unread marker is a filled amber dot; this shipped as one too, so a chip that
   was unread AND holding a draft drew "• •" and read as one smudge. Hollow says
   "started, not finished", which is what it is. */
.cch-draft {
  width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box;
  background: transparent; border: 2px solid var(--warn); flex: 0 0 8px;
}