/* ==========================================================================
   AI Social Content Studio
   Layers on chat.css: the design tokens and every .ls-* Layout Builder rule
   come from there, so this file only describes the studio's own surface.
   ========================================================================== */

/* chat.css pins html and body to 100% with overflow:hidden, because the chat
   studio is a fixed app shell that scrolls its own inner panes. This page is
   an ordinary long document, so that lock has to be undone or everything past
   the first viewport is unreachable. Loaded after chat.css, so this wins. */
html,
body {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

body {
  margin: 0;
  color: var(--text-main);
  background: var(--bg-app);
  background-image: var(--app-gradient);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
}

.sc-app {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 244px minmax(0, 1fr);
}

/* -------------------------------------------------------------
   SIDEBAR
   ------------------------------------------------------------- */

.sc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 14px;
  border-right: 1px solid var(--border);
  background: var(--bg-sidebar);
  /* A generated campaign makes this page several thousand pixels tall, so the
     nav sticks rather than scrolling out of reach. align-self keeps the grid
     column from stretching, which sticky needs to work. */
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  overflow-y: auto;
}

.sc-brand { display: flex; align-items: center; gap: 10px; padding: 0 4px; }

.sc-brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
}

.sc-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.sc-brand-text { display: flex; min-width: 0; flex-direction: column; }
.sc-brand-text strong { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; }
.sc-brand-text small {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sc-nav { display: flex; flex: 1; flex-direction: column; gap: 3px; }

.sc-nav-btn {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-muted);
  background: transparent;
  font-family: var(--font-main);
  font-size: 0.81rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.sc-nav-btn:hover { color: var(--text-main); background: var(--bg-sidebar-hover); }
.sc-nav-btn.active { border-color: var(--border-accent); color: var(--text-main); background: var(--accent-subtle); }
.sc-nav-btn.active svg { color: var(--accent); }
.sc-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-nav-btn.subtle { min-height: 32px; color: var(--text-dim); font-size: 0.74rem; font-weight: 500; }

.sc-sidebar-foot { display: flex; flex-direction: column; gap: 10px; }

.sc-plan {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
}

.sc-plan-tier { font-size: 0.78rem; font-weight: 700; }
.sc-plan-credits { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.64rem; }

.sc-engine {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-muted);
  background: var(--bg-card);
  font-size: 0.68rem;
  line-height: 1.45;
}

.sc-engine[data-state="on"] { border-color: var(--border-accent); color: var(--accent-light); }
.sc-engine[data-state="off"] { color: var(--text-dim); }

/* -------------------------------------------------------------
   MAIN
   ------------------------------------------------------------- */

.sc-main { display: flex; min-width: 0; flex-direction: column; }

.sc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-header);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 6;
}

.sc-topbar-title h1 { margin: 0; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; }
.sc-topbar-title p { margin: 2px 0 0; color: var(--text-dim); font-size: 0.75rem; }

.sc-topbar-actions { display: flex; align-items: center; gap: 10px; }

.sc-icon-btn {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-muted);
  background: var(--bg-card);
  cursor: pointer;
  transition: var(--transition);
}

.sc-icon-btn:hover { border-color: var(--border-accent); color: var(--text-main); }

.sc-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--bg-card);
}

.sc-user-avatar {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #000804;
  background: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
}

.sc-user-name { font-size: 0.76rem; font-weight: 600; }

.sc-view { display: none; padding: 22px 24px 60px; }
.sc-view.active { display: block; }

/* -------------------------------------------------------------
   CARDS & FORM
   ------------------------------------------------------------- */

.sc-card {
  max-width: 1180px;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}

.sc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sc-card-head h2 { margin: 0; font-family: var(--font-display); font-size: 0.97rem; font-weight: 700; }

