/* settings-social.css — Settings → Socials (connecting the accounts), and Socials' own rows.
 *
 * app-shell.css ONLY (CODING-STANDARDS §"UI Kit": rk-* is legacy and must not
 * appear on a new page). Everything here is page LAYOUT over shell tokens; the
 * primitives themselves — .card, .btn, .badge, .empty-block, .callout, .avatar
 * — come from the shell and are not restated.
 *
 * Its own file rather than an addition to app-shell.css because .ss-row is one
 * page's row layout, not a platform primitive. Same precedent as
 * control-centre.css, which the standards name as the worked example.
 */

.ss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-top: 1px solid var(--border-soft);
}
.ss-row:first-of-type { border-top: 0; }

.ss-row-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;              /* lets the name truncate instead of pushing the buttons off */
}

.ss-row-text { min-width: 0; }

.ss-row-name {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Amber rather than red: every one of these states is fixed by one button, and
 * a coach reading red concludes something is broken that they have to
 * understand. */
.ss-row-problem {
  font-size: 13px;
  color: var(--warn-text, var(--text-3));
  margin-top: 2px;
}

.ss-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* The Page avatar, when Meta gave us one. The letter fallback uses the same box
 * so the row height never jumps between the two. */
.ss-row .avatar {
  width: 40px; height: 40px;
  border-radius: 10px;
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3);
  color: var(--text-3);
  font-weight: 600;
  flex-shrink: 0;
}

/* Mobile first (Alex's standing rule): below the shell's small breakpoint the
 * actions drop under the name rather than squeezing it to nothing. */
@media (max-width: 640px) {
  .ss-row { flex-direction: column; align-items: stretch; }
  .ss-row-actions { justify-content: flex-start; }
}

/* ── Marketing → Social: the composer (js/grow-social.js) ──────────────────
 * ⚠️ Unlike facebook-preview.css, this IS our design system — app-shell
 * tokens only. The preview inside it is Facebook's chrome; the surface around
 * it is ours, and mixing the two up in either direction is the mistake.
 * Two columns on desktop (write | preview), stacked on a phone, because on a
 * phone a side-by-side preview is neither.
 */
.gs-writebar { display: flex; justify-content: flex-end; margin-bottom: 14px; }

.gs-composer-body { display: flex; gap: 22px; padding: 18px 22px 22px; align-items: flex-start; }
.gs-col { flex: 1 1 0; min-width: 0; }
.gs-preview-col { flex: 0 1 500px; }

