/* Social engine. From scratch, so it uses the host's --shy-* tokens directly
   (no :root alias block). Every stylesheet loads on every page: classes are
   prefixed soc-, and anything generic is scoped .engine-social. */

.soc-muted { color: var(--shy-text-muted); }
.soc-checked { margin: -0.5rem 0 1rem; font-size: 0.85rem; }
.soc-inline-form { display: inline-flex; margin: 0; }

.soc-pill {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--shy-surface-sunken);
  color: var(--shy-text-muted);
}
.soc-pill--dye-video { background: var(--shy-brand-tint); color: var(--shy-brand); }
.soc-pill--done { background: var(--shy-success-tint); color: var(--shy-success); }
.soc-pill--gone { background: var(--shy-danger-tint); color: var(--shy-danger); }
/* A post's status (Social::Post) */
.soc-pill--hand-posting { background: var(--shy-warning-tint); color: var(--shy-warning); }
.soc-pill--posting { background: var(--shy-brand-tint); color: var(--shy-brand); }
.soc-pill--posted { background: var(--shy-success-tint); color: var(--shy-success); }
.soc-pill--failed { background: var(--shy-danger-tint); color: var(--shy-danger); }
.soc-pill--scheduled { background: var(--shy-brand-tint); color: var(--shy-brand); }
.soc-pill--drop { background: var(--shy-brand); color: var(--shy-brand-contrast); }

.soc-banner {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--shy-radius);
  background: var(--shy-surface-sunken);
}
.soc-banner p, .soc-banner ul { margin: 0; }
/* Platform errors carry long links (a Short's URL): wrap them at phone width. */
.soc-banner p { overflow-wrap: anywhere; }
.soc-banner--error { background: var(--shy-danger-tint); color: var(--shy-danger); }
.soc-banner--warning { background: var(--shy-warning-tint); color: var(--shy-text); }
.soc-banner--done { background: var(--shy-success-tint); color: var(--shy-text); }
.soc-banner[hidden] { display: none; }

/* The Queue's lists */
.soc-items { list-style: none; margin: 0; padding: 0; }
.soc-item {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--shy-border);
}
.soc-item:last-child { border-bottom: 0; }
.soc-item__thumb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--shy-radius-sm);
  background: var(--shy-surface-sunken);
  text-decoration: none;
}
.soc-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.soc-item__nocover { padding: 0 0.2rem; font-size: 0.65rem; text-align: center; color: var(--shy-text-faint); }
.soc-item__body { display: grid; gap: 0.25rem; min-width: 0; }
.soc-item__title { font-weight: 600; overflow-wrap: anywhere; }
.soc-item__title a { color: var(--shy-text); }
.soc-item__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.85rem; }
.soc-item__meta { font-size: 0.8rem; overflow-wrap: anywhere; }

/* The item page */
.soc-item-page {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}
.soc-item-page__media,
.soc-item-page__side { display: grid; gap: 1rem; min-width: 0; }

.soc-video {
  display: block;
  width: 100%;
  max-height: 70vh;
  aspect-ratio: 9 / 16;
  border-radius: var(--shy-radius);
  background: var(--shy-surface-sunken);
}
.soc-video__facts { margin: 0.5rem 0 0; font-size: 0.85rem; overflow-wrap: anywhere; }
.soc-cover { display: block; max-width: 100%; max-height: 24rem; border-radius: var(--shy-radius); }

.soc-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}
.soc-facts dt { color: var(--shy-text-muted); }
.soc-facts dd { margin: 0; overflow-wrap: anywhere; }

.soc-form .field input[type="text"],
.soc-form .field textarea,
.soc-form .field select { max-width: 46rem; }
.soc-form .field[hidden] { display: none; }

.soc-form .actions input[type="submit"].shy-btn--secondary {
  background: var(--shy-surface);
  color: var(--shy-text);
  border: 1px solid var(--shy-border-strong);
}

.soc-video__download { margin: 0.75rem 0 0; }

/* Settings: one time per platform */
.soc-settings { margin-bottom: 1rem; }
.soc-settings > .shy-card + .shy-card { margin-top: 1rem; }
.soc-more { margin: 0.75rem 0 0; font-size: 0.85rem; }

