/* Product layouts extend the shared Studio design system. */
main, section, article, form, .s-app > div, .s-appmain { min-width: 0; }
.surface-app main section + section { margin-top: var(--space-8); }
.job-grid,.stat-grid,.form-grid { display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); }
.workspace-grid { display:grid;gap:var(--space-4);grid-template-columns:minmax(12rem,.8fr) minmax(20rem,1.5fr) minmax(15rem,1fr) minmax(18rem,1.1fr); }
.workspace-grid > section { margin:0;min-width:0; }
.workspace-grid h2,.workspace-grid h3,.s-card h2 { margin-bottom:var(--space-4); }
.workspace-grid video { width:100%;max-height:28rem;background:var(--surface-2);border-radius:var(--radius-md); }
.surface-app form label { display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4);color:var(--text); }
.surface-app form button { margin-top:var(--space-3); }
form input,form select,form textarea { min-width:0;max-width:100%; }
.settings-tabs { display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-8); }
.settings-tabs a { padding:var(--space-3);border-radius:var(--radius-md);min-height:44px; }
.settings-tabs [aria-current] { color:var(--accent);background:var(--surface-2); }
.wizard-steps { display:flex;gap:var(--space-3);padding:0;list-style:none;flex-wrap:wrap; }
.wizard-steps li { color:var(--text-muted);padding:var(--space-3);border-bottom:2px solid var(--border); }
.wizard-steps [aria-current] { color:var(--accent);border-color:var(--accent); }
.dropzone { padding:var(--space-10);border:2px dashed var(--border);border-radius:var(--radius-lg);text-align:center;cursor:pointer; }
.dropzone.dragover { border-color:var(--accent);background:var(--surface-2); }
.file-row { display:grid;gap:var(--space-3);grid-template-columns:minmax(0,1fr) 8rem auto;align-items:center;padding-block:var(--space-3);border-bottom:1px solid var(--border); }
.file-row span { overflow-wrap:anywhere; }
progress { width:100%;height:var(--space-5);accent-color:var(--accent); }
/* Video stills (/studio/api/jobs/<id>/poster) in the list thumbnails: the picture fills the 16:9 box, the play mark and
   the length sit on top. A still that cannot load is removed by product.js and the plain box shows. */
.s-thumbimg { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit; }
.s-thumbimg ~ svg { position:relative;color:#fff;background:rgba(10,14,17,.45) !important;backdrop-filter:blur(2px); }
.s-thumbimg ~ .al-dur, .s-thumbimg ~ span { z-index:1; }
/* Status messages: one pattern on every app, settings and owner page. product.js writes the answer to an action
   (saved, sent, failed) into #page-status, which shows as a toast at the bottom of the screen, above the phone tab
   bar, so the answer is in view wherever the button was. A tick for done, an exclamation for a problem. Success
   fades after a few seconds; a problem stays until it is clicked away or the next action. */
#page-status:empty { display:none; }
#page-status:not(:empty) { position:fixed;z-index:calc(var(--z-modal, 100) - 2);left:50%;bottom:calc(var(--space-6) + var(--safe-bottom, 0px));transform:translateX(-50%);
  box-sizing:border-box;width:max-content;max-width:min(34rem, calc(100vw - 2rem));margin:0;display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-3) var(--space-4) var(--space-3) var(--space-3);border:0;border-radius:var(--radius-lg);background:var(--text-strong);color:var(--bg);
  box-shadow:var(--shadow-lg);font-size:var(--text-sm);font-weight:var(--font-medium);line-height:1.45;cursor:pointer;animation:toast-in var(--duration-fast, .18s) var(--ease-default, ease) both; }
