/* 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); cursor: pointer;
  /* ⚠️ SPLIT, NOT SHORTHAND. This was `font: 14px/1 inherit`, which is invalid:
     `inherit` is legal as an ENTIRE property value and never as a component of
     the `font` shorthand, so the browser dropped the size and line-height too and
     the chip took the user-agent button font. Found 2026-09-09 while fixing the
     same line in maya-hq.css, where a textarea came out monospace. */
  font-family: inherit; font-size: 14px; line-height: 1;
  /* ⚠️ 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; }
/* Maya writing this chip's version: three dots that breathe in turn. */
.cch-writing { display: inline-flex; gap: 3px; align-items: center; min-width: 11px; }
.cch-writing i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: cch-breathe 1s infinite ease-in-out; }
.cch-writing i:nth-child(2) { animation-delay: .15s; }
.cch-writing i:nth-child(3) { animation-delay: .3s; }
@keyframes cch-breathe { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cch-writing i { animation: none; opacity: .7; } }
.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 marks ───────────────────────────────────────────────────────────
   ⭐ A NETWORK CHIP WEARS THE NETWORK'S OWN LOGO (Alex, 2026-10-10: "Use the
   proper logos of all the networks on the posting screen"). The marks are the
   networks' official ones (js/channel-chips.js NETWORK MARKS, from each brand's
   own resources via simple-icons, CC0). Their guidelines' shared rule: used as
   published, never redrawn, stretched or animated; in the network's colour or
   plain monochrome; with clear space around it; never smaller than 16px; and
   with the network's name as a word beside it, which every chip has.
   Community and Community email are ours, so they keep their letter squares. */
.cch-mark.cch-logo { background: none; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 0; color: var(--text); }
.cch-logo-svg { width: 18px; height: 18px; display: block; }
.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; }
.cch-mark-youtube         { background: #ff0000; font-size: 9px; }

@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; cursor: pointer;
  /* Same invalid shorthand as .cch above — split so it applies. */
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
}
.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;
  /* Same invalid shorthand as .cch above — split so it applies. */
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
}
.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;
}