/* A focused composer: content on the left, delivery choices on the right. */
.composer-heading { max-width: 700px; padding: 38px 0 32px; }
.composer-heading h1 { margin: 9px 0 14px; font-size: 3.4rem; line-height: 1.06; }
.composer-heading p:not(.eyebrow) { max-width: 55ch; font-size: .96rem; line-height: 1.6; }
.composer-heading p.eyebrow { color: var(--gold); font: 500 .7rem var(--font-meta); letter-spacing: .1em; }
.composer-form { grid-template-columns: minmax(0, 1fr) 352px; gap: 24px; }
.composer-form > .form-errors { grid-column: 1 / -1; width: 100%; margin: 0; }
.composer-main { min-width: 0; gap: 20px; }
.composer-card, .publish-rail { border-radius: 14px; }
.composer-card { min-width: 0; padding: 28px; }
.card-label, .rail-intro { align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.card-label > span, .rail-intro > span { display: grid; place-items: center; min-width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; color: var(--soft); font-size: .65rem; }
.card-label h2, .rail-intro h2 { font-size: 1rem; line-height: 1.65; }
.card-label p, .rail-intro p { margin-top: 4px; font-size: .8rem; line-height: 1.55; }
.upload-zone { min-height: 164px; justify-content: center; gap: 20px; padding: 24px; border: 1px dashed var(--gold); border-radius: 10px; background: color-mix(in srgb, var(--wash) 40%, var(--card)); }
.upload-zone > div { min-width: 0; }
.upload-zone label { font-size: .9rem; font-weight: 700; }
.upload-zone p { margin: 6px 0 12px; font-size: .73rem; }
.upload-zone input { width: 100%; color: var(--soft); font: 400 .75rem var(--font-ui); }
.upload-zone input::file-selector-button { min-height: 34px; margin-right: 10px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); font: 600 .76rem var(--font-ui); cursor: pointer; }
.upload-play { flex: 0 0 auto; width: 44px; height: 62px; border-radius: 8px; }
.field-header { align-items: baseline; gap: 12px; margin-bottom: 10px; }
.field-header label { font-size: .86rem; font-weight: 700; }
.composer-card textarea, .composer-card input[type=text] { border: 1px solid var(--line); border-radius: 9px; background: var(--card); font-size: .9rem; line-height: 1.6; }
.composer-card textarea { resize: vertical; min-height: 118px; }
.composer-card textarea::placeholder { color: var(--faint); }
.platform-overrides { margin-top: 24px; padding-top: 22px; }
.publish-rail { top: 24px; padding: 24px; }
.publish-rail .rail-intro p { font-size: .76rem; }
.publish-rail fieldset { min-width: 0; }
.publish-rail legend.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.destination-option { grid-template-columns: 18px 28px minmax(0, 1fr); gap: 8px 10px; margin: 8px 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; transition: border-color 160ms ease, background-color 160ms ease; }
.destination-option:has(input:checked) { border-color: color-mix(in srgb, var(--ink) 38%, var(--line)); background: color-mix(in srgb, var(--wash) 45%, var(--card)); }
.destination-option strong { font-size: .8rem; }
.destination-option small { margin-top: 3px; line-height: 1.5; overflow-wrap: anywhere; }
.destination-option b { grid-column: 3; font: 400 .64rem var(--font-meta); }
.destination-option.is-unavailable { opacity: .7; cursor: not-allowed; }
.destination-option input { margin: 0; }
.connect-link { margin: 10px 0 26px; font-size: .76rem; font-weight: 600; }
.publish-rail > .rail-intro:not(:first-child) { padding-top: 22px; margin-top: 18px; margin-bottom: 14px; border-top: 1px solid var(--line); }
.publish-rail .connect-link + .rail-intro { margin-top: 0; }
.preflight { margin-top: 20px; padding: 18px 0; }
.preflight h3 { font-size: .76rem; font-weight: 700; }
.preflight p { display: flex; align-items: baseline; gap: 8px; font-size: .72rem; line-height: 1.6; }
.preflight p span { flex-shrink: 0; }
.publish-note { margin: 10px 0 0; font-size: .69rem; }
.schedule-edit-form { display: grid; gap: 12px; max-width: 740px; }

/* .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], .tiktok-commercial-options[hidden] { display: none; }

.video-preview { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 10px; 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 { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.video-preview__meta strong { overflow-wrap: anywhere; font-size: 0.95rem; color: var(--ink); }
.video-preview__meta p { overflow-wrap: anywhere; 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: color-mix(in srgb, var(--green) 8%, var(--card)); 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: color-mix(in srgb, var(--red) 8%, var(--card)); color: var(--red); }
.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; min-height: 40px; 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(--ink); color: var(--paper); }
.when-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.publish-rail .schedule-field[hidden] { display: none; }

.schedule-field__heading { display:flex;align-items:baseline;justify-content:space-between;gap:10px; }.schedule-field__heading span { color:var(--faint);font:500 .68rem var(--font-meta);text-transform:uppercase;letter-spacing:.06em; }
.schedule-picker { position:relative; }
.schedule-picker__icon { position:absolute;z-index:1;top:50%;left:12px;width:18px;height:18px;transform:translateY(-50%);color:var(--gold);pointer-events:none; }
.schedule-picker__icon svg { display:block;width:100%;height:100%; }
/* Flatpickr copies this class to its visible input. Scope the rule so the
   generic input[type=text] and schedule-field styles cannot reset its inset. */
