/* EVO TrustGuard — page-social.css
 *
 * Owned by:    social.html (admin-only Social page, SOCIAL-PUB1, C168)
 * Category:    admin shell page (PERMANENTLY DARK: data-theme="dark" is
 *              pinned statically on <html>; no light variant, no toggle)
 * Cascade:     tokens, base, utilities, components, portal-chrome, shared,
 *              shared-themes, _lib/dropdown, _lib/dialog, page-admin (admin
 *              shell layer), page
 * Edit policy: rules unique to this page only. The shared admin-shell chrome
 *              (.ash-*, .abn-*) lives in /css/page-admin.css; status pills
 *              and channel chips are the shared .chip system in
 *              /css/components.css (LOCKED C107-B). See /css/AGENTS.md
 *              "Admin dark-glass shell".
 *
 * Design language: TrustGuard Glass, from the 3G.1 tokens (--tier1-bg /
 * --tier2-* / --tier3-* / --glass-* / --hairline / --edge-highlight).
 * Colors, type sizes, spacing and radii are tokens. The literals that remain
 * are geometry with no token: the 44px touch-target floor, the 2px focus
 * ring, 1px hairlines, status dots (6 / 8px), the checkbox (20px) and icon
 * (14 / 16px) boxes, photo thumbnails (56 / 64 / 72px), two scroll-box
 * heights (160 / 320px), the 200px result-name column, the 3px underline
 * offset, uppercase letter-spacing (0.06 / 0.08 / 0.1em), line-heights, icon
 * stroke widths (2 / 3), the 0.75 muted-word opacity, the 0.15s chevron
 * transition, and the 56px admin bottom-nav height the pinned bar sits on.
 * SOCIAL-LOOP1 (C168) added: the slide thumbnail (58 x 72px, the 4:5 slide),
 * the 32px rank badge, the 200px flex basis of the counts column, and the
 * 0.02em tracking on the signups label.
 * Buttons are the rectangular .ash-btn (LOCKED C107-A, C68-B-1A.6-A), raised
 * to the 44px floor inside this page.
 *
 * Layout: two columns at 900px and up (the post on the left, one preview
 * card per network on the right). Below 900px: one column, the previews
 * become tabs under the editor, and the approve button moves to a bar pinned
 * above the admin bottom nav (Sean's wireframe ruling 2, C168).
 */

/* 44px touch floor for every button on this page (the shell default is 40). */
.sc-page .ash-btn,
.sc-approvebar .ash-btn { min-height: 44px; }

/* ── Header ── */
.sc-header { margin-bottom: var(--space-4); }
.sc-title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  color: var(--text);
  margin: 0;
  font-weight: var(--weight-regular);
}
.sc-sub { color: var(--text-muted); font-size: var(--text-md); margin: var(--space-1) 0 0; }

/* ── Top strip: channel chips, Dry run badge, Connect channels ── */
.sc-strip {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.sc-strip-chips { display: flex; gap: var(--space-1-5); flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.sc-chan-chip { gap: var(--space-1-5); }
.sc-chan-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sc-chan-word { opacity: 0.75; font-weight: var(--weight-regular); }
.sc-dry-badge[hidden] { display: none; }
.sc-dry-badge { text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--weight-semibold); }
.sc-dry-note { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.sc-dry-note[hidden] { display: none; }

/* ── Section tabs ── */
.sc-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab {
  font: inherit;
  font-size: var(--text-md);
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2-5) var(--space-3-5);
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}
.sc-tab:hover { color: var(--text); }
.sc-tab.on { color: var(--text); border-bottom-color: var(--red); font-weight: var(--weight-medium); }
.sc-tab:focus-visible,
.sc-ptab:focus-visible,
.sc-link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.sc-tab-b {
  background: var(--surface-elevated);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-px) var(--space-2);
  font-size: var(--text-xs);
  margin-left: var(--space-1-5);
  font-variant-numeric: tabular-nums;
}
.sc-panel[hidden] { display: none; }

