/* ---------- social accounts (.ac-) ---------- */
/* top card: client connect links */
.ac-intro { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.ac-intro-icon { width: 38px; height: 38px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); }
.ac-intro-text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-intro-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* filter bar */
.ac-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.select.ac-filter { width: auto; min-width: 0; max-width: 200px; }
.ac-search { flex: 0 1 220px; min-width: 140px; }
.ac-bar-note { min-width: 0; }
/* on phones the filter bar would cover a quarter of the screen, so it scrolls away */
@media (max-width: 640px) { .ac-page > .page-bar { position: static; } }

/* accounts table — a container, so it switches layout by its own width (sidebars vary) */
.ac-table-card { overflow: hidden; container: ac-table / inline-size; }
.ac-table :is(th, td) { padding-left: 10px; padding-right: 10px; }
.ac-table :is(th, td):first-child { padding-left: 16px; }
.ac-table :is(th, td):last-child { padding-right: 16px; }
/* the name column takes the spare width; names ellipsize instead of widening the table */
.ac-table td.ac-col-name { width: 100%; max-width: 0; min-width: 190px; }
.ac-name { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 340px; }
a.ac-name-link { color: var(--text); }
a.ac-name-link:hover { color: var(--accent-ink); }
.ac-err { max-width: 240px; }
.ac-actions { justify-content: flex-end; flex-wrap: nowrap; }
.ac-table tr.ac-row-expired td:first-child, .ac-table tr.ac-row-invalid td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.ac-table tr.ac-row-expiring td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.ac-table-foot { padding: 10px 16px; border-top: 1px solid var(--border); }
/* medium widths: "Queue settings" becomes an icon button (it keeps its aria-label) */
@container ac-table (max-width: 1040px) {
  .ac-actions .ac-btn-label { display: none; }
  .ac-actions .ac-queue-btn { width: 28px; padding: 0; }
}

/* connect dialog */
.ac-platforms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.ac-platform {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-width: 0; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ac-platform:hover { border-color: var(--border-strong); background: var(--surface-2); }
.ac-platform > .stack { flex: 1; }
.ac-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.ac-snippet { align-items: flex-start; }
.ac-snippet pre { margin: 0; white-space: pre-wrap; word-break: break-all; font: inherit; }

/* pending asset picker */
.ac-select-all { padding: 4px 2px; }
.ac-assets { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.ac-asset { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; min-width: 0; }
.ac-asset:last-child { border-bottom: 0; }
.ac-asset:hover { background: var(--hover); }
.ac-asset input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: none; }

/* posting schedule */
.ac-queue-grid { gap: 20px; }
.ac-queue-grid h3 { font-size: 13.5px; }
.ac-slots-ro { font-size: 13px; }
.ac-preview-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px; }
.ac-preview { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.ac-preview-date { font-size: 12px; font-weight: 650; color: var(--text-2); margin-bottom: 4px; }
.ac-preview-day ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-slot { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 6px; background: var(--surface); border-left: 3px solid var(--border-strong); }
.ac-slot.is-taken { border-left-color: var(--accent); }
.ac-slot.is-next { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.ac-slot-time { width: 72px; flex: none; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* client connect links */
.ac-max-220 { max-width: 220px; display: block; }
.table tr.ac-row-muted td { color: var(--text-3); }

/* narrow: filters stack */
@media (max-width: 760px) {
  .ac-search { flex: 1 1 100%; }
  .select.ac-filter { flex: 1 1 140px; max-width: none; }
}

/* narrow containers: the accounts and connect-link tables collapse into stacked cards */
.ac-links { container: ac-links / inline-size; }
@container ac-table (max-width: 680px) {
  .ac-table thead { display: none; }
  .ac-table, .ac-table :is(tbody, tr, td) { display: block; width: 100%; }
  .ac-table tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .ac-table tr:last-child { border-bottom: 0; }
  .ac-table td, .ac-table td:is(:first-child, :last-child) { border: 0; padding: 5px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; text-align: right; }
  .ac-table td > * { min-width: 0; }
  .ac-table tr:hover td { background: none; }
  .ac-table td[data-label]::before { content: attr(data-label); font-size: 12px; color: var(--text-3); flex: none; text-align: left; }
  .ac-table td.ac-col-name { padding-bottom: 8px; text-align: left; min-width: 0; max-width: none; }
  .ac-table td.ac-col-name::before { content: none; }
  .ac-name { max-width: none; }
  .ac-table td .stack { align-items: flex-end; }
  .ac-table td.ac-col-name .stack { align-items: flex-start; }
  .ac-table td.col-actions { width: 100%; padding-top: 8px; justify-content: flex-end; }
  .ac-actions { flex-wrap: wrap; }
  .ac-actions .ac-btn-label { display: inline; }
  .ac-actions .ac-queue-btn { width: auto; padding: 0 10px; }
  .ac-table tr:is(.ac-row-expired, .ac-row-invalid, .ac-row-expiring) td:first-child { box-shadow: none; }
  .ac-table tr:is(.ac-row-expired, .ac-row-invalid) { box-shadow: inset 3px 0 0 var(--danger); }
  .ac-table tr.ac-row-expiring { box-shadow: inset 3px 0 0 var(--warning); }
  .ac-err { max-width: none; text-align: right; }
}
@container ac-links (max-width: 680px) {
  .ac-links .table thead { display: none; }
  .ac-links .table, .ac-links .table :is(tbody, tr, td) { display: block; width: 100%; }
  .ac-links .table tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .ac-links .table tr:last-child { border-bottom: 0; }
  .ac-links .table td { border: 0; padding: 5px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; text-align: right; }
  .ac-links .table td > * { min-width: 0; }
  .ac-links .table tr:hover td { background: none; }
  .ac-links .table td[data-label]::before { content: attr(data-label); font-size: 12px; color: var(--text-3); flex: none; text-align: left; }
  .ac-links .table td:first-child { padding-bottom: 8px; text-align: left; }
  .ac-links .table td:first-child::before { content: none; }
  .ac-links .table td.col-actions { width: 100%; padding-top: 8px; justify-content: flex-end; }
  .ac-max-220 { max-width: 100%; }
}

/* connect dialog: network apps */
.ac-app-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.ac-app-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-width: 0; }
.ac-app-row + .ac-app-row { border-top: 1px solid var(--border); }
.ac-server-alt > summary { cursor: pointer; }
.ac-server-alt[open] > summary { margin-bottom: 8px; }
/* keep the step numbers on list items that are also flex stacks */
.ac-steps > li { display: list-item; }
.ac-steps > li > * + * { margin-top: 6px; }
.ac-steps > li > .secret-box, .ac-steps > li > .form-grid, .ac-steps > li > .check { display: flex; }
.ac-steps > li > .form-grid { display: grid; }