/* The item's schedule form */
.soc-sched { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.soc-sched__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
}
.soc-sched__row--off { background: var(--shy-surface-sunken); }
.soc-sched__row--off .soc-sched__time,
.soc-sched__row--off .soc-sched__own { opacity: 0.5; }
.soc-sched__platform { display: inline-flex; gap: 0.4rem; align-items: center; min-width: 7rem; font-weight: 600; }
.soc-sched__platform input { width: 1.1rem; height: 1.1rem; margin: 0; }
.soc-sched__time {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--shy-border-strong);
  border-radius: var(--shy-radius);
  background: var(--shy-surface);
  color: var(--shy-text);
  font: inherit;
}
.soc-sched__status { font-size: 0.8rem; }
.soc-sched__own { flex-basis: 100%; font-size: 0.9rem; }
.soc-sched__own summary { cursor: pointer; color: var(--shy-brand); }
.soc-sched__own .field { margin: 0.5rem 0 0; }
.soc-unschedule { margin: 0.75rem 0 0; }

/* Each platform's post: status, caption, copy buttons, Mark posted */
.soc-captions { display: grid; gap: 0.75rem; }
.soc-post--off { opacity: 0.6; }
.soc-post__head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin: 0 0 0.35rem; }
.soc-post__head .soc-caption__platform { margin: 0; }
.soc-post__done { margin: 0 0 0.5rem; font-size: 0.9rem; overflow-wrap: anywhere; }
.soc-copy { display: grid; gap: 0.35rem; justify-items: start; margin: 0 0 0.5rem; }
.soc-copy__button { padding: 0.3rem 0.75rem; font-size: 0.85rem; }
.soc-mark-posted { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--shy-border); }
.soc-mark-posted .field { margin-bottom: 0.5rem; }
.soc-mark-posted .actions { margin-top: 0.5rem; margin-bottom: 0.75rem; }
.soc-key { margin: 1.25rem 0 0; }
.soc-key summary { cursor: pointer; color: var(--shy-text-muted); }
.soc-caption {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--shy-border);
  border-radius: var(--shy-radius);
}
.soc-caption__platform { margin: 0 0 0.35rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--shy-text-muted); }
.soc-caption__title { margin: 0 0 0.35rem; font-weight: 600; overflow-wrap: anywhere; }
.soc-caption__body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Templates */
.soc-scroll { overflow-x: auto; }
.soc-table { width: 100%; }
.soc-template-body { white-space: pre-line; overflow-wrap: anywhere; }

/* At phone width each template is a block of its own, not a table row. */
@media (max-width: 40rem) {
  .shy-admin .soc-templates thead { display: none; }
  .shy-admin .soc-templates tr { display: grid; gap: 0.25rem; padding: 0.6rem 0; border-bottom: 1px solid var(--shy-border); }
  .shy-admin .soc-templates td { display: block; padding: 0; border: 0; }
  .shy-admin .soc-templates td:first-child { font-weight: 600; }
}

/* Entries: one item's posts at one time (Queue, Calendar, dashboard) */
.soc-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.soc-entry { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; align-items: baseline; font-size: 0.9rem; }
.soc-entry__time { color: var(--shy-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.soc-entry__title { font-weight: 600; color: var(--shy-text); overflow-wrap: anywhere; }
.soc-entry__platforms { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.soc-entry--posted .soc-entry__title { color: var(--shy-text-muted); }
.soc-entry--approval { align-items: center; }
.soc-entry__approve { padding: 0.2rem 0.75rem; font-size: 0.85rem; }
.soc-approve { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
.soc-approve p { margin: 0; }

/* The Queue's next seven days */
.soc-upcoming { display: grid; gap: 0.75rem; }
.soc-upcoming__date { margin: 0 0 0.35rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--shy-text-muted); }

/* The Calendar: Monday-to-Sunday weeks */
.soc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--shy-border); border: 1px solid var(--shy-border); }
.soc-cal__weekday { padding: 0.35rem 0.5rem; background: var(--shy-surface-alt); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--shy-text-muted); }
.soc-cal__day { min-height: 6.5rem; padding: 0.4rem 0.5rem; background: var(--shy-surface); min-width: 0; }
.soc-cal__day--other { background: var(--shy-surface-sunken); }
.soc-cal__day--other .soc-cal__num { color: var(--shy-text-faint); }
.soc-cal__day--drop { box-shadow: inset 0 3px 0 var(--shy-brand); }
.soc-cal__day--today .soc-cal__num { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--shy-brand); color: var(--shy-brand-contrast); }
.soc-cal__date { display: flex; gap: 0.4rem; align-items: center; margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 600; }
.soc-cal__long { display: none; }
.soc-cal .soc-entry { display: grid; gap: 0.15rem; font-size: 0.8rem; }
.soc-cal .soc-pill { font-size: 0.65rem; padding: 0 0.35rem; }

