/* Operator social posts console.
 *
 * Same tokens, radii, type scale, and density as /styles.css and the
 * affiliates console. Nothing here redefines a token. */

.sp-shell { max-width: 1440px; }
.sp-shell [hidden],
.sp-dialog [hidden] { display: none !important; }
.sp-brand-link { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.sp-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sp-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--acc-deep);
  font: 600 10px/1.2 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.sp-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.sp-header p { max-width: 700px; }
.sp-header-actions { display: flex; gap: 9px; flex: 0 0 auto; }

.sp-shell code,
.sp-dialog code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--line-soft);
  font: 400 .92em/1.4 'JetBrains Mono', ui-monospace, monospace;
}

/* === Banner === */
.sp-banner {
  margin-bottom: 16px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.5;
}
.sp-banner.is-success { border-color: var(--positive); background: var(--positive-soft); color: var(--positive); }
.sp-banner.is-warning { border-color: var(--warning); background: var(--warning-soft); color: #6f4b00; }
.sp-banner.is-error { border-color: var(--negative); background: var(--negative-soft); color: var(--negative); }

/* === Status cards === */
.sp-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 20px;
}
.sp-status-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.sp-status-card h2 { font: 600 20px/1.15 'Space Grotesk', sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sp-status-card p { margin-top: 7px; color: var(--ink-dim); font-size: 12px; line-height: 1.5; }
.sp-status-card.is-on { border-color: var(--positive); box-shadow: 0 0 0 3px var(--positive-soft); }
.sp-status-card.is-on h2 { color: var(--positive); }
.sp-status-card.is-off h2 { color: var(--ink-dim); }
.sp-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
.sp-card-actions select {
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}
.sp-card-actions a.btn-secondary { display: inline-flex; align-items: center; text-decoration: none; }

/* === Queue === */
.sp-workspace {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.sp-workspace-top { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.sp-workspace-top h2 { font: 600 18px/1.2 'Space Grotesk', sans-serif; letter-spacing: -.025em; }
.sp-filters { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 10px; }
.sp-filters .field { flex: 0 0 180px; gap: 4px; }
.sp-filters .field label { font-size: 9px; }
.sp-filters .field input,
.sp-filters .field select { min-height: 38px; }
.sp-filters .sp-search-field { flex: 0 1 280px; }

.sp-status-tabs {
  display: flex;
  gap: 6px;
  margin-top: 16px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.sp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-dim);
  font: 600 11px/1 inherit;
  cursor: pointer;
}
.sp-tab:hover { border-color: var(--ink-soft); color: var(--ink); }
.sp-tab.is-active { border-color: var(--acc-dim); background: var(--acc-soft); color: var(--acc-deep); }
.sp-tab:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.sp-tab-count {
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--line-soft);
  font: 500 10px/1.2 'JetBrains Mono', ui-monospace, monospace;
  text-align: center;
}
.sp-tab.is-active .sp-tab-count { background: var(--surface); }

.sp-state,
.sp-detail-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 190px;
  padding: 28px;
  color: var(--ink-dim);
  font-size: 12px;
  text-align: center;
}
.sp-state.is-error,
.sp-detail-state.is-error { flex-direction: column; color: var(--negative); }
.sp-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--line);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: sp-spin .7s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }
.sp-empty { padding: 48px 20px; text-align: center; }
.sp-empty h3 { font: 600 16px/1.2 'Space Grotesk', sans-serif; }
.sp-empty p { max-width: 460px; margin: 7px auto 16px; color: var(--ink-dim); font-size: 12px; line-height: 1.55; }

.sp-post-list { display: grid; gap: 8px; margin-top: 14px; list-style: none; }
.sp-post-open {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.sp-post-open:hover { border-color: var(--acc-dim); box-shadow: 0 0 0 3px var(--acc-soft); }
.sp-post-open:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.sp-post-row.is-failed .sp-post-open,
.sp-post-row.is-publishing .sp-post-open { border-color: var(--warning); }
.sp-post-row.is-canceled .sp-post-open { opacity: .7; }
.sp-post-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sp-post-head strong { font: 600 14px/1.3 'Space Grotesk', sans-serif; overflow-wrap: anywhere; }
.sp-post-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-post-excerpt { color: var(--ink-dim); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.sp-post-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-soft); font-size: 10px; }
.sp-post-error { flex-basis: 100%; color: var(--negative); }

