/* Posting craft pass: source-first review, grouped destinations, solid task
   surfaces. Provider, draft, inclusion, and schedule state stay in posting.html. */
#app {
    --posting-radius: 14px;
    font-optical-sizing: auto;
}
#app :is(h1,h2,h3) { line-height:1.25; letter-spacing:-.025em; }
/* A heading that is also a field label (Caption voice) keeps the heading's size, not the small label size. */
#app :is(h1,h2,h3) > label { font:inherit; color:inherit; letter-spacing:inherit; margin:0; }
#app .posting-page-heading {
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap; margin-bottom:12px;
}
#app .posting-page-heading h1 { font-size:clamp(1.5rem,2.4vw,1.9rem)!important; }
#app .posting-page-intro { margin-bottom:20px; max-width:76ch; }
#app .posting-heading-actions { display:flex; align-items:flex-end; flex-direction:column; gap:8px; }
#app .posting-review-heading > .btn { min-height:48px; padding:10px 18px!important; }
#app .posting-page-heading > .link-btn { min-height:44px; }
#app .posting-review-list { display:grid; gap:20px; }
#app .video-card {
    border-width:1px; border-radius:var(--posting-radius);
    background:var(--v2-slate); box-shadow:none;
}
#app .video-card.approved { border-color:var(--v2-border-strong); }
#app .video-card.skipped { border-style:dashed; }
#app .vc-head {
    padding:18px; gap:16px; border-bottom:1px solid var(--v2-border);
    background:transparent; align-items:center;
}
#app .posting-review-info { flex:1; min-width:0; }
#app .vc-title {
    max-width:none; font-size:1.125rem; font-weight:700;
    white-space:normal; overflow-wrap:anywhere; line-height:1.4;
}
#app .vc-excerpt { max-width:70ch; margin-top:6px; font-size:.875rem; line-height:1.55; }
#app .posting-review-actions { display:grid; justify-items:end; gap:8px; }
#app .approve-pill {
    min-height:44px; padding:8px 12px; font-size:.9375rem; font-weight:600;
    background:var(--v2-fill); border:1px solid var(--v2-border-strong); border-radius:8px;
}
#app .approve-pill:has(input:checked) { border-color:var(--v2-blue-light); background:var(--v2-fill-hover); }
#app .vc-head .wizard-media-button {
    width:128px; height:96px; border-radius:8px; background:#050505;
}
#app .vc-head .wizard-media-button img { object-fit:contain; }
#app .ptabs {
    padding:6px 18px; gap:4px; overflow-x:auto; scrollbar-width:thin;
    background:var(--v2-fill); border-bottom:1px solid var(--v2-border);
}
#app .ptab {
    flex:0 0 auto; padding:10px 16px; min-height:44px; white-space:nowrap;
    border:1px solid transparent; border-radius:8px; font-size:.9375rem;
    font-weight:600; color:var(--v2-muted); background:transparent;
}
#app .ptab.active {
    color:var(--v2-white); border-color:var(--v2-border-strong);
    background:var(--v2-slate); box-shadow:0 1px 2px rgba(0,0,0,.06);
}
#app .review-fields { padding:18px; gap:18px; }
#app .cap-head { margin-bottom:6px; gap:8px; }
#app .cap-head .field-label { font-size:1rem; font-weight:600; }
#app .cap-head .link-btn { min-height:36px; }
#app .review-caption { line-height:1.65; padding:12px 14px; }
#app .note-box { font-size:.875rem; line-height:1.55; background:var(--v2-fill); border-color:var(--v2-border); }
#app .cover-trigger { min-height:64px; padding:10px 12px; background:var(--v2-fill); border-color:var(--v2-border-strong); }
#app .cover-copy strong { font-size:.9375rem; font-weight:600; }
#app .cover-copy .tiny { font-size:.875rem; line-height:1.5; }
#app .cover-trigger :is(img,.cover-ph) { width:56px; height:42px; object-fit:contain; }
#app .scrub-wrap { padding:16px; border:1px solid var(--v2-border); border-radius:10px; margin-top:10px; background:var(--v2-fill); }
#app .adv-head { padding:12px 0; }
#app .adv-head .field-label { font-size:.9375rem; }
#app .advanced-fields { padding:0 0 4px; gap:12px; }
#app .advanced-fields .row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#app .advanced-fields .row > * { min-width:0; }
#app .advanced-fields .toggle-row { min-height:48px; padding:10px 0; border-bottom:1px solid var(--v2-border); gap:16px; }
#app .advanced-fields .toggle-row:last-child { border-bottom:0; }