.gs-composer .cw-ta {
  width: 100%; box-sizing: border-box; min-height: 220px; resize: vertical;
  font: inherit; font-size: 15px; line-height: 1.5; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 0 0 12px 12px; border-top: 0;
  background: var(--surface); color: var(--text);
}
.gs-composer .cw-ta:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.gs-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.gs-chip { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.gs-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-chip-rm {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff;
  font-size: 16px; line-height: 1; cursor: pointer;
}

.gs-toolrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.gs-toolrow .tool {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13.5px;
  cursor: pointer; min-height: 40px;
}
.gs-toolrow .tool:hover { background: var(--surface-2); color: var(--text); }

.gs-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.gs-when { flex: 0 1 220px; min-height: 40px; }
.gs-note { margin-top: 10px; font-size: 12.5px; }

@media (max-width: 900px) {
  /* ⚠️ align-items MUST BE RESET WITH THE DIRECTION, AND THIS IS THE SAME TRAP
     control-centre.css already documents for .cc-row. The desktop rule sets
     `align-items: flex-start`, which is right across a row. Once the container
     becomes a COLUMN, that same property governs the CROSS axis — the width —
     and flex-start sizes every child to its MAX-CONTENT.
     Measured at 390px on dev 2026-08-14 with a video attached: .gs-col went to
     758px inside a 390px viewport, dragging the textarea, the toolbar and both
     buttons off the right edge, because the video's filename is long and
     .gs-videochip-name is nowrap. `stretch` is what makes min-width:0 and the
     ellipsis do their jobs. */
  .gs-composer-body { flex-direction: column; padding: 14px 16px 18px; gap: 18px; align-items: stretch; }
  .gs-preview-col { flex: 1 1 auto; width: 100%; }
  .gs-actions { flex-direction: column; align-items: stretch; }
  .gs-when { flex: 1 1 auto; }
}

/* Facebook takes plain text, so the writing box has no toolbar joined to it —
   see the note in grow-social.js's composerHtml(). It gets its own top border
   back, and a quiet line above explaining why there is nothing to click. */
.gs-plain { font-size: 12.5px; color: var(--text-3); margin: 4px 0 8px; line-height: 1.45; }
.gs-composer .cw-ta.gs-ta-plain { border-radius: 12px; border-top: 1px solid var(--border); }

/* Socials' own actions (the guide's door, Write a post), at the right above the area. Its
   menu is the left column since 2026-10-11, so this row carries no tabs. */
.gs-writebar { align-items: center; gap: 12px; }
/* "Hold new comments until I approve them" — the per-Page switch (519).
   It sits under the row's name/sub line rather than in .ss-row-actions,
   because it is a setting the coach reads, not an action they take: the
   sentence below it changes with the state and is the whole point. */
.ss-hide { display: flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer; font-size: 13.5px; }
.ss-hide input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.ss-hide input:disabled { cursor: default; opacity: .6; }
.ss-hide-note { margin-top: 4px; font-size: 12.5px; color: var(--text-3); line-height: 1.45; max-width: 62ch; }
@media (pointer: coarse) {
  /* A 16px checkbox is a 16px target. Give the whole label the height. */
  .ss-hide { min-height: 44px; }
}


/* ============ THE COMMENTS INBOX ============
   Built to the approved artefact "One Social Desk" (2026-09-24), Comments
   screen, and styled with the same tokens it uses (design-tokens.css). One
   card per waiting comment; the post or ad it sits on is the grey line under
   the badges, which is how "see the post it is on" (Alex, 2026-08-26) survives
   the move from post-grouped to newest-first. */
.gs-ib { padding: 14px 16px; display: grid; gap: 12px; }
.gs-ib-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.gs-ib-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.gs-ib-tab {
  font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  cursor: pointer; display: inline-flex; gap: 7px; align-items: center;
}
.gs-ib-tab[aria-selected="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }
.gs-ib-n { font-size: 11px; font-weight: 600; font-family: var(--mono, monospace); background: var(--surface-3); color: var(--text-2); border-radius: 999px; padding: 1px 6px; }
.gs-ib-tab[aria-selected="true"] .gs-ib-n { background: rgba(255, 255, 255, .2); color: inherit; }
.gs-ib-tab[data-blocked="true"] { opacity: .6; }

.gs-ib-holdbar {
  display: flex; gap: 10px 18px; align-items: center; flex-wrap: wrap; font-size: 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
}
.gs-ib-hold { display: inline-flex; align-items: center; gap: 8px; }
.gs-ib-muted { color: var(--text-3); font-size: 12.5px; }
.gs-ib-switch {
  width: 42px; height: 24px; border-radius: 999px; border: none; background: var(--border-strong);
  position: relative; cursor: pointer; flex: none;
}
.gs-ib-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.gs-ib-switch[aria-checked="true"] { background: var(--good); }
.gs-ib-switch[aria-checked="true"]::after { left: 21px; }
.gs-ib-switch:disabled { opacity: .6; cursor: default; }

.gs-ib-list { display: grid; gap: 12px; }
.gs-ib-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: grid; gap: 10px; background: var(--surface); }
.gs-ib-card[data-done="true"] { opacity: .55; }
.gs-ib-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gs-ib-when { margin-left: auto; font-size: 13px; color: var(--text-3); }
.gs-ib-badge { font-size: 11px; font-weight: 600; letter-spacing: .03em; border-radius: 999px; padding: 3px 8px; background: var(--surface-3); color: var(--text-2); }
.gs-ib-ad { background: var(--warn-soft); color: var(--warn); }
.gs-ib-held { background: var(--danger-soft); color: var(--danger); }
.gs-ib-ok { background: var(--good-soft); color: var(--good); }
.gs-ib-ctx { font-size: 13px; color: var(--text-3); border-left: 3px solid var(--border-strong); padding-left: 8px; }
.gs-ib-said { font-size: 15px; white-space: pre-wrap; }
.gs-ib-draft { background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.gs-ib-lab { font-size: 12px; font-weight: 600; color: var(--accent-deep); }
.gs-ib-edit { outline: none; border-radius: 6px; min-height: 1.5em; white-space: pre-wrap; }
.gs-ib-edit:focus { box-shadow: 0 0 0 2px var(--accent); }
.gs-ib-edit:empty::before { content: attr(data-placeholder); color: var(--text-3); }
.gs-ib-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gs-ib-blocked { border: 1px dashed var(--border-strong); border-radius: 14px; padding: 18px; color: var(--text-2); background: var(--surface-2); }
.gs-ib-blocked p { margin: 6px 0 0; }
/* "Connect in Settings": where a Socials area needs an account, the door to Settings, Socials. */
.gs-ib-blocked .gs-to-settings { margin-top: 12px; min-height: 44px; font-size: 15px; }

@media (max-width: 640px) {
  .gs-ib { padding: 12px; }
  .gs-ib-actions > .btn { min-height: 44px; }
}

/* The attached video in the composer — poster, play badge, name, length and a
   Remove. Sits where the photo chips sit; a post has one or the other. */
.gs-videochip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  position: relative;
}
.gs-videochip img,
.gs-videochip-blank {
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 auto;
  background: var(--surface-3, #1c1e21);
}
.gs-videochip-blank { display: flex; align-items: center; justify-content: center; font-size: 20px; }
/* Over the thumbnail, not the row — 96px wide, so 48px in from the padding. */
.gs-videochip-play {
  position: absolute;
  left: 58px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #1c1e21;
  font-size: 11px;
  padding-left: 2px;
  box-sizing: border-box;
  pointer-events: none;
}
.gs-videochip { min-width: 0; }
.gs-videochip-meta { flex: 1 1 auto; min-width: 0; }
.gs-videochip-name {
  font-weight: 600;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gs-toolrow .tool[disabled] { opacity: .45; cursor: not-allowed; }

/* ── A7c — the destination row on the Social page ─────────────────────────
   The chip row sits above the writing column, so "where is this going" is
   answered before "what does it say" — the order a coach asks them in.

   ⚠️ SPACING ONLY. The chips bring their own look from css/channel-chips.css,
   and restyling them here would make one component look like two different
   things on two screens, which is the whole reason the Control Centre composer
   and this page share it. */
.gs-destinations { margin: 0 0 14px; }

/* ── Other profiles posting through these accounts (One Social Desk, SD3) ──
   The artefact's .bridge block: accent border, accent-soft ground, the switch
   on the right. The switch is the same shape as the inbox's hold switch. */
.ss-bridges { display: grid; gap: 10px; }
.ss-bridge {
  border: 1px solid var(--accent); border-radius: 14px; padding: 14px; display: flex; gap: 12px;
  align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--accent-soft);
  margin: 0 18px 12px;
}
.ss-bridge-t { font-weight: 600; }
.ss-switch {
  width: 42px; height: 24px; border-radius: 999px; border: none; background: var(--border-strong);
  position: relative; cursor: pointer; flex: none;
}
.ss-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.ss-switch[aria-checked="true"] { background: var(--good); }
.ss-switch[aria-checked="true"]::after { left: 21px; }
.ss-switch:disabled { opacity: .5; cursor: default; }

/* ── Socials' actions on a phone ─────────────────────────────────────────────
   Each button takes the full width, one under the other, so neither wraps its words.
   (The tab row that shared this line went on 2026-10-11: the phone's menu is the
   accordion, as for every other area.) */
@media (max-width: 560px) {
  .gs-writebar { flex-wrap: wrap; }
  .gs-writebar > .btn { width: 100%; margin: 0 !important; }
}

/* "Add another channel". The class was used and never defined, so the buttons
   sat flush against the card's left edge (seen in the SD4 render, 24 Sep). The
   inset matches .card-head's, so the buttons line up under the title. */
.ss-connect-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 22px 18px; }

/* Comments, tidied (approved 2026-10-07, board "Social, comments, tidier, with
   Maya"): the post as a small card, the comment as a bubble, the conversation,
   then the one comment box and three quiet links. */
.gs-ib-card { gap: 14px; padding: 16px; background: var(--surface); }
.gs-ib-post { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--text); background: var(--surface-2); border-radius: 12px; padding: 8px; min-width: 0; }
.gs-ib-post:hover .gs-ib-open { text-decoration: underline; }
.gs-ib-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; background: var(--border); }
.gs-ib-thumb-none { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-3); }
.gs-ib-pt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gs-ib-pk { font-size: 13px; color: var(--text-2); }
.gs-ib-pn { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-ib-open { font-size: 13px; color: var(--text-2); flex: none; }
.gs-ib-convo { display: flex; flex-direction: column; gap: 10px; }
.gs-ib-msg { display: flex; gap: 10px; align-items: flex-start; }
.gs-ib-msg-sm { margin-left: 46px; }
.gs-ib-av { width: 36px; height: 36px; border-radius: 50%; background: var(--text-3); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gs-ib-msg-sm .gs-ib-av { width: 28px; height: 28px; font-size: 12px; }
.gs-ib-msg-you .gs-ib-av { background: var(--accent); }
.gs-ib-bw { flex: 1; min-width: 0; }
.gs-ib-bubble { display: inline-block; max-width: 100%; background: var(--surface-2); border-radius: 16px; padding: 9px 12px; box-sizing: border-box; }
.gs-ib-who { font-size: 14px; font-weight: 700; }
.gs-ib-bubble .gs-ib-said { font-size: 16px; line-height: 1.45; }
.gs-ib-att { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; margin-top: 6px; }
.gs-ib-meta { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); padding: 4px 4px 0; }
.gs-ib-hidden { display: inline-flex; align-items: center; gap: 4px; background: var(--warn-soft, #fef3c7); color: var(--warn, #78350f); border-radius: 99px; padding: 2px 8px; font-weight: 700; }
.gs-ib-reply { margin-left: 46px; display: flex; flex-direction: column; gap: 2px; }
.gs-ib-links { display: flex; gap: 4px; flex-wrap: wrap; padding-left: 40px; }
.gs-ib-q { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; padding: 10px 6px; min-height: 44px; }
.gs-ib-q:hover { color: var(--text); }
.gs-ib-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gs-ib-del { color: var(--danger); }
.gs-ib-done { margin-left: 46px; font-size: 14px; font-weight: 600; color: var(--good); }
.gs-ib-spam { font-size: 14px; color: var(--text-2); padding: 0 0 6px 40px; }
.gs-ib-holdbar { font-size: 14px; color: var(--text-2); }
@media (max-width: 600px) {
  .gs-ib-reply, .gs-ib-done { margin-left: 0; }
  .gs-ib-msg-sm { margin-left: 24px; }
  .gs-ib-links, .gs-ib-spam { padding-left: 0; }
}

/* Each network's own logo beside its name, on its card and on its Connect button
   (js/channel-chips.js NETWORK MARKS: as published, its colour or monochrome, clear space). */
.ss-net { width: 22px; height: 22px; vertical-align: -5px; margin-right: 10px; color: var(--text); }
.ss-net-btn { width: 18px; height: 18px; flex: none; margin-right: 8px; color: currentColor; }