.sp-platform,
.sp-format {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--line-soft);
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 650;
}
.sp-platform.is-facebook_page { background: var(--acc-soft); color: var(--acc-deep); }
.sp-platform.is-instagram { background: hsl(330 80% 96%); color: hsl(330 60% 38%); }
.sp-platform.is-youtube { background: var(--negative-soft); color: hsl(358 60% 42%); }

.sp-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 23px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--line-soft);
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 650;
}
.sp-chip.is-approved,
.sp-chip.is-scheduled { background: var(--acc-soft); color: var(--acc-deep); }
.sp-chip.is-posted { background: var(--positive-soft); color: var(--positive); }
.sp-chip.is-publishing { background: var(--warning-soft); color: #6f4b00; }
.sp-chip.is-failed { background: var(--negative-soft); color: var(--negative); }
.sp-chip.is-canceled { color: var(--ink-soft); }

/* === Dialogs === */
.sp-dialog {
  width: min(760px, calc(100vw - 32px));
  margin: auto;
  max-height: min(900px, calc(100dvh - 32px));
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(15, 23, 42, .24);
}
.sp-detail-dialog { width: min(1120px, calc(100vw - 32px)); }
.sp-dialog::backdrop { background: rgba(13, 15, 20, .48); backdrop-filter: blur(3px); }
.sp-dialog > form,
.sp-dialog > .sp-dialog-header,
.sp-dialog > .sp-detail-state,
.sp-dialog > #postDetail { padding: 22px 24px; }
.sp-dialog > form > .sp-dialog-header { margin: -22px -24px 18px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.sp-dialog > .sp-dialog-header {
  position: sticky;
  z-index: 3;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(14px);
}
.sp-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sp-dialog-header h2 { font: 600 21px/1.15 'Space Grotesk', sans-serif; letter-spacing: -.025em; overflow-wrap: anywhere; }
.sp-dialog-header p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; color: var(--ink-dim); font-size: 11px; line-height: 1.45; }
.sp-icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-dim);
  font: 400 23px/1 sans-serif;
  cursor: pointer;
}
.sp-icon-button:hover { border-color: var(--ink-soft); color: var(--ink); }
.sp-icon-button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.sp-platform-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin-bottom: 16px;
  border: 0;
}
.sp-platform-picker legend {
  margin-bottom: 7px;
  color: var(--ink-dim);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.sp-platform-option { position: relative; display: block; cursor: pointer; }
.sp-platform-option input { position: absolute; opacity: 0; pointer-events: none; }
.sp-platform-option > span {
  display: grid;
  gap: 3px;
  height: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.sp-platform-option strong { font-size: 13px; }
.sp-platform-option small { color: var(--ink-soft); font-size: 10px; line-height: 1.35; }
.sp-platform-option input:checked + span { border-color: var(--acc); background: var(--acc-soft); box-shadow: 0 0 0 1px var(--acc); }
.sp-platform-option input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.sp-platform-option input:disabled + span { cursor: not-allowed; opacity: .55; }
.sp-platform-option input:disabled:checked + span { opacity: 1; }

.helper.is-over,
#composeCaptionCount.is-over { color: var(--negative); font-weight: 650; }

.sp-form-status { min-height: 18px; margin-top: 12px; color: var(--ink-dim); font-size: 11px; line-height: 1.5; }
.sp-form-status.is-error { color: var(--negative); }
.sp-form-status ul { padding-left: 18px; }
.sp-inline-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* === Detail === */
.sp-detail-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr); gap: 14px; align-items: start; }
.sp-detail-main,
.sp-detail-side { display: grid; gap: 12px; min-width: 0; }
.sp-detail-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.sp-detail-card h3 { margin-bottom: 10px; font: 600 14px/1.2 'Space Grotesk', sans-serif; }
.sp-detail-card h4 { margin-bottom: 6px; font: 600 15px/1.2 'Space Grotesk', sans-serif; }
.sp-detail-card p + p { margin-top: 6px; }
.sp-detail-card a { color: var(--acc-deep); overflow-wrap: anywhere; }
.sp-hint { color: var(--ink-dim); font-size: 11px; line-height: 1.55; }
.sp-hint + * { margin-top: 10px; }
.sp-error-text { color: var(--negative); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.sp-actions-card { border-color: var(--acc-dim); background: linear-gradient(180deg, var(--acc-soft), var(--surface) 70%); }
.sp-action-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-danger-ghost { color: var(--negative); }
.sp-action-form { display: grid; gap: 10px; }
.sp-action-form .sp-inline-actions { margin-top: 0; }
.sp-radio-row { display: flex; flex-wrap: wrap; gap: 8px 16px; border: 0; }
.sp-radio-row legend { margin-bottom: 6px; color: var(--ink-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.sp-radio-row label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; }

.sp-caption,
.sp-copy-row pre {
  margin: 0;
  padding: 12px;
  border-radius: 9px;
  background: var(--line-soft);
  font: 400 13px/1.55 'InterVariable', 'Inter', -apple-system, sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sp-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
  margin-top: 12px;
  list-style: none;
}
.sp-media-grid li { display: grid; gap: 5px; min-width: 0; }
.sp-media-grid img,
.sp-media-video {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--line-soft);
  object-fit: cover;
}
.sp-media-video { display: grid; place-items: center; color: var(--ink-dim); font-size: 11px; font-weight: 650; }
.sp-media-grid a { font-size: 10px; }

.sp-copy-row { display: grid; gap: 5px; margin-top: 10px; }
.sp-copy-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-copy-head span { color: var(--ink-soft); font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.sp-copy { min-height: 30px; padding: 4px 10px; font-size: 11px; }
.sp-copy-row code { display: block; padding: 9px 10px; overflow-wrap: anywhere; }
.sp-steps { display: grid; gap: 5px; margin: 12px 0; padding-left: 18px; color: var(--ink-dim); font-size: 12px; line-height: 1.5; }

.sp-timeline { display: grid; gap: 0; list-style: none; }
.sp-timeline li {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 0 0 13px 18px;
  border-left: 1px solid var(--line);
}
.sp-timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.sp-timeline li::before {
  content: '';
  position: absolute;
  top: 3px;
  left: -5px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--ink-soft);
}
.sp-timeline li.is-transition::before { background: var(--acc); }
.sp-timeline strong { font-size: 12px; }
.sp-timeline span,
.sp-timeline small { color: var(--ink-soft); font-size: 10px; overflow-wrap: anywhere; }
.sp-timeline q { color: var(--ink-dim); font-size: 11px; font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .sp-spinner { animation-duration: 2s; }
  .sp-post-open { transition: none; }
}
@media (max-width: 1080px) {
  .sp-status-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sp-status-grid > :first-child { grid-column: 1 / -1; }
  .sp-detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .sp-header,
  .sp-workspace-top { align-items: stretch; flex-direction: column; }
  .sp-header-actions { flex-direction: column-reverse; }
  .sp-header-actions button { width: 100%; min-height: 44px; }
  .sp-status-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sp-workspace { margin-inline: -2px; padding: 15px 12px; border-radius: 14px; }
  .sp-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sp-filters .sp-search-field { grid-column: 1 / -1; }
  .sp-filters:has(#brandFilterField[hidden]) .field { grid-column: 1 / -1; }
  .sp-filters .field input,
  .sp-filters .field select { min-height: 44px; font-size: 16px; }
  .sp-tab { min-height: 40px; }
  .sp-post-open { padding: 13px; }
  .sp-dialog,
  .sp-detail-dialog {
    width: 100vw;
    max-width: none;
    max-height: calc(100dvh - 10px);
    margin: auto 0 0;
    border-radius: 18px 18px 0 0;
  }
  .sp-dialog > form,
  .sp-dialog > .sp-dialog-header,
  .sp-dialog > .sp-detail-state,
  .sp-dialog > #postDetail { padding: 16px 14px; }
  .sp-dialog > form > .sp-dialog-header { margin: -16px -14px 15px; padding: 16px 14px 13px; }
  .sp-platform-picker { grid-template-columns: minmax(0, 1fr); }
  .sp-dialog .field input,
  .sp-dialog .field select,
  .sp-dialog .field textarea { min-height: 44px; font-size: 16px; }
  .sp-inline-actions { align-items: stretch; flex-direction: column-reverse; }
  .sp-action-buttons { align-items: stretch; flex-direction: column; }
  .sp-inline-actions button,
  .sp-action-buttons button,
  .sp-card-actions > * { width: 100%; min-height: 44px; }
  .sp-card-actions a.btn-secondary { justify-content: center; }
}