/* Intake remains video-first. The writing settings are one secondary rail. */
#app .posting-intake-workspace { gap:20px; }
#app .posting-profile-toolbar { padding-bottom:12px; gap:8px 12px; }
#app .posting-profile-toolbar > select { flex:0 1 300px; width:300px; }
#app .posting-profile-actions { margin-left:auto; }
#app .posting-intake-grid { gap:24px; }
#app .posting-section-heading h2 { font-size:1.5rem; }
#app .posting-caption-choice .comment-cta-card { padding-top:16px; }
#app .posting-caption-choice .comment-cta-fields { gap:12px; }
#app .comment-cta-platforms { gap:8px; }
#app .comment-cta-placement-options { padding:3px; }
/* Each half of Start/End fills its cell, so the selected half is a full, even segment. */
#app .comment-cta-placement-option span { flex:1; min-height:38px; height:auto; }
#app .comment-cta-card .toggle-row { font-weight:500; }
#app .posting-intake-next { border-radius:0; }
#app .posting-connected-summary .posting-account-pills { gap:10px 20px; }

/* Each schedule card separates the source, destinations, and time/actions. */
#app .schedule-layout { grid-template-columns:minmax(0,1fr) 280px; gap:20px; }
#app .schedule-tools { gap:12px; }
#app .posting-schedule-card-head { display:grid; grid-template-columns:auto 28px 96px minmax(0,1fr); align-items:start; gap:12px; padding:18px; }
#app .posting-schedule-card-info { min-width:0; }
#app .posting-schedule-card-actions {
    grid-column:1/-1; display:flex; align-items:center; justify-content:space-between;
    gap:12px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--v2-border);
}
#app .posting-schedule-card-actions > div:first-child { text-align:left!important; }
#app .posting-schedule-card-head .wizard-media-button { width:96px; height:72px; background:#050505; }
#app .posting-schedule-card-head .wizard-media-button img { object-fit:contain; }
#app .posting-schedule-card-head > .num-badge { width:28px!important; height:28px!important; font-size:.875rem!important; }
#app .posting-schedule-accounts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:8px; margin-top:12px; }
#app .posting-schedule-accounts .posting-destination {
    width:100%; min-height:54px; padding:8px 10px; gap:10px; border-radius:8px;
    font-size:.875rem; font-weight:600; letter-spacing:0; text-transform:capitalize;
    background:var(--v2-fill)!important; border-color:var(--v2-border-strong)!important;
}
#app .posting-schedule-accounts .posting-destination:has(input:checked) { border-color:var(--v2-blue-light)!important; background:var(--v2-fill-hover)!important; }
#app .posting-schedule-accounts .posting-destination.off { border-style:dashed; }
#app .posting-schedule-accounts .posting-destination > span { min-width:0; }
#app .posting-schedule-accounts .posting-destination small { text-transform:none; font-size:.875rem; line-height:1.4; }
#app .posting-schedule-card-actions > div:last-child { flex-wrap:wrap; justify-content:flex-end; }
#app .schedule-tool { border-radius:12px; background:var(--v2-slate); border-color:var(--v2-border-strong); }
#app .schedule-tool > summary { padding:14px; font-size:1rem; line-height:1.5; }
#app .schedule-tool > summary .muted { margin:2px 0 0 18px; font-size:.875rem; }
#app .schedule-tool-body { padding:0 14px 14px; }
#app .schedule-tool .field-label { font-size:.9375rem; }
#app .schedule-tool select[aria-label="Posts per active day"] { width:5rem; min-width:5rem; }
#app .schedule-tool .sched-row { border-width:1px; gap:8px; padding:10px; background:var(--v2-fill)!important; border-color:var(--v2-border)!important; }
#app .schedule-tool .sched-row > .reorder-controls { flex-basis:100%; }
#app .schedule-tool .sched-row > span:not(.num-badge):not(.rightnow-chip) { white-space:normal!important; overflow-wrap:anywhere; }
#app .schedule-tool .sched-row .muted { font-size:.875rem; }
#app .schedule-editor { padding:18px; background:var(--v2-fill); }
#app .schedule-editor .field-label { font-size:.9375rem; }
#app .schedule-overrides { background:var(--v2-slate); }
#app .schedule-overrides > summary { font-size:.9375rem; }
#app .schedule-overrides > p { font-size:.875rem; }

