/* SlicePost interface craft: existing brand, immediate feedback, clear layers.
   Precision canvas/timeline controls and rendered media are intentionally excluded. */
:root {
    --sp-ui-focus: var(--public-link, var(--v2-blue-light));
    --sp-ui-control-height: 2.75rem;
    --sp-ui-ease: cubic-bezier(.2, 0, 0, 1);
}

/* A restrained action hierarchy: blue marks action and selection, with solid
   boundaries instead of ambient glow around routine controls. */
body :is(.btn-primary,.public-login,.portal-button.primary) { box-shadow: 0 2px 4px rgb(0 0 0 / .08); text-shadow: none; }
body .btn-primary:hover:not(:disabled) { box-shadow: 0 3px 8px rgb(0 0 0 / .12); }
header.app-shell-header .app-shell-tab.active { box-shadow: none; }
.public-header .public-brand { color: var(--public-link); }
html[data-theme="dark"] header.app-shell-header .app-shell-brand :is(.logo-text,.app-shell-wordmark) { color: var(--v2-blue-light); -webkit-text-fill-color: currentColor; }
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--sp-ui-focus);
    outline-offset: 3px;
    scroll-margin-block: 6rem 2rem;
}
:is(.btn, .button, .portal-button, .public-login, .app-shell-tab, .editor-tab, .billing-switch button) {
    transition: scale 100ms var(--sp-ui-ease), background-color 140ms var(--sp-ui-ease), border-color 140ms var(--sp-ui-ease);
    touch-action: manipulation;
}
:is(.btn, .button, .portal-button, .public-login, .app-shell-tab, .editor-tab, .billing-switch button):not(:disabled):active {
    scale: .97;
}
:is(.public-header, .docs-header, .app-shell-header) a:not(.public-brand):not(.docs-brand):not(.app-shell-brand) {
    font-weight: 600;
}
:is(.portal-panel, .portal-card) {
    border-color: var(--v2-border-strong);
    box-shadow: 0 2px 8px rgb(0 0 0 / .04);
}
.portal-login { max-width: 30rem; }
.portal-login label { font-size: 1rem; color: var(--v2-white); font-weight: 600; }
.portal-login input { min-height: var(--sp-ui-control-height); color: var(--v2-white); background: var(--v2-fill); }
.portal .portal-button { min-height: var(--sp-ui-control-height); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.portal-login .portal-note { font-size: .9375rem; line-height: 1.6; }
.pricing-more details { border: 1px solid var(--v2-border); border-radius: 12px; padding: 0 1rem; margin-block: .625rem; }
.pricing-more details[open] { background: var(--v2-fill); border-color: var(--v2-border-strong); }
.pricing-more details summary { padding-block: .875rem; min-height: var(--sp-ui-control-height); font-size: 1rem; line-height: 1.45; }
.pricing-more details p { font-size: 1rem; line-height: 1.65; margin-block: 0 1rem; }
.docs-tabs button, .docs-code button, .docs-header button { min-height: var(--sp-ui-control-height); font-size: .875rem; font-weight: 600; }
.docs-code pre { font-size: .875rem; line-height: 1.65; }
.docs-page :is(input, select, textarea) { font-size: 1rem; }
:is(.confirm-modal, .credit-dialog) {
    border: 1px solid var(--v2-border-strong);
    border-radius: 16px;
    background: var(--v2-slate);
    color: var(--v2-white);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.confirm-modal :is(h2, h3) { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.02em; }
.confirm-modal p { font-size: 1rem; line-height: 1.55; }
.confirm-modal-actions { gap: .75rem; align-items: center; flex-wrap: wrap; }
.confirm-modal-actions button { min-height: var(--sp-ui-control-height); font-size: .9375rem; }
.credit-dialog p { font-size: 1rem; line-height: 1.55; }
.credit-confirm-actions button { min-height: var(--sp-ui-control-height); font-size: .9375rem; }
/* Clipping setup: make the source and chosen section one readable task group. */
#recreate-settings-modal :is(.control-label, .section-label) { font-size: 1rem; font-weight: 650; line-height: 1.4; }
#recreate-settings-modal .control-hint { font-size: .9375rem; line-height: 1.5; }
#source-range-card { border-color: var(--v2-border-strong); background: var(--v2-fill); }
#source-range-card :is(strong, summary) { font-size: .9375rem; line-height: 1.4; }
#source-range-card summary { min-height: var(--sp-ui-control-height); display: flex; align-items: center; cursor: pointer; }
.recreate-steps button { min-height: var(--sp-ui-control-height); padding-inline: 1rem; font-weight: 600; }
.recreate-card-subtitle { font-size: 1rem; line-height: 1.5; }
@media (max-width: 700px) {
    /* Two purposeful header rows leave room for the actual task on a phone. */
    header.app-shell-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "nav nav"; padding: .65rem .9rem; row-gap: .5rem; }
    header.app-shell-header .app-shell-brand { grid-area: brand; }
    header.app-shell-header .app-shell-nav { grid-area: nav; }
    header.app-shell-header .app-shell-actions { grid-area: actions; width: auto; min-width: 0; flex-wrap: nowrap; gap: .35rem; }
    header.app-shell-header .app-shell-actions :is(.app-shell-account, .theme-toggle, [data-sp-action="settings"]) { width: 44px; min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
    header.app-shell-header .app-shell-actions :is(.app-shell-account, [data-sp-action="settings"]) { font-size: 0; gap: 0; }
    header.app-shell-header .app-shell-actions :is(.app-shell-account, [data-sp-action="settings"]) svg { width: 18px; height: 18px; }
    header.app-shell-header .app-shell-nav .app-shell-tab { min-height: 48px; font-size: 13px; }
    header.app-shell-header .app-shell-status[data-status-state="ready"] { display: none; }
    /* A live job gets its own row rather than squeezing the brand or controls. */
    header.app-shell-header:has(.app-shell-status:not([data-status-state="ready"])) { grid-template-areas: "brand brand" "actions actions" "nav nav"; }

    /* Native text inputs stay readable and do not trigger iOS's small-font zoom. */
    :is(.portal, .pricing-more, #recreate-settings-modal, #recreate-workspace) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { font-size: 1rem; }
    .confirm-modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .confirm-modal-actions button { width: 100%; }
    .confirm-modal-actions > button:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .recreate-card-subtitle { min-height: 0; }
    .recreate-dropzone { min-height: 160px; height: auto; padding: 1rem; }
    .docs-code > div { flex-wrap: wrap; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.btn, .button, .portal-button, .public-login, .app-shell-tab, .editor-tab, .billing-switch button) { transition: none; }
    :is(.btn, .button, .portal-button, .public-login, .app-shell-tab, .editor-tab, .billing-switch button):active { scale: 1; }
}
@media (prefers-reduced-transparency: reduce) {
    :is(.public-header, .docs-header, header.app-shell-header) { background: var(--v2-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
    .confirm-modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    :is(.portal-panel, .portal-card, .confirm-modal, .pricing-more details, #source-range-card) { border-color: currentColor; }
    :is(.public-header, .docs-header, header.app-shell-header) { background: var(--v2-ink); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--v2-white); }
}