.sc-step {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--text-dim);
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sc-step[data-state="ai"] { border-color: var(--border-accent); color: var(--accent-light); background: var(--accent-subtle); }
.sc-step[data-state="pass"] { border-color: rgba(16, 185, 129, 0.35); color: #34D399; background: rgba(16, 185, 129, 0.12); }
.sc-step[data-state="warn"] { border-color: rgba(251, 191, 36, 0.35); color: #D97706; background: rgba(251, 191, 36, 0.12); }
.sc-step[data-state="fail"] { border-color: rgba(248, 113, 113, 0.35); color: #EF4444; background: rgba(248, 113, 113, 0.12); }

.sc-card-note { margin: -4px 0 14px; color: var(--text-muted); font-size: 0.76rem; line-height: 1.55; }

.sc-field { display: flex; min-width: 0; flex-direction: column; gap: 5px; margin-bottom: 13px; }

.sc-field > label,
.sc-label-static {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sc-req { color: var(--accent); letter-spacing: 0.04em; text-transform: none; }

.sc-field input[type="text"],
.sc-field textarea,
.sc-field select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-main);
  background: var(--bg-input);
  font-family: var(--font-main);
  font-size: 0.83rem;
}

.sc-field textarea { min-height: 62px; line-height: 1.5; resize: vertical; }

.sc-field input[type="text"]:focus,
.sc-field textarea:focus,
.sc-field select:focus { outline: none; border-color: var(--accent); }

.sc-field input[type="color"] {
  width: 100%;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-input);
  cursor: pointer;
}

.sc-hint { color: var(--text-dim); font-size: 0.7rem; }

.sc-grid-2 { display: grid; gap: 13px; grid-template-columns: 1fr 1fr; }
.sc-grid-3 { display: grid; gap: 13px; grid-template-columns: repeat(3, 1fr); }

.sc-platforms { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }

.sc-platform {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--bg-elevated);
  cursor: pointer;
  transition: var(--transition);
}

.sc-platform:hover { border-color: var(--border-accent); }
.sc-platform:has(input:checked) { border-color: var(--accent); background: var(--accent-subtle); }
.sc-platform:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-platform input { margin-top: 2px; accent-color: var(--accent); }
.sc-platform-body { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.sc-platform-body strong { font-size: 0.8rem; font-weight: 650; }
.sc-platform-body small { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.6rem; }

.sc-brief-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

.sc-brief-note { margin: 0; color: var(--text-dim); font-size: 0.73rem; line-height: 1.5; }

/* -------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------- */

.sc-btn {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-main);
  background: var(--bg-elevated);
  font-family: var(--font-main);
  font-size: 0.79rem;
  font-weight: 650;
  cursor: pointer;
  transition: var(--transition);
}

.sc-btn:hover:not(:disabled) { border-color: var(--border-accent); background: var(--accent-subtle); }
.sc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-btn.subtle { color: var(--text-muted); background: transparent; }
.sc-btn.tiny { min-height: 28px; padding: 4px 10px; font-size: 0.71rem; }

.sc-btn.primary {
  flex: 0 0 auto;
  border-color: transparent;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  font-weight: 700;
  box-shadow: 0 9px 24px rgba(1, 101, 77, 0.22);
}

.sc-btn.primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent-light), var(--accent)); }

/* -------------------------------------------------------------
   PROGRESS & ERRORS
   ------------------------------------------------------------- */

.sc-progress { max-width: 1180px; margin-bottom: 18px; }

.sc-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--text-dim);
  background: var(--bg-card);
  font-size: 0.75rem;
}

.sc-steps li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
}

.sc-steps li[data-state="active"] { color: var(--text-main); border-color: var(--border-accent); }
.sc-steps li[data-state="active"]::before { background: var(--accent); animation: sc-pulse 1.1s ease-in-out infinite; }
.sc-steps li[data-state="done"] { color: var(--accent-light); }
.sc-steps li[data-state="done"]::before { background: var(--accent); }

@keyframes sc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-steps li[data-state="active"]::before { animation: none; }
}

.sc-error {
  max-width: 1180px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 11px;
  color: #F87171;
  background: rgba(239, 68, 68, 0.09);
  font-size: 0.8rem;
}

/* -------------------------------------------------------------
   RESULTS
   ------------------------------------------------------------- */