/* Settings is a navigation rail beside a readable task column, not two
   fixed-width regions squeezed into a phone. */
#app .settings-wrap { display:grid; grid-template-columns:240px minmax(0,1fr); gap:20px; }
#app .settings-list { min-width:0; padding:16px; }
#app .settings-list > div:first-child { flex-wrap:wrap; gap:8px; }
#app .settings-editor { min-width:0; width:100%; }
#app .settings-editor > .card { padding:18px; background:var(--v2-slate); backdrop-filter:none; border-radius:var(--posting-radius); }
#app .settings-editor h2 { font-size:1.125rem; }
#app .brand-item { min-height:58px; padding:10px 12px; border-radius:8px; background:transparent; }
#app .brand-item.sel { border-color:var(--v2-blue-light); background:var(--v2-fill-hover); }
#app .posting-settings-connections { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
#app .conn-card { border:0; border-radius:0; border-top:1px solid var(--v2-border); padding:12px 0; gap:12px; }
#app .conn-card.on { background:transparent; border-color:var(--v2-border); }
#app .conn-card > div { flex:1; }
#app .conn-card .tiny { font-size:.875rem; white-space:normal!important; overflow-wrap:anywhere; line-height:1.5; }
#app .conn-card .btn { flex:none; min-height:44px; }
#app .profile-rule { border-radius:8px; background:var(--v2-fill); }
#app .profile-rule > summary { font-size:.9375rem; line-height:1.5; }
#app .profile-rule > summary .muted { display:inline; margin-left:8px; font-size:.875rem; }
#app .profile-details > summary { font-size:.875rem; }

/* Calendar chrome uses a stable filter row and separate month navigation. */
#app .calendar-page-heading { align-items:flex-start; }
#app .calendar-page-heading > div:first-child { flex:1 1 280px; }
#app .calendar-filter-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:12px 0; border-block:1px solid var(--v2-border); }
#app .calendar-filters, #app .calendar-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
/* The filter group takes the free width, so its three selects stay on one line beside the actions. */
#app .calendar-filters { flex:1 1 auto; }
#app .calendar-filter-bar select { flex:0 1 180px; min-width:0; }
/* Refresh is a square icon button the same height as the filters beside it. */
#app .calendar-refresh { min-width:44px; min-height:44px; padding:0; justify-content:center; }
#app .calendar-month-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:18px 0 12px; }
#app .calendar-month-toolbar h2 { font-size:1.4rem!important; font-weight:700!important; }
#app .calendar-month-actions { display:flex; gap:6px; }
#app .calendar-month-actions .btn { min-height:44px; }
#app .calendar-legend { display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--v2-muted); font-size:.8125rem; width:100%; }
#app .cal-grid-head div { font-size:.8125rem; text-transform:none; letter-spacing:0; color:var(--v2-muted); padding:10px 0; }
#app .cal-cell { min-height:112px; padding:8px; background:var(--v2-slate); }
#app .cal-cell.out { background:var(--v2-fill); }
#app .cal-daynum { font-size:.875rem; width:28px; height:28px; }
#app .post-chip { font-size:.8125rem; line-height:1.4; padding:6px; border-radius:6px; }
#app .post-chip .pc-row1 svg { width:13px; height:13px; }
#app .cal-overflow { font-size:.75rem; }