/* ── Glass panel ── */
.sc-glass {
  background: var(--tier3-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-2xl);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--edge-highlight);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sc-glass { background: var(--tier3-tint-opaque); }
}

/* ── Compose ── */
.sc-editing {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-md);
}
.sc-editing[hidden] { display: none; }
.sc-compose { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
.sc-editor { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.sc-label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-disabled);
  font-weight: var(--weight-medium);
  margin-top: var(--space-2);
  padding: 0;
}
.sc-label:first-child { margin-top: 0; }
.sc-textarea,
.sc-input {
  font: inherit;
  font-size: var(--text-lg);
  color: var(--text);
  background: var(--tier2-bg);
  border: 1px solid var(--hairline);
  box-shadow: var(--tier2-inset);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  width: 100%;
  box-sizing: border-box;
  color-scheme: dark;
}
.sc-textarea { resize: vertical; line-height: 1.5; min-height: 160px; }
.sc-input { min-height: 44px; padding: 0 var(--space-3); }
.sc-textarea::placeholder,
.sc-input::placeholder { color: var(--text-disabled); }
.sc-textarea:focus,
.sc-input:focus { outline: none; border-color: var(--red); }
.sc-count { color: var(--text-disabled); font-size: var(--text-sm); text-align: right; font-variant-numeric: tabular-nums; }
.sc-hint { color: var(--text-disabled); font-size: var(--text-sm); margin: 0; }