#page-status:not(:empty)::first-letter { text-transform:uppercase; }
#page-status::before { content:"";flex:none;width:1.25rem;height:1.25rem;border-radius:50%;
  background:var(--success, #16a34a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.75rem no-repeat; }
#page-status.error-message::before { background:var(--error) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7'/%3E%3Cpath d='M12 17.6v.1'/%3E%3C/svg%3E") center / 0.8rem no-repeat; }
#page-status.is-leaving { animation:toast-out var(--duration-fast, .18s) var(--ease-default, ease) both; }
@keyframes toast-in { from { opacity:0;transform:translate(-50%, .75rem); } }
@keyframes toast-out { to { opacity:0;transform:translate(-50%, .75rem); } }
@media (max-width:1023px) { .surface-app #page-status:not(:empty) { bottom:calc(var(--tabbar-h) + var(--safe-bottom, 0px) + var(--space-3)); } }
@media (prefers-reduced-motion:reduce) { #page-status, #page-status.is-leaving { animation:none !important; } }
.error-message { color:var(--error); }
.chat-message { padding:var(--space-3);margin-bottom:var(--space-3);border-radius:var(--radius-md);background:var(--surface-2);overflow-wrap:anywhere;white-space:pre-wrap; }
#chat-messages { max-height:28rem;overflow-y:auto; }
.transcript,.decision { white-space:pre-wrap;overflow-wrap:anywhere; }
.surface-app .s-card > a { margin-right:var(--space-3); }
.surface-app .s-card p { margin-block:var(--space-3); }
dialog { background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);width:min(90vw,30rem);box-shadow:var(--shadow-xl); }
dialog::backdrop { background:rgb(10 14 17 / .62); }
dialog h2 { font-size:var(--text-xl); }
dialog .s-row { margin-top:var(--space-5); }
/* The shared confirm dialog (product.js confirmAction): the action as a question, one plain sentence on what happens,
   Cancel then the action. On a phone the buttons fill the width, the action on top under the thumb. */
.s-confirm { width:min(calc(100vw - 2rem), 27rem);padding:var(--space-6); }
.s-confirm__title { margin:0;font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-bold);letter-spacing:-0.015em;line-height:1.2;color:var(--text-strong); }
.s-confirm__text { margin:var(--space-3) 0 0;color:var(--text-muted);font-size:var(--text-sm);line-height:1.55; }
.s-confirm .s-input { margin-top:var(--space-4);width:100%; }
.s-confirm__actions { display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-6); }
@media (max-width:479px) { .s-confirm__actions { flex-direction:column-reverse; } .s-confirm__actions .s-btn { width:100%;min-height:2.75rem; } }
.doc-content { white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7; }
.video-poster { display:block;width:100%;border-radius:var(--radius-lg); }
.youtube-embed { border:0;width:100%;aspect-ratio:16/9; }
.sample-poster { max-height:36rem;object-fit:contain;background:var(--ink-950); }
.hero__video .video-poster { max-height:12.4rem;object-fit:cover;background:var(--ink-950); }
.sample-thumb { width:100%;height:18rem;object-fit:cover;border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.s-nav--mobile { display:none; }
@media(max-width:1023px) { .s-nav--mobile.is-open { display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;padding:var(--space-4);background:var(--bg);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg); }.s-header__actions > .s-btn--ghost:not(.s-burger) { display:none; } }
@media(max-width:1599px) { .workspace-grid { grid-template-columns:1fr 1.5fr; } }
@media(max-width:767px) { .workspace-grid { grid-template-columns:1fr; }.file-row { grid-template-columns:minmax(0,1fr) 6rem; }.file-row button { grid-column:1/-1; }.s-btn,button,summary,select,input:not([type=checkbox]):not([type=radio]),.s-tabbar a { min-height:44px; }.s-appbar { gap:var(--space-2); } }
@media(max-width:1023px) { .s-sidenav.is-open { display:flex;position:fixed;inset:0 auto 0 0;width:min(85vw,20rem);z-index:var(--z-modal);overflow-y:auto;background:var(--bg); }.s-nav--mobile:not(.is-open) { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important; } }

.auth__aside .s-btn--outline:hover { color: #fff; background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .7); }

@media (max-width:1024px){ button,.s-btn,summary,select,input:not([type=checkbox]):not([type=radio]){min-height:44px;} .s-btn,.s-iconbtn{min-width:44px;} }