/* At phone width the month is a list of the days that have something. */
@media (max-width: 40rem) {
  .soc-cal { grid-template-columns: 1fr; background: none; border: 0; gap: 0.5rem; }
  .soc-cal__weekday, .soc-cal__day--empty { display: none; }
  .soc-cal__day { min-height: 0; border: 1px solid var(--shy-border); border-radius: var(--shy-radius); }
  .soc-cal__num { display: none; }
  .soc-cal__day--today .soc-cal__num { display: none; }
  .soc-cal__long { display: inline; }
  .soc-cal .soc-entry { display: flex; font-size: 0.9rem; }
}

/* Accounts */
.soc-accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
/* Blotato's card: one row per platform (its account, its switch). */
.soc-destinations { display: grid; gap: 0.75rem; margin: 1rem 0 0.5rem; }
.soc-destination { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; }
.soc-destination__platform { font-weight: 600; }
.soc-destination select { width: 100%; min-width: 0; }
@media (max-width: 480px) {
  .soc-destination { grid-template-columns: minmax(0, 1fr) auto; }
  .soc-destination__platform { grid-column: 1 / -1; }
}
.soc-account__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.75rem; }
.soc-check { display: inline-flex; gap: 0.5rem; align-items: center; font-weight: 600; }
.soc-check input { width: 1.1rem; height: 1.1rem; margin: 0; }
.soc-pill--off { background: var(--shy-surface-sunken); color: var(--shy-text-muted); }

/* A failed automatic post, and a posted one's after-note */
.soc-post__retry { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.5rem; }
.soc-post__retry p { margin: 0; }
.soc-post__note { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--shy-text-muted); overflow-wrap: anywhere; }

/* The ad test (#112): Social → Ads, the reel picker, the item's Ad test row */
.soc-pill--ad-waiting { background: var(--shy-warning-tint); color: var(--shy-warning); }
.soc-pill--ad-running { background: var(--shy-brand-tint); color: var(--shy-brand); }
.soc-pill--ad-ended { background: var(--shy-surface-sunken); color: var(--shy-text-muted); }
.soc-pill--ad-promoted { background: var(--shy-success-tint); color: var(--shy-success); }
.soc-pill--ad-failed { background: var(--shy-danger-tint); color: var(--shy-danger); }
.soc-ad-total { margin: 0 0 0.75rem; }
.soc-ad__error { margin: 0.35rem 0 0; font-size: 0.85rem; }
.soc-ad .soc-inline-form { margin-top: 0.35rem; }
.soc-ad-row { border-style: dashed; }
.soc-ad-form > .shy-card + .shy-card { margin-top: 1rem; }
.soc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 1rem; }
.shy-admin .field label.soc-check { display: inline-flex; }
.shy-admin .field .soc-check input { width: 1.1rem; height: 1.1rem; padding: 0; }
.soc-reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.25rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.soc-reels__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.soc-reel {
  position: relative;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: 0.4rem;
  border: 2px solid var(--shy-border);
  border-radius: var(--shy-radius);
  background: var(--shy-surface);
  cursor: pointer;
  min-width: 0;
}
.soc-reel:hover { border-color: var(--shy-border-strong); }
.soc-reel:has(.soc-reel__pick:checked) { border-color: var(--shy-brand); background: var(--shy-brand-tint); }
.soc-reel:has(.soc-reel__pick:focus-visible) { outline: 2px solid var(--shy-brand); outline-offset: 2px; }
.soc-reel__pick { position: absolute; top: 0.6rem; left: 0.6rem; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--shy-brand); }
.soc-reel__thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: calc(var(--shy-radius) - 2px);
  background: var(--shy-surface-sunken);
}
.soc-reel__thumb img { width: 100%; height: 100%; object-fit: cover; }
.soc-reel__body { display: grid; gap: 0.15rem; min-width: 0; }
.soc-reel__date { font-size: 0.75rem; font-weight: 600; color: var(--shy-text-muted); }
.soc-reel__caption { font-size: 0.8rem; overflow-wrap: anywhere; }
.soc-reel--standalone { grid-template-columns: 3.5rem minmax(0, 1fr); align-items: start; padding-left: 2.25rem; }
.soc-reel--standalone .soc-reel__pick { top: 0.85rem; left: 0.7rem; }
.soc-reel--standalone .soc-reel__caption { color: var(--shy-text-muted); }
/* The ad's text matters only for a standalone ad. */
.soc-ad-text { margin: 1rem 0 0; }
.soc-ad-form:not(:has(#social-ad-standalone:checked)) .soc-ad-text { display: none; }
.soc-pill--ad-post { background: var(--shy-surface-sunken); color: var(--shy-text-muted); }
.soc-pill--ad-standalone { background: var(--shy-brand-tint); color: var(--shy-brand); }
.soc-ad-settings .soc-facts { margin: 0 0 1.25rem; }