/* Photos */
.sc-photos { display: flex; flex-direction: column; gap: var(--space-2); }
.sc-photo {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--space-2-5);
  align-items: center;
  padding: var(--space-2);
  background: var(--tier2-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.sc-photo-img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
}
.sc-photo-meta { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.sc-photo-type { color: var(--text-muted); font-size: var(--text-sm); }
.sc-alt { font-size: var(--text-md); }
.sc-photo-actions { display: flex; align-items: center; gap: var(--space-2-5); flex-wrap: wrap; }

/* ── Slides editor (SOCIAL-LOOP1) ── */
.sc-slides { display: flex; flex-direction: column; gap: var(--space-2); }
.sc-slides:empty { display: none; }
.sc-slide {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  padding: var(--space-2-5);
  background: var(--tier2-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.sc-slide-head { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
.sc-slide-n { flex: 1 1 auto; color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.sc-slide-body { min-height: 0; font-size: var(--text-md); }
.sc-slides-state:empty { display: none; }
.sc-preview-slide { width: 58px; height: 72px; }

/* ── Category + format pickers, and the Top posts filters ── */
.sc-pickers,
.sc-filters { display: grid; grid-template-columns: 1fr; gap: var(--space-2-5); }
.sc-filters { margin-bottom: var(--space-4); }
.sc-filters[hidden] { display: none; }
.sc-picker { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.sc-picker .sc-label { margin-top: var(--space-2); }

/* Tracking-tag note under a preview */
.sc-tagged[hidden] { display: none; }
.sc-tagged-links { display: block; margin-top: var(--space-1); color: var(--text-muted); overflow-wrap: anywhere; }

/* Channel checkboxes: the whole row is the 44px target. */
.sc-channels { border: none; margin: 0; padding: 0; min-width: 0; }
.sc-channel-list { display: grid; grid-template-columns: 1fr; gap: var(--space-1-5); margin-top: var(--space-2); }
.sc-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  min-height: 44px;
  padding: var(--space-1-5) var(--space-2-5);
  background: var(--tier2-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.sc-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sc-check-box {
  width: 20px; height: 20px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.sc-check-box svg { width: 14px; height: 14px; fill: none; stroke: var(--btn-primary-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sc-check input:checked + .sc-check-box { background: var(--red); border-color: var(--red); }
.sc-check input:checked + .sc-check-box svg { opacity: 1; }
.sc-check input:focus-visible + .sc-check-box { outline: 2px solid var(--red); outline-offset: 2px; }
.sc-check-text { display: flex; flex-direction: column; min-width: 0; }
.sc-check-name { color: var(--text); font-size: var(--text-md); }
.sc-check-sub { color: var(--text-disabled); font-size: var(--text-sm); }

.sc-editor-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.sc-problems,
.sc-card-problems {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--chip-red-text);
  font-size: var(--text-sm);
}
.sc-problems:empty { display: none; }

/* ── Previews ── */
.sc-previews { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sc-preview-list { display: flex; flex-direction: column; gap: var(--space-3); }
.sc-preview-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-muted); }
.sc-preview-empty[hidden] { display: none; }
.sc-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2-5); min-width: 0; }
.sc-card-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sc-card-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text); margin: 0; }
.sc-card-count { margin-left: auto; color: var(--text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.sc-card-count.is-over { color: var(--chip-red-text); font-weight: var(--weight-semibold); }
.sc-preview-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: var(--text-lg);
  line-height: 1.5;
  max-height: 320px;
  overflow-y: auto;
}
.sc-preview-text.is-empty { color: var(--text-disabled); }
.sc-preview-photos { display: flex; gap: var(--space-1-5); flex-wrap: wrap; }
.sc-preview-img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
}
.sc-card-ok { display: flex; align-items: center; gap: var(--space-2); color: var(--chip-green-text); font-size: var(--text-sm); }
.sc-ok-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.sc-card-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.sc-link {
  font: inherit;
  font-size: var(--text-md);
  color: var(--chip-blue-text);
  background: none;
  border: none;
  padding: 0 var(--space-1);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sc-copy { display: inline-flex; align-items: center; gap: var(--space-2); }
.sc-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Preview tabs: phone only. */
.sc-ptabs { display: flex; gap: var(--space-1-5); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc-ptabs:empty { display: none; }
.sc-ptabs::-webkit-scrollbar { display: none; }
.sc-ptab {
  font: inherit;
  font-size: var(--text-md);
  color: var(--text-muted);
  background: var(--tier2-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3-5);
  min-height: 44px;
  white-space: nowrap;
  cursor: pointer;
}
.sc-ptab[aria-pressed="true"] { color: var(--text); border-color: var(--border-strong); font-weight: var(--weight-medium); }
.sc-ptab.is-bad { color: var(--chip-red-text); border-color: var(--chip-red-border); }

/* ── Queue + History ── */
.sc-day { margin-bottom: var(--space-5); }
.sc-day-title {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-disabled);
  font-weight: var(--weight-medium);
  margin: 0 0 var(--space-2);
}
.sc-row { padding: var(--space-4); margin-bottom: var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-2); }
.sc-row-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sc-row-time { color: var(--text); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.sc-row-text { margin: 0; color: var(--text); font-size: var(--text-lg); line-height: 1.45; overflow-wrap: anywhere; }
.sc-row-chans { display: flex; gap: var(--space-1-5); flex-wrap: wrap; }
.sc-row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); }
.sc-results { display: flex; flex-direction: column; gap: var(--space-1-5); }
.sc-result {
  display: grid;
  grid-template-columns: minmax(0, 200px) auto minmax(0, 1fr);
  gap: var(--space-2-5);
  align-items: center;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--hairline);
}
.sc-result-name { color: var(--text-muted); font-size: var(--text-md); }
.sc-result-detail { min-width: 0; font-size: var(--text-md); color: var(--text-muted); overflow-wrap: anywhere; }
.sc-result-reason { color: var(--chip-red-text); }
.sc-would summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--text-muted);
  list-style: none;
}
.sc-would summary::-webkit-details-marker { display: none; }
/* display:flex drops the native triangle, so the row carries its own chevron. */
.sc-would-chev { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.sc-would[open] .sc-would-chev { transform: rotate(90deg); }
.sc-would summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.sc-would-body { padding: var(--space-2) 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* ── History: the pull note, the view switch, signups and counts (SOCIAL-LOOP1) ── */
.sc-pull-note {
  margin: 0 0 var(--space-3);
  padding: var(--space-2-5) var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  background: var(--tier2-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.sc-pull-note[hidden] { display: none; }
.sc-pull-note.is-bad { color: var(--chip-red-text); border-color: var(--chip-red-border); }
.sc-views { display: flex; gap: var(--space-1-5); margin-bottom: var(--space-4); }
.sc-measure {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-2-5) 0;
  border-top: 1px solid var(--hairline);
}
.sc-signups { display: flex; align-items: baseline; gap: var(--space-1-5); color: var(--text-muted); }
.sc-signups-n { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.sc-signups.is-up .sc-signups-n { color: var(--chip-green-text); }
.sc-signups-l { font-size: var(--text-sm); letter-spacing: 0.02em; }
.sc-measure-rest { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 200px; }
.sc-counts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }
.sc-count-n { color: var(--text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.sc-top-note { margin: 0 0 var(--space-3); }
.sc-top { list-style: none; margin: 0; padding: 0; }
.sc-top-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-2-5); align-items: start; }
.sc-top-rank {
  width: 32px; height: 32px;
  margin-top: var(--space-4);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.sc-top-body { min-width: 0; }

.sc-empty { padding: var(--space-10) var(--space-4); text-align: center; }
.sc-empty-title { color: var(--text); font-size: var(--text-xl); margin-bottom: var(--space-1-5); }
.sc-empty-sub { color: var(--text-muted); font-size: var(--text-md); }

/* ── Pinned approve bar: phone only, Compose only ── */
.sc-approvebar { display: none; }

/* ── Desktop: two columns, all preview cards, no preview tabs ── */
@media (min-width: 900px) {
  .sc-compose { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sc-ptabs { display: none; }
  .sc-channel-list { grid-template-columns: 1fr 1fr; }
  .sc-pickers,
  .sc-filters { grid-template-columns: 1fr 1fr; }
}

/* ── Below 900px: previews are tabs, the approve button is pinned ── */
@media (max-width: 899px) {
  .sc-card { display: none; }
  .sc-card.is-active { display: flex; }
  .sc-approve-desktop { display: none; }
  .sc-approvebar {
    position: fixed;
    left: 0; right: 0;
    /* sits on top of the admin bottom nav (.abn-nav is 56px + half the inset) */
    bottom: calc(56px + env(safe-area-inset-bottom) / 2);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-4);
    background: var(--tier3-tint-opaque);
    border-top: 1px solid var(--hairline);
    z-index: var(--z-sticky);
  }
  .sc-approvebar.is-off { display: none; }
  .sc-approvebar-note { flex: 1 1 auto; min-width: 0; color: var(--text-muted); font-size: var(--text-sm); }
  .sc-approvebar .ash-btn { flex: none; }
  /* Room so the last control is never under the pinned bar + the nav. The
     `body ` prefix is load-bearing: the shell's own `body .ash-main`
     padding-bottom (page-admin.css) is 0,1,1 and would beat a bare .sc-page
     (see /css/AGENTS.md "The `body ` prefix is not decoration"). Compose
     only: the bar is hidden on Queue and History, so they keep the shell's
     own reserve. */
  body .sc-page.is-compose { padding-bottom: calc(var(--space-20) + var(--space-16) + env(safe-area-inset-bottom)); }
  .sc-approvebar { padding-left: max(var(--space-4), env(safe-area-inset-left)); padding-right: max(var(--space-4), env(safe-area-inset-right)); }
  .sc-result { grid-template-columns: 1fr auto; }
  .sc-result-detail { grid-column: 1 / -1; }
  .sc-photo { grid-template-columns: 56px 1fr; }
  .sc-photo-img { width: 56px; height: 56px; }
  .sc-photo-remove { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-page * { transition: none; }
}