/* AI Smart Scheduling on the Calendar page (13.13, posts.js): the section at the top with its Play or Pause button,
   Up next with each post's reason, the sparkle on the posts it placed, and the calendar feed's dialog. The flat.css
   look: no box, a hairline under the section, words as plain text. Only app.css tokens, so Light and Dark follow. */
.ss { padding: 6px 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }
.ss:empty { display: none; }
.ss-main { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ss-play { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; display: grid;
  place-items: center; align-content: center; gap: 1px; background: var(--brand-ink); color: var(--on-brand);
  font-weight: 700; font-size: 11px; letter-spacing: .02em; transition: transform .12s ease, filter .12s ease; }
.ss-play .icon { width: 22px; height: 22px; }
.ss-play:not(.on) .icon { margin-left: 3px; }                 /* the play triangle sits optically centred */
.ss-play:hover { filter: brightness(1.08); }
.ss-play:active { transform: scale(.96); }
.ss-play:focus-visible { outline: 2px solid var(--focus-ring, var(--brand-ink)); outline-offset: 3px; }
.ss-play[disabled] { opacity: .6; cursor: default; }
.ss-play.on { background: transparent; color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--brand-ink); }
.ss-words { flex: 1 1 260px; min-width: 0; }
.ss-words h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.012em; color: var(--text-hi); }
.ss-words p { margin: 3px 0 0; color: var(--text-2); line-height: 1.45; }
.ss-state { display: block; margin-top: 5px; color: var(--text-3); line-height: 1.45; }
.ss-set { flex: none; }

.ss-next { margin-top: 14px; }
.ss-next-h { color: var(--text-3); font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 4px; }
.ss-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 14px; padding: 9px 0;
  border-top: 1px solid var(--rule); align-items: start; }
.ss-row:first-of-type { border-top: 0; }
.ss-when { color: var(--text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-what a { color: inherit; text-decoration: none; }
.ss-what a:hover b { color: var(--accent-text); }
.ss-why { display: block; color: var(--text-2); line-height: 1.45; margin-top: 3px; }
.ss-empty { padding: 6px 0; }

/* the sparkle: a post AI Smart Scheduling placed (its reason on hover) */
.ss-spark { display: inline-flex; align-items: center; flex: none; color: var(--accent-text); }
.ss-spark .icon { width: 14px; height: 14px; }
.cal-item .ss-spark { margin-right: 2px; }

.ss-accts { max-height: 260px; overflow: auto; }
.ss-howto { margin: 12px 0 10px; padding-left: 18px; line-height: 1.6; color: var(--text-2); }

@media (max-width: 767px) {
  .ss-main { gap: 12px; }
  .ss-play { width: 56px; height: 56px; }
  .ss-words { flex-basis: calc(100% - 72px); }
  .ss-set { margin-left: 68px; }
  .ss-row { grid-template-columns: minmax(0, 1fr); }
}