/* Listing flow: order summary, phone pay bar, product formats, finished-video cards, new-listing intake, nav badge. */

/* Order summary: list prices, savings lines, membership saving. */
.product-format{margin-top:2px;font-size:var(--t-xs);color:var(--text-3)}
.order-member{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 var(--s-3);padding:8px 10px;border-radius:var(--r-md);background:var(--accent-soft,#eef3ff);color:var(--accent);font-size:var(--t-sm);font-weight:600;text-decoration:none}
.order-member:hover{text-decoration:underline;text-underline-offset:2px}
.commerce-price-lines>div.is-saving strong{color:var(--success)}

/* Phones and tablets: total and Pay stay at the bottom of the screen on Choose videos. */
.order-sticky{display:none}
@media (max-width:960px){
  .order-sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgb(255 255 255 / .96);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgb(15 23 42 / .08)}
  .order-sticky-total{display:flex;flex-direction:column;line-height:1.15}
  .order-sticky-total small{font-size:var(--t-xs);color:var(--text-3)}
  .order-sticky-total small:last-child:not(:first-child){color:var(--success)}
  .order-sticky-total strong{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
  .order-sticky .btn{height:48px;padding:0 22px;font-size:var(--t-lg)}
  body:has(.order-sticky) .app-footer{padding-bottom:96px}
  body:has(.order-sticky) .toast{bottom:92px}
}

/* New listing step 1: one box for a listing link or photos. */
.intake{display:grid;gap:var(--s-3);margin-top:var(--s-2);padding:var(--s-5);border-radius:var(--r-lg);background:var(--surface);border:1.5px dashed var(--line-strong);transition:background var(--ease),border-color var(--ease)}
.intake.is-dragging{background:var(--inset);border-color:var(--ink)}
.intake:focus{outline:2px solid var(--focus,#326fbd);outline-offset:2px}
.intake-label{font-size:var(--t-lg);font-weight:700;color:var(--ink)}
.intake-row{display:flex;gap:var(--s-2)}
.intake-row input{flex:1;min-width:0}
.intake-row .btn{flex:none}
.intake .field-error{margin:0}
.intake-drop{display:grid;justify-items:center;gap:6px;padding:var(--s-4) var(--s-3) var(--s-2);border-top:1px solid var(--line);text-align:center}
.intake-drop p{color:var(--text-2)}
.intake-drop .link-button{font-size:var(--t-md)}
.intake-drop small{color:var(--text-3);font-size:var(--t-xs);max-width:52ch}
.intake-drop small .link-button{font-size:var(--t-xs)}
.import-status{justify-content:flex-start}
.import-status .icon{flex:none;color:var(--success)}
.import-status.is-failed .icon{color:var(--danger)}
.import-status.is-pending{background:var(--accent-soft);color:var(--ink)}
.import-status .spinner{width:16px;height:16px}
.flow>.field{margin-top:var(--s-4)}
@media (max-width:640px){.intake{padding:var(--s-4)}.intake-row{flex-direction:column}.intake-row .btn{width:100%}}

/* Listings: the next step on a listing without videos. */
.listing-caption a.listing-next{color:var(--accent);font-weight:600}
.listing-caption a.listing-next:hover{text-decoration:underline;text-underline-offset:2px}

/* Setup list: what still needs input. */
.setup-need{margin-top:2px;font-size:var(--t-sm);color:var(--text-2)}
.setup-made{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4)}
.setup-made .icon{flex:none;color:var(--success)}
.setup-made span{flex:1}
.setup-made a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* Finished videos: a real vertical poster, length, Download first, a labelled Edit. */
.video-grid.is-vertical{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.video-card.is-vertical .video-media{aspect-ratio:9/16}
.video-card.is-vertical .video-media video{object-fit:cover}
.video-length{position:absolute;right:10px;bottom:10px;padding:2px 8px;border-radius:999px;background:rgb(0 0 0 / .62);color:#fff;font-size:var(--t-xs);font-weight:600;font-variant-numeric:tabular-nums}
.video-actions .video-edit{gap:6px}
.video-eta{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-sm);color:var(--text-2)}
.video-eta .icon{flex:none;margin-top:2px;color:var(--accent)}
.video-eta strong{color:var(--ink);font-weight:600}
.video-card.is-vertical .video-actions{flex-wrap:wrap}
.video-card.is-vertical .video-actions>.btn:first-child{flex:1 1 100%}
.video-card.is-vertical .video-actions>.video-edit{flex:1}
@media (max-width:640px){.video-grid.is-vertical{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}}

/* Nav: finished videos waiting to be downloaded. */
.nav-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:999px;background:var(--success);color:#fff;font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.account-popover .account-signout{padding:8px 12px;border:0;border-radius:var(--r-sm);background:none;color:var(--text-2);font:inherit;text-align:left;cursor:pointer}
.account-popover .account-signout:hover{background:var(--hover);color:var(--ink)}

/* Earn: the result panel shows the month at a glance. */
.calc-result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid #ffffff1f}
.calc-result-stats dt{font-size:var(--t-xs);color:#ffffffb3}
.calc-result-stats dd{margin-top:2px;font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:640px){.calc-result-stats dd{font-size:var(--t-lg)}.calc-result-big{font-size:44px}}
.calc-result-mix{margin-top:var(--s-3);font-size:var(--t-sm);color:#ffffffb3}

/* Settings: switch workspaces here when there is more than one. */
.workspace-switch{display:grid;gap:6px;margin-bottom:var(--s-4)}
.workspace-switch label{font-weight:600}