@import url("mobile-media.css") (max-width:767px),(pointer:coarse) and (max-height:500px);
/* The listing-video frame is its own document and never loads mobile-media.css, so the phone scale tokens (--m-body, --m-tap and the rest) are pulled in here, phone only (owner ruling, 26 Oct 2026). */
/* mobile-listing-video: the new mobile dashboard, this zone's half (owner's design, 20 Oct 2026).
   PHONE ONLY: every rule sits inside @media (max-width:767px),(pointer:coarse) and (max-height:500px). A desktop window, and the
   frame inside it, is not reached by anything here.

   One file, two documents. The dashboard links it for the zone's own header (selectors under #view), and the maker page that the
   zone's iframe loads links it for its screens (selectors under html.lvm, a class on that page's <html>). A selector for the one
   never matches in the other.

   His five screens, in the order of his shots:
   - the list, empty and full: "Listing videos" over its grey line, a card per video, a full-width green foot button
   - Delete this draft?: a bottom sheet (a <dialog>), two buttons abreast
   - New listing video: "<- Listing videos", the title, "Choose a property", the search, "Recent listings", a row card
   - the editor's Media step: one card (address, Draft pill, three-step stepper, the dashed drop zone), a bar pinned to the foot */
@media (max-width:767px),(pointer:coarse) and (max-height:500px){

/* =====================================================================================================================
   THE ZONE'S HEADER (the dashboard's document)
   ===================================================================================================================== */

/* The page starts under the top bar. (The slim header in dashboard-video.js kept 8px, from before the bar existed.) The frame runs
   to the screen's foot, so the editor's bar can pin to the bottom edge. */
html #view:has(> .ve.vm-fill){padding-top:calc(var(--m-topbar,56px) + var(--m-safe-t,0px) + 10px)!important;padding-bottom:0!important}
#view .ve.vm-fill .vm-head{padding:0 0 20px!important;margin:0!important;min-height:0!important}
#view .ve.vm-fill .vm-head .htop{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;min-height:var(--m-tap,44px)!important;margin:0!important;padding:0!important}
#view .ve.vm-fill .vm-head h1,#view .ve.vm-fill .vm-crumb{display:none!important}
#view .ve.vm-fill.vm-start .vm-head{padding-bottom:0!important}
#view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-head{padding-bottom:6px!important}
#view .ve.vm-fill .vm-head .tools{flex:none;display:flex;align-items:center;gap:8px;width:auto}
#view .ve.vm-fill .vm-new[hidden]{display:none}

/* The title is a second heading, so the desktop's own h1 ("Listing video") keeps its words. */
#view .ve.vm-fill .vm-mt{display:block;flex:1 1 auto;min-width:0;margin:0;font-size:30px;line-height:1.14;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
/* "New listing video" is a screen's own title, drawn in the dark green the other zones' titles use (Reels, Redesigner, 3D tours: --h1-ink).
   The list's "Listing videos" stays near-black, as his shot has it. */
#view .ve.vm-fill.vm-start .vm-mt{color:var(--h1-ink,var(--sig))}
#view .ve.vm-fill .vm-sub{display:none;margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--ink-2)}
#view .ve.vm-fill.vm-list .vm-sub{display:block}

/* His "New video": green, 48px (law L3), beside the title; the empty state carries its own, so the header's steps aside. */
#view .ve.vm-fill .vm-new{min-height:48px;height:48px;padding:0 14px;gap:8px;border-radius:10px;white-space:nowrap;font-size:15px;font-weight:600}
#view .ve.vm-fill.vm-empty .vm-new{display:none}

/* "<- Listing videos": on the start screen and in the editor. The start screen puts the title under it; the editor has no title, the
   link takes the row's left and the "+ Add" the right. */
#view .ve.vm-fill .vm-back-w{display:none}
#view .ve.vm-fill.vm-start .vm-back-w,#view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-back-w{display:block}
#view .ve.vm-fill .vm-back{display:inline-flex;align-items:center;gap:10px;min-height:var(--m-tap,44px);height:var(--m-tap,44px);margin:0 0 0 -4px;padding:0 10px 0 4px;border:0;border-radius:10px;background:none;color:var(--ink-2);font-size:17px;font-weight:500;cursor:pointer}
#view .ve.vm-fill .vm-back svg{flex:none}
#view .ve.vm-fill .vm-back:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
#view .ve.vm-fill.vm-start .vm-head .htop{flex-wrap:wrap;gap:0}
#view .ve.vm-fill.vm-start .vm-back-w{flex:1 0 100%}
#view .ve.vm-fill.vm-start .vm-head .tools{display:none}
#view .ve.vm-fill.vm-start .vm-mt{flex:1 0 100%;margin:6px 0 0}
#view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-mt{display:none}
#view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-back-w{flex:1 1 auto}
#view .ve.vm-fill .vm-add{min-height:48px;height:48px}

/* The frame is the page's: edge to edge, no white card around it; what sits in it draws its own cards. */
#view .ve.vm-fill .vm-shell,#view .ve.vm-fill.vm-start .vm-shell{margin:0 calc(-1 * var(--m-gutter,16px));border:0;border-radius:0;box-shadow:none;background:transparent;overflow:hidden}


/* Delete this draft? is open in the frame: what is outside the frame dims with it (the frame says so; dashboard-video.js). */
#view .ve.vm-fill.vm-sheet .vm-head{position:relative}
#view .ve.vm-fill.vm-sheet .vm-head::after{content:"";position:absolute;left:calc(-1 * var(--m-gutter,16px));right:calc(-1 * var(--m-gutter,16px));bottom:0;height:100vh;z-index:400;background:rgba(20,24,21,.5)}
/* The top bar is a body child above the shell: while the sheet is open it steps under the veil. */
html:has(.ve.vm-fill.vm-sheet) .m-topbar{z-index:1}
html:has(.ve.vm-fill.vm-sheet) .plan-badge.is-phone{z-index:0}


/* =====================================================================================================================
   THE MAKER PAGE (the iframe's document)
   ===================================================================================================================== */

/* His one green (the dashboard's own button green); a dark tone keeps the page's accent. */
html.lvm{--lv-fab:0px;--lvg:#355B47;--lvgi:#fff;scrollbar-width:none}
html.lvm[data-vtheme=dark]{--lvg:var(--acc);--lvgi:#0B1511}
html.lvm::-webkit-scrollbar{display:none}
html.lvm.embedded,html.lvm.embedded body{background:transparent}
html.lvm.embedded .app{display:block;max-width:none;padding:0 16px}
html.lvm.embedded main{padding:0 0 28px}
html.lvm button{-webkit-tap-highlight-color:transparent}

/* ------------------------------------------------------------------------------------------------ the list: his shot 5 */
html.lvm .resumewrap{padding:0}
html.lvm .resumewrap .yv{padding:0 0 28px}
html.lvm .yv .yvmsg{margin:0 0 12px}
html.lvm .yv:has(.yvbar2) > .yvcap{display:block!important;margin:2px 0 12px;font-size:17px;font-weight:600;color:var(--ink)}

html.lvm .yvbar2{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0 0 18px}
html.lvm .yvfind{flex:none;margin:0;height:52px;padding:0 16px;gap:12px;border:1px solid var(--line2);border-radius:12px;background:var(--card)}
html.lvm .yvfind input{font-size:16px;min-height:0}
html.lvm .yvfind svg{width:20px;height:20px}
html.lvm .yvpick{flex:none;width:100%;height:52px;min-height:52px;padding:0 44px 0 16px;border:1px solid var(--line2);border-radius:12px;font-size:16px;color:var(--ink);
  -webkit-appearance:none;appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237B807A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center}

html.lvm .yvlist{gap:14px}
html.lvm .yvwrap{position:relative;display:block;padding:14px;border:1px solid var(--line2);border-radius:14px;background:var(--card);overflow:visible}
html.lvm .yvwrap:has(.yvrow:hover){background:var(--card)}
html.lvm .yvrow{display:block;width:100%;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:none;text-align:left;cursor:pointer}
html.lvm .yvrow:focus-visible{outline:2px solid var(--lvg);outline-offset:4px;border-radius:10px}
html.lvm .yvrow .yvgo,html.lvm .yvrow .yvmid{display:none}
html.lvm .yvl{align-items:flex-start;gap:14px}
html.lvm .yvcov{width:104px;height:84px;border:0;border-radius:8px}
html.lvm .yvtx{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;flex:1 1 0;padding-right:36px}
html.lvm .yvtx b{display:block;overflow:visible;white-space:normal;text-overflow:clip;font-size:17px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
/* The old run-on sentence ("Ready · kept 10 more days") repeats the pill's own word: on a phone it is not drawn. The pill says the state and
   the fact rows below say the rest; the row button's aria-label still carries the whole sentence. */
html.lvm .yvst{display:none}
html.lvm .yvbar{width:100%}

/* 320px: a smaller photo keeps the title and state lines a readable width */
@media (max-width:359px){html.lvm .yvcov{width:80px;height:66px}html.lvm .yvl{gap:12px}html.lvm .yvtx{padding-right:30px}html.lvm .yvwrap{padding:12px}}
html.lvm .vx-pill{display:inline-flex!important;align-items:center;height:28px;padding:0 12px;border-radius:8px;background:var(--accbg);color:var(--ink2);font-size:14px;font-weight:600;white-space:nowrap}
html.lvm .vx-pill[data-k=rendering]{background:var(--accbg);color:var(--lvg)}
html.lvm .vx-pill[data-k=ready]{background:var(--okbg);color:var(--ok)}
html.lvm .vx-line{display:flex!important;align-items:center;gap:9px;font-size:15px;line-height:1.35;color:var(--ink)}
html.lvm .vx-line::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#D49A3C}
html.lvm .vx-meta{display:block!important;font-size:14px;line-height:1.35;color:var(--ink3)}

/* Fact rows (law L8): an icon and its label on the left, the value hard right. They span the card, under the photo and title. */
html.lvm .vx-facts{display:flex!important;flex-direction:column;gap:12px;margin:14px 0 0}
html.lvm .vx-fr{display:flex;align-items:center;gap:12px;min-height:24px;font-size:15px;line-height:1.35}
html.lvm .vx-fi{flex:none;color:var(--ink2)}
html.lvm .vx-fl{flex:none;color:var(--ink2)}
html.lvm .vx-fv{flex:1 1 auto;min-width:0;text-align:right;font-weight:600;color:var(--ink);overflow-wrap:anywhere}

html.lvm .vx-kebab{display:block!important;position:absolute;top:6px;right:6px}
html.lvm .vx-kebab button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:0;border-radius:10px;background:none;color:var(--ink);cursor:pointer}
html.lvm .vx-kebab button:focus-visible{outline:2px solid var(--lvg);outline-offset:-2px}

/* The card's foot: a divider, then one full-width green button. A ready video has two real actions, so its foot is Play, the green one,
   with Download full width and outlined (law L4) under it, not two halves. The inline
   "Remove this draft? Remove / Keep" pair is not drawn here: the kebab asks, and the sheet answers. */
html.lvm .yvside{display:flex;flex-wrap:nowrap;align-items:stretch;gap:10px;min-height:0;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
html.lvm .yvside:empty{display:none}
html.lvm .yvside > span,html.lvm .yvside .yvlink[data-vdel]{display:none}
html.lvm .yvside .vx-cta,html.lvm .yvside [data-vplay],html.lvm .yvside a.yvlink{display:inline-flex!important;align-items:center;justify-content:center;position:relative;flex:1 1 0;width:auto;height:48px;min-height:48px;padding:0 16px;border-radius:10px;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer}
html.lvm .yvside .vx-cta,html.lvm .yvside [data-vplay]{border:1px solid var(--lvg);background:var(--lvg);color:var(--lvgi)}
html.lvm .yvside a.yvlink{border:1px solid var(--line2);background:var(--card);color:var(--ink)}
html.lvm .yvside .vx-cta{width:100%}
html.lvm .yvside .vx-cta svg{color:inherit;position:absolute;right:16px;top:50%;width:20px;height:20px;margin-top:-10px}
html.lvm .yvside:has([data-vplay]){flex-direction:column;gap:10px}
html.lvm .yvside:has([data-vplay]) > *{flex:none;width:100%;box-sizing:border-box}
html.lvm .yvside [data-vplay]::after,html.lvm .yvside a.yvlink::after{content:"";position:absolute;right:16px;top:50%;width:20px;height:20px;margin-top:-10px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
html.lvm .yvside [data-vplay]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 4.8v14.4L19 12z' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 4.8v14.4L19 12z' fill='black' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")}
html.lvm .yvside a.yvlink::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M5 20h14'/%3E%3C/svg%3E")}
html.lvm .yvside .vx-cta:focus-visible,html.lvm .yvside [data-vplay]:focus-visible,html.lvm .yvside a.yvlink:focus-visible{outline:2px solid var(--lvg);outline-offset:2px}

/* empty: his shot 4 */
html.lvm .yvempty{display:flex;flex-direction:column;align-items:center;gap:0;padding:34px 20px 26px;border:1px solid var(--line2);border-radius:14px;background:var(--card);text-align:center}
html.lvm .yvempty > b,html.lvm .yvempty > span{display:none}
html.lvm .vx-art{display:block!important;margin:0 0 22px;color:var(--ink3)}
html.lvm .vx-t{display:block!important;margin:0 0 8px;font-size:24px;line-height:1.25;font-weight:700;color:var(--ink)}
html.lvm .vx-s{display:block!important;max-width:300px;margin:0;font-size:17px;line-height:1.45;color:var(--ink2)}
html.lvm .vx-new{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;width:100%;max-width:320px;height:52px;min-height:52px;margin:24px 0 14px;padding:0 20px;border:0;border-radius:12px;background:var(--lvg);color:var(--lvgi);font-size:17px;font-weight:600;cursor:pointer}
html.lvm .vx-new:focus-visible{outline:2px solid var(--lvg);outline-offset:3px}
html.lvm .vx-h{display:block!important;font-size:14px;color:var(--ink3)}

/* --------------------------------------------------------------------------------------------- Delete this draft?: his shot 1 */
html.lvm dialog.vmsheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:none;overflow:visible;padding:0;border:0;border-radius:22px 22px 0 0;background:var(--card);color:var(--ink)}
html.lvm dialog.vmsheet[open]{animation:vmsheet-up .3s cubic-bezier(.2,.8,.2,1)}
html.lvm dialog.vmsheet::backdrop{background:rgba(20,24,21,.5)}
@keyframes vmsheet-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){html.lvm dialog.vmsheet[open]{animation:none}}
html.lvm .vmsh-in{padding:12px 16px calc(24px + env(safe-area-inset-bottom,0px))}
html.lvm .vmsh-grab{display:block;width:56px;height:6px;margin:0 auto 26px;border-radius:3px;background:color-mix(in srgb,var(--ink) 16%,transparent)}
html.lvm .vmsh-row{display:flex;align-items:flex-start;gap:18px;padding:0 4px 30px}
html.lvm .vmsh-ico{flex:none;width:34px;height:34px;margin-top:2px;color:var(--bad)}
html.lvm .vmsh-tx{display:flex;flex-direction:column;gap:6px;min-width:0}
html.lvm .vmsh-tx b{font-size:24px;line-height:1.25;font-weight:700;color:var(--ink)}
html.lvm .vmsh-tx span{font-size:18px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
html.lvm .vmsh-btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
html.lvm .vmsh-btns button{height:56px;min-height:56px;padding:0 12px;border-radius:12px;font-size:18px;font-weight:600;cursor:pointer}
html.lvm .vmsh-keep{border:1px solid var(--line2);background:var(--card);color:var(--ink)}
html.lvm .vmsh-go{border:1px solid var(--bad);background:var(--bad);color:#fff}
html.lvm .vmsh-btns button:focus-visible{outline:2px solid var(--lvg);outline-offset:2px}
/* On its side the frame is short: the sheet is drawn tighter and scrolls inside itself if it still does not fit. */
@media (max-height:500px){html.lvm dialog.vmsheet{max-height:100%;overflow:auto}html.lvm .vmsh-in{padding:8px 16px calc(14px + env(safe-area-inset-bottom,0px))}html.lvm .vmsh-grab{margin-bottom:10px}html.lvm .vmsh-row{padding-bottom:14px}html.lvm .vmsh-btns button{height:48px;min-height:48px}}

/* ------------------------------------------------------------------------------------------ New listing video: his shots 6, 7 */
html.lvm.embedded body.vstarting .app{padding:0 16px}
html.lvm.embedded body.vstarting main{padding:0}
html.lvm.embedded body.vstarting .vstart{padding:2px 0 28px}
html.lvm.embedded .vstartin{gap:30px}
html.lvm .vfinder{padding:0;border:0;border-radius:0;background:none}
html.lvm .vfh{display:block!important;margin:14px 0 6px;font-size:22px;line-height:1.25;font-weight:600;color:var(--ink)}
html.lvm .vfsub{display:block!important;margin:0 0 18px;font-size:16px;line-height:1.45;color:var(--ink2)}
html.lvm .vfbar{min-height:56px;padding:4px 16px;gap:14px;border-radius:12px;border-color:var(--line2)}
html.lvm .vfbar svg{width:20px;height:20px}
html.lvm .vfbar input{min-height:46px;font-size:16px}
@media (max-width:359px){html.lvm .vfbar input::placeholder{font-size:13.5px}}
html.lvm .vchip{width:auto;min-height:44px;height:auto;margin:2px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink3);font-size:14px;justify-content:flex-start}
html.lvm .vchip:hover{background:none}
html.lvm .vchip > svg,html.lvm .vchip > span:not(.vfex){display:none}
html.lvm .vchip .vfex{display:inline!important}
html.lvm .vshelf{padding:0;border:0;border-radius:0;background:none}
html.lvm .vshelf .shelfcap{margin:0 0 14px;font-size:22px;line-height:1.25;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
html.lvm .vgrid{gap:12px}
html.lvm .vshelf .shelfrow{display:grid;grid-template-columns:30px minmax(0,1fr) 22px;grid-template-rows:auto auto;align-content:center;column-gap:16px;row-gap:2px;align-items:center;min-height:76px;padding:14px 16px;border:1px solid var(--line2);border-radius:12px;background:var(--card);box-shadow:none;transform:none}
html.lvm .vshelf .shelfrow:hover{transform:none}
html.lvm .vshelf .shelfrow:focus-visible{outline:2px solid var(--lvg);outline-offset:2px}
html.lvm .vshelf .shelfrow::before,html.lvm .vshelf .shelfrow::after{content:"";grid-row:1 / span 2;background-color:var(--ink2);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
html.lvm .vshelf .shelfrow::before{grid-column:1;width:30px;height:30px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3.3l9 7.3'/%3E%3Cpath d='M5.6 9.6V20.4h12.8V9.6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3.3l9 7.3'/%3E%3Cpath d='M5.6 9.6V20.4h12.8V9.6'/%3E%3C/svg%3E")}
html.lvm .vshelf .shelfrow::after{grid-column:3;width:22px;height:22px;background-color:var(--ink2);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E")}
html.lvm .vshelf .sr1{grid-column:2;grid-row:1;font-size:17px;line-height:1.3;font-weight:600}
html.lvm .vshelf .sr2{grid-column:2;grid-row:2;margin:0;font-size:14px;line-height:1.3;color:var(--ink3)}

/* =====================================================================================================================
   THE EDITOR: his shot 9. Everything below is scoped to a screen that is neither the list, the start screen, nor a draft opening.
   (Native CSS nesting: one scope, so each rule below carries only its own selector.)
   ===================================================================================================================== */
html.lvm.embedded body:not(.vstarting):not(.vm-opening):not(:has(#resumeCard:not(.hidden))){

  /* Media and Home details are one card: address, Draft pill, a divider, the stepper, then the step. */
  &:not([data-step="s-script"]) .app{margin:2px 16px 0;padding:0 16px 20px;border:1px solid var(--line2);border-radius:14px;background:var(--card)}
  &:not([data-step="s-script"]) main{padding:12px 0 0}
  /* room for the pinned bar under the last thing on the page */
  &[data-step="s-rooms"],&[data-step="s-home"]{padding-bottom:136px}
  &:not([data-step="s-script"]) .vfoot{background:var(--card)}

  & .rail-nav{position:static;display:block;min-height:0;margin:0;padding:18px 0 0;border:0;background:none;box-shadow:none;clip-path:none}
  & .vident{display:block;min-height:0;padding:0 0 16px;border-bottom:1px solid var(--line)}
  & .vident[hidden]{display:none}
  & .vthumb{display:none!important}
  & .vid{display:block}
  & .vttl{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  & .vttl b{display:block;overflow:visible;white-space:normal;text-overflow:clip;font-size:20px;line-height:1.25;font-weight:700;color:var(--ink)}
  & .vpill{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:600}
  & .vpill.vdraft[hidden]{display:inline-flex!important}
  & #vPill:not([hidden]) ~ .vdraft{display:none!important}

  /* The stepper: a numbered circle over its name, a line between the circles; the open step green, a finished one filled. */
  & .steps{display:flex;flex-wrap:nowrap;align-self:auto;width:100%;margin:14px 0 0;padding:0;gap:0}
  & .steps li{position:relative;flex:1 1 0;min-width:0;display:flex;justify-content:center}
  & .steps li + li::before{content:"";position:absolute;top:21px;left:calc(-50% + 30px);right:calc(50% + 30px);border-top:1.5px solid var(--line2)}
  & .steps a,& .steps a:hover{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;width:100%;height:auto;min-height:72px;padding:0 2px;background:none;color:var(--ink2);font-size:14px;line-height:1.25;font-weight:600;text-align:center}
  & .steps a::after,& .steps a.active::after{display:none}
  & .steps .n{display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;border:1.5px solid var(--line2);border-radius:50%;background:var(--card);color:var(--ink2);font-size:17px;font-weight:600}
  & .steps .lb{display:block;max-width:100%}
  & .steps .lk{display:none}
  & .steps a.active,& .steps a.active:hover{color:var(--lvg);font-weight:700}
  & .steps a.active .n,& .steps a.active:hover .n{border-color:var(--accbg);background:var(--accbg);color:var(--lvg);font-weight:700}
  & .steps a.done .n{border-color:var(--lvg);background:var(--lvg);color:var(--lvgi)}
  & .steps a:focus-visible{outline:2px solid var(--lvg);outline-offset:2px;border-radius:10px}

  /* The drop zone: dashed, the photo stack, the round green upload button, then his words. */
  & .drop{min-height:0;margin:6px 0 0;padding:24px 12px 22px;border:1.5px dashed color-mix(in srgb,var(--lvg) 45%,transparent);border-radius:14px;background:var(--accbg2)}
  & .drop .dropt{display:none}
  & .drop .dropt.dropt-m{display:block!important;margin:20px 0 6px;font-size:24px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
  & .drop .dropsub{display:none}
  & .drop .dropsub.dropsub-m{display:block!important;font-size:15px;line-height:1.45}
  & .vchoose{width:100%;max-width:260px;height:52px;margin:20px 0 14px;padding:0 24px;justify-content:center;border-radius:12px;background:var(--lvg);color:var(--lvgi);font-size:17px;font-weight:600}
  & .vup{background:var(--lvg);color:var(--lvgi)}
  & .drop small{font-size:13px;font-weight:500;letter-spacing:.02em}

  /* Home details sits in the same card: its panels give up their own borders. */
  &[data-step="s-home"] .panel{padding:16px 0 0;border:0;border-radius:0;background:none;box-shadow:none}
  &[data-step="s-home"] .panel + .panel{margin-top:16px;border-top:1px solid var(--line)}

  /* Narration (the last step) is the working screen: the same card and stepper, drawn tight so the preview and its controls stay on
     the first screen. Its back, the lines-to-fix flag and Export video are the pinned bar. */
  &[data-step="s-script"] .rail-nav{margin:2px 0 12px;padding:12px 14px 2px;border:1px solid var(--line2);border-radius:14px;background:var(--card)}
  &[data-step="s-script"] .vident{display:flex;align-items:center;gap:10px;padding:0 0 6px;border-bottom:0}
  &[data-step="s-script"] .vid{min-width:0}
  &[data-step="s-script"] .vttl{flex-direction:row;align-items:center;gap:10px;min-width:0}
  &[data-step="s-script"] .vttl b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:17px}
  &[data-step="s-script"] .vpill{flex:none;height:24px;padding:0 10px;font-size:13px}
  &[data-step="s-script"] .steps{margin-top:6px}
  &[data-step="s-script"] .steps a,&[data-step="s-script"] .steps a:hover{min-height:56px;gap:3px;font-size:13px}
  &[data-step="s-script"] .steps .n{width:32px;height:32px;font-size:15px}
  &[data-step="s-script"] .steps li + li::before{top:16px;left:calc(-50% + 26px);right:calc(50% + 26px)}
  &[data-step="s-script"] main{padding-bottom:104px}

  /* The pinned bar: the hint, then the one wide button, edge to edge at the screen's foot. */
  & .vfoot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line2);background:var(--card)}
  & .vfoot .vreason{order:0;flex:1 1 100%;text-align:left;max-width:none;font-size:15px;line-height:1.4;color:var(--ink2)}
  & .vfoot .vl{order:1;flex:none;display:flex;align-items:center;gap:8px}
  & .vfoot .vl:empty{display:none}
  & .vfoot .vl .vback{height:52px;padding:0 16px;border-radius:12px}
  & .vfoot .vdone{order:2;flex:1 1 0;min-width:0;height:52px;min-height:52px;padding:0 20px;border:0;border-radius:12px;background:var(--lvg);color:var(--lvgi);font-size:17px;font-weight:600}
  & .vfoot .vdone:disabled{opacity:1;background:color-mix(in srgb,var(--ink) 9%,var(--card));color:var(--ink3)}

  /* =================================================================================================================
     THE EDITOR MATCHED TO HIS NINE COMPS (owner ruling, 21 Oct 2026). Shapes, sizes and arrangement follow him. Where a comp's
     hairline looks lighter than ours the border keeps its product-wide strength (--line2); nothing is dropped, only drawn
     differently.
     ================================================================================================================= */

  /* Comp 1, the preview: a rounded picture of its own, a gap, then the controls in a card of their own (they were one joined
     slab). The play button takes the comp's size, and the scrub bar a 44px thumb strip so a finger can find it. */
  @media (max-width:767px){& #s-script #editorWrap.editing > #editorMain{align-self:stretch}}
  & #s-script .player{border-radius:12px}
  & #s-script .pbar{margin:12px 0 0;padding:12px 14px;gap:14px;border:1px solid var(--line2);border-radius:14px}
  & #pPlayBtn{width:52px;height:52px;min-width:52px}
  & #s-script .pbar input[type=range]{height:44px;margin:0}
  /* The preview's detail card sits invisible until it plays. It is hidden from the page's measure and from assistive tech too
     while it waits (the card's own fade is kept: it hides after it has faded). */
  & .player .spec:not(.on){visibility:hidden;transition:opacity .5s,visibility 0s .5s}

  /* Comp 1, the identity card on Narration: the pill rides the title row's right end, and the stepper is roomier (38px discs,
     14px names). */
  &[data-step="s-script"] .rail-nav{padding:14px 16px 4px;border:1px solid var(--line2)}
  &[data-step="s-script"] .vident{gap:12px;padding:0 0 8px}
  &[data-step="s-script"] .vid{flex:1 1 auto}
  &[data-step="s-script"] .vttl{width:100%}
  &[data-step="s-script"] .vttl b{font-size:19px}
  &[data-step="s-script"] .vpill{margin-left:auto;height:28px;padding:0 12px;font-size:14px}
  &[data-step="s-script"] .steps{margin-top:8px}
  &[data-step="s-script"] .steps a,&[data-step="s-script"] .steps a:hover{min-height:68px;gap:6px;font-size:14px}
  &[data-step="s-script"] .steps .n{width:38px;height:38px;font-size:16px}
  &[data-step="s-script"] .steps li + li::before{top:19px;left:calc(-50% + 29px);right:calc(50% + 29px)}
  @media (max-width:359px){&[data-step="s-script"] .steps a,&[data-step="s-script"] .steps a:hover{font-size:13px}}

  /* Comps 1 to 3, the tabs card: a 14px card, bigger tab names, the underline kept under the open one. The stale bar that pins
     under the tabs follows their new height. */
  & #s-script #editorWrap.editing #editorSide{border:1px solid var(--line2);border-radius:14px}
  & .edtabs{border-radius:14px 14px 0 0}
  & .edtabs button{height:54px;font-size:17px}
  @media (max-width:359px){& .edtabs button{font-size:15.5px}}
  & #edStale{min-height:54px;margin:12px 12px 0;border-radius:12px;font-size:15.5px}
  & #edStale[data-state="stale"],& #edStale[data-state="busy"]{top:55px}

  /* Comps 2 and 3, a clip's row: a 62px picture, a 17px name, a bolder chevron, "No narration" beside the name. An open row
     shows no time range beside its name (the comp has none, and it was clipped to "0:..."); the words stay in the page for a
     screen reader. */
  & #sceneList .scenehead{min-height:68px;padding:10px 14px;gap:12px}
  & #sceneList .scthumb{width:62px;height:44px;border-radius:8px}
  & #sceneList .scenehead .nm{font-size:16.5px}
  & #sceneList .scenehead .info{font-size:15px;color:var(--ink2)}
  & #sceneList .scenehead::after{width:9px;height:9px;margin-left:auto;margin-right:4px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink)}
  & #sceneList .scene.open .scenehead .info{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

  /* Comp 2, the open Clips row: "Transition" over a select that runs the card's width. */
  & #sceneList .scenebody > .slot{width:100%;box-sizing:border-box}
  & #sceneList .slab{margin:0 0 8px;font-size:15px;font-weight:500;color:var(--ink3)}
  & #sceneList .slot select,& #sceneList .slothead select,& #sceneList .trrow select{width:100%;min-width:0;height:52px;font-size:17px}

  /* Comp 3, the open Narration row: a taller words box with 17px words, the count and Saved on one line, a Listen button that
     reads at rest (it is still switched off until the line is voiced). */
  & #sceneList .lineed{min-height:96px;padding:12px 14px;font-size:17px;line-height:1.5}
  & #sceneList .vcnt b,& #sceneList .vsaved{font-size:15.5px}
  & #sceneList .nbtn{height:46px;padding:0 22px;font-size:16px}
  & #sceneList .nbtn[disabled]{opacity:1;color:var(--ink3)}

  /* Comps 4 and 5, Style: 18px section titles, 16px labels in ink, 50px selects, the play disc and the percentage boxes at the
     comp's size (the number centred in its box), Colour cards taller with a 14px radius and a plain white fill under the ring. */
  & .sth{gap:12px;margin:6px 0 12px;font-size:18px}
  & .sth svg{width:20px;height:20px}
  & .strow{margin:14px 0 0}
  & .stlab{font-size:16px;font-weight:500;color:var(--ink)}
  & #capHiL,& .stlast .stlab{font-size:17px;font-weight:600}
  & .stctl select{height:50px;font-size:17px}
  & #capPosSel,& #labelPos{width:150px}
  & .stplay{width:52px;height:52px;min-width:52px}
  & .stbox{width:88px;height:50px;justify-content:center;gap:2px;padding:0 8px;font-size:18px}
  & .stbox input{flex:none;width:3.2ch;font-size:18px}
  @supports (field-sizing:content){& .stbox{gap:1px}& .stbox input{width:auto;min-width:1ch;field-sizing:content}}
  & .stlooksel{height:52px;padding:0 14px;border-radius:14px;font-size:17px}
  & .stlookline{font-size:15.5px}
  & .stpal{height:24px}
  /* Highlight: 46px discs on a 14px gap (five to a row at 390), the hex field 50px tall. Room names: the wider position select
     and a 58px switch. */
  & .sthi{gap:14px}
  & .stsw-c,& .stwheel{width:46px;height:46px;min-width:46px}
  & .sthi .stbox,& .sthi input[type=text]{height:50px}
  & .sthex{width:104px;font-size:17px}
  & label.stsw.stsw{width:58px;height:34px}
  & .stsw i::after{width:28px;height:28px}
  & .stsw input:checked + i::after{transform:translateX(24px)}
  @media (max-width:359px){& .stlab{font-size:15px}& #capHiL,& .stlast .stlab{font-size:15.5px}& #capPosSel,& #labelPos{width:132px}& label.stsw.stsw{width:52px;height:32px}& .stsw i::after{width:26px;height:26px}& .stsw input:checked + i::after{transform:translateX(20px)}}

  /* Comp 4, the Timeline card: a 14px card on a 16px pad, a 21px title, 48px zoom buttons with a 12px gap. */
  & #s-script #darkBlock{padding:16px 16px 18px;border:1px solid var(--line2);border-radius:14px}
  & #s-script #stripWrap{padding:6px 4px}
  & .tlhead{margin:0 0 12px}
  & .tlhead b{font-size:21px}
  & .tlzoom{gap:12px}
  & .tlzoom button{width:48px;height:48px;border-radius:10px;font-size:22px}

  /* Comps 6 and 7, Home details: 18px side padding, fields that run the card's width and stand 54px tall, 17px labels in ink.
     "Shown as" keeps the left and "Change" takes the right end (the words wrap before the link ever leaves the screen). Renter
     is a 48px pill; the hint reads at 15px. */
  &[data-step="s-home"] .app{padding:0 18px 22px}
  &[data-step="s-home"] .vcard > :not(.vct){margin-left:0;margin-right:0}
  &[data-step="s-home"] .vhome{padding:16px 0 22px;border-bottom:1px solid var(--line)}
  &[data-step="s-home"] .vhome .vf > label,&[data-step="s-home"] .vflab label{font-size:17px;font-weight:500;color:var(--ink)}
  &[data-step="s-home"] .vhome .vf input:not([type=hidden]){height:54px;min-height:54px;padding:0 16px;font-size:17px}
  &[data-step="s-home"] .vnameline{justify-content:space-between;gap:12px;margin-top:10px;font-size:16px}
  &[data-step="s-home"] .vnameline > span{min-width:0;overflow-wrap:anywhere}
  &[data-step="s-home"] .vnameline .linkbtn{flex:none;min-height:44px;padding:0 2px;font-size:17px;white-space:nowrap}
  &[data-step="s-home"] .vtag{height:48px;padding:0 24px;font-size:16px}
  &[data-step="s-home"] .vrenthint{margin-top:10px;font-size:15px}

  /* Comp 7, General features, and comp 8, Nearby: each is a card of its own inside the page card (white, a 1px --line2 border,
     14px radius). General features wears a pale disc with a green icon; Nearby a solid green disc with a white pin. */
  &[data-step="s-home"] .vhome ~ .vcard{margin-top:22px;padding:18px 16px 16px;border:1px solid var(--line2);border-radius:14px;background:var(--card)}
  &[data-step="s-home"] .vcard .vct{gap:14px;margin:0 0 14px;padding:0;border:0;background:none}
  &[data-step="s-home"] .vcard .vct h3{font-size:22px}
  &[data-step="s-home"] .vdisc2{width:50px;height:50px;background:var(--accbg);color:var(--lvg)}
  &[data-step="s-home"] .vdisc2 svg{width:24px;height:24px}
  &[data-step="s-home"] #vNearCard .vdisc2{width:56px;height:56px;background:var(--lvg);color:var(--lvgi)}
  &[data-step="s-home"] .vcard > textarea{width:100%;min-height:176px;padding:14px 16px;box-sizing:border-box;font-size:17px;line-height:1.5}

  /* Comps 8 and 9, the Nearby rows: a 24px square tick inside a 44px tap, the kind in small capitals, the walk at the right, the
     place in 19px bold, a 112px picture with its Photo button (or its remove) opposite, "None nearby" holding the picture's
     room open as in the comp. "+ Add place" stays on one line with "Max 2 pictures" opposite. */
  &[data-step="s-home"] .vnhint{margin:0 0 6px;font-size:16px;line-height:1.45}
  &[data-step="s-home"] .vnrow{grid-template-columns:38px minmax(0,1fr) auto;column-gap:0;row-gap:4px;min-height:0;padding:14px 0 12px}
  &[data-step="s-home"] .vnt{margin:-8px 0}
  &[data-step="s-home"] .vnt input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;width:38px;height:44px;margin:0;border:0;background:none;cursor:pointer}
  &[data-step="s-home"] .vnt input[type=checkbox]::before{content:"";position:absolute;left:0;top:10px;width:24px;height:24px;box-sizing:border-box;border:1.5px solid var(--line2);border-radius:6px;background:color-mix(in srgb,var(--ink) 4%,var(--card))}
  &[data-step="s-home"] .vnt input[type=checkbox]:checked::before{border-color:var(--lvg);background:var(--lvg)}
  &[data-step="s-home"] .vnt input[type=checkbox]:checked::after{content:"";position:absolute;left:8px;top:15px;width:6px;height:11px;border:solid var(--lvgi);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
  &[data-step="s-home"] .vnt input[type=checkbox]:focus-visible{outline:2px solid var(--lvg);outline-offset:-2px}
  &[data-step="s-home"] .vnlab{font-size:14.5px;letter-spacing:.06em;white-space:normal}
  &[data-step="s-home"] .vnwalk{font-size:16.5px;color:var(--ink);white-space:normal;text-align:right}
  &[data-step="s-home"] .vnname{font-size:19px;font-weight:700}
  &[data-step="s-home"] .vnname.vnmuted{font-weight:500}
  &[data-step="s-home"] .vnrow .vnmap{justify-self:start;width:112px;max-width:calc(100% - 10px);height:62px;border-radius:10px}
  &[data-step="s-home"] .vnrow .vnmap.vnone{height:36px}
  &[data-step="s-home"] .vnown{height:44px;padding:0 18px;border:1.5px solid var(--lvg);border-radius:10px;font-size:16px;color:var(--lvg)}
  &[data-step="s-home"] .vnrm{width:44px;height:44px;border:1px solid var(--line2);border-radius:10px;background:var(--card);font-size:20px}
  &[data-step="s-home"] .vnextra{gap:12px;margin-top:4px;padding-top:12px;border-top:0}
  &[data-step="s-home"] #vxOpen{flex:none;min-height:44px;padding:0;font-size:17px;white-space:nowrap}
  &[data-step="s-home"] .vnextra #vxWhy{flex:0 1 auto;min-width:0;margin-left:auto;font-size:15px;white-space:normal;text-align:right}

  /* The bar at the foot: Go back is a little wider on Home details, and on Narration it is the comp's bordered white square. */
  & .vfoot .vl .vback{padding:0 20px}
  &[data-step="s-script"] .vfoot .vl .vback{width:52px;padding:0;border:1px solid var(--line2);background:var(--card)}

  /* =================================================================================================================
     EDIT VIDEO: Overview and By clip (owner comps m1, m2, m3, 22 Oct 2026: scratch-tmp/desktop-2026-10-22/lv/)
     This supersedes the Narration-step rules above where they meet: the header is the listing (picture, name, facts) over text tabs
     with an underline, not a card with numbered discs; the controls ride the picture; the order down the page is the view's own
     (Overview: picture, timeline, Video defaults; By clip: picture, the clips, the clip's panel).
     ================================================================================================================= */

  /* The header: the listing, then Media / Home details / Edit video as tabs. */
  &[data-step="s-script"] .rail-nav{margin:0 0 12px;padding:4px 0 0;border:0;border-radius:0;background:none}
  &[data-step="s-script"] .vident{align-items:center;gap:12px;padding:0 0 8px}
  &[data-step="s-script"] .vthumb:not([hidden]){display:block!important;flex:none;width:64px;height:44px;border-radius:8px;background:none}
  &[data-step="s-script"] .vid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
  &[data-step="s-script"] .vfacts{display:block;font-size:15px;color:var(--ink3)}
  &[data-step="s-script"] .vttl b{font-size:19px}
  &[data-step="s-script"] .steps{margin:4px 0 0;border-bottom:1px solid var(--line2)}
  &[data-step="s-script"] .steps li + li::before{display:none}
  &[data-step="s-script"] .steps a,&[data-step="s-script"] .steps a:hover{position:relative;flex-direction:row;min-height:48px;height:48px;gap:0;font-size:16.5px;font-weight:500;color:var(--ink2)}
  &[data-step="s-script"] .steps .n{display:none}
  &[data-step="s-script"] .steps a.active,&[data-step="s-script"] .steps a.active:hover{color:var(--lvg);font-weight:700}
  &[data-step="s-script"] .steps a.active::after{display:block;content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:3px;border-radius:2px 2px 0 0;background:var(--lvg)}

  /* The two views: a segmented pair the page's width, the open one outlined in green. */
  & #s-script #editorWrap.editing > .lvmode{display:flex;width:100%;justify-self:stretch;border-radius:14px}
  & .lvmode button{flex:1 1 0;min-width:0;height:52px;padding:0 12px;font-size:18px}

  /* The order down the page: the view, the picture, the timeline (or the clips), then the panel. */
  & #s-script #editorWrap.editing > .lvmode{order:-1}
  & #s-script #editorWrap.editing #editorSide{order:2}
  & #s-script #editorWrap.editing #darkBlock{order:1}

  /* The picture: its controls ride the bottom of it on a soft dark fade, and its chip names what it is showing. */
  & #s-script #previewOut{position:relative;margin:0}
  & #s-script #previewOut .pbar{position:absolute;left:0;right:0;bottom:0;z-index:6;gap:10px;margin:0;padding:26px 12px 8px;border:0;border-radius:0 0 12px 12px;background:linear-gradient(to top,rgba(10,14,12,.72),rgba(10,14,12,0));color:#fff}
  & #s-script #previewOut .pbar .t,& #s-script #previewOut .pbar .vfull{color:#fff}
  & #s-script #previewOut .pbar #pPlayBtn{width:44px;height:44px;min-width:44px;background:rgba(14,18,16,.9);box-shadow:0 0 0 2px rgba(255,255,255,.9)}
  & #s-script #previewOut .pbar input[type=range]{height:32px;accent-color:#fff}
  & #editorWrap.editing .pbar .t{font-size:13px}
  & #editorWrap .pchip{display:inline-flex;left:10px;top:10px;padding:6px 11px;font-size:13.5px}
  & #editorWrap .pchip.r{left:auto;right:10px}
  & #editorWrap[data-lvmode="overview"] .pchip{display:none}

  /* The panel: one card; its head, then each setting a card of its own that folds (a row with its value and a chevron). */
  & #s-script #editorWrap.editing #editorSide{border-radius:14px}
  & .lvhead{padding:16px 16px 4px}
  & .lvh1 h3{font-size:24px}
  & .lvsub{font-size:15.5px}
  & #editorWrap[data-lvmode="clip"] #edTabs{margin:8px 0 0;padding:0 4px}
  & .edbody{padding:10px 12px 8px}
  & .stsec{margin:0 0 10px;padding:12px 14px;border:1px solid var(--line2);border-radius:12px;background:var(--card)}
  & .stsec.stlast{margin-bottom:0}
  & .stsec.shut{padding-bottom:12px}
  & .sth{margin:0}
  & .stsec:not(.shut) > .sth{margin-bottom:10px}
  & .stfold{min-height:44px;font-size:17px}
  & .stfold .stsum{font-size:16px;font-weight:400}
  & .stlooks{grid-template-columns:repeat(3,minmax(0,1fr))}
  & .stroom .strow{grid-template-columns:auto minmax(0,1fr);margin:0;min-height:44px}
  & .stroom .stctl{justify-content:flex-end;gap:12px}
  & .stroom .stlab{white-space:nowrap;font-size:17px;font-weight:700}
  & .stroom #labelPos{flex:0 0 132px;width:132px}
  & #capPosSel{flex:1 1 auto;width:auto}
  /* "Preview up to date" closes the panel (comp m2); while the preview is out of date it stays up under the head, where Update preview is a tap away */
  & #edStale[data-state="ok"]{order:3;margin:2px 12px 12px}
  & .clipsec{padding:8px 14px}
  & .clipsec > .stbody{padding:2px 0 4px}

  /* The timeline: the ruler, the fact cards, then the clips under a 58px gutter; Edit clip rides each clip's picture. */
  & #s-script #darkBlock{padding:12px 12px 14px}
  & .tlhead{min-height:44px;margin:0 0 6px}
  & .tlhead b{font-size:20px}
  & .tlhead .tlrange{margin-left:10px;font-size:15px}
  & #s-script #stripWrap{--lg:58px;padding:4px 0 2px}
  & .llab{font-size:14px;line-height:1.2}
  & .llab svg{display:none}
  & .lr-cards .llab,& .lr-clips .llab{white-space:normal}
  & #s-script #stripRuler{height:28px}
  & #cardLane{height:42px;margin:0}
  & #cardLane.two{height:80px}
  & .cardmark{height:38px;padding:0 10px;border-radius:7px;background:#E9B85C;color:#3A2A08;font-size:16px;line-height:38px;box-shadow:none}
  & .cardmark::after{display:none}
  & .cardmark.low{top:42px}
  & #s-script #strip{height:76px;gap:6px}
  & #s-script #strip button{min-width:44px;border-radius:9px}
  & #s-script #strip button .lbl{display:none}
  & #s-script .lr-clips + .lr-edit{margin-top:-76px}
  & #clipLane{pointer-events:none}
  & .clipcell{position:relative;min-width:44px;height:106px;padding:0;gap:0;justify-content:flex-end}
  & .clipnm{position:static;padding:4px 0 0;font-size:15px;pointer-events:auto}
  & .clipedit{position:absolute;left:50%;top:34px;transform:translateX(-50%);height:34px;padding:0 10px;border:0;border-radius:17px;background:rgba(14,18,16,.72);color:#fff;font-size:13.5px;pointer-events:auto}
  & .clipedit:hover{color:#fff;background:rgba(14,18,16,.9)}
  & #s-script #playhead{top:34px}

  /* By clip: the clips as tiles, three across, scrolling sideways, each named over "Clip n of N". No timeline on a phone. */
  & #editorWrap[data-lvmode="clip"] .tlhead,& #editorWrap[data-lvmode="clip"] #tlScroll{display:none}
  & #tlScroll{scrollbar-width:none}
  & #tlScroll::-webkit-scrollbar{display:none}
  & .clipstrip{padding:0}
  & #s-script #editorWrap[data-lvmode="clip"] #darkBlock{padding:10px 10px 12px}
  & .cs-head{display:none}
  & .cs-row{gap:10px;padding:3px 3px 4px;scroll-snap-type:x proximity;scrollbar-width:none}
  & .cs-row::-webkit-scrollbar{display:none}
  & .lvbadge.soft{display:none}
  & .cs-tile{flex:0 0 calc((100% - 20px) / 2.7);scroll-snap-align:start;gap:6px}
  & .cs-name{font-size:16px}
  & .cs-name b{display:none}
  & .cs-sub{display:block;font-size:15px}
}
}


/* ======================================================================================================================
   THE PHONE SCALE (owner ruling, 26 Oct 2026): the block that follows is the last word on sizes in this file. The rules above it carry
   the earlier, larger phone sizes (the 20 to 22 Oct comps) and stay where they were; where one of them meets a rule below, the rule below
   wins, because the owner said "BREAK ALL EXISTING RULES IF NEEDED, NO MORE RULES WILL APPLY". Every size below is a token from the
   foot of mobile-media.css; the geometry of the video frames is untouched.
   ====================================================================================================================== */
@media (max-width:767px),(pointer:coarse) and (max-height:500px){

  /* =====================================================================================================================
     THE SCALE FOR LISTING VIDEO (owner ruling, 26 Oct 2026). His words: "most of my text shld be smaller fonts uk and zoom out abit
     more the cards eveyrthing, everything is so mega sized that my brain cant focus", "i want to go cosnistent", "i hate fucking
     scrolling super much", and: "BREAK ALL EXISTING RULES IF NEEDED, NO MORE RULES WILL APPLY". The comps of 20 to 22 Oct drew this
     zone at 16 to 24px with 52 to 56px controls; this block is the last word on those sizes. Type and spacing come from the scale
     tokens at the foot of mobile-media.css. THE TIMELINE AND THE PLAYER KEEP THEIR GEOMETRY: the preview frame, the scrubber's hit
     strip, the clip strip's height, the card lane and the playhead are not touched; only the words and the chrome round them.
     ===================================================================================================================== */

  /* ------------------------------------------------------------------------------------------- the zone's header (the dashboard's document) */
  #view .ve.vm-fill .vm-mt{font-size:var(--m-h1)!important;line-height:1.15}
  #view .ve.vm-fill .vm-sub{margin:var(--m-gap-xs) 0 0;font-size:var(--m-body)!important;line-height:1.4}
  #view .ve.vm-fill .vm-head{padding:0 0 var(--m-gap)!important}
  #view .ve.vm-fill .vm-new{min-height:var(--m-tap);height:var(--m-tap);padding-inline:var(--m-pad);padding-block:var(--m-pad-s);gap:var(--m-gap-s);border-radius:var(--m-radius);font-size:var(--m-body)!important;font-weight:600}
  #view .ve.vm-fill .vm-new svg{width:18px;height:18px}
  /* The way back is a chevron in a 44px target, as on the Reels header (its words stay for a screen reader), so "Listing videos" never breaks into two
     lines and the header's buttons keep their room. */
  #view .ve.vm-fill .vm-back{width:var(--m-tap);min-height:var(--m-tap);height:var(--m-tap);margin-left:calc(-1 * var(--m-gap));padding:0;justify-content:center;gap:0;font-size:var(--m-body)!important}
  #view .ve.vm-fill .vm-back svg{width:22px;height:22px;color:var(--ink)}
  #view .ve.vm-fill .vm-back span{width:0;overflow:visible;white-space:nowrap;color:transparent}
  #view .ve.vm-fill.vm-start .vm-head .htop{flex-wrap:nowrap;align-items:center}
  #view .ve.vm-fill.vm-start .vm-back-w,#view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-back-w{flex:none}
  #view .ve.vm-fill.vm-start .vm-mt{flex:1 1 auto;margin:0}
  #view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-head .htop{justify-content:space-between}
  /* The list's header: the title and New video share a row; the line and the Filming tips icon share the next (the icon sat beside New video and took the
     title's room, so "Listing videos" broke in two). */
  #view .ve.vm-fill.vm-list .vm-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--m-gap)}
  #view .ve.vm-fill.vm-list .vm-head .htop,#view .ve.vm-fill.vm-list .vm-head .tools{display:contents}
  #view .ve.vm-fill.vm-list .vm-mt{grid-column:1;grid-row:1}
  #view .ve.vm-fill.vm-list .vm-new{grid-column:2;grid-row:1}
  #view .ve.vm-fill.vm-list .vm-sub{grid-column:1;grid-row:2;margin:0}
  #view .ve.vm-fill.vm-list .vm-tips{grid-column:2;grid-row:2}

  /* ---------------------------------------------------------------------------------------------------------------- the list */
  html.lvm .yv:has(.yvbar2) > .yvcap{margin:0 0 var(--m-gap-s);font-size:var(--m-body-lg)!important}
  html.lvm .yvbar2{gap:var(--m-gap-s);margin:0 0 var(--m-gap)}
  html.lvm .yvfind{height:var(--m-control);padding:0 var(--m-gap);gap:var(--m-gap-s);border-radius:var(--m-radius)}
  html.lvm .yvfind input{font-size:var(--m-input)!important}
  html.lvm .yvfind svg{width:18px;height:18px}
  html.lvm .yvpick{height:var(--m-control);min-height:var(--m-control);padding:0 36px 0 var(--m-gap);border-radius:var(--m-radius);font-size:var(--m-input)!important;background-position:right var(--m-gap) center;background-size:18px}
  html.lvm .yvlist{gap:var(--m-gap-s)}
  html.lvm .yvwrap{padding:var(--m-pad);border-radius:var(--m-radius)}
  html.lvm .yvl{gap:var(--m-gap)}
  html.lvm .yvcov{width:80px;height:64px;border-radius:var(--m-gap-s)}
  html.lvm .yvtx{gap:var(--m-gap-xs);padding-right:var(--m-tap)}
  html.lvm .yvtx b{font-size:var(--m-body-lg)!important;line-height:1.3;font-weight:600}
  html.lvm .vx-pill{height:22px;padding:0 var(--m-gap-s);border-radius:var(--m-gap-s);font-size:var(--m-cap)!important}
  html.lvm .vx-line{gap:var(--m-gap-s);font-size:var(--m-body)!important}
  html.lvm .vx-line::before{width:8px;height:8px}
  html.lvm .vx-meta{font-size:var(--m-cap)!important}
  html.lvm .vx-facts{gap:var(--m-gap-xs);margin:var(--m-gap-s) 0 0}
  html.lvm .vx-fr{gap:var(--m-gap-s);min-height:0;font-size:var(--m-body)!important;line-height:1.3}
  html.lvm .vx-fi{width:16px;height:16px}
  html.lvm .vx-kebab{top:var(--m-gap-xs);right:var(--m-gap-xs)}
  html.lvm .vx-kebab button{width:var(--m-tap);height:var(--m-tap);min-width:var(--m-tap);min-height:var(--m-tap);border-radius:var(--m-radius)}
  html.lvm .yvside{gap:var(--m-gap-s);margin:var(--m-gap-s) 0 0;padding:var(--m-gap-s) 0 0}
  html.lvm .yvside:has([data-vplay]){gap:var(--m-gap-s)}
  html.lvm .yvside .vx-cta,html.lvm .yvside [data-vplay],html.lvm .yvside a.yvlink{height:var(--m-tap);min-height:var(--m-tap);padding-block:var(--m-pad-s);padding-inline:var(--m-gap);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html.lvm .yvside .vx-cta svg{right:var(--m-gap);width:18px;height:18px;margin-top:-9px}
  /* A ready video's two actions share a row, Play and Download side by side with their marks inline (they were two full-width bars stacked). */
  html.lvm .yvside:has([data-vplay]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);flex-direction:initial}
  html.lvm .yvside:has([data-vplay]) > *{width:auto}
  html.lvm .yvside [data-vplay],html.lvm .yvside a.yvlink{gap:var(--m-gap-s)}
  html.lvm .yvside [data-vplay]::after,html.lvm .yvside a.yvlink::after{position:static;order:2;flex:none;width:16px;height:16px;margin:0}

  /* an empty list: his shot 4, drawn to the scale */
  html.lvm .yvempty{padding:var(--m-gap-l) var(--m-gap-l) var(--m-gap);border-radius:var(--m-radius)}
  html.lvm .vx-art{margin:0 0 var(--m-gap);width:140px;height:auto}
  html.lvm .vx-t{margin:0 0 var(--m-gap-xs);font-size:var(--m-h3)!important;line-height:1.25}
  html.lvm .vx-s{max-width:280px;font-size:var(--m-body)!important;line-height:1.4}
  html.lvm .vx-new{height:var(--m-tap);min-height:var(--m-tap);margin:var(--m-gap) 0 var(--m-gap-s);padding-block:var(--m-pad-s);padding-inline:var(--m-gap-l);gap:var(--m-gap-s);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html.lvm .vx-h{font-size:var(--m-cap)!important}

  /* -------------------------------------------------------------------------------------------------------- Delete this draft? */
  html.lvm dialog.vmsheet{border-radius:var(--m-radius) var(--m-radius) 0 0}
  html.lvm .vmsh-in{padding:var(--m-gap) var(--m-page-x) calc(var(--m-gap-l) + env(safe-area-inset-bottom,0px))}
  html.lvm .vmsh-grab{width:40px;height:4px;margin:0 auto var(--m-gap-l)}
  html.lvm .vmsh-row{gap:var(--m-gap);padding:0 var(--m-gap-xs) var(--m-gap-l)}
  html.lvm .vmsh-ico{width:24px;height:24px}
  html.lvm .vmsh-tx{gap:var(--m-gap-xs)}
  html.lvm .vmsh-tx b{font-size:var(--m-h4)!important}
  html.lvm .vmsh-tx span{font-size:var(--m-body)!important;line-height:1.4}
  html.lvm .vmsh-btns{gap:var(--m-gap-s)}
  html.lvm .vmsh-btns button{height:var(--m-tap);min-height:var(--m-tap);padding-block:var(--m-pad-s);border-radius:var(--m-radius);font-size:var(--m-body)!important}

  /* ---------------------------------------------------------------------------------------------------------- the start screen */
  html.lvm.embedded .vstartin{gap:var(--m-gap-l)}
  html.lvm .vfh{margin:var(--m-gap-s) 0 var(--m-gap-xs);font-size:var(--m-h3)!important}
  html.lvm .vfsub{margin:0 0 var(--m-gap);font-size:var(--m-body)!important}
  html.lvm .vfbar{min-height:var(--m-tap);padding:0 var(--m-gap);gap:var(--m-gap-s);border-radius:var(--m-radius)}
  html.lvm .vfbar svg{width:18px;height:18px}
  html.lvm .vfbar input{min-height:calc(var(--m-tap) - 8px);font-size:var(--m-input)!important}
  html.lvm .vchip{min-height:var(--m-control);padding-block:var(--m-pad-s);font-size:var(--m-body)!important}
  html.lvm .vshelf .shelfcap{margin:0 0 var(--m-gap-s);font-size:var(--m-h4)!important}
  html.lvm .vgrid{gap:var(--m-gap-s)}
  html.lvm .vshelf .shelfrow{grid-template-columns:24px minmax(0,1fr) 20px;column-gap:var(--m-gap);min-height:var(--m-tap);padding:var(--m-gap-s) var(--m-gap);border-radius:var(--m-radius)}
  html.lvm .vshelf .shelfrow::before{width:24px;height:24px}
  html.lvm .vshelf .shelfrow::after{width:20px;height:20px}
  html.lvm .vshelf .sr1{font-size:var(--m-body-lg)!important;font-weight:600}
  html.lvm .vshelf .sr2{font-size:var(--m-cap)!important}
  html.lvm .vsugg button,html.lvm .vsugg .vsg{font-size:var(--m-body)!important}
  html.lvm .vfmsg,html.lvm .vhint{font-size:var(--m-cap)!important}

  /* ----------------------------------------------------------------------------------------------------------------- the editor */
  html.lvm.embedded body:not(.vstarting):not(.vm-opening):not(:has(#resumeCard:not(.hidden))){
    &:not([data-step="s-script"]) .app{margin:var(--m-gap-xs) 0 0;padding:0 var(--m-pad) var(--m-pad);border-radius:var(--m-radius)}
    &:not([data-step="s-script"]) main{padding:var(--m-gap) 0 0}
    &[data-step="s-rooms"],&[data-step="s-home"]{padding-bottom:calc(var(--m-tap) + var(--m-gap-l) + 56px)}
    & .rail-nav{padding:var(--m-gap) 0 0}
    & .vident{padding:0 0 var(--m-gap)}
    & .vttl{gap:var(--m-gap-s)}
    & .vttl b{font-size:var(--m-body-lg)!important}
    & .vpill{height:22px;padding:0 var(--m-gap-s);border-radius:var(--m-gap-s);font-size:var(--m-cap)!important}
    & .steps{margin:var(--m-gap) 0 0}
    & .steps a,& .steps a:hover{min-height:56px;gap:var(--m-gap-xs);font-size:var(--m-cap)!important}
    & .steps .n{width:28px;height:28px;font-size:var(--m-body)!important}
    & .steps li + li::before{top:14px;left:calc(-50% + 22px);right:calc(50% + 22px)}
    & .drop{margin:var(--m-gap-xs) 0 0;padding:var(--m-gap-l) var(--m-gap) var(--m-gap);border-radius:var(--m-radius)}
    & .drop .dropt.dropt-m{margin:var(--m-gap) 0 var(--m-gap-xs);font-size:var(--m-h4)!important}
    & .drop .dropsub.dropsub-m{font-size:var(--m-body)!important}
    & .vchoose{max-width:240px;height:var(--m-tap);margin:var(--m-gap) 0 var(--m-gap-s);padding-block:var(--m-pad-s);padding-inline:var(--m-gap-l);border-radius:var(--m-radius);font-size:var(--m-body)!important}
    & .drop small{font-size:var(--m-cap)!important}
    &[data-step="s-home"] .panel{padding:var(--m-gap) 0 0}
    &[data-step="s-home"] .panel + .panel{margin-top:var(--m-gap)}
    &[data-step="s-script"] .rail-nav{margin:0 0 var(--m-gap-s);padding:var(--m-gap-xs) 0 0}
    &[data-step="s-script"] .vident{gap:var(--m-gap);padding:0 0 var(--m-gap-s)}
    &[data-step="s-script"] .vthumb:not([hidden]){width:56px;height:40px;border-radius:var(--m-gap-s)}
    &[data-step="s-script"] .vfacts{font-size:var(--m-cap)!important}
    &[data-step="s-script"] .vttl b{font-size:var(--m-body-lg)!important}
    &[data-step="s-script"] .vpill{height:22px;padding:0 var(--m-gap-s);font-size:var(--m-cap)!important}
    &[data-step="s-script"] .steps{margin:var(--m-gap-xs) 0 0}
    &[data-step="s-script"] .steps a,&[data-step="s-script"] .steps a:hover{min-height:var(--m-tap);height:var(--m-tap);padding-block:var(--m-pad-s);font-size:var(--m-body)!important}
    &[data-step="s-script"] main{padding-bottom:calc(var(--m-tap) + var(--m-gap-l) + 24px)}

    /* the bar pinned to the screen's foot: the hint, then back and the one wide button */
    & .vfoot{gap:var(--m-gap-s) var(--m-gap);padding:var(--m-gap) var(--m-page-x) calc(var(--m-gap) + env(safe-area-inset-bottom,0px))}
    & .vfoot .vreason{font-size:var(--m-body)!important;line-height:1.35}
    & .vfoot .vl .vback{height:var(--m-tap);padding-block:var(--m-pad-s);border-radius:var(--m-radius)}
    & .vfoot .vdone{height:var(--m-tap);min-height:var(--m-tap);padding-block:var(--m-pad-s);padding-inline:var(--m-gap-l);border-radius:var(--m-radius);font-size:var(--m-body)!important}
    &[data-step="s-script"] .vfoot .vl .vback{width:var(--m-tap);padding:0}

    /* Narration / Edit video: the preview keeps its frame and its scrubber; its chrome comes down */
    & #pPlayBtn{width:var(--m-tap);height:var(--m-tap);min-width:var(--m-tap)}
    & #s-script .pbar{margin:var(--m-gap-s) 0 0;padding:var(--m-gap-s) var(--m-gap);gap:var(--m-gap-s);border-radius:var(--m-radius)}
    & #s-script #previewOut .pbar{padding:var(--m-gap-l) var(--m-gap-s) var(--m-gap-xs);gap:var(--m-gap-s)}
    & #s-script #previewOut .pbar #pPlayBtn{width:var(--m-tap);height:var(--m-tap);min-width:var(--m-tap)}
    & #editorWrap.editing .pbar .t{font-size:var(--m-cap)!important}
    & #editorWrap .pchip{padding:var(--m-gap-xs) var(--m-gap-s);font-size:var(--m-cap)!important}
    & .lvmode button{height:var(--m-tap);padding-block:var(--m-pad-s);font-size:var(--m-body)!important}
    & #s-script #editorWrap.editing > .lvmode{border-radius:var(--m-radius)}
    & #s-script #editorWrap.editing #editorSide,& #s-script #editorWrap.editing #darkBlock{border-radius:var(--m-radius)}
    & .edtabs{border-radius:var(--m-radius) var(--m-radius) 0 0}
    & .edtabs button{height:var(--m-tap);padding-block:var(--m-pad-s);font-size:var(--m-body)!important}
    & #edStale{min-height:var(--m-tap);margin:var(--m-gap-s) var(--m-gap-s) 0;padding-block:var(--m-pad-s);border-radius:var(--m-radius);font-size:var(--m-body)!important}
    & #edStale[data-state="stale"],& #edStale[data-state="busy"]{top:calc(var(--m-tap) + 1px)}
    & #edStale[data-state="ok"]{margin:var(--m-gap-xs) var(--m-gap-s) var(--m-gap-s)}
    & .lvhead{padding:var(--m-pad) var(--m-pad) var(--m-gap-xs)}
    & .lvh1 h3{font-size:var(--m-h4)!important}
    & .lvsub{font-size:var(--m-body)!important}
    & .lvbadge{height:22px;padding:0 var(--m-gap-s);font-size:var(--m-cap)!important}
    & .edbody{padding:var(--m-gap-s) var(--m-gap-s) var(--m-gap-xs)}

    /* a clip's row in By clip's list, and the panel's cards */
    & #sceneList .scenehead{min-height:56px;padding:var(--m-gap-s) var(--m-gap);gap:var(--m-gap)}
    & #sceneList .scthumb{width:56px;height:40px;border-radius:var(--m-gap-s)}
    & #sceneList .scenehead .nm{font-size:var(--m-body-lg)!important;font-weight:600}
    & #sceneList .scenehead .info{font-size:var(--m-cap)!important}
    & #sceneList .scenehead::after{width:8px;height:8px;border-width:0 2px 2px 0}
    & #sceneList .slab{margin:0 0 var(--m-gap-xs);font-size:var(--m-cap)!important}
    & #sceneList .slot select,& #sceneList .slothead select,& #sceneList .trrow select{height:var(--m-control);padding-block:0;border-radius:var(--m-gap-s);font-size:var(--m-input)!important}
    & #sceneList .lineed{min-height:80px;padding:var(--m-gap-s) var(--m-gap);font-size:var(--m-input)!important;line-height:1.45}
    & #sceneList .vcnt b,& #sceneList .vsaved{font-size:var(--m-cap)!important}
    & #sceneList .nbtn{height:var(--m-control);padding-block:var(--m-pad-s);padding-inline:var(--m-gap-l);font-size:var(--m-body)!important}

    /* Video defaults / style folds */
    & .sth{gap:var(--m-gap-s);margin:var(--m-gap-xs) 0 var(--m-gap-s);font-size:var(--m-body-lg)!important}
    & .sth svg{width:18px;height:18px}
    & .strow{margin:var(--m-gap-s) 0 0}
    & .stlab{font-size:var(--m-body)!important;font-weight:500}
    & #capHiL,& .stlast .stlab{font-size:var(--m-body)!important;font-weight:600}
    & .stctl select{height:var(--m-control);padding-block:0;font-size:var(--m-input)!important}
    & #capPosSel,& #labelPos{width:124px}
    & .stplay{width:var(--m-control);height:var(--m-control);min-width:var(--m-control)}
    & .stbox{width:72px;height:var(--m-control);font-size:var(--m-input)!important}
    & .stbox input{font-size:var(--m-input)!important}
    & .stlooksel{height:var(--m-tap);padding:0 var(--m-gap);border-radius:var(--m-radius);font-size:var(--m-body)!important}
    & .stlookline{font-size:var(--m-cap)!important}
    & .sthi{gap:var(--m-gap-s)}
    & .stsw-c,& .stwheel{width:var(--m-control);height:var(--m-control);min-width:var(--m-control)}
    & .sthi .stbox,& .sthi input[type=text]{height:var(--m-control)}
    & .sthex{width:92px;font-size:var(--m-input)!important}
    & label.stsw.stsw{width:48px;height:28px}
    & .stsw i::after{width:22px;height:22px}
    & .stsw input:checked + i::after{transform:translateX(20px)}
    & .stsec{margin:0 0 var(--m-gap-s);padding:var(--m-gap-s) var(--m-gap);border-radius:var(--m-radius)}
    & .stsec.shut{padding-bottom:var(--m-gap-s)}
    & .stfold{min-height:var(--m-tap);font-size:var(--m-body-lg)!important}
    & .stfold .stsum{font-size:var(--m-body)!important}
    & .stroom .stlab{font-size:var(--m-body)!important}
    & .clipsec{padding:var(--m-gap-s) var(--m-gap)}

    /* Home details: fields, Nearby */
    &[data-step="s-home"] .app{padding:0 var(--m-pad) var(--m-pad)}
    &[data-step="s-home"] .vhome{padding:var(--m-gap) 0 var(--m-gap)}
    &[data-step="s-home"] .vhome .vf > label,&[data-step="s-home"] .vflab label{font-size:var(--m-body)!important;font-weight:600}
    &[data-step="s-home"] .vhome .vf input:not([type=hidden]){height:var(--m-control);min-height:var(--m-control);padding:0 var(--m-gap);font-size:var(--m-input)!important}
    &[data-step="s-home"] .vnameline{margin-top:var(--m-gap-s);font-size:var(--m-body)!important}
    &[data-step="s-home"] .vnameline .linkbtn{min-height:var(--m-control);padding-block:var(--m-pad-s);font-size:var(--m-body)!important}
    &[data-step="s-home"] .vtag{height:var(--m-control);padding-block:var(--m-pad-s);padding-inline:var(--m-gap-l);font-size:var(--m-body)!important}
    &[data-step="s-home"] .vrenthint{margin-top:var(--m-gap-s);font-size:var(--m-cap)!important}
    &[data-step="s-home"] .vhome ~ .vcard{margin-top:var(--m-gap);padding:var(--m-pad);border-radius:var(--m-radius)}
    &[data-step="s-home"] .vcard .vct{gap:var(--m-gap);margin:0 0 var(--m-gap-s)}
    &[data-step="s-home"] .vcard .vct h3{font-size:var(--m-h4)!important}
    &[data-step="s-home"] .vdisc2{width:36px;height:36px}
    &[data-step="s-home"] .vdisc2 svg{width:20px;height:20px}
    &[data-step="s-home"] #vNearCard .vdisc2{width:36px;height:36px}
    &[data-step="s-home"] .vcard > textarea{min-height:112px;padding:var(--m-gap);font-size:var(--m-input)!important;line-height:1.45}
    &[data-step="s-home"] .vnhint{margin:0 0 var(--m-gap-xs);font-size:var(--m-body)!important;line-height:1.4}
    &[data-step="s-home"] .vnrow{grid-template-columns:36px minmax(0,1fr) auto;row-gap:2px;padding:var(--m-gap) 0 var(--m-gap-s)}
    &[data-step="s-home"] .vnt input[type=checkbox]{width:36px}
    &[data-step="s-home"] .vnlab{font-size:var(--m-cap)!important}
    &[data-step="s-home"] .vnwalk{font-size:var(--m-body)!important}
    &[data-step="s-home"] .vnname{font-size:var(--m-body-lg)!important}
    &[data-step="s-home"] .vnrow .vnmap{width:96px;height:53px;border-radius:var(--m-gap-s)}
    &[data-step="s-home"] .vnrow .vnmap.vnone{height:32px}
    &[data-step="s-home"] .vnown{height:var(--m-control);padding-block:var(--m-pad-s);padding-inline:var(--m-gap);border-radius:var(--m-gap-s);font-size:var(--m-body)!important}
    &[data-step="s-home"] .vnrm{width:var(--m-control);height:var(--m-control);border-radius:var(--m-gap-s);font-size:var(--m-body-lg)!important}
    &[data-step="s-home"] #vxOpen{min-height:var(--m-control);padding-block:var(--m-pad-s);font-size:var(--m-body)!important}
    &[data-step="s-home"] .vnextra #vxWhy{font-size:var(--m-cap)!important}

    /* the timeline's words (its geometry is left exactly as it was) */
    & #s-script #darkBlock{padding:var(--m-gap) var(--m-gap)}
    & .tlhead{min-height:var(--m-control);margin:0 0 var(--m-gap-xs)}
    & .tlhead b{font-size:var(--m-h4)!important}
    & .tlhead .tlrange{font-size:var(--m-cap)!important}
    & .tlzoom{gap:var(--m-gap-s)}
    & .tlzoom button{width:var(--m-control);height:var(--m-control);font-size:var(--m-h4)!important}
    & .llab{font-size:var(--m-cap)!important}
    & .cardmark{font-size:var(--m-cap)!important}
    & .clipnm{font-size:var(--m-cap)!important}
    & .clipedit{height:var(--m-control);padding-inline:var(--m-gap);font-size:var(--m-cap)!important}
    & .cs-name{font-size:var(--m-body)!important}
    & .cs-sub{font-size:var(--m-cap)!important}
  }

  /* ---------------------------------------------------------------------------------------------------------------------
     LISTING VIDEO, second pass: the stepper, the Media cards, the Home details form, the folds, the buttons' heights.
     --------------------------------------------------------------------------------------------------------------------- */
  #view .ve.vm-fill .vm-add{min-height:var(--m-tap);height:var(--m-tap)}

  html.lvm.embedded body:not(.vstarting):not(.vm-opening):not(:has(#resumeCard:not(.hidden))){

    /* Media and Home details: the stepper is a row, a numbered circle and its name side by side, joined by a line, as the Reels' bar is
       (it was a circle over its name: two short words, one up and one down). */
    &:not([data-step="s-script"]) .steps{display:flex;align-items:center;width:100%;margin:var(--m-gap-xs) 0 0}
    &:not([data-step="s-script"]) .steps li{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-start;min-width:0}
    &:not([data-step="s-script"]) .steps li:first-child{flex:0 0 auto}
    &:not([data-step="s-script"]) .steps li + li::before{content:"";position:static;flex:1 1 8px;min-width:8px;width:auto;height:0;margin:0 var(--m-gap-s);border-top:1.5px solid var(--line2)}
    &:not([data-step="s-script"]) .steps a,&:not([data-step="s-script"]) .steps a:hover{flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--m-gap-s);width:auto;min-height:var(--m-control);height:auto;padding:var(--m-gap-s) 0;font-size:var(--m-body)!important;white-space:nowrap}
    &:not([data-step="s-script"]) .steps .lb{max-width:none}
    @media (max-width:379px){
      &:not([data-step="s-script"]) .steps a:not(.active) .lb{width:0;max-width:0;overflow:visible;color:transparent}
      &:not([data-step="s-script"]) .steps a:not(.active){gap:0}
      &:not([data-step="s-script"]) .steps li + li::before{margin:0 var(--m-gap-xs)}
    }

    /* Media: a room's card, tighter: its name and photo count share a row, the words box is two lines, the foot is one slim row. */
    &[data-step="s-rooms"] #items .rcard{padding:var(--m-gap) var(--m-gap) var(--m-gap) var(--m-gap);border-left-width:4px;border-radius:var(--m-radius);row-gap:var(--m-gap-s)}
    &[data-step="s-rooms"] #items .rcard .rhead{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--m-gap)}
    &[data-step="s-rooms"] #items .rcard .rname{flex:1 1 0;min-width:0;width:auto;height:var(--m-control);min-height:var(--m-control);padding-block:0}
    &[data-step="s-rooms"] #items .rcard .cnt{flex:none;font-size:var(--m-cap)!important}
    &[data-step="s-rooms"] #items .rcard .spacer{display:none}
    &[data-step="s-rooms"] #items .rcard .minis{gap:var(--m-gap-s)}
    &[data-step="s-rooms"] #items .rcard .rdesc-in{min-height:64px;padding:var(--m-gap-s) var(--m-gap)}
    &[data-step="s-rooms"] #items .rcard .wcount{display:flex;align-items:center;justify-content:space-between;gap:var(--m-gap);min-height:0;margin:0}
    &[data-step="s-rooms"] #items .rcard .wcount .wn{font-size:var(--m-cap)!important}
    &[data-step="s-rooms"] #items .rcard .gen{height:var(--m-control);min-height:var(--m-control);padding-inline:var(--m-gap);border-radius:var(--m-gap-s);font-size:var(--m-body)!important}
    &[data-step="s-rooms"] .draftnote,&[data-step="s-rooms"] .uploadwarn,&[data-step="s-rooms"] .stepstatus,&[data-step="s-rooms"] .note{font-size:var(--m-body)!important;line-height:1.4}

    /* Home details: the short fields are two to a row (they were one to a row, each its own screen's width of white). */
    &[data-step="s-home"] .vg4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--m-gap)}
    &[data-step="s-home"] .vg4 > .vf:nth-child(-n+2){grid-column:1 / -1}
    &[data-step="s-home"] .vg4 .vf{min-width:0}
    &[data-step="s-home"] .vhome .vf > label,&[data-step="s-home"] .vflab label{margin:0 0 var(--m-gap-xs)}
    &[data-step="s-home"] .vflab{display:flex;align-items:center;justify-content:space-between;gap:var(--m-gap)}
    &[data-step="s-home"] .fwarn{font-size:var(--m-cap)!important}
    /* Nearby: a place is its kind, its name and its walk in a column, with its picture and its Photo button at the right (it was a tall
       stack of five rows). */
    &[data-step="s-home"] .vnrow{grid-template-columns:36px minmax(0,1fr) 96px;grid-template-rows:auto auto auto;column-gap:var(--m-gap-s);row-gap:2px;align-items:start;padding:var(--m-gap-s) 0}
    &[data-step="s-home"] .vnt{grid-column:1;grid-row:1 / span 3;margin:0}
    &[data-step="s-home"] .vnlab{grid-column:2;grid-row:1}
    &[data-step="s-home"] .vnname{grid-column:2;grid-row:2}
    &[data-step="s-home"] .vnwalk{grid-column:2;grid-row:3;text-align:left}
    &[data-step="s-home"] .vnrow .vnmap{grid-column:3;grid-row:1 / span 2;justify-self:end}
    &[data-step="s-home"] .vnrow .vnp{grid-column:3;grid-row:3;justify-self:end}

    /* the folds and the timeline's words */
    & .stsec{padding:var(--m-gap-xs) var(--m-gap);margin:0 0 var(--m-gap-s)}
    & .stfold{min-height:var(--m-control)}
    & .stsec:not(.shut) > .sth{margin-bottom:var(--m-gap-xs)}
    & #s-script #stripRuler span{font-size:var(--m-cap)!important}

    /* a button's height comes from its padding as well as its floor, so one line of label is one line tall to the walk and to the eye */
    /* Listen is the one action under a clip's words: a full-width button, not a short one alone on a row */
    & #sceneList .nact{display:flex}
    & #sceneList .nact .nbtn{flex:1 1 auto;justify-content:center}
    & .vvoice,& p.note{font-size:var(--m-cap)!important}
    & .clipedit{padding-block:var(--m-gap)!important}
    & :is(button.small,button.big,button.ghost,.linkbtn,.nbtn,.vtag,.vnown,.stfold,.lvmode button,.edtabs button,.tlzoom button,.vchoose,.vdone,.vback){padding-block:var(--m-pad-s)!important}
  }
  html.lvm :is(.yvlink,[data-vplay],.vx-cta,.vx-new,.vmsh-btns button,.big,.ghost){padding-block:var(--m-pad-s)!important}

  /* the list's line is a caption (it wrapped to two lines beside the tips icon at 14px) */
  #view .ve.vm-fill .vm-sub{font-size:var(--m-cap)!important}
  /* Play: the video's own dialog; Close is a full-width button under it, not one short button alone on a row */
  html.lvm dialog.yvplay{padding:var(--m-gap);border-radius:var(--m-radius)}
  html.lvm .yvplay .yvbtns{display:grid;grid-template-columns:minmax(0,1fr);margin-top:var(--m-gap-s)}
  html.lvm .yvplay .yvbtns button{width:100%;height:var(--m-tap);min-height:var(--m-tap);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  #view .ve.vm-fill.vm-list .vm-tips{justify-self:end}

  /* The frame is its own document, so the dashboard's one rule for text fields does not reach it: a field here is held at the same 16px (iOS zooms the
     page on any smaller field), while everything round it comes down. */
  html.lvm select,html.lvm textarea,html.lvm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){font-size:var(--m-input)!important}

  /* The page's own dialogs: Export video, Which room are these in?, and the "Putting your video together" overlay. */
  html.lvm .vdlgbox{padding:var(--m-pad);border-radius:var(--m-radius)}
  html.lvm .vexph{margin:0 0 var(--m-gap-s)}
  html.lvm .vexph b,html.lvm #vAddT{font-size:var(--m-h3)!important;line-height:1.25}
  html.lvm .vexpx{width:var(--m-control);height:var(--m-control);min-height:var(--m-control);padding:0;border-radius:var(--m-gap-s)}
  html.lvm .vexpchoices{gap:var(--m-gap-s)}
  html.lvm .vchoice{min-height:0;height:auto;padding:var(--m-gap) var(--m-pad);border-radius:var(--m-radius)}
  html.lvm .vchoice b{font-size:var(--m-body-lg)!important}
  html.lvm .vchoice span{font-size:var(--m-cap)!important}
  html.lvm .vchoice span:empty{display:none}
  html.lvm .vnewroom{gap:var(--m-gap-s)}
  html.lvm .vnewroom select{height:var(--m-control);min-height:var(--m-control);border-radius:var(--m-gap-s)}
  html.lvm .vnewroom .big{height:var(--m-tap);min-height:var(--m-tap);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html.lvm .vdlgfoot{gap:var(--m-gap-s)}
  html.lvm .vdlgfoot button{min-height:var(--m-control);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html.lvm .mkcard{padding:var(--m-pad);border-radius:var(--m-radius)}
  html.lvm .mkcard h3{font-size:var(--m-h4)!important}
  html.lvm .mksub{font-size:var(--m-cap)!important}
  html.lvm #mkSteps li,html.lvm .mkcard .status{font-size:var(--m-body)!important}

  /* =====================================================================================================================
     THE EDIT VIDEO SCREEN, MADE LIKE THE OWNER'S APPROVED DESIGN (owner, 29 Oct 2026: the overview and the controls panel, two phone
     shots). The design beats the 22 Oct comps where the two differ: Video defaults is no card of its own, its settings are cards on the
     page; "Preview up to date" is a pill of its own under them; the listing's name is larger with its Draft chip beneath it; back and
     the filming tips are white shapes; Room names is a title with its switch and a full-width select under it.
     A button the thumb must hit stays 44px; the shape the design draws is a ::before inside it.
     ===================================================================================================================== */

  /* the zone's header (the dashboard's document): back is a white circle, the tips a white rounded square, the row 8px nearer the top bar */
  html #view:has(> .ve.vm-fill:not(.vm-list):not(.vm-start)){padding-top:calc(var(--m-topbar,56px) + var(--m-safe-t,0px) + 2px)!important}
  #view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-head{padding-bottom:0!important}
  html body #view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-head .vm-back{position:relative;width:44px;height:44px;margin-left:-6px;border:0;background:none!important;box-shadow:none}
  html body #view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-head .vm-back::before{content:"";position:absolute;inset:6px;border:1px solid var(--line2);border-radius:50%;background:var(--card)}
  html body #view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-head .vm-back svg{position:relative;width:18px;height:18px}
  html body #view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-head .tools>a.vm-tips{position:relative;width:44px;height:44px;margin-right:-4px;border:0;background:none!important;box-shadow:none}
  html body #view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-head .tools>a.vm-tips::before{content:"";position:absolute;inset:4px;border:1px solid var(--line2);border-radius:10px;background:var(--card)}
  html body #view .ve.vm-fill:not(.vm-list):not(.vm-start) .vm-head .tools>a.vm-tips svg{position:relative;width:18px;height:18px}

  html.lvm.embedded body:not(.vstarting):not(.vm-opening):not(:has(#resumeCard:not(.hidden))){

    /* the listing: its name (a screen's subject), the Draft chip under it on the left, then the three tabs */
    &[data-step="s-script"] .vident{align-items:flex-start;padding:var(--m-gap-xs) 0 var(--m-gap-xs)}
    &[data-step="s-script"] .vttl{flex-direction:column;align-items:flex-start;gap:6px}
    &[data-step="s-script"] .vttl b{overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere;font-size:var(--m-h3)!important;line-height:1.25}
    &[data-step="s-script"] .vpill{margin-left:0}
    &[data-step="s-script"] .steps{display:flex;margin:var(--m-gap-xs) 0 0;padding-right:8px}
    &[data-step="s-script"] .steps li{flex:none;display:flex}
    &[data-step="s-script"] .steps li:nth-child(2){margin-left:auto}
    &[data-step="s-script"] .steps a,&[data-step="s-script"] .steps a:hover{flex:none;justify-content:center;height:44px;padding:8px 15px 0;white-space:nowrap;font-size:var(--m-body)!important}
    &[data-step="s-script"] .steps li:first-child a{justify-content:flex-start;padding-inline:3px 0}
    &[data-step="s-script"] .steps a.active{padding-top:8px}
    &[data-step="s-script"] .steps a.active::after{left:0;right:0}

    /* Overview / By clip: a slimmer pair, the open one outlined with rounded corners */
    & .lvmode button{height:38px;min-height:0;padding-block:0!important}
    & .lvmode button[aria-selected="true"]{border-radius:10px}

    /* Video defaults: no card round the settings. Each is a card on the page, the preview pill under them. */
    & #s-script #editorWrap.editing[data-lvmode="overview"] #editorSide{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
    & #editorWrap[data-lvmode="overview"] .lvhead{padding:var(--m-gap-l) 2px var(--m-gap-s)}
    & #editorWrap[data-lvmode="overview"] .edbody{padding:0}
    & #styleTab .stsec{margin:0 0 10px;padding:var(--m-pad);border-radius:var(--m-radius)}
    & #styleTab .stsec.stlast{margin-bottom:10px}
    & #styleTab .sth{min-height:28px;margin:0}
    & #styleTab .stsec:not(.shut) > .sth{margin-bottom:var(--m-gap)}
    & #styleTab .stfold{min-height:44px;margin-block:-6px;padding-block:0!important}
    & #styleTab .stsec.shut{padding-bottom:var(--m-pad)}
    & #editorWrap[data-lvmode="overview"] #edStale[data-state="ok"]{min-height:36px;margin:0 0 var(--m-gap);padding:0 var(--m-pad);border-radius:var(--m-radius)}

    /* the caption preview: a black bar, the number said in the highlight colour */
    & .stcapprev{display:flex;align-items:center;justify-content:center;min-height:43px;margin:0;padding:0 var(--m-gap);border-radius:var(--m-radius);background:#1F2421;color:#fff;font-size:var(--m-h4);font-weight:700;line-height:1.2;text-align:center;overflow:hidden;white-space:nowrap}
    & .stcapprev b{margin-left:.3em;font-weight:700;color:var(--hot,#FFD426)}
    & #styleTab .strow{margin:var(--m-gap) 0 0}
    & #styleTab .stcapprev + .strow{margin-top:var(--m-gap)}
    & #styleTab .stctl select,& #styleTab .stbox,& #styleTab .sthi .stbox,& #styleTab .sthi input[type=text]{height:38px;min-height:0}
    & #styleTab .stroom .stlab{gap:var(--m-gap-s);font-size:var(--m-body-lg)!important;font-weight:700}
    & #styleTab .stctl{gap:var(--m-gap-s)}
    & #capPosSel{width:100%}
    & #styleTab .stctl select{-webkit-appearance:none;appearance:none;padding:0 36px 0 14px;border-radius:10px;
      background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23737B76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px 18px}

    /* Highlight: the seven swatches on one row, the hex field its own full row under them with its colour chip at the left */
    & #styleTab #capHi{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--m-gap) 0}
    & #capHi .stsw-c,& #capHi .stwheel{width:34px;height:34px;min-width:34px;min-height:0}
    & #capHi .stsw-c::after{content:"";position:absolute;inset:-5px;border-radius:50%}
    & #capHi .stwheel input{inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px)}
    & #capHi .stsw-c[aria-pressed="true"],& #capHi .stwheel.on{box-shadow:0 0 0 1px var(--card),0 0 0 3px var(--acc)}
    & #capHi .sthex{flex:1 0 100%;width:100%;padding:0 var(--m-gap) 0 46px;border-radius:10px;font:500 var(--m-input) var(--sans);background:linear-gradient(var(--sw,#FFD426),var(--sw,#FFD426)) no-repeat 12px center / 22px 22px}

    /* the preview's controls: the play disc 36px in its ring, the bar's padding as the design has it */
    & #s-script #previewOut .pbar{padding:var(--m-gap-l) 9px var(--m-gap-xs) 12px}
    & #s-script #previewOut .pbar #pPlayBtn{position:relative;width:36px;height:36px;min-width:36px;min-height:0;box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
    & #s-script #previewOut .pbar #pPlayBtn::after{content:"";position:absolute;inset:-4px;border-radius:50%}

    /* the timeline: the zoom buttons are 32px squares with a 44px reach, the fact-card lane is a dashed track, the clips' ring has
       room at its left (the lane names stop short of it), and Edit clip is a 31px rounded pill, not a tall blob */
    & #s-script #stripRuler span{font-size:var(--m-cap-s)!important}
    & .tlzoom{gap:8px}
    & .tlzoom button{position:relative;isolation:isolate;width:44px;height:44px;margin:-6px;border:0;background:none;box-shadow:none;color:var(--ink);font-size:var(--m-h4)!important}
    & .tlzoom button::before{content:"";position:absolute;z-index:-1;inset:6px;border:1.5px solid var(--line2);border-radius:9px;background:var(--card)}
    & .tlzoom button:disabled{opacity:1;color:var(--ink3)}
    & .tlzoom button:disabled::before{opacity:.5}
    /* a label of the ruler that the scroll box cuts at its right edge fades out instead of showing half its letters */
    & #tlScroll{-webkit-mask:linear-gradient(#000,#000) bottom / 100% calc(100% - 32px) no-repeat,linear-gradient(to right,#000 calc(100% - 22px),transparent) top / 100% 32px no-repeat;mask:linear-gradient(#000,#000) bottom / 100% calc(100% - 32px) no-repeat,linear-gradient(to right,#000 calc(100% - 22px),transparent) top / 100% 32px no-repeat}
    & #s-script #stripWrap{--lg:61px}
    & .llab{background:linear-gradient(to right,var(--card) calc(100% - 9px),transparent);white-space:nowrap}
    & #cardLane{height:34px;border-radius:8px;background:var(--accbg);outline:1.5px dashed color-mix(in srgb,var(--acc) 32%,transparent);outline-offset:-1.5px}
    & #cardLane.two{height:70px}
    & .cardmark{top:0;height:34px;min-height:0;line-height:34px}
    & .cardmark.low{top:36px}
    & .clipedit{top:35px;height:31px;min-height:0;padding:0 10px!important;border-radius:9px;background:rgba(24,28,26,.72)}
    & .clipedit::after{content:"";position:absolute;inset:-6px}

    /* Room names: the title and its switch on one line, the position select under them, full width */
    & #styleTab .stroom .strow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--m-gap) var(--m-gap-s);margin:0;min-height:0}
    & .stroom .stctl{display:contents}
    & .stroom .stlab{grid-column:1;grid-row:1;min-width:0}
    & .stroom .stsw{grid-column:2;grid-row:1}
    & .stroom #labelPos{grid-column:1 / -1;grid-row:2;flex:none;width:100%}
  }
}