/**
 * Connected Accounts page (TS-5139).
 *
 * Replaces the inline styles and legacy .sec-media-item markup on
 * /user-channels. Uses the house tokens (--primary-color,
 * --primary-light, --title, --paragraph) rather than hardcoded hex, so a
 * palette change reaches this page.
 *
 * Action treatment is deliberately mixed: icon-only for conventional,
 * repeated actions (open in new tab, disconnect) and labelled text for
 * anything that resolves a problem or has no conventional glyph (genre,
 * add a page, choose board). Icon-only controls for those read as
 * unguessable, which is what the old tick/eye/tag row suffered from.
 */

.ts-accounts {
  --ca-line: #E9E5F2;
  --ca-danger: #B42318;
  /* Control outlines sit at 3.02:1 against white, meeting the non-text
     contrast threshold (WCAG 1.4.11). A lighter tint leaves the control
     edge effectively invisible and relies on the glyph alone. */
  --ca-ring: #A78BAE;
  /* Was #C98F89, which is 2.70:1 on white, under the 3:1 a non-text boundary
     needs. That mattered here more than usual: this ring is the ONLY boundary
     the destructive icon button has, since its #FDECEA fill sits at about
     1.1:1 against the card behind it. #C07A73 is the same desaturated red a
     shade deeper, 3.35:1, so it clears the threshold with room rather than
     sitting on it. */
  --ca-danger-ring: #C07A73;
  /* Secondary orange: the brand #F26419 carries white at only 3.18:1, so
     the accessible light-mode value is used for filled buttons. */
  --ca-secondary: #c2410c;
}

.ts-accounts__lede {
  color: var(--paragraph);
  font-size: 14px;
  margin: 0 0 22px;
  max-width: 62ch;
}

.ts-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--ca-line);
  padding: 20px 22px;
  margin-bottom: 16px;
}

.ts-card__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.ts-card__head h2 {
  font-size: 16.5px;
  margin: 0 0 3px;
  color: var(--title);
}

.ts-card__head p {
  margin: 0;
  font-size: 13px;
  color: var(--paragraph);
}

.ts-card__head-actions {
  margin-left: auto;
}

/* Rows. */
.ts-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--ca-line);
}

.ts-row:first-of-type {
  border-top: 0;
}

.ts-row__logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 9px;
  object-fit: contain;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ca-line);
  padding: 5px;
}

/* Channel avatar tile.
 *
 * Avatars arrive as a circular crop on TRANSPARENT corners, so the tile is the
 * only thing giving them an edge. This rule used to drop the fill and the
 * padding on the grounds that a photograph should fill its box rather than sit
 * inset like a glyph. Both halves of that turned out wrong in context: without
 * the fill the circle floated with nothing around it, and without the padding
 * it sat tighter to its edge than every platform logo in the list directly
 * below on the same page.
 *
 * So it takes the same square, the same line colour and the same inset as
 * those rows, and differs from them only in object-fit: cover survives because
 * an avatar is not guaranteed square, and cover crops where contain would
 * letterbox. On a square source the two are identical anyway. */
.ts-row__logo--avatar {
  object-fit: cover;
  background: var(--ts-surface-card, #ffffff);
  box-shadow: inset 0 0 0 1px var(--ca-line, #E9E5F2);
}

.ts-row__main {
  flex: 1;
  min-width: 0;
}

.ts-row__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--title);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.ts-row__meta {
  font-size: 12.5px;
  color: var(--paragraph);
  margin-top: 2px;
}

.ts-row__note {
  font-size: 12.5px;
  color: var(--ca-secondary);
  margin-top: 5px;
  font-weight: 500;
}

.ts-row__actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

/* State chips. */
.ts-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ts-chip .bi {
  font-size: 10px;
}

.ts-chip--ok {
  background: #E6F4ED;
  color: #0F5F41;
}

.ts-chip--warn {
  background: #FDF0E8;
  color: #8A3A0B;
}

.ts-chip--info {
  background: var(--primary-light);
  color: var(--primary-color);
}

/* Icon-only actions: conventional, repeated actions only. */
.ts-ibtn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary-color);
  box-shadow: inset 0 0 0 1px var(--ca-ring, #A78BAE);
  transition: background .12s ease;
  text-decoration: none;
}

.ts-ibtn .bi {
  font-size: 16px;
  line-height: 1;
}

.ts-ibtn:hover,
.ts-ibtn:focus-visible {
  background: #E7DEF2;
  color: var(--primary-color);
}

