/* EasyClippers 13.8: several social accounts per network. Settings, Channels ("Your accounts" and its Add account
   menu), the account picker of the Post everywhere dialog, the automatic posting rows and the Posts page filter.
   Kept apart from app.css (being redesigned) and built only on its variables and classes, so it follows the redesign. */

/* a network's badge: its initial on its own colour (no brand artwork) */
.acct-net { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: var(--r-xs);
  font-size: 10.5px; font-weight: 750; letter-spacing: -.01em; line-height: 1; color: #fff; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); user-select: none; }
.acct-net[data-net="tiktok"], .acct-net[data-net="x"], .acct-net[data-net="threads"] { background: #111; }
.acct-net[data-net="youtube"] { background: #e0002b; }
.acct-net[data-net="instagram"] { background: linear-gradient(45deg, #f6a13a, #e1306c 55%, #8a3ab9); }
.acct-net[data-net="facebook"] { background: #1877f2; }
.acct-net[data-net="linkedin"] { background: #0a66c2; }
.acct-net[data-net="discord"] { background: #5865f2; }
.acct-net[data-net="telegram"] { background: #229ed9; }

/* an account's picture, or its first letter */
.acct-av { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--rule-2); color: var(--text-2); font-size: 12.5px; font-weight: 650; }
.acct-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Settings, Channels: Your accounts */
.acct-card .acct-limit { margin: 0 0 12px; line-height: 1.5; }
.acct-groups { display: flex; flex-direction: column; gap: 14px; }
.acct-group-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.acct-group-head b { font-size: 13px; color: var(--text); font-weight: 620; }
.acct-group-head .dim { margin-left: auto; font-size: 12px; }
.acct-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 8px 10px; min-width: 0;
  border: 1px solid var(--rule); border-radius: var(--r-sm); }
.acct-row .grow { min-width: 0; }
.acct-row b { display: block; font-size: 13.5px; font-weight: 600; }
.acct-row small { display: block; font-size: 12px; color: var(--text-3); }
.acct-row .acct-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: none; }
.acct-row.dup { border-color: var(--t-amber); }
.acct-row .acct-warn { color: var(--t-amber); }
.acct-dup { margin: 6px 0 0; padding: 0 2px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.acct-empty { font-size: 13px; line-height: 1.5; }
.acct-card .acct-unread { margin: -4px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--t-amber); }
.acct-menu .acct-foot a { color: var(--accent-text); }

/* automatic posting: a second copy of an account with its rule still on, shown so it can be switched off */
.rule-row.dup { box-shadow: inset 3px 0 0 var(--t-amber); }
.rule-row.dup .input { opacity: .55; }
.rule-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--t-amber); }

/* the Add account menu (a popover) */
.acct-menu button .acct-net { width: 20px; height: 20px; font-size: 10px; }
.acct-menu button .acct-count { margin-left: auto; font-size: 12px; color: var(--text-3); }
.acct-menu button:disabled { opacity: .55; cursor: not-allowed; }
.acct-menu button:disabled:hover { background: transparent; }
.acct-menu .acct-foot { padding: 8px 11px 6px; margin-top: 4px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.45;
  color: var(--text-3); }

/* the Post everywhere dialog: one chip per account, grouped by network */
.acct-tools { display: flex; align-items: center; gap: 14px; margin: 2px 0 8px; font-size: 12.5px; }
.acct-pick { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow: auto; padding: 2px; }
.acct-pick .acct-group-head { margin-bottom: 6px; }
.acct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.acct-chip { gap: 8px; max-width: 100%; min-width: 0; padding: 4px 11px 4px 5px; border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  color: var(--text); transition: border-color var(--t-fast), background var(--t-fast); }
.acct-chip .acct-av { width: 24px; height: 24px; font-size: 11px; }
.acct-chip > .ellipsis { max-width: 190px; }
.acct-chip:hover { background: var(--hover); }
.acct-chip:has(input:checked) { border-color: var(--accent-text); }
.acct-chip.off { opacity: .55; cursor: not-allowed; }
.acct-chip small { font-size: 11px; color: var(--t-amber); }
.acct-stagger { margin-top: 12px; }
.acct-stagger small { line-height: 1.45; }

/* the Posts page: which account a post went to, and the account filter */
.acct-filter { margin: 0 0 12px; }
.acct-filter .input { width: auto; max-width: 100%; height: 32px; font-size: 12.5px; }
.post-nets .acct-who { color: var(--text-2); }

@media (max-width: 640px) {
  .acct-row { flex-wrap: wrap; }
  .acct-row .acct-acts { width: 100%; justify-content: flex-start; }
  .acct-chip > .ellipsis { max-width: 150px; }
}