/* Social tools inherit the original site's storybook theme and shared controls. */
.social-page [hidden] { display:none!important; }
.social-page .social-hero { min-height:0; padding:40px 20px 82px; }
.social-page .social-hero .sky-hero-bg { object-position:center 65%; }
.social-page .social-hero .sky-hero-inner { padding:22px 32px; max-width:820px; }
.social-page .social-hero h1 { font-size:clamp(30px,4vw,44px); margin-bottom:12px; text-wrap:balance; }
.social-page .social-hero p { font-size:16px; line-height:1.65; max-width:620px; }
.social-page .social-preview-label { font:700 12px/1.5 var(--font-rounded); letter-spacing:.08em; text-transform:uppercase; color:var(--primary); margin-bottom:12px; }
.social-container { max-width:1060px; }
.social-page .social-tool { margin-top:-48px!important; padding:38px 28px 24px; }
.social-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 24px; position:relative; }
.social-tabs a { min-height:42px; padding:9px 15px; text-decoration:none; border:1.5px solid var(--surface-muted); border-radius:var(--radius); font-size:13px; font-weight:700; color:var(--text-secondary); background:var(--surface); transition:background .18s,border-color .18s; }
.social-tabs a:hover { background:var(--surface-soft); border-color:var(--primary); }
.social-tabs a[aria-current] { color:var(--primary); background:var(--safe-bg); border-color:var(--primary); }
.social-field-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.social-field-heading label { font-size:15px; font-weight:700; }
.social-text-button { border:0; background:none; color:var(--text-secondary); font:700 13px/1.5 var(--font-rounded); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:6px 8px; min-height:36px; }
.social-text-button:disabled { opacity:.45; cursor:not-allowed; }
.social-page .dl-input-wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:12px; }
.social-page .dl-form textarea { min-height:84px; resize:vertical; max-height:200px; }
.social-page .dl-input-bar { padding:0; flex-direction:column; justify-content:stretch; gap:9px; }
.social-page .dl-input-bar .dl-btn-primary { flex:1; font-size:16px; padding:14px 24px; }
.social-page .dl-form-hint { font-size:13px; font-weight:600; line-height:1.65; }
.social-cancel { padding:10px 18px; min-height:42px; border:1.5px solid var(--surface-muted); border-radius:var(--radius); color:var(--text); background:var(--surface-soft); font:700 13px/1.4 var(--font-rounded); cursor:pointer; }
.social-cancel:hover { border-color:var(--primary); }
.social-job { scroll-margin-top:calc(var(--nav-h) + 20px); scroll-margin-bottom:24px; padding:20px; margin-top:20px; border:1px solid var(--surface-muted); background:var(--surface-soft); border-radius:18px 24px 18px 24px; }
.social-job-heading { display:flex; align-items:center; gap:12px; }
.social-job-heading>div { flex:1; min-width:0; }
#social-job-label { font-size:15px; font-weight:700; color:var(--text); margin:0 0 3px; }
.social-status { margin:0; font-size:13px; line-height:1.6; color:var(--text-secondary); overflow-wrap:anywhere; }
.social-status.is-error { color:var(--risk-text); }
.social-job-indicator { width:34px; height:34px; flex-shrink:0; color:var(--primary); display:grid; place-items:center; }
.social-job-indicator svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-dasharray:40 18; animation:social-spin 1.1s linear infinite; }
.social-job-indicator>span { display:none; font-size:23px; }
.social-job:not([data-state=working]) .social-job-indicator svg { display:none; }
.social-job:not([data-state=working]) .social-job-indicator>span { display:inline; }
.social-job[data-state=error] .social-job-indicator,.social-job[data-state=cancelled] .social-job-indicator { color:var(--risk-text); }
.social-elapsed { color:var(--text-secondary); font:700 12px/1.5 var(--font-rounded); font-variant-numeric:tabular-nums; flex-shrink:0; }
.social-job-steps { display:flex; gap:16px; list-style:none; padding:0; margin:18px 0 0; }
.social-job-steps li { display:flex; align-items:center; gap:7px; color:var(--text-dim); font-size:12px; line-height:1.4; flex:1; }
.social-job-number { display:grid; place-items:center; width:25px; height:25px; flex-shrink:0; border:1.5px solid var(--surface-muted); border-radius:50%; font-size:11px; color:var(--text-secondary); }
.social-job-steps li[data-state=complete],.social-job-steps li[aria-current=step] { color:var(--primary); }
.social-job-steps li[data-state=complete] .social-job-number { background:var(--primary); border-color:var(--primary); color:var(--primary-contrast); }
.social-job-steps li[aria-current=step] .social-job-number { border-color:var(--primary); background:var(--surface); }
.social-job progress { display:block; width:100%; height:9px; border:0; border-radius:10px; overflow:hidden; margin:17px 0 0; accent-color:var(--primary); }
.social-job progress::-webkit-progress-bar { background:var(--surface-muted); border-radius:10px; }
.social-job progress::-webkit-progress-value { background:var(--primary); border-radius:10px; transition:width .16s linear; }
.social-job progress:indeterminate { display:none; }
.social-job-footer { display:flex; align-items:center; gap:12px; justify-content:space-between; }
#social-job-detail { margin:12px 0 0; font-size:12px; line-height:1.65; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
#social-job-detail:empty { display:none; }
.social-results { background:var(--surface); border:1.5px solid var(--surface-muted); border-radius:26px 36px 26px 36px; box-shadow:var(--shadow-card); padding:26px 28px; margin-top:24px; scroll-margin-top:90px; animation:social-result-in .22s ease-out; }
.social-result-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; }
.social-eyebrow { color:var(--primary); font-size:14px; font-weight:700; margin:0; }
.social-file-type { color:var(--text-secondary); font-size:11px; letter-spacing:.08em; }
.social-result-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:28px; align-items:start; }
.social-preview { border-radius:18px 24px 18px 24px; background:#171d18; overflow:hidden; }
.social-results video { display:block; width:100%; height:285px; object-fit:contain; }
.social-results h2 { font-size:23px; line-height:1.45; margin:0 0 12px; overflow-wrap:anywhere; max-height:6em; overflow:auto; }
#social-details { margin:0 0 20px; font-size:12px; color:var(--text-secondary); line-height:1.75; font-variant-numeric:tabular-nums; }
.social-format-note { display:flex; flex-direction:column; gap:4px; color:var(--text-secondary); font-size:13px; }
.social-format-note strong { color:var(--text); font-size:15px; }
.social-actions { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.social-save { display:flex; align-items:center; justify-content:center; gap:18px; min-height:50px; border:1.5px solid var(--primary-border); border-radius:var(--radius); background:var(--primary); color:var(--primary-contrast); box-shadow:var(--shadow-btn); padding:13px 22px; font:700 16px/1.4 var(--font-rounded); text-decoration:none; transition:background .16s,transform .16s; }
.social-save:hover { background:var(--primary-pressed); transform:translateY(-1px); }
.social-save:active { transform:translateY(1px); }
.social-save-secondary { order:3; background:var(--surface-soft); border-color:var(--surface-muted); color:var(--text); box-shadow:none; }
.social-save-secondary:hover { background:var(--surface-muted); }
.social-actions .dl-btn-primary { font-size:16px; }
.social-conversion .audio-export { display:none; }
#social-picker-wrap { margin-bottom:20px; }
#social-picker-wrap>label { font-size:13px; font-weight:700; }
#social-picker { display:none; }
.social-video-options { display:flex; gap:9px; overflow:auto; padding:9px 2px 4px; }
.social-video-option { flex-shrink:0; padding:12px 16px; min-height:44px; background:var(--surface-soft); color:var(--text); border:1.5px solid var(--surface-muted); border-radius:var(--radius); font:700 13px/1.4 var(--font-rounded); cursor:pointer; }
.social-video-option[aria-pressed=true] { border-color:var(--primary); background:var(--safe-bg); color:var(--primary); }
.social-video-option:disabled { opacity:.5; cursor:wait; }
.social-page .section { padding-top:44px; padding-bottom:0; }
.social-page .section>h2 { font-size:28px; margin-bottom:22px; }
.social-disclaimer { margin:36px 0; font-size:13px; color:var(--text-secondary); line-height:1.75; }
.social-skip { position:absolute; top:-100px; left:12px; padding:12px; z-index:150; background:var(--surface); color:var(--text); }
.social-skip:focus { top:12px; }
@keyframes social-spin { to { transform:rotate(360deg); } }
@keyframes social-result-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:640px) {
 .social-page .social-hero { padding:24px 12px 68px; }
 .social-page .social-hero .sky-hero-inner { padding:18px 8px; }
 .social-page .social-hero h1 { font-size:31px; }
 .social-page .social-hero p { font-size:14px; }
 .social-page .social-tool { padding:36px 18px 20px; }
 .social-tabs { gap:6px; margin-bottom:20px; }
 .social-tabs a { font-size:12px; padding:9px 12px; }
 .social-page .dl-input-wrap { grid-template-columns:1fr; gap:10px; }
 .social-page .dl-input-bar { flex-direction:row; }
 .social-page .dl-input-bar .dl-btn-primary { flex:1; }
 .social-job { padding:16px; }
 .social-job-steps { gap:7px; }
 .social-job-steps li { flex-direction:column; align-items:flex-start; font-size:10px; gap:6px; }
 .social-job-heading { gap:8px; }
 .social-job-indicator { width:27px; }
 .social-results { padding:22px 18px; }
 .social-result-grid { display:flex; flex-direction:column; gap:20px; }
 .social-result-info { width:100%; order:-1; }
 .social-preview { width:100%; }
 .social-results video { height:230px; }
 .social-results h2 { font-size:21px; max-height:4.5em; }
 .social-format-note span { display:none; }
 .social-page .section>h2 { font-size:25px; }
}
@media(prefers-reduced-motion:reduce) { .social-job-indicator svg,.social-results { animation:none; } .social-page * { transition:none!important; scroll-behavior:auto!important; } }
/* One continuous task, with one progress surface beside the original input. */
.social-job { border:0; border-top:1px solid var(--surface-muted); border-radius:0; background:transparent; padding:22px 0 0; margin-top:20px; }
.social-job-heading { align-items:center; }
#social-job-label { font-size:18px; }
.social-job-indicator { background:var(--safe-bg); border-radius:50%; width:42px; height:42px; }
.social-percent { color:var(--primary); font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }
.social-elapsed { align-self:flex-start; padding-top:5px; }
.social-job-steps { gap:0; margin:20px 0 14px; }
.social-job-steps li { position:relative; flex-direction:row; font-size:12px; gap:7px; }
.social-job-steps li+li::before { content:''; height:1px; background:var(--surface-muted); flex:1; margin:0 10px; }
.social-job-number { width:19px; height:19px; font-size:10px; border:0; background:var(--surface-soft); }
.social-job-steps li[aria-current=step] .social-job-number { background:var(--safe-bg); color:var(--primary); }
.social-job progress { height:6px; margin:0; }
.social-job[data-state=working] progress:indeterminate { display:block; position:relative; background:var(--surface-muted); }
.social-job[data-state=working] progress:indeterminate::after { content:''; position:absolute; inset:0 auto 0 0; width:32%; background:var(--primary); border-radius:8px; animation:social-sweep 1.7s ease-in-out infinite; }
.social-job:not([data-state=working]) .social-percent { display:none; }
.social-job-footer { min-height:42px; margin-top:8px; }
#social-job-detail { margin:0; }
.social-job .social-cancel { background:transparent; border:0; min-height:36px; padding:6px 10px; color:var(--text-secondary); text-decoration:underline; text-underline-offset:3px; }
.social-page[data-output=mp3] .social-result-grid { display:block; }
.social-page[data-output=mp3] .social-preview,.social-page[data-output=mp3] #social-save-video,.social-page[data-output=mp3] .social-format-note,.social-page[data-output=mp3] #social-expiry { display:none; }
.social-page[data-output=mp3] .social-results { box-shadow:none; border-radius:20px; padding:24px; }
.social-page[data-output=mp3] .social-results h2 { font-size:21px; max-height:3em; }
.social-page[data-output=mp3] .social-result-heading { margin-bottom:12px; }
.social-page[data-output=mp3] .social-actions { margin-top:14px; }
.social-page[data-output=mp3] #social-audio { display:block; width:100%; height:42px; margin:10px 0; }
@keyframes social-sweep { from { transform:translateX(-100%); } to { transform:translateX(415%); } }
@media(max-width:640px) {
 .social-job-steps li { flex-direction:column; align-items:center; gap:6px; font-size:10px; }
 .social-job-steps li+li::before { position:absolute; top:9px; right:65%; width:70%; margin:0; }
 .social-job-heading { flex-wrap:wrap; gap:8px; }
 .social-percent { font-size:20px; }
 .social-elapsed { display:none; }
 #social-job-label { font-size:16px; }
 .social-job-indicator { width:34px; height:34px; }
}
@media(prefers-reduced-motion:reduce) { .social-job progress:indeterminate::after { animation:none!important; transform:translateX(100%); } }
/* Progress lives in a focused modal; completion leaves only the playable file. */
.social-modal-open { overflow:hidden; }
.social-dialog { width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow:auto; box-sizing:border-box; padding:30px; border:1px solid var(--surface-muted); border-radius:24px; background:var(--surface); color:var(--text); box-shadow:0 24px 80px #202d2430; }
.social-dialog::backdrop { background:rgb(30 40 31 / .38); backdrop-filter:blur(5px); }
.social-dialog[open] { animation:social-modal-in .18s ease-out; }
.social-dialog-close { position:absolute; top:12px; right:14px; width:36px; height:36px; border:0; border-radius:50%; background:transparent; font:24px/1 var(--font-rounded); color:var(--text-secondary); cursor:pointer; }
.social-dialog-close:hover { background:var(--surface-soft); }
.social-dialog-close:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.social-dialog-eyebrow { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); font-weight:700; margin:0 0 24px; }
.social-dialog .social-job { padding:0; margin:0; border:0; }
.social-dialog .social-job-heading { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
.social-dialog .social-job-heading>div { grid-column:1; }
.social-dialog .social-job-indicator { display:none; }
.social-dialog #social-job-label { font-size:23px; line-height:1.25; margin-bottom:8px; }
.social-dialog .social-status { font-size:14px; min-height:44px; }
.social-dialog .social-percent { grid-column:2; grid-row:1; font-size:28px; }
.social-dialog .social-elapsed { display:none; }
.social-dialog .social-job-steps { margin:22px 0 18px; gap:0; }
.social-dialog .social-job-steps li { flex-direction:column; align-items:center; gap:7px; font-size:10px; }
.social-dialog .social-job-steps li+li::before { position:absolute; top:9px; right:65%; width:70%; margin:0; }
.social-page[data-output=mp3] .social-dialog .social-job-steps li:last-child { display:none; }
.social-dialog .social-job-footer { align-items:center; margin-top:18px; gap:12px; }
.social-dialog #social-job-detail { font-size:12px; }
.social-dialog .social-cancel { text-decoration:none; border:1px solid var(--surface-muted); padding:8px 14px; border-radius:12px; }
.social-dialog progress:indeterminate { height:6px; }
.social-page[data-output=mp3] .social-tool .social-results { border:0; border-top:1px solid var(--surface-muted); padding:24px 0 0; margin-top:24px; border-radius:0; background:none; }
.social-page[data-output=mp3] .social-results .social-result-heading { margin-bottom:8px; }
.social-page[data-output=mp3] .social-results .social-file-type { display:none; }
.social-page[data-output=mp3] .social-result-info { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 22px; align-items:center; }
.social-page[data-output=mp3] .social-results h2 { grid-column:1 / -1; font-size:20px; line-height:1.4; margin:0 0 6px; }
.social-page[data-output=mp3] #social-details { grid-column:1 / -1; margin:0 0 16px; }
.social-page[data-output=mp3] #social-audio { grid-column:1; margin:0; }
.social-page[data-output=mp3] .social-actions { grid-column:2; grid-row:3; margin:0; }
.social-page[data-output=mp3] #social-save-audio { min-height:42px; padding:9px 18px; font-size:14px; box-shadow:none; border-radius:13px; white-space:nowrap; }
.social-page[data-output=mp3] #social-save-status { grid-column:1 / -1; margin:12px 0 0; font-size:12px; }
@keyframes social-modal-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(max-width:480px) { .social-dialog { padding:28px 22px 22px; } .social-page[data-output=mp3] .social-result-info { grid-template-columns:1fr; } .social-page[data-output=mp3] .social-actions { grid-column:1; grid-row:auto; margin-top:12px; align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { .social-dialog[open] { animation:none; } }
.social-dialog { position:fixed; inset:0; margin:auto; height:fit-content; }
.social-page[data-output=mp3] .social-results h2 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height:none; overflow:hidden; }