/* New-post composer additions — matches "02 New post" in the Musketr
   Mockups Claude Design file. Builds on the existing .composer-card /
   .destination-option / .preflight rules already in application.css;
   this file only adds what's new (live video preview, publish-now vs
   schedule tabs, richer pre-flight states). */

/* .upload-zone/.video-preview set their own `display`, which — being
   author CSS — beats the browser's default `[hidden] { display: none }`
   UA rule. Restate it explicitly wherever we toggle `hidden` via JS. */
.upload-zone[hidden], .video-preview[hidden] { display: none; }

.video-preview { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); }
.video-preview__frame { width: 54px; height: 96px; border-radius: 8px; background: var(--ink); color: var(--gold); display: grid; place-items: center; flex-shrink: 0; font-size: 1.1rem; }
.video-preview__meta { display: flex; flex-direction: column; gap: 8px; }
.video-preview__meta strong { font-size: 0.95rem; color: var(--ink); }
.video-preview__meta p { margin: 0; font: 400 0.76rem var(--font-meta); color: var(--soft); }
.video-preview__badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 8px; background: #eff9f2; color: var(--green); font-size: 0.76rem; font-weight: 500; width: fit-content; }
.video-preview__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.video-preview__badge.is-warning { background: #fff1f0; color: #a32936; }
.video-preview__meta .text-link { align-self: flex-start; border: 0; background: none; padding: 0; cursor: pointer; font: 700 0.82rem var(--font-ui); }

.when-tabs { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.when-tab { flex: 1; text-align: center; padding: 9px; border-radius: 7px; border: 0; background: none; font: 600 0.82rem var(--font-ui); color: var(--soft); cursor: pointer; }
.when-tab.is-active { background: var(--cardinal); color: var(--paper); }
.publish-rail .schedule-field[hidden] { display: none; }

.schedule-datetime { display: flex; gap: 9px; }
.schedule-datetime__date, .schedule-datetime__time { width: auto; flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; font: 400 0.82rem var(--font-meta); color: var(--ink); }
.schedule-datetime__time { flex: 0 0 110px; }
.schedule-datetime__date:focus, .schedule-datetime__time:focus { outline: 3px solid #e9c680; outline-offset: 1px; }

.preflight-warn { color: #906221 !important; }
.preflight-empty { margin: 10px 0 0; font-size: 0.8rem; color: var(--soft); }
.preflight-empty a { color: var(--cardinal); font-weight: 700; }

/* Per-destination detail rows — one per connected account. Only YouTube
   has real override fields (youtube_title/youtube_description on Post),
   so it's the only expandable one; the rest are informational for now. */
.platform-overrides__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.platform-overrides__head h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.platform-overrides__head span { color: var(--faint); font: 400 0.72rem var(--font-meta); }
.override-rows { display: flex; flex-direction: column; gap: 8px; }
/* Same author-CSS-beats-[hidden] gotcha as .upload-zone/.video-preview
   above — restated here since destination-sync toggles `hidden` on these. */
.override-row[hidden] { display: none; }
.override-row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); }
.override-row strong { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.override-row small { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--soft); }
details.override-row { display: block; padding: 0; overflow: hidden; }
details.override-row summary { display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer; list-style: none; }
details.override-row summary::-webkit-details-marker { display: none; }
details.override-row summary em { margin-left: auto; flex-shrink: 0; font-style: normal; font-size: 0.8rem; font-weight: 700; color: var(--cardinal); }
details.override-row[open] { border-color: var(--cardinal); }
details.override-row[open] summary { border-bottom: 1px solid var(--line); }
details.override-row .override-fields { padding: 14px 15px 15px; margin-top: 0; }

/* ============ "07 Mobile" — the rail's publish action becomes a sticky
   bar ============ Below 780px .publish-rail already goes position:static
   and full-width (application.css); everything above the submit button
   (destinations, when/schedule, pre-flight) stays readable in normal flow.
   Only the button + its note detach into a bar pinned above the bottom tab
   bar, so "Publish everywhere" stays reachable while scrolling a long
   destinations list. */
@media (max-width: 780px) {
  .publish-rail { padding-bottom: 96px; }
  .publish-bar {
    position: fixed;
    z-index: 25;
    right: 0;
    bottom: calc(68px + env(safe-area-inset-bottom));
    left: 0;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(14px);
  }
  .publish-bar .publish-button { min-height: 48px; }
  .publish-bar .publish-note { margin: 6px 0 0; }
}