.sc-split { display: grid; max-width: 1180px; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sc-split .sc-card { max-width: none; }

.sc-plan-grid,
.sc-prov-grid {
  display: grid;
  gap: 11px 20px;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.sc-plan-grid dt,
.sc-prov-grid dt {
  margin-bottom: 2px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sc-plan-grid dd,
.sc-prov-grid dd {
  margin: 0;
  color: var(--text-main);
  font-size: 0.81rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.sc-empty { margin: 0; color: var(--text-dim); font-size: 0.79rem; line-height: 1.55; }

.sc-image-main { display: grid; gap: 14px; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); }

.sc-image-preview {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  border-radius: 12px;
  object-fit: cover;
}

.sc-image-meta { display: flex; min-width: 0; flex-direction: column; gap: 10px; }
.sc-image-why { margin: 0; color: var(--text-muted); font-size: 0.77rem; line-height: 1.55; }
.sc-image-overall { margin: 0; color: var(--text-dim); font-family: var(--font-mono); font-size: 0.66rem; }
.sc-image-overall strong { color: var(--accent-light); font-size: 0.82rem; }

.sc-scores { display: flex; flex-direction: column; gap: 5px; }

.sc-score { display: grid; align-items: center; gap: 9px; grid-template-columns: 74px minmax(0, 1fr) 26px; }
.sc-score-label { color: var(--text-dim); font-size: 0.68rem; }
.sc-score-track { height: 5px; overflow: hidden; border-radius: 9999px; background: var(--bg-elevated); }
.sc-score-fill { display: block; height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--accent-dark), var(--accent-light)); }
.sc-score-value { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.64rem; text-align: right; }

.sc-fits {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  list-style: none;
}

.sc-fits li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-elevated);
}