.ts-ibtn--danger {
  background: #FDECEA;
  color: var(--ca-danger, #B42318);
  box-shadow: inset 0 0 0 1px var(--ca-danger-ring, #C07A73);
}

.ts-ibtn--danger:hover,
.ts-ibtn--danger:focus-visible {
  background: #FADBD8;
  color: var(--ca-danger, #B42318);
}

/* Specificity guard for the icon buttons (TS-5167).
 *
 * These classes are portable, but table styling elsewhere is not: the
 * Scheduled Posts view is a .custom-table, and `.custom-table td a` sets
 * colour at specificity 0,1,2, which beats `.ts-ibtn--danger` at 0,1,0. The
 * result was a destructive action rendering in the same muted grey as edit,
 * with only the background tint to tell them apart. Not a variable problem,
 * which is what it looked like at first.
 *
 * The class is doubled to reach 0,2,0 rather than naming a page or an
 * element, so the component stays independent of where it is used and does
 * not rely on stylesheet order. Remove this only if `.custom-table td a`
 * is narrowed (wrapping it in :where() would drop it to 0,0,2 and make this
 * unnecessary).
 */
.ts-ibtn.ts-ibtn {
  color: var(--primary-color);
}

.ts-ibtn--danger.ts-ibtn--danger {
  color: var(--ca-danger, #B42318);
}

.ts-ibtn.ts-ibtn:hover,
.ts-ibtn.ts-ibtn:focus-visible {
  color: var(--primary-color);
}

.ts-ibtn--danger.ts-ibtn--danger:hover,
.ts-ibtn--danger.ts-ibtn--danger:focus-visible {
  color: var(--ca-danger, #B42318);
}

/* Labelled actions. */
.ts-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  text-decoration: none;
}

.ts-btn .bi {
  font-size: 14px;
}

.ts-btn--primary {
  background: var(--primary-color);
  color: #fff;
}

.ts-btn--primary:hover,
.ts-btn--primary:focus-visible {
  background: #5D2764;
  color: #fff;
}

.ts-btn--secondary {
  background: var(--ca-secondary);
  color: #fff;
}

.ts-btn--secondary:hover,
.ts-btn--secondary:focus-visible {
  background: #A8380A;
  color: #fff;
}

.ts-btn--ghost {
  background: #fff;
  color: var(--primary-color);
  box-shadow: inset 0 0 0 1px var(--ca-ring);
}

.ts-btn--ghost:hover,
.ts-btn--ghost:focus-visible {
  background: var(--primary-light);
  color: var(--primary-color);
}

/* Quota meter. */
.ts-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}

.ts-meter__track {
  flex: 1;
  max-width: 210px;
  height: 6px;
  border-radius: 99px;
  background: var(--primary-light);
  overflow: hidden;
}

.ts-meter__fill {
  height: 100%;
  background: var(--primary-color);
  border-radius: 99px;
}

.ts-meter__label {
  font-size: 12.5px;
  color: var(--paragraph);
}

/* Upsell / notice. Was a block of inline styles with hardcoded hex. */
.ts-notice {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #FFF7F0;
  box-shadow: inset 0 0 0 1.5px #F6D3B4;
  border-radius: 10px;
  padding: 13px 15px;
  margin-top: 14px;
}

.ts-notice__body {
  flex: 1;
}

.ts-notice__body strong {
  display: block;
  font-size: 13.5px;
  color: var(--title);
  margin-bottom: 2px;
}

.ts-notice__body span {
  font-size: 12.5px;
  color: #8A5A2B;
}

/* Empty state: explains what connecting gets you, and offers the action. */
.ts-empty {
  text-align: center;
  padding: 24px 20px;
}

.ts-empty h3 {
  font-size: 15px;
  margin: 0 0 6px;
  color: var(--title);
}

.ts-empty p {
  font-size: 13px;
  color: var(--paragraph);
  margin: 0 auto 15px;
  max-width: 46ch;
}

@media (max-width: 767px) {
  .ts-row {
    flex-wrap: wrap;
  }

  .ts-row__actions {
    width: 100%;
    padding-left: 52px;
  }

  .ts-card__head {
    flex-wrap: wrap;
  }

  .ts-card__head-actions {
    margin-left: 0;
    width: 100%;
  }
}

/* Connect menu.
 *
 * The menu is taller than the header row it hangs from and Bootstrap positions
 * it absolutely, so it has to be able to escape the card. Reported symptom was
 * the last item being cut in half once the list grew past five platforms.
 *
 * Belt and braces, because the exact cause could not be reproduced offline
 * (the page needs its JS to position the menu):
 * - the card and its header explicitly do not clip;
 * - the button group is positioned, so the menu anchors to it rather than to
 *   some distant ancestor;
 * - a raised z-index keeps it above the dashboard chrome;
 * - and a bounded height with internal scrolling means that however long the
 *   platform list grows, every entry stays reachable rather than being cut off
 *   with no way to reach it.
 */
.ts-card,
.ts-card__head,
.ts-card__head-actions {
  overflow: visible;
}

.ts-accounts .btn-group {
  position: relative;
}

.ts-accounts .dropdown-connect-channel {
  z-index: 1056;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Connect-a-platform chooser (shown in a modal).
 *
 * Replaced the Bootstrap dropdown, which was clipped once the list grew past
 * five platforms. A modal is not constrained by the card, so this cannot
 * recur as platforms are added, and each row has room to state what the
 * integration can actually publish there.
 */
.ts-chooser__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ts-chooser__item + .ts-chooser__item {
  border-top: 1px solid var(--ca-line, #E9E5F2);
}

.ts-chooser__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 6px;
  text-decoration: none;
  color: var(--title);
  border-radius: 10px;
  transition: background .12s ease;
}

.ts-chooser__link:hover,
.ts-chooser__link:focus-visible {
  background: var(--primary-light);
  color: var(--title);
}

.ts-chooser__logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ca-line, #E9E5F2);
  padding: 4px;
}

.ts-chooser__text {
  flex: 1;
  min-width: 0;
}

.ts-chooser__name {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
}

.ts-chooser__supports {
  display: block;
  font-size: 12.5px;
  color: var(--paragraph);
  margin-top: 2px;
}

.ts-chooser__chevron {
  color: var(--paragraph);
  font-size: 14px;
  flex-shrink: 0;
}

.ts-chooser__empty {
  padding: 8px 6px;
  font-size: 13px;
  color: var(--paragraph);
}