/* Modal task surfaces are solid. Content scrolls; the action footer stays
   within the dialog so it cannot obscure the last destination. */
#app :is(.modal,.brand-dialog) {
    background:var(--v2-slate); border:1px solid var(--v2-border-strong);
    border-radius:18px; padding:22px; color:var(--v2-white);
    max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain;
    box-shadow:0 16px 64px rgba(0,0,0,.22);
}
#app .modal-back { padding:24px; }
#app .posting-dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
#app .posting-dialog-heading :is(.link-btn,.preview-close) { min-height:44px; min-width:44px; padding:10px; }
#app .calendar-post-heading .preview-close { margin-left:auto; }
#app .calendar-post-heading #post-preview-title { font-size:1.125rem!important; }
#app .calendar-post-preview { display:flex; flex-direction:column; overflow:hidden; }
#app .calendar-preview-body { padding:20px 20px 0; flex:1; min-height:0; }
#app .calendar-preview-footer { background:var(--v2-fill); padding:16px 20px!important; gap:12px; }
#app .calendar-preview-footer > span { width:100%; font-size:.875rem; }
#app .calendar-preview-footer > div { justify-content:flex-end; width:100%; }
#app .calendar-preview-footer .btn { min-height:44px; }
#app .calendar-day-post { min-height:76px; text-align:left; border-color:var(--v2-border-strong); background:var(--v2-fill); }
#app .calendar-day-post .qname { font-size:.9375rem; line-height:1.5; }
#app .brand-dialog-actions .btn { min-height:44px; }
#app .brand-dialog-copy { font-size:.9375rem; }
#app .posting-confirm-modal { max-width:640px; font-size:1rem; line-height:1.55; }
#app .posting-confirm-modal h2 { font-size:1.5rem!important; }
#app .posting-confirm-modal .muted { font-size:1rem; line-height:1.6; color:var(--v2-white); }
#app .posting-confirm-list { overflow-wrap:anywhere; border-top:1px solid var(--v2-border-strong); }
#app .posting-confirm-row {
    display:grid!important; grid-template-columns:minmax(0,1fr) minmax(130px,180px);
    padding:14px 0!important; gap:12px 20px!important;
    border-bottom:1px solid var(--v2-border-strong)!important;
    font-size:.9375rem!important; line-height:1.55;
}
#app .posting-confirm-row > span:first-child { color:var(--v2-white); }
#app .posting-confirm-row > span:last-child { white-space:normal; text-align:right; color:var(--v2-white)!important; }
#app .posting-confirm-row strong { display:inline-block; margin-bottom:4px; font-weight:700; }
#app .posting-confirm-actions { flex-wrap:wrap; }
#app .posting-confirm-actions .btn { min-height:44px; padding:10px 16px; font-size:1rem; }