.schedule-picker input.schedule-picker__input { width:100%;min-height:46px;border:1px solid var(--line);border-radius:8px;padding:12px 12px 12px 40px;background:var(--card);color:var(--ink);font:600 .82rem var(--font-ui);cursor:pointer; }
.schedule-picker input.schedule-picker__input:focus { outline:3px solid var(--gold);outline-offset:1px; }
.flatpickr-calendar { border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 38px color-mix(in srgb, var(--ink) 18%, transparent);font-family:var(--font-ui); }.flatpickr-months { padding-top:4px; }.flatpickr-current-month { font-family:var(--font-display);font-size:1rem;padding-top:8px; }.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month { color:var(--cardinal);padding:10px; }.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.endRange { border-color:var(--cardinal);background:var(--cardinal); }.flatpickr-day.today { border-color:var(--gold); }.flatpickr-time input:hover,.flatpickr-time input:focus { background:var(--wash); }.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time .flatpickr-am-pm:focus { background:var(--wash); }

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

.upload-progress[hidden] { display: none; }
.upload-progress { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--ink) 65%, transparent); }
.upload-progress__panel { width: min(100%, 460px); padding: 30px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 22px 58px color-mix(in srgb, var(--ink) 25%, transparent); }
.upload-progress__panel h2 { margin: 6px 0 8px; font: 400 2rem/1 var(--font-display); }
.upload-progress__panel > p:not(.eyebrow) { margin: 0 0 22px; color: var(--soft); }
.upload-progress__track { height: 10px; overflow: hidden; background: var(--wash); border-radius: 999px; }
.upload-progress__track span { display: block; width: 0; height: 100%; background: var(--cardinal); transition: width 160ms linear; }
.upload-progress__panel > strong { display: block; margin-top: 8px; text-align: right; font: 500 .8rem var(--font-meta); color: var(--ink); }
.upload-progress__steps { display: grid; gap: 9px; margin: 23px 0 0; padding: 0; list-style: none; color: var(--faint); font-size: .82rem; }
.upload-progress__steps li { display: flex; align-items: center; gap: 9px; }
.upload-progress__steps li::before { content: ""; width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; }
.upload-progress__steps .is-active { color: var(--gold); font-weight: 800; }
.upload-progress__steps .is-active::before { border-color: currentColor; background: currentColor; box-shadow: 0 0 0 4px var(--wash); }
.upload-progress__steps .is-active::after { content: ""; width: 18px; height: 2px; margin-left: 2px; border-radius: 2px; background: currentColor; animation: upload-pulse 1s ease-in-out infinite alternate; }
.upload-progress__steps .is-complete { color: var(--green); }
.upload-progress__steps .is-complete::before { border-color: currentColor; background: currentColor; }
.upload-progress__steps .is-error { color: var(--red); font-weight: 800; }