.sc-fits strong { font-size: 0.74rem; font-weight: 650; }
.sc-fits small { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.59rem; }
.sc-ok { color: #34D399; font-size: 0.68rem; font-weight: 600; }
.sc-warn { color: #D97706; font-size: 0.68rem; font-weight: 600; }

.sc-alts { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.sc-alt-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; }

.sc-alt {
  position: relative;
  width: 62px;
  height: 78px;
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
  cursor: pointer;
  transition: var(--transition);
}

.sc-alt:hover { border-color: var(--accent); transform: translateY(-1px); }
.sc-alt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-alt img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sc-alt span {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 5px;
  border-radius: 5px;
  color: #FFFFFF;
  background: rgba(3, 8, 6, 0.82);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
}

.sc-attribution { margin: 14px 0 0; color: var(--text-dim); font-family: var(--font-mono); font-size: 0.63rem; }

/* Posts */
.sc-posts { display: flex; flex-direction: column; gap: 12px; }

.sc-post {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
}

.sc-post-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-post-head strong { font-size: 0.82rem; font-weight: 700; }

.sc-count {
  padding: 2px 7px;
  border-radius: 9999px;
  color: var(--text-dim);
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 700;
}

.sc-count[data-state="warn"] { color: #D97706; background: rgba(251, 191, 36, 0.14); }
.sc-count[data-state="over"] { color: #EF4444; background: rgba(248, 113, 113, 0.14); }

.sc-post-body {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-main);
  background: var(--bg-input);
  font-family: var(--font-main);
  font-size: 0.81rem;
  line-height: 1.55;
  resize: vertical;
}

.sc-post-body:focus { outline: none; border-color: var(--accent); }

.sc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.sc-tags span {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--accent-light);
  background: var(--accent-subtle);
  font-size: 0.68rem;
}

.sc-post-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-post-size { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.6rem; }

/* Review */
.sc-checks { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.sc-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
}

.sc-check-mark {
  display: grid;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
}

li[data-status="pass"] .sc-check-mark { color: #04120C; background: #34D399; }
li[data-status="warn"] .sc-check-mark { color: #1A1204; background: #FBBF24; }
li[data-status="fail"] .sc-check-mark { color: #FFFFFF; background: #EF4444; }
li[data-status="fail"] { border-color: rgba(248, 113, 113, 0.35); }

.sc-check-body { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.sc-check-body strong { font-size: 0.79rem; font-weight: 650; }
.sc-check-body small { color: var(--text-muted); font-size: 0.72rem; line-height: 1.5; }

/* Designs */
.sc-design-actions { display: flex; flex-wrap: wrap; gap: 9px; }

.sc-builder-host {
  display: flex;
  height: min(760px, 88vh);
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.sc-builder-host[hidden] { display: none; }
.sc-builder-host .layout-studio { border-radius: var(--radius-md); }

/* Brand kit */
.sc-logo-row { display: flex; align-items: center; gap: 9px; }

.sc-logo-preview {
  display: block;
  width: 54px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px dashed var(--border-highlight);
  border-radius: 8px;
  background-color: var(--bg-elevated);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.sc-logo-preview[data-has="true"] { border-style: solid; }

/* Toasts */
.sc-toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-toast {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-main);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card);
  font-size: 0.79rem;
  transition: opacity 0.3s ease;
}

/* -------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------- */

@media (max-width: 1100px) {
  .sc-split { grid-template-columns: minmax(0, 1fr); }
  .sc-image-main { grid-template-columns: minmax(0, 168px) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .sc-app { grid-template-columns: minmax(0, 1fr); }
  /* The sidebar becomes a horizontal strip rather than eating the viewport,
     and stops being sticky so it does not fight the sticky topbar below it. */
  .sc-sidebar {
    position: static;
    height: auto;
    overflow-y: visible;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    padding: 10px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .sc-nav { flex: 0 0 auto; flex-direction: row; }
  .sc-nav-btn span { white-space: nowrap; }
  .sc-sidebar-foot { flex: 0 0 auto; flex-direction: row; align-items: center; }
  .sc-engine { display: none; }
  .sc-view { padding: 16px 14px 48px; }
  .sc-topbar { padding: 13px 14px; }
  .sc-grid-2, .sc-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .sc-image-main { grid-template-columns: minmax(0, 1fr); }
  .sc-image-preview { max-width: 260px; aspect-ratio: 4 / 3; }
  .sc-brief-actions { align-items: stretch; flex-direction: column; }
  .sc-btn { min-height: 44px; }
  .sc-btn.tiny { min-height: 34px; }
  .sc-builder-host { height: min(680px, 90vh); }
}

@media (max-width: 560px) {
  .sc-user-name { display: none; }
  .sc-design-actions .sc-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   UX PASS
   The first cut showed every field and every measurement at once, which read
   as a debug panel. These rules quiet the typography, drop a layer of boxes,
   and style the disclosure panels that now hold the supporting detail.
   ========================================================================== */

/* Field labels were uppercase monospace, which shouts and is hard to scan at
   this density. Sentence case, normal letterforms, muted. */
.sc-field > label,
.sc-inline-label {
  color: var(--text-muted);
  font-family: var(--font-main);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.sc-plan-grid dt,
.sc-prov-grid dt {
  color: var(--text-dim);
  font-family: var(--font-main);
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- The ask ---------- */

.sc-ask { max-width: 900px; padding: 22px; }

.sc-ask-title {
  display: block;
  margin-bottom: 10px;
  color: var(--text-main);
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
}

.sc-ask textarea#scTopic {
  width: 100%;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-main);
  background: var(--bg-input);
  font-family: var(--font-main);
  font-size: 0.93rem;
  line-height: 1.55;
  resize: vertical;
}

.sc-ask textarea#scTopic:focus { outline: none; border-color: var(--accent); }
.sc-ask textarea#scTopic::placeholder { color: var(--text-dim); }

.sc-ask-platforms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
}

/* Platform chips: a name and a tick, nothing else. */
.sc-platforms { display: flex; flex-wrap: wrap; gap: 7px; grid-template-columns: none; }

.sc-platform {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--bg-elevated);
  font-size: 0.79rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.sc-platform:hover { border-color: var(--border-accent); }
.sc-platform:has(input:checked) { border-color: var(--accent); color: var(--text-main); background: var(--accent-subtle); }
.sc-platform input { margin: 0; accent-color: var(--accent); }

/* ---------- Disclosures ---------- */

.sc-more,
.sc-detail {
  border-top: 1px solid var(--border-light);
  margin-top: 16px;
}

.sc-detail {
  margin-top: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.sc-more > summary,
.sc-detail > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 2px;
  color: var(--text-main);
  font-size: 0.83rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.sc-detail > summary { padding: 14px 16px; }
.sc-more > summary::-webkit-details-marker,
.sc-detail > summary::-webkit-details-marker { display: none; }
.sc-more > summary:hover,
.sc-detail > summary:hover { color: var(--accent-light); }
.sc-more > summary:focus-visible,
.sc-detail > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.sc-more > summary small,
.sc-detail > summary small {
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 400;
}

.sc-chev { flex: 0 0 auto; color: var(--text-dim); transition: transform 0.18s ease; }
.sc-more[open] > summary .sc-chev,
.sc-detail[open] > summary .sc-chev { transform: rotate(90deg); }

.sc-more-body { padding: 4px 2px 8px; }
.sc-detail > *:not(summary) { padding: 0 16px 16px; }
.sc-detail > ul:not(summary) { padding: 0 16px 16px; }

.sc-detail-tag {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--text-dim);
  background: var(--bg-elevated);
  font-size: 0.66rem;
  font-weight: 600;
}

.sc-detail-tag[data-state="ai"] { border-color: var(--border-accent); color: var(--accent-light); background: var(--accent-subtle); }

.sc-detail-stack { display: flex; max-width: 1180px; flex-direction: column; gap: 9px; }

.sc-field-narrow { max-width: 220px; }

/* ---------- Result bar ---------- */

.sc-result-bar {
  display: flex;
  max-width: 1180px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.sc-result-bar-left { display: flex; align-items: center; gap: 11px; }
.sc-result-bar-left h2 { margin: 0; font-family: var(--font-display); font-size: 1.04rem; font-weight: 700; }
.sc-result-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.sc-verdict {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 650;
  cursor: pointer;
  transition: var(--transition);
}

.sc-verdict:hover { border-color: var(--border-highlight); color: var(--text-main); }
.sc-verdict[data-state="pass"] { border-color: rgba(16, 185, 129, 0.35); color: #34D399; background: rgba(16, 185, 129, 0.12); }
.sc-verdict[data-state="warn"] { border-color: rgba(251, 191, 36, 0.35); color: #D97706; background: rgba(251, 191, 36, 0.12); }
.sc-verdict[data-state="fail"] { border-color: rgba(248, 113, 113, 0.4); color: #EF4444; background: rgba(248, 113, 113, 0.13); }

/* ---------- Photo ---------- */

.sc-card-image { padding: 14px; }

.sc-photo { margin: 0; }

.sc-photo .sc-image-preview {
  width: 100%;
  aspect-ratio: auto;
  max-height: 460px;
  object-fit: cover;
}

.sc-photo figcaption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 11px;
}

.sc-photo-credit { color: var(--text-dim); font-size: 0.73rem; }
.sc-photo-facts { display: flex; flex-wrap: wrap; gap: 6px; }

.sc-pill {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  font-size: 0.71rem;
  font-weight: 600;
}

.sc-pill.good { border-color: rgba(16, 185, 129, 0.3); color: #34D399; background: rgba(16, 185, 129, 0.1); }
.sc-pill.caution { border-color: rgba(251, 191, 36, 0.3); color: #D97706; background: rgba(251, 191, 36, 0.1); }

/* Copy comes first on wide screens, since it is what gets edited. */
.sc-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }

/* One less box: the posts sit directly on the card. */
.sc-card #scPosts .sc-post { border: 1px solid var(--border-light); background: transparent; }
.sc-card #scPosts .sc-post + .sc-post { margin-top: 2px; }

@media (max-width: 1100px) {
  .sc-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .sc-ask { padding: 16px; }
  .sc-result-bar-actions { width: 100%; }
  .sc-result-bar-actions .sc-btn { flex: 1; }
  .sc-detail > summary { padding: 13px 13px; }
  .sc-detail > *:not(summary) { padding: 0 13px 13px; }
}

/* Collapsed brief: one line plus a way back in. */
.sc-ask-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sc-ask-collapsed[hidden] { display: none; }

.sc-ask-summary {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.83rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-ask-body[hidden] { display: none; }

/* Post boxes grow to their content, so nothing hides behind an inner bar. */
.sc-post-body { overflow: hidden; }

@media (max-width: 620px) {
  .sc-ask-collapsed { align-items: stretch; flex-direction: column; }
  .sc-ask-summary { white-space: normal; }
}

/* One line of progress instead of four named stages. */
.sc-working {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 1180px;
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.sc-working[hidden] { display: none; }

.sc-working-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  animation: sc-pulse 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sc-working-dot { animation: none; }
}

/* Removed from the markup; the rules would otherwise sit here unused. */
.sc-steps,
.sc-engine,
.sc-post-size { display: none; }

/* ---------- Swap the suggested photo ----------
   Promoted out of a collapsed panel: changing the picture is the action
   people actually want here, so the alternates sit under the image with
   their score attached. */
.sc-swap { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }

.sc-swap .sc-alt-row { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; }

.sc-swap .sc-alt {
  width: 74px;
  height: 74px;
  border-radius: 10px;
}

.sc-swap .sc-alt:hover { border-color: var(--accent); transform: translateY(-2px); }

/* The builder now opens with the campaign, so it gets room to work. */
.sc-builder-host { height: min(720px, 82vh); margin-top: 0; margin-bottom: 18px; }

/* Rules whose markup was removed with the scorecard and plan panels. */
.sc-scores,
.sc-score,
.sc-score-label,
.sc-score-track,
.sc-score-fill,
.sc-score-value,
.sc-fits,
.sc-alts,
.sc-image-why,
.sc-image-overall,
.sc-plan-grid,
.sc-detail-tag { display: none; }

@media (max-width: 900px) {
  .sc-builder-host { height: min(640px, 88vh); }
}

/* ---------- Collapsible posts ----------
   Three full captions stacked was the densest block left on the page. The
   first opens, the rest fold to a row carrying the platform and the count —
   and the count keeps its colour, so an over-limit post still shows red
   while closed. */
.sc-post { display: block; padding: 0; overflow: hidden; }

.sc-post > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
}

.sc-post > summary::-webkit-details-marker { display: none; }
.sc-post > summary:hover { background: var(--bg-card-hover); }
.sc-post > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sc-post > summary strong { flex: 1; font-size: 0.82rem; font-weight: 700; }
.sc-post[open] > summary { border-bottom: 1px solid var(--border-light); }
.sc-post[open] > summary .sc-chev { transform: rotate(90deg); }

.sc-post-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px 13px;
}

@media (max-width: 900px) {
  /* The rest of the app holds a 44px touch-target floor; these rows are the
     primary way to open a post, so they meet it too. */
  .sc-post > summary { min-height: 44px; padding: 12px 13px; }
  .sc-detail > summary { min-height: 44px; }
}

/* ---------- Photo picker ----------
   The large preview, its copy-space pill and its credit line all came out:
   the Layout Builder renders the same photograph at size and per format with
   its own verdict, and the credit lives in the Checks & credit panel. What is
   left is the one thing this row is for — choosing which photo to compose. */
.sc-card-image { padding: 13px; margin-bottom: 12px; }
.sc-swap { margin-top: 0; }

.sc-swap .sc-alt-row { align-items: center; }

/* The photo in use, marked rather than duplicated above the row. */
.sc-swap .sc-alt.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  cursor: default;
  opacity: 1;
}

.sc-swap .sc-alt.is-current:hover { transform: none; }

.sc-swap .sc-alt.is-current::after {
  content: "In use";
  position: absolute;
  top: 3px;
  left: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  color: #000804;
  background: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Removed with the preview. */
.sc-photo,
.sc-photo-credit,
.sc-photo-facts,
.sc-image-preview { display: none; }

/* The posts card is full width now that the photo column is a single row. */
.sc-split { display: block; }

/* ==========================================================================
   BUILDER ON TABLET AND MOBILE
   The pane was a fixed height with the controls in their own scroller, so the
   stage collapsed to its 150px minimum and the preview rendered at 241x126
   inside an 811px-wide stage — 570px of width wasted. Below the two-column
   breakpoint the builder now grows in the page instead: the stage gets real
   height, and the controls scroll with the document like everything else.
   ========================================================================== */

@media (max-width: 1000px) {
  .sc-builder-host {
    height: auto;
    min-height: 0;
  }

  .ls-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  /* Enough to judge a composition, and enough for a 9:16 crop to be more
     than a sliver. */
  .ls-stage {
    min-height: 54vh;
    padding: 14px;
  }

  /* No inner scroller: nested scrolling inside a page that already scrolls
     is the thing people complain about. */
  .ls-rail {
    max-height: none;
    overflow-y: visible;
    border-top: 1px solid var(--border-light);
    border-left: 0;
  }
}

@media (max-width: 900px) {
  /* Overrides the earlier fixed height in this file for the same range. */
  .sc-builder-host { height: auto; }
  .ls-stage { min-height: 50vh; }
}

@media (max-width: 620px) {
  /* Portrait phones: the stage is width-bound, so height beyond this buys
     nothing for landscape formats and the controls come up sooner. */
  .ls-stage { min-height: 42vh; padding: 10px; }
}