@media(max-width:1000px) {
    #app .schedule-layout { grid-template-columns:minmax(0,1fr); }
    #app .schedule-tools { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
    #app .posting-profile-actions { margin-left:0; }
}
@media(max-width:800px) {
    #app .settings-wrap { grid-template-columns:minmax(0,1fr); }
    #app .settings-list { width:100%; }
    #app .posting-review-heading { align-items:flex-start; }
    #app .posting-review-heading h1 { flex:1 1 calc(100% - 100px); }
    #app .posting-review-heading > .btn { width:100%; }
    #app .cal-cell { min-height:78px; padding:5px; }
    #app .cal-mobile-count { color:var(--v2-white); background:var(--v2-fill-hover); min-height:22px; font-size:.8125rem; }
    #app .cal-grid-head div { font-size:.75rem; }
}
@media(max-width:620px) {
    #app .posting-profile-toolbar > select { flex-basis:100%; width:100%; }
    #app .vc-head { display:grid; grid-template-columns:80px minmax(0,1fr); gap:12px; padding:14px; }
    #app .vc-head .wizard-media-button { width:80px; height:60px; }
    #app .posting-review-actions { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; }
    #app .vc-title { font-size:1rem; }
    #app .vc-excerpt { -webkit-line-clamp:2; }
    #app .ptabs { padding:6px 10px; }
    #app .ptab { padding-inline:12px; }
    #app .review-fields { padding:14px; }
    #app .advanced-fields .row { grid-template-columns:minmax(0,1fr); }
    #app .cap-head .link-btn { min-height:44px; }
    #app .schedule-tools { grid-template-columns:minmax(0,1fr); }
    #app .posting-schedule-card-head { grid-template-columns:auto 28px minmax(0,1fr); padding:14px; gap:10px; }
    #app .posting-schedule-card-info { grid-column:1/-1; }
    #app .posting-schedule-card-actions { width:100%; }
    #app .posting-schedule-card-actions > div:last-child { justify-content:flex-start; }
    /* Phone: the two card buttons share one row at equal widths instead of stacking unevenly. */
    #app .posting-schedule-card-buttons { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
    #app .posting-schedule-card-buttons .btn { width:100%; padding-inline:8px; }
    #app .posting-schedule-accounts { grid-template-columns:minmax(0,1fr); }
    #app .schedule-editor { padding:14px; }
    #app .posting-heading-actions { align-items:stretch; width:100%; }
    /* Phone: filters sit two to a row (a lone last one spans the row); the post button fills the row beside Refresh. */
    #app .calendar-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
    #app .calendar-filters > select:last-child:nth-child(odd) { grid-column:1/-1; }
    #app .calendar-filter-bar select { width:100%!important; }
    #app .calendar-actions { width:100%; flex-wrap:nowrap; }
    #app .calendar-actions .btn[data-sp-action="share"] { flex:1; justify-content:center; }
    #app .calendar-month-toolbar h2 { font-size:1.125rem!important; }
    #app .calendar-month-actions .btn { padding-inline:10px; }
    #app .calendar-legend { gap:6px 12px; }
    #app .modal-back, #app .brand-dialog-backdrop { align-items:flex-end; padding:12px; }
    #app :is(.modal,.brand-dialog) { max-height:calc(100dvh - 24px); padding:18px; border-radius:18px; }
    #app .calendar-post-preview { padding:0; }
    #app .calendar-preview-body { padding:16px 14px 0; }
    #app .calendar-preview-footer { padding:14px!important; }
    #app .calendar-day-detail .posting-dialog-heading h2 { font-size:1.25rem!important; }
    #app .calendar-post-heading { position:relative; padding-right:40px; }
    #app .calendar-post-heading .preview-close { position:absolute; right:-8px; top:-8px; }
    #app .posting-confirm-row { grid-template-columns:minmax(0,1fr); gap:6px!important; }
    #app .posting-confirm-row > span:last-child { text-align:left; font-weight:600; }
    #app .brand-dialog-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    #app .brand-dialog-actions .btn-primary { grid-column:1/-1; }
    #app .brand-dialog-actions:has(> .btn:nth-child(2):last-child) .btn-primary { grid-column:auto; }
}
@media(prefers-reduced-motion:reduce) {
    #app :is(.ptab,.cover-trigger,.brand-item,.post-chip,.calendar-day-post,.reorder-target) { transition:none; }
}
@media(prefers-reduced-transparency:reduce) {
    #app :is(.card,.modal,.brand-dialog) { backdrop-filter:none; }
    #app .brand-dialog-backdrop { backdrop-filter:none; }
}
@media(prefers-contrast:more) {
    #app :is(.video-card,.schedule-tool,.brand-item,.conn-card,.post-chip,.modal,.brand-dialog) { border-color:currentColor!important; }
}