@keyframes upload-pulse { from { opacity: .25; transform: scaleX(.6); } to { opacity: 1; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .upload-progress__steps .is-active::after { animation: none; } }

/* 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; flex-wrap: wrap; 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 { overflow-wrap: anywhere; 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; }

.tiktok-publish-settings[open] { border-color: var(--ink); }
.tiktok-publish-settings summary em { color: var(--ink); }
.tiktok-publish-settings__fields { gap: 18px; }
.tiktok-publish-settings__intro { margin: 0; color: var(--soft); font-size: .8rem; line-height: 1.55; }
.tiktok-setting-group { display: grid; gap: 9px; margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); }
.tiktok-setting-group legend { padding: 0; font-size: .84rem; font-weight: 800; }
.tiktok-setting-group > p { margin: -3px 0 2px; color: var(--soft); font-size: .75rem; }
.tiktok-choice-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tiktok-choice-grid--stacked { display: grid; }
.tiktok-choice { border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: .76rem; cursor: pointer; }
.tiktok-choice:has(input:checked) { border-color: var(--ink); background: var(--wash); }
.tiktok-choice.is-unavailable { opacity: .52; cursor: not-allowed; }
.tiktok-choice span strong,.tiktok-choice span small { display:block; }.tiktok-choice span small { margin-top:2px;color:var(--soft);font-size:.7rem;line-height:1.35; }
.tiktok-choice input, .tiktok-binary-choice input, .tiktok-confirmation input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.tiktok-binary-choice { border-radius: 7px; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); background: var(--paper); }
.tiktok-binary-choice span strong, .tiktok-binary-choice span small { display: block; }
.tiktok-binary-choice span small { margin-top: 2px; color: var(--soft); font-size: .7rem; }
.tiktok-binary-choice > label { display: inline-flex; align-items: center; gap: 5px; color: var(--soft); font-size: .73rem; cursor: pointer; }
.tiktok-binary-choice.is-unavailable { opacity: .62; }
.tiktok-binary-choice b { color: var(--faint); font: 500 .68rem var(--font-meta); text-transform: uppercase; }
.tiktok-setting-group--acknowledgement { gap: 10px; }
.tiktok-disclosure-toggle { border-radius:7px; display:flex;align-items:flex-start;gap:8px;padding:10px;border:1px solid var(--line);background:var(--paper);font-size:.77rem;font-weight:800;cursor:pointer; }
.tiktok-disclosure-toggle input { width:16px;height:16px;margin:1px 0 0;accent-color:var(--ink); }
.tiktok-commercial-options { display:grid;gap:8px;padding:10px;background:var(--wash);border-left:2px solid var(--gold); }
.tiktok-commercial-options .tiktok-choice { align-items:flex-start; }
.tiktok-settings-message,.tiktok-consent,.tiktok-settings-error { margin:0;color:var(--soft);font-size:.74rem;line-height:1.45; }
.tiktok-settings-error { padding:9px 10px;border:1px solid color-mix(in srgb, var(--red) 35%, var(--line));background:color-mix(in srgb, var(--red) 8%, var(--card));color:var(--red); }
.publish-button:disabled { cursor:not-allowed;opacity:.52;transform:none;box-shadow:none; }
.tiktok-confirmation { display: flex; align-items: flex-start; gap: 8px; color: var(--soft); font-size: .75rem; line-height: 1.45; cursor: pointer; }
.tiktok-confirmation input { flex: 0 0 auto; margin-top: 1px; }

/* ============ "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(74px + 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; }
  .tiktok-binary-choice { grid-template-columns: 1fr auto; }
  .tiktok-binary-choice > span { grid-column: 1 / -1; }
}

@media (min-width: 781px) and (max-width: 1050px) {
  .composer-form { grid-template-columns: minmax(0, 1fr) 304px; gap: 20px; }
  .composer-card, .publish-rail { padding: 20px; }
  .upload-zone { padding: 20px 16px; gap: 14px; }
}
@media (max-width: 780px) {
  .composer-form { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .composer-heading h1 { font-size: 2.8rem; }
  .composer-heading { padding-top: 30px; }
  .composer-form .publish-rail { padding-bottom: 112px; }
  .upload-zone { padding: 20px 16px; }
  .platform-overrides__head { align-items: flex-start; }
  .platform-overrides__head span { line-height: 1.6; }
  details.override-row summary { flex-wrap: wrap; }
  details.override-row summary > span { min-width: 0; flex: 1; }
  details.override-row summary em { width: 100%; padding-left: 39px; }
  .tiktok-choice-grid { gap: 8px; }
  .tiktok-binary-choice { gap: 10px; }
}
@media (max-width: 420px) {
  .upload-zone { align-items: flex-start; gap: 12px; }
  .upload-play { width: 32px; height: 46px; }
}

.platform-overrides summary span { font-family: var(--font-ui); }

.destination-project { margin: 16px 0; min-width: 0; }
.destination-project__heading { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.destination-project__heading input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; accent-color: var(--cardinal); }
.destination-project__heading span { display: grid; gap: 3px; min-width: 0; }
.destination-project__heading strong { font-size: .85rem; overflow-wrap: anywhere; }
.destination-project__heading small { color: var(--soft); font-size: .7rem; }
.destination-project__accounts { margin-left: 9px; padding-left: 14px; border-left: 1px solid var(--line); }
.destination-project-picker { display: grid; gap: 8px; margin: 16px 0 20px; }
.destination-project-picker label { font-size: .8rem; font-weight: 700; }
.destination-project-picker select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; }

.youtube-upload-notice { font-size: .75rem; line-height: 1.5; }
@media (max-width: 780px) {
  /* Keep the certification readable beside the action without covering fields. */
  .publish-bar:has(.youtube-upload-notice) {
    position: static;
    padding: 10px 0 0;
    border-top: 0;
    background: transparent;
    backdrop-filter: none;
  }
  .composer-form .publish-rail:has(.youtube-upload-notice) { padding-bottom: 24px; }
}

.override-fields select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; }

.video-preview__player { display: block; width: 100%; max-height: 440px; object-fit: contain; background: #171918; border-radius: 8px; }
.video-preview { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.tiktok-creator-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tiktok-review-caption { white-space: pre-wrap; overflow-wrap: anywhere; }
.tiktok-publish-settings select { min-height: 44px; }