/* Social Media Copilot workspaces: posting, community engagement and advertising. */
.social-area-switcher {
  display: grid;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  align-self: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 6px;
  gap: 6px;
  border: 1px solid var(--border, #d6d3c9);
  border-radius: 18px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 14px 36px rgba(25, 31, 25, .07);
}
 .social-area-switcher button {
  width: 100%;
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "number title" "number copy";
  column-gap: 12px;
  align-content: center;
  text-align: left;
  padding: 14px 18px;
  color: #4d514b;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  box-shadow: none;
}
.social-area-switcher button:hover { background: rgba(255, 255, 255, .7); opacity: 1; }
.social-area-switcher button[aria-selected="true"] {
  color: #111612;
  border-color: #b9c9ff;
  background: #fff;
  box-shadow: 0 7px 20px rgba(31, 62, 165, .09);
}
.social-area-switcher__number {
  grid-area: number;
  align-self: center;
  color: #1d4eff;
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.social-area-switcher strong { grid-area: title; font-size: 16px; letter-spacing: -.015em; }
.social-area-switcher small { grid-area: copy; margin-top: 3px; color: #6a6e68; font-size: 12px; font-weight: 500; }

 .social-area-workspace { display: grid; grid-column: 1 / -1; width: 100%; min-width: 0; gap: 24px; }
.social-area-workspace[hidden], .social-area-hidden { display: none !important; }
body.auth-locked #social-area-switcher,
body.auth-locked .social-area-workspace { display: none !important; }

.social-area-workflow {
  grid-template-columns: repeat(var(--social-workflow-count, 5), minmax(120px, 1fr));
  overflow-x: auto;
}
.social-area-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid #d8d5cc;
  border-radius: 22px;
  background: #fffefa;
}
.social-area-header h2 { margin: 4px 0 8px; font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -.045em; }
.social-area-header p { max-width: 760px; margin: 0; color: #656861; }
.social-area-header__state {
  min-width: 210px;
  padding: 14px 16px;
  border: 1px solid #dedbd2;
  border-radius: 14px;
  background: #f7f5ef;
}
.social-area-header__state strong, .social-area-header__state span { display: block; }
.social-area-header__state span { margin-top: 4px; color: #6e716b; font-size: 13px; }

.social-ops-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; }
.social-ops-card {
  min-width: 0;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid #d8d5cc;
  border-radius: 20px;
  background: #fffefa;
}
.social-ops-card h3 { margin: 3px 0 8px; font-size: 22px; }
.social-ops-card > p { color: #6a6d67; }
.social-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.social-kpi {
  padding: 17px;
  border: 1px solid #dfdcd4;
  border-radius: 15px;
  background: #f8f6f0;
}
.social-kpi span, .social-kpi small { display: block; color: #6b6e68; }
.social-kpi strong { display: block; margin: 7px 0 3px; font-size: 25px; letter-spacing: -.03em; }
.social-platform-list { display: grid; gap: 10px; margin-top: 18px; }
.social-platform-row {
  display: grid;
  grid-template-columns: minmax(120px, .7fr) minmax(150px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid #e3e0d8;
}
.social-platform-row:first-child { border-top: 0; }
.social-platform-row small { color: #71746e; }
.social-state-pill {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid #d7d4cc;
  border-radius: 999px;
  color: #666a64;
  background: #f5f3ed;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.social-empty-state {
  min-height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 30px;
  border: 1px dashed #cbc8bf;
  border-radius: 16px;
  background: #faf8f3;
}
.social-empty-state strong { font-size: 18px; }
.social-empty-state p { max-width: 540px; margin: 8px auto 0; color: #72756f; }
.social-guardrail-list { display: grid; gap: 12px; padding: 0; list-style: none; }
.social-guardrail-list li {
  padding: 14px 16px;
  border-left: 3px solid #1d4eff;
  border-radius: 0 12px 12px 0;
  background: #f4f6ff;
}
.social-guardrail-list strong, .social-guardrail-list span { display: block; }
.social-guardrail-list span { margin-top: 3px; color: #656a68; font-size: 13px; }
.social-action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.social-action-row .secondary-button { margin: 0; }
.social-action-row button:disabled { cursor: not-allowed; opacity: .48; }
.social-area-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.social-area-filter label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.social-objective-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.social-objective-grid article {
  padding: 18px;
  border: 1px solid #dfdcd4;
  border-radius: 15px;
  background: #f8f6f0;
}
.social-objective-grid strong, .social-objective-grid span { display: block; }
.social-objective-grid span { margin-top: 6px; color: #6d706b; font-size: 13px; }

@media (max-width: 900px) {
  .social-area-switcher { grid-template-columns: 1fr; }
  .social-area-switcher button { min-height: 62px; }
  .social-area-header, .social-ops-grid { grid-template-columns: 1fr; }
  .social-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .social-area-header__state { min-width: 0; }
}
@media (max-width: 620px) {
  .social-area-switcher { padding: 4px; border-radius: 14px; }
  .social-area-switcher button { padding: 12px; }
  .social-area-switcher small { font-size: 11px; }
  .social-kpi-strip, .social-objective-grid, .social-area-filter { grid-template-columns: 1fr; }
  .social-platform-row { grid-template-columns: 1fr auto; }
  .social-platform-row small { grid-column: 1 / -1; }
}


/* Align the primary Copilot selector with every full-width workspace surface. */
.product-switcher {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-inline: 0;
}
.product-switcher__item {
  width: 100%;
  min-width: 0;
}


/* Operational inbox, governance and paid-media readiness. */
.social-readiness-panel {
  display: grid;
  grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr);
  gap: 24px;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid #d8d5cc;
  border-radius: 20px;
  background: #fffefa;
}
.social-readiness-panel__intro h3 { margin: 3px 0 8px; font-size: 22px; }
.social-readiness-panel__intro p:last-child { margin-bottom: 0; color: #6a6d67; }
.social-readiness-panel > .social-action-row { grid-column: 1 / -1; margin-top: 0; padding-top: 18px; border-top: 1px solid #e3e0d8; }
.social-area-header__state.is-ready { border-color: #a9c7b0; background: #f1f8f2; }
.social-state-pill--ready { border-color: #a7c9ae; color: #245f32; background: #edf7ef; }
.social-state-pill--attention { border-color: #d8c89e; color: #7a5a13; background: #fff8e7; }
.social-card-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.social-card-heading h3 { margin-bottom: 0; }
.social-inbox-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: 24px; }
.social-segmented-control { display: inline-flex; padding: 4px; gap: 3px; border: 1px solid #dedbd2; border-radius: 999px; background: #f6f4ee; }
.social-segmented-control button { min-height: 34px; padding: 6px 12px; color: #666a64; border: 0; background: transparent; box-shadow: none; }
.social-segmented-control button.is-active { color: #111612; background: #fff; box-shadow: 0 2px 8px rgba(25, 31, 25, .08); }
.social-review-placeholder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 22px;
  padding: 18px;
  border: 1px dashed #cbc8bf;
  border-radius: 16px;
  background: #faf8f3;
}
.social-review-placeholder span { padding: 10px; text-align: center; color: #6e716b; font-size: 12px; font-weight: 700; }
.social-settings-list { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid #e3e0d8; }
.social-settings-list label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, .55fr);
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #e3e0d8;
  text-transform: none;
  letter-spacing: normal;
}
.social-settings-list label span, .social-settings-list label strong, .social-settings-list label small { display: block; }
.social-settings-list label small { margin-top: 3px; color: #71746e; font-weight: 500; }
.social-settings-list select { width: 100%; }
.ads-readiness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ads-readiness-card { position: relative; display: grid; gap: 5px; padding: 18px 18px 18px 54px; border: 1px solid #dfdcd4; border-radius: 15px; background: #f8f6f0; }
.ads-readiness-card__step { position: absolute; top: 18px; left: 18px; color: #1d4eff; font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ads-readiness-card small { color: #6d706b; }
.ads-readiness-card b { color: #3f433f; font-size: 12px; }
.social-table-shell { margin-top: 18px; border: 1px solid #dfdcd4; border-radius: 15px; overflow: hidden; }
.social-table-row { display: grid; grid-template-columns: 1.6fr .7fr .8fr .8fr .9fr; gap: 12px; padding: 12px 16px; }
.social-table-head { color: #6a6e68; background: #f5f3ed; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.social-empty-table { display: grid; gap: 5px; padding: 36px 18px; text-align: center; }
.social-empty-table span { color: #72756f; font-size: 13px; }
.ads-approval-checklist { display: grid; gap: 10px; margin-top: 18px; }
.ads-approval-checklist label { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #dfdcd4; border-radius: 12px; background: #f8f6f0; }
.ads-approval-checklist input { min-height: auto; }

@media (max-width: 900px) {
  .social-readiness-panel, .social-inbox-layout { grid-template-columns: 1fr; }
  .ads-readiness-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .social-card-heading { display: grid; }
  .social-segmented-control { width: 100%; }
  .social-segmented-control button { flex: 1; }
  .social-settings-list label { grid-template-columns: 1fr; }
  .social-review-placeholder { grid-template-columns: repeat(2, 1fr); }
  .social-table-row { grid-template-columns: 1fr 1fr; }
  .social-table-row span:nth-child(n+3) { display: none; }
}
@media print {
  .skip-link { display: none !important; }
}


/* Hotfix: contain every social workspace at split-screen and compact desktop widths. */
.social-area-workspace,
.social-area-workspace *,
.social-area-workflow,
.social-area-workflow a,
.social-kpi-strip,
.social-kpi,
.social-readiness-panel,
.social-readiness-panel > *,
.social-inbox-layout,
.social-inbox-layout > *,
.social-ops-grid,
.social-ops-grid > *,
.social-ops-card,
.social-card-heading,
.social-area-filter,
.social-area-filter > label,
.social-settings-list,
.ads-readiness-grid,
.ads-readiness-card {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.social-area-workspace { overflow: clip; }
.social-area-workflow {
  width: 100%;
  grid-template-columns: repeat(var(--social-workflow-count, 5), minmax(0, 1fr));
}
.social-area-workflow a { white-space: normal; overflow-wrap: anywhere; }
.social-area-filter select,
.social-settings-list select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
}
.social-ops-card :where(p, span, strong, small, label) { overflow-wrap: anywhere; }
.social-kpi-strip > *,
.social-objective-grid > * { min-width: 0; }

@media (max-width: 75rem) {
  .social-area-header,
  .social-readiness-panel,
  .social-inbox-layout,
  .social-ops-grid { grid-template-columns: minmax(0, 1fr); }
  .social-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-area-header__state { width: 100%; min-width: 0; }
  .social-readiness-panel > .social-action-row { grid-column: 1; }
}

@media (max-width: 47.99rem) {
  .social-area-workflow {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(9rem, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
  }
  .social-area-workflow a { min-height: 3.25rem; white-space: nowrap; }
  .social-kpi-strip,
  .social-area-filter { grid-template-columns: minmax(0, 1fr); }
}

.autopilot-card {
  border-color: color-mix(in srgb, var(--mercury-cobalt, #315efb) 35%, transparent);
}

.autopilot-status-grid,
.autopilot-settings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.autopilot-status-grid article {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem;
  border: 1px solid rgba(49, 94, 251, 0.2);
  border-radius: 14px;
  background: rgba(49, 94, 251, 0.05);
}

.autopilot-status-grid small {
  color: var(--mercury-muted, #667085);
}

.autopilot-status-grid strong[data-state="ready"] {
  color: #18794e;
}

.autopilot-status-grid strong[data-state="blocked"] {
  color: #b42318;
}

.autopilot-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.autopilot-confirmation {
  grid-template-columns: auto 1fr;
  align-items: start;
  margin: 1rem 0;
}

.autopilot-confirmation input {
  margin-top: 0.2rem;
}

.autopilot-card .danger-button {
  background: #b42318;
  color: #fff;
}

@media (max-width: 760px) {
  .autopilot-status-grid,
  .autopilot-settings {
    grid-template-columns: 1fr;
  }
}