/* mobile-reels: 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).

   The Reels list as a column of cards: title, the home's address, a Draft pill, two fact rows (Clips, Narration),
   a divider, then the length on the left and "Continue editing" in green on the right. A draft's Remove is the kebab's
   menu, with the same two steps. The markup is built by reelRow() / rowWithRemove() in js/video-editor.js; each new
   piece is `hidden` there, so above the breakpoint nothing here can reach it. */
@media (max-width:767px),(pointer:coarse) and (max-height:500px){

  /* The zone's line, under the title and its button (L2). */
  .ve p.ve-m-sub[hidden]{display:block;margin:6px 0 18px;font-size:15px;line-height:1.45;color:var(--ink-2)}

  /* The reel flow's side gutter is 20px, not the dashboard's 16 (owner comps 12 and 13 draw their cards at x=20 and x=19; ruling 249,
     comps overrule earlier pixel rulings). Set on #view, so its own padding and every rule that reads --m-gutter move together:
     the docked foot's bleed (calc(-1 * var(--m-gutter))) stays exact and its 20px inner padding now lines up with the cards.
     The listing video shares .ve and keeps the 16 (.vm-fill). Below 360px the 16 stays: at 320 the 8px it costs wraps the Voiceover
     tab mid-word ("Voiceove-r") and the room row (measured 320 and 340; 359 and up are unchanged). */
  @media (min-width:360px){
    html body #view:has(.ve:not(.vm-fill)){--m-gutter:20px}
  }

  /* The search stands on the page: the outer bordered card goes (L6). */
  html body .ve .ve-library.tour-library-card{padding:0!important;min-height:0!important;border:0!important;border-radius:0!important;
    background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
  html body .ve .ve-library .tour-library-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:0 0 14px!important;margin:0}
  html body .ve .ve-library .tour-library-bar>label:first-child{width:100%;min-width:0;height:48px;padding:0 14px;gap:10px;box-sizing:border-box;
    border:1px solid var(--line-2);border-radius:12px;background:var(--card)}
  html body .ve .ve-library .tour-library-bar>label:first-child svg{width:20px;height:20px;color:var(--ink-3)}
  html body .ve .ve-library .tour-library-bar>label:first-child input{height:100%;min-height:0;padding:0;border:0;border-radius:0;font-size:16px}
  html body .ve .ve-library .ve-lib-filter{width:100%;min-width:0;min-height:48px;border-radius:12px;font-size:16px}

  /* ------------------------------------------------------------------------------------------------------ the card */
  html .ve .tour-table{display:grid;gap:14px;border:0;background:transparent}
  html .ve .ve-row-wrap{position:relative;display:block}
  html body #view .tour-library-row.ve-row{display:grid;grid-template-columns:72px minmax(0,1fr)!important;gap:0 14px!important;width:100%;min-height:0;margin:0!important;
    padding:16px!important;box-sizing:border-box;border:1px solid var(--line-2)!important;border-radius:14px!important;
    background:var(--card)!important;box-shadow:none!important;text-align:left;color:var(--ink)}
  html body .ve .tour-library-row.ve-row:active{background:var(--sig-bg)!important}
  html body .ve .tour-library-row.ve-row:focus-visible{outline:2px solid var(--sig);outline-offset:2px}

  /* The thumbnail on the left, the reel's words beside it. */
  html .ve .tour-library-row.ve-row>span:first-child{display:contents}
  html .ve .ve-row .ve-cover{grid-column:1;align-self:start;width:72px;border-radius:10px;border:0;background:var(--card-2);color:var(--ink-3)}
  html .ve .ve-row .ve-cover svg{display:none}
  html .ve .ve-row .ve-cover:not(:has(img))::after{content:"";width:34px;height:34px;background:currentColor;opacity:.7;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2'/><path d='M7 3v18M3 7.5h4M3 12h18M3 16.5h4M17 3v18M17 7.5h4M17 16.5h4'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2'/><path d='M7 3v18M3 7.5h4M3 12h18M3 16.5h4M17 3v18M17 7.5h4M17 16.5h4'/></svg>") center/contain no-repeat}
  html .ve .ve-row .ve-row-text{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;padding:0}
  html .ve .ve-row .ve-row-title{display:block;width:100%;padding-right:40px}
  html .ve .ve-row .ve-row-text b{display:-webkit-box;font-size:18px!important;line-height:1.28;font-weight:700!important;letter-spacing:-.01em;color:var(--ink);
    white-space:normal;-webkit-line-clamp:3;-webkit-box-orient:vertical}
  /* The one run-on sentence gives way to the pill and the fact rows. */
  html .ve .ve-row .ve-row-text .ve-row-draft,html .ve .ve-row .ve-row-text .ve-row-state{display:none}

  html .ve .ve-row .ve-m-addr[hidden]{display:block;width:100%;margin-top:3px;font-size:15px;line-height:1.35;font-style:normal;font-weight:400;color:var(--ink-2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html .ve .ve-row .ve-m-pill[hidden]{display:inline-flex;align-items:center;gap:7px;height:28px;margin-top:10px;padding:0 12px;box-sizing:border-box;
    border-radius:999px;font-size:14px;font-style:normal;font-weight:500;line-height:1;white-space:nowrap}
  html .ve .ve-row .ve-m-pill::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
  html .ve .ve-row .ve-m-pill.is-draft{background:var(--ve-amber-bg);color:color-mix(in srgb,var(--ve-amber) 78%,var(--ink))}
  html .ve .ve-row .ve-m-pill.is-draft::before{background:var(--ve-amber)}
  html .ve .ve-row .ve-m-pill.is-done{background:var(--sig-bg);color:var(--sig)}

  /* Fact rows: icon and label on the left, the value hard right. */
  html .ve .ve-row .ve-m-facts[hidden]{display:grid;gap:10px;width:100%;margin-top:14px;font-style:normal}
  html .ve .ve-row .ve-m-fact{display:flex;align-items:center;gap:10px;min-width:0;font-size:15px;line-height:1.3;font-style:normal;color:var(--ink-2)}
  html .ve .ve-row .ve-m-fact svg{flex:none;width:20px;height:20px;color:var(--ink-3)}
  html .ve .ve-row .ve-m-k{flex:1 1 auto;min-width:0;padding-right:8px;font-style:normal}
  html .ve .ve-row .ve-m-v{flex:0 0 auto;white-space:nowrap;text-align:right;font-style:normal;color:var(--ink)}

  /* A reel whose listing moved on keeps its Listing updated chip, between the card's body and its foot. */
  html .ve .tour-library-row.ve-row>span:last-child:has(.ve-chip-stale){order:2;grid-column:1 / -1;margin-top:12px;justify-content:flex-start}

  /* The foot: a divider, the length left, the way in right, in green. */
  html .ve .ve-row .ve-m-foot[hidden]{display:flex;order:3;grid-column:1 / -1;align-items:center;justify-content:space-between;gap:12px;
    min-height:48px;margin-top:16px;padding-top:2px;border-top:1px solid var(--line);font-style:normal}
  html .ve .ve-row .ve-m-len{font-size:15px;font-style:normal;color:var(--ink-2);font-variant-numeric:tabular-nums}
  html .ve .ve-row .ve-m-go{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:16px;font-style:normal;font-weight:600;color:var(--sig)}
  html .ve .ve-row .ve-m-go svg{width:20px;height:20px;color:var(--sig)}

  /* ------------------------------------------------------------------------------ the kebab, and what it opens */
  html .ve .ve-row-wrap>.ve-km[hidden]{display:block;position:absolute;top:8px;right:8px;z-index:3}
  html .ve .ve-km .ve-km-menu>summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;gap:0;
    border:0;border-radius:12px;background:transparent;color:var(--ink-2);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
  html .ve .ve-km .ve-km-menu>summary svg{width:22px;height:22px;color:inherit;transform:rotate(90deg)}
  html .ve .ve-km .ve-km-menu>summary:hover,html .ve .ve-km .ve-km-menu[open]>summary{background:var(--card-2);color:var(--ink)}
  html .ve .ve-km .ve-km-menu>summary:focus-visible{outline:2px solid var(--sig);outline-offset:0}
  html .ve .ve-km .ve-km-menu .ve-menu-panel{top:calc(100% + 4px);right:0;left:auto;min-width:200px;max-width:calc(100vw - 32px);padding:6px;border-radius:12px}
  html .ve .ve-km .ve-km-menu .ve-menu-panel button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:8px;
    background:none;font-size:16px;font-weight:500;text-align:left;color:var(--bad,#b3402f)}
  html .ve .ve-km .ve-km-menu .ve-menu-panel button svg{width:20px;height:20px}

  /* The quiet Remove link is the kebab's job now. Once asked, the card itself asks again: Keep outlined, Remove solid red (L5). */
  html .ve .ve-row-wrap>.ve-row-remove:not(.is-asking){display:none}
  html .ve .ve-row-wrap>.ve-row-remove.is-asking{position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:12px;
    padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--line-2);box-sizing:border-box}
  html .ve .ve-row-remove.is-asking .ve-quiet{grid-column:1 / -1;font-size:17px;font-weight:700;text-align:center;color:var(--ink)}
  html .ve .ve-row-remove.is-asking .ve-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;box-sizing:border-box;
    border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer}
  html .ve .ve-row-remove.is-asking .ve-link[data-id=""]{order:1;border:1px solid var(--line-2);background:var(--card);color:var(--ink)}
  html .ve .ve-row-remove.is-asking .ve-link[data-sure]{order:2;border:1px solid var(--bad,#b3402f);background:var(--bad,#b3402f);color:#fff}

  /* Narrow phones (320): a smaller thumbnail keeps the fact rows whole. */
  @media (max-width:359px){
    html body #view .tour-library-row.ve-row{grid-template-columns:56px minmax(0,1fr)!important;gap:0 12px!important}
    html .ve .ve-row .ve-cover{width:56px}
    html body #view .tour-library-row.ve-row{padding:14px!important}
    html .ve .ve-row .ve-row-text b{font-size:17px!important}
    html .ve .ve-row .ve-m-fact{gap:8px;font-size:14.5px}
    html .ve .ve-row .ve-m-fact svg{width:18px;height:18px}
  }

  /* ------------------------------------------------------------------------------- New reel: which home (comps 08, 09)
     The pick screen, paintPick() in js/video-editor.js, is the one page with a .ve-finder on it, so every rule here is
     scoped to .ve:has(.ve-finder) and no other Reels screen moves (owner ruling, 21 Oct 2026, his two Reels renders).
     A back link to Reels, the title in ink, his answers in one line, "Which home?" over a flat search field, then the
     listings as cards on the page: a tinted tile, the name, the line under it, a chevron. Nothing the page does is lost:
     the same field, the same suggestions, the same cards, the same Back. */
  html body #view .ve:has(.ve-finder) .head{margin-bottom:0}
  html body #view .ve:has(.ve-finder) .head .crumb{display:flex;align-items:center;min-height:44px;margin:0 0 14px}
  html body #view .ve:has(.ve-finder) .head .crumb button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;font-size:16px!important;font-weight:400;color:var(--ink-2)}
  html body #view .ve:has(.ve-finder) .head .crumb button::before{content:"";flex:none;width:20px;height:20px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 3.5 6 10l6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 3.5 6 10l6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
  /* His title is ink here, not zone green, and larger than the page default. */
  html body #view .ve:has(.ve-finder) .head h1{padding:0;font-size:34px!important;line-height:1.15;font-weight:700!important;letter-spacing:-.015em;color:var(--ink)}
  html body #view .ve:has(.ve-finder) .head .strip:empty{display:none}
  html body #view .ve:has(.ve-finder) .rp-answers{margin:10px 0 0;font-size:16px;line-height:1.4;color:var(--ink-2)}
  /* Owner ruling, 22 Oct 2026 (r256): the Filming tips link on the Reels and Listing video headers is its icon alone on a phone, a 48px square
     level with the page's own button, so the header's title ("Listing videos" wraps to two lines) and that button keep their room: the
     labelled link overlapped the title. Its name is the link's aria-label. The desktop keeps the label (the desktop sheets size it). */
  html body #view .ve>.head .tools>a:is(.ve-tips,.vm-tips){display:inline-flex;flex:none;align-items:center;justify-content:center;box-sizing:border-box;width:48px;height:48px;min-height:0;padding:0;gap:0;border-radius:10px}
  html body #view .ve>.head .tools>a:is(.ve-tips,.vm-tips) span{display:none}
  html body #view .ve>.head .tools>a:is(.ve-tips,.vm-tips) svg{width:22px;height:22px}

  /* "Which home?" is a line over the field, and the field is one flat bordered box. The words in it are his
     ("Search block, project or street"); the input's own placeholder is kept for the page but drawn clear, and the
     stand-in below shows while it is empty. The input keeps its aria-label, so it is read the same. */
  html body #view .ve:has(.ve-finder) .ve-finder{margin:32px 0 0}
  html body #view .ve:has(.ve-finder) .ve-finder::before{content:"Which home?";display:block;margin:0 0 14px;font-size:18px;line-height:1.3;color:var(--ink-2)}
  html body #view .ve:has(.ve-finder) .ve-finder>.card{border:1px solid var(--line-2);border-radius:12px;background:var(--card);box-shadow:none;backdrop-filter:none;overflow:hidden}
  html body #view .ve:has(.ve-finder) .ve-finder .fbar{position:relative;gap:12px;min-height:56px;padding:0 16px}
  html body #view .ve:has(.ve-finder) .ve-finder .fbar svg{flex:none;width:20px;height:20px;color:var(--ink)}
  html[data-theme] body #view .ve:has(.ve-finder) .ve-finder .fbar input{height:56px;min-height:0;padding:0;border:0;border-radius:0;background:transparent!important;font-size:16px}
  html body #view .ve:has(.ve-finder) .ve-finder .fbar input::placeholder{color:transparent;opacity:0}
  /* The ring is the field's, not the input's: the whole box takes the signature edge while she types. */
  html[data-theme] body #view .ve:has(.ve-finder) .ve-finder .fbar input:focus{box-shadow:none!important}
  html body #view .ve:has(.ve-finder) .ve-finder>.card:focus-within{border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-bg)}
  html body #view .ve:has(.ve-finder) .ve-finder .fbar:has(input:placeholder-shown)::after{content:"Search block, project or street";position:absolute;left:48px;right:16px;top:50%;
    transform:translateY(-50%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;font-size:16px;color:var(--ink-3)}

  /* The listings sit on the page: the shelf's own box goes, and its title is a small caps line, as comp 09 draws it. */
  html body #view .ve:has(.ve-finder) .ve-shelves.p86-shelves{display:grid;gap:28px;margin:32px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfcol{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;width:auto;padding:0;border:0}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfcap{margin:0 0 4px;font-size:14px!important;font-weight:600;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}

  /* A listing: white card, 1px --line-2, 14px radius (the Decks card's frame). Left a tinted tile with the home drawn in it
     (the tile is ::before, the home is the title's ::before, the chevron is ::after), then the name over its line. The tile
     tints cycle green, blue, violet, sand down the list, as comp 09 has them. */
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow{--hue:#2f6b4a;position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 24px;grid-template-rows:auto auto;
    column-gap:16px;row-gap:2px;align-content:center;align-items:center;width:100%;min-height:88px!important;margin:0;padding:16px 16px 16px 18px;box-sizing:border-box;
    border:1px solid var(--line-2);border-radius:14px;background:var(--card);box-shadow:none;color:var(--ink);text-align:left;transform:none}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow:nth-of-type(4n+2){--hue:#3b5a8f}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow:nth-of-type(4n+3){--hue:#5b3f8f}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow:nth-of-type(4n+4){--hue:#7a5a44}
  html[data-theme$="dark"] body #view .ve:has(.ve-finder) .ve-shelves .shelfrow{--hue:#8fd0ac}
  html[data-theme$="dark"] body #view .ve:has(.ve-finder) .ve-shelves .shelfrow:nth-of-type(4n+2){--hue:#9dbcf5}
  html[data-theme$="dark"] body #view .ve:has(.ve-finder) .ve-shelves .shelfrow:nth-of-type(4n+3){--hue:#c3a9ee}
  html[data-theme$="dark"] body #view .ve:has(.ve-finder) .ve-shelves .shelfrow:nth-of-type(4n+4){--hue:#d6b79c}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow:hover{transform:none;border-color:var(--line-2)}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow:active{background:var(--sig-bg)}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow::before{content:"";grid-column:1;grid-row:1 / span 2;width:48px;height:48px;border-radius:12px;
    background:color-mix(in srgb,var(--hue) 13%,var(--card))}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow .sr1::before{content:"";position:absolute;left:30px;top:50%;width:24px;height:24px;margin-top:-12px;background:var(--hue);
    -webkit-mask: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M9 22v-4h6v4M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E") center/contain no-repeat}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow::after{content:"";grid-column:3;grid-row:1 / span 2;width:24px;height:24px;background:var(--ink);
    -webkit-mask: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='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/24px no-repeat;
    mask: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='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/24px no-repeat}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow .sr1{grid-column:2;grid-row:1;align-self:end;min-width:0;font-size:16.5px;font-weight:500;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow .sr2{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:15px!important;line-height:1.35;color:var(--ink-2)}

  /* Back is a plain secondary under the list, at the right, not a card of its own. */
  html body #view .ve:has(.ve-finder) .ve-gate.ve-details-foot.rp-foot{justify-content:flex-end;margin-top:20px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  html body #view .ve:has(.ve-finder) .ve-gate .ve-gate-text:empty{display:none}
  html body #view .ve:has(.ve-finder) .ve-gate .ghost{flex:0 0 auto;gap:10px;min-height:48px!important;padding:0 22px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);font-size:17px}

  /* The list's pager (24 reels, Previous, 1 / 3, Next) inherited flex-wrap:wrap from the media zone's sheet, so at a big text
     size its Next dropped onto a line of its own (the phone stress found it the moment the demo held more than one page of
     reels). It stays one row: the pieces share the width and the buttons' words wrap inside them. */
  html body #view .ve .tour-library-card.tour-library-card .tour-pagination{flex-wrap:nowrap;justify-content:space-between;gap:8px}
  html body #view .ve .tour-library-card.tour-library-card .tour-pagination>*{min-width:0}
  html body #view .ve .tour-library-card.tour-library-card .tour-pagination button{flex:0 1 auto;padding:0 12px;white-space:normal;line-height:1.15}

  /* ------------------------------------------------------------------- Filming steps (his nine reel-step comps)
     Owner ruling, 21 Oct 2026: the filming steps of every format (Opening, Rooms, Ending, and the two-step and photos-only
     shapes, which differ only in how many tabs they carry and what their slots are called) take the redesigned phone look.
     The markup is built by wizOpening(), wizRooms(), roomCardsHTML() and voPanelHTML() in js/video-editor.js and the steps by
     js/reel-steps.js; every rule below is keyed to the classes they already draw, none to a format, so a format with four
     steps, two steps or a single photo is dressed by the same rules. The Review step draws no .rp-wiz section, so the foot
     rules (which carry Create reel) are keyed to section.rp-wiz and never reach it. */

  /* The home's card: a larger thumbnail, the name in ink over its facts line in grey (comps 1, 3, 5, 7, 8, 9). */
  html body #view .ve .ve-steps-home{gap:14px}
  html body #view .ve .ve-steps-thumb{flex:none;width:76px;height:56px;border-radius:14px}
  html body #view .ve .ve-steps-thumb svg{width:28px;height:28px}
  html body #view .ve .ve-steps-who{min-width:0}
  html body #view .ve .ve-steps-who b{font-size:18px;line-height:1.25;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
  html body #view .ve .ve-steps-who small{font-size:14.5px;line-height:1.35;color:var(--ink-3);white-space:normal;overflow-wrap:anywhere}

  /* The step line and its title: the small-caps count over a larger ink title (comp 1's "STEP 1 OF 4" over "Film your opening"). */
  html body #view .ve .rp-wiz-head .rp-step-n{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--ink-3)}
  html body #view .ve .rp-wiz-head h2{font-size:25px;line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
  /* Four tabs with a tick on each need the room: the larger label is for 390px and wider. */
  @media (min-width:390px){
    html body #view .ve:has(.rp-wiz) .ve-tabs button,html body #view .ve .ve-tabs:has([data-section=rooms]) button{font-size:15px}
  }
  html body #view .ve .ve-tabs button[aria-current=true]{font-weight:600}

  /* Opening, Ending, One take: two white cards, 14px radius, 1px --line-2 (comps 1 and 2). The wrapper that was one big card
     is plain now; the words (Say this, How to film) are the first card, the clip is the second. A step with no clip to show
     draws an empty second box in the markup, so that box is hidden. */
  html body #view .ve .rp-wiz-grid{gap:14px;border:0;border-radius:0;background:transparent;box-shadow:none}
  html body #view .ve .rp-wiz-grid>.rp-wiz-card,html body #view .ve .rp-wiz-grid>.rp-wiz-clips{padding:18px 16px;border:1px solid var(--line-2);border-radius:14px;
    background:var(--card);box-shadow:none}
  html body #view .ve .rp-wiz-grid>.rp-wiz-clips:not(:has(*)){display:none}
  html body #view .ve .rp-wiz-grid .rp-card-h{gap:12px;font-size:17px;font-weight:600;color:var(--ink)}
  html body #view .ve .rp-wiz-grid .rp-card-h svg{flex:none;width:24px;height:24px}
  /* Her line in the green tinted quote block; How to film follows a hairline. */
  html body #view .ve .rp-wiz-grid .rp-quote{padding:20px;border-radius:14px}
  html body #view .ve .rp-wiz-grid .rp-quote .rp-star{font-size:20px!important;line-height:1.4}
  html body #view .ve .rp-wiz-grid>.rp-wiz-card>section+section{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)!important}
  /* The numbered steps: a 36px grey disc, the sentence beside it at reading size. */
  html body #view .ve .rp-wiz-grid .rp-how .rp-do{gap:18px}
  html body #view .ve .rp-wiz-grid .rp-how .rp-do li{grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start}
  html body #view .ve .rp-wiz-grid .rp-do li>span{width:36px;height:36px;font-size:16px;font-weight:500}
  html body #view .ve .rp-wiz-grid .rp-do li>p{font-size:16px;line-height:1.45;padding-top:5px}
  html body #view .ve .rp-wiz-grid .rp-do-one{font-size:16px;line-height:1.45}
  /* The demo link ends in a play button, not a question mark, and the hint under the steps says to tap (a phone has no hover).
     The hint's own words stay in the page for a screen reader; the line drawn here stands in for them by sight. */
  html body #view .ve .rp-term{border-bottom:0;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
  /* The play button is an inline box (padding for room, no text width), so it stays glued to the last word and never wraps
     onto a line of its own. */
  html body #view .ve .rp-term-q{display:inline;position:relative;top:-3px;padding:11px 0 11px 28px;border-radius:0;font-size:0;line-height:0;
    background:var(--rp-term,#2a5aa8);-webkit-mask-size:22px 22px;-webkit-mask-position:6px center;mask-size:22px 22px;mask-position:6px center;
    -webkit-mask: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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m10 8.5 5.5 3.5-5.5 3.5z'/%3E%3C/svg%3E") 6px center/22px 22px no-repeat;
    mask: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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m10 8.5 5.5 3.5-5.5 3.5z'/%3E%3C/svg%3E") 6px center/22px 22px no-repeat}
  html body #view .ve .rp-mix-ends .rp-term-q{padding:9px 0 9px 22px;-webkit-mask-size:18px 18px;mask-size:18px 18px;-webkit-mask-position:4px center;mask-position:4px center}
  html body #view .ve .rp-wiz-grid .rp-hint{margin:2px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:0;line-height:0}
  html body #view .ve .rp-wiz-grid .rp-hint::before{content:"Tap the blue text to watch the demo.";content:"Tap the blue text to watch the demo." / "";display:block;font-size:15px;line-height:1.4;color:var(--ink-link,#2a5aa8)}
  /* The clip card: the title, then a dashed drop zone with the cloud, her prompt, a green Choose clip and the formats. */
  html body #view .ve .rp-wiz-grid .rp-clip-card{gap:16px}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone.ve-file{min-height:0;gap:12px;padding:24px 16px;border:1.5px dashed var(--line-2);border-radius:14px;background:var(--card-2)}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone.ve-file>svg{width:40px;height:40px}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone.ve-file>b{font-size:0;line-height:0;font-weight:400}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone.ve-file>b::before{content:"Choose your clip";content:"Choose your clip" / "";display:block;font-size:17px;line-height:1.35;font-weight:400;color:var(--ink)}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone.ve-file:has(input[aria-label="Choose your opening clip"])>b::before{content:"Choose your opening clip";content:"Choose your opening clip" / ""}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone.ve-file:has(input[aria-label="Choose your closing clip"])>b::before{content:"Choose your closing clip";content:"Choose your closing clip" / ""}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone-btn{min-height:48px;min-width:min(240px,100%);border-radius:10px;font-size:16px}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone.ve-file>small{font-size:15px;color:var(--ink-3)}

  /* Rooms: Room clips and Voiceover as one two-segment control. The open segment is TINTED green with a green edge, the other
     white (comps 3 and 6): not a filled green segment. A segment is a small grid, not a wrapping row: the icon and the label
     on the first line, the tick beside the label, and a count or length under it, so a segment lays out the same at every
     width and a bigger text size wraps the label inside its own cell instead of dropping a piece onto a line of its own. */
  html body #view .ve .rp-rooms-switch{border:1px solid var(--line-2);border-radius:12px;background:var(--card)}
  html body #view .ve .rp-rooms-switch button{display:grid;grid-template-columns:auto minmax(0,auto) auto;column-gap:8px;row-gap:4px;justify-content:center;align-items:center;
    min-height:52px;padding:6px 10px;border-radius:11px;background:transparent;font-size:16px;font-weight:400;color:var(--ink-2)}
  html body #view .ve .rp-rooms-switch button>svg{grid-column:1;grid-row:1}
  html body #view .ve .rp-rooms-switch button>span:not(.rp-switch-tick){grid-column:2;grid-row:1;min-width:0;white-space:normal;text-align:left;overflow-wrap:break-word}
  html body #view .ve .rp-rooms-switch button>.rp-count{grid-column:3;grid-row:1;justify-self:start}
  html body #view .ve .rp-rooms-switch button>.rp-count:has(+ .rp-switch-tick){grid-column:2;grid-row:2}
  html body #view .ve .rp-rooms-switch button>.rp-switch-tick{grid-column:3;grid-row:1;justify-self:start;display:inline-flex}
  /* Under 380px a segment is about 140px wide: its icon goes (the label names it), the count sits under the label, and the
     tick takes the segment's top corner, so the label keeps the whole width at any text size. */
  @media (max-width:379px){
    html body #view .ve .rp-rooms-switch button{position:relative;grid-template-columns:minmax(0,auto)}
    html body #view .ve .rp-rooms-switch button>svg{display:none}
    html body #view .ve .rp-rooms-switch button>span:not(.rp-switch-tick),html body #view .ve .rp-rooms-switch button>.rp-count,
    html body #view .ve .rp-rooms-switch button>.rp-count:has(+ .rp-switch-tick){grid-column:1}
    html body #view .ve .rp-rooms-switch button>span:not(.rp-switch-tick){text-align:center}
    html body #view .ve .rp-rooms-switch button>.rp-count{grid-row:2;justify-self:center}
    html body #view .ve .rp-rooms-switch button>.rp-switch-tick{position:absolute;top:6px;right:8px}
    html body #view .ve .rp-rooms-switch button:has(.rp-switch-tick)>span:not(.rp-switch-tick){padding:0 22px}
  }
  html body #view .ve .rp-rooms-switch button[aria-selected=true]{background:var(--sig-bg);box-shadow:inset 0 0 0 1.5px var(--sig);font-weight:600;color:var(--ink)}
  html body #view .ve .rp-rooms-switch button svg{flex:none;width:20px;height:20px}

  /* The Room clips card: a larger title with its count beside it, the guidance at reading size, a 48px Add room. */
  html body #view .ve .ve-rooms-head.rp-rooms-head{padding:18px 16px 16px}
  html body #view .ve .rp-rooms-title h3{font-size:21px;line-height:1.25;font-weight:700;color:var(--ink)}
  html body #view .ve .rp-rooms-title h3 .ve-quiet{margin-left:6px;font-size:15px;font-weight:400;color:var(--ink-3)}
  html body #view .ve .rp-rooms-title .rp-rooms-quiet,html body #view .ve .rp-rooms-title .rp-rooms-do{font-size:15px;line-height:1.45;color:var(--ink-2)}
  html body #view .ve .rp-rooms-head .rp-rooms-edit .rp-add-room{min-height:48px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);font-size:16px;color:var(--ink)}
  /* A format with several filming lines (the two-step Swipe) numbers them on green tinted discs, as comp 8 draws them. A format
     with one line (Steady means a slow, wide pan) stays a plain line. */
  html body #view .ve .rp-rooms-title:has(.rp-rooms-do~.rp-rooms-do){counter-reset:rp-do}
  html body #view .ve .rp-rooms-title:has(.rp-rooms-do~.rp-rooms-do) .rp-rooms-do{position:relative;counter-increment:rp-do;margin:12px 0 0;padding-left:46px;min-height:32px}
  html body #view .ve .rp-rooms-title:has(.rp-rooms-do~.rp-rooms-do) .rp-rooms-do::before{content:counter(rp-do);position:absolute;left:0;top:0;display:grid;place-items:center;
    width:34px;height:34px;border-radius:50%;background:var(--sig-bg);font-size:16px;font-weight:600;color:var(--sig)}
  /* A photos-only format puts its count at the card's right edge (comp 9). */
  html body #view .ve .rp-rooms-card:has(.rp-photo-strip):not(:has(.ve-room-thumb)) .rp-rooms-title h3{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
  html body #view .ve .rp-rooms-card:has(.rp-photo-strip):not(:has(.ve-room-thumb)) .rp-rooms-title h3 .ve-quiet{margin-left:auto}

  /* A room: white, 1px --line-2, 14px radius, inset from the card's edge; the open one takes a green edge. */
  html body #view .ve .rp-room-rows{gap:12px;padding:0 12px 14px}
  html body #view .ve .rp-room-row,html body #view .ve .rp-room-row+.rp-room-row{border:1px solid var(--line-2);border-radius:14px;background:var(--card)}
  html body #view .ve .rp-room-row.is-open,html body #view .ve .rp-room-row.is-open+.rp-room-row.is-open{border:1.5px solid var(--sig)}
  html body #view .ve .rp-room-row.is-open+.rp-room-row:not(.is-open){border:1px solid var(--line-2)}
  html body #view .ve .rp-wiz-rooms .rp-room-main.ve-room,html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main.ve-room{grid-template-columns:72px minmax(0,1fr) 40px;gap:12px 14px;padding:14px}
  html body #view .ve .rp-room-main .ve-room-thumb{width:72px;height:56px;border-radius:12px}
  html body #view .ve .rp-room-main .ve-room-thumb svg{width:28px;height:28px}
  html body #view .ve .rp-room-main .rp-room-name b{font-size:17px;line-height:1.25;font-weight:600;color:var(--ink)}
  html body #view .ve .rp-room-main .rp-room-name small{font-size:15px;color:var(--ink-3)}
  html body #view .ve .rp-room-chev{color:var(--ink)}
  html body #view .ve .rp-room-acts .solid,html body #view .ve .rp-room-acts>label.solid{min-height:48px;border-radius:10px;font-size:16px;font-weight:600}
  /* A photo's tile is a square tint with the picture drawn in it, and a hairline sits between the name and Choose photos. */
  html body #view .ve .rp-room-main .rp-photo-strip{width:72px}
  html body #view .ve .rp-room-main .rp-photo-strip:has(.rp-photo:only-child){grid-template-columns:minmax(0,1fr)}
  html body #view .ve .rp-room-main .rp-photo-strip .rp-photo:only-child{width:100%;height:56px;border-radius:12px}
  html body #view .ve .rp-room-main .rp-photo-strip .rp-photo:only-child svg{width:26px;height:26px}
  html body #view .ve .rp-room-main:has(.rp-photo-strip) .rp-room-acts{padding-top:14px;border-top:1px solid var(--line)}
  html body #view .ve .rp-room-main .rp-room-name .rp-pill{align-self:flex-start;margin-top:4px;padding:3px 12px;font-size:14px}

  /* An open room: START and END as two ruled rows, the label small over the instruction (comp 5); then the Choose clip and the
     grey Extra footage panel with Delete this room, in red, underlined, at its foot. */
  html body #view .ve .rp-room-moves{grid-template-columns:minmax(0,1fr);gap:0;margin-top:2px;border-top:1px solid var(--line)}
  html body #view .ve .rp-room-moves .rp-move{padding:12px 0;font-size:16px;line-height:1.4;color:var(--ink)}
  html body #view .ve .rp-room-moves .rp-move+.rp-move{border-top:1px solid var(--line)}
  html body #view .ve .rp-room-moves .rp-move i{display:block;margin-bottom:2px;font-size:13px;font-style:normal;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  /* Owner ruling, 21 Oct 2026 (the middle step): a room that has a Middle reads as THREE parts on one rail, Start, Middle and End,
     the clip from its first moment to its last. Each is a small label over its instruction, at the same size and weight, so the
     Middle is not a footnote between two joins; the rail's line and dots tie them together, and the Middle's dot is filled because
     it is the part she does. Its lead ("Shift right:") is bold so the direction is the first thing read. Where the room offers hold
     still, that is a quiet tinted note under the Middle: visible, secondary, never a fourth row. A room with no Middle (a format that
     declares its own filming) keeps the two ruled rows above, so its card is exactly what it was. */
  html body #view .ve .rp-room-moves .rp-move-mid[hidden]{display:block}
  html body #view .ve .rp-room-moves .rp-move-mid{font-size:16px;line-height:1.4;color:var(--ink)}
  html body #view .ve .rp-room-moves .rp-move-mid i{display:block;margin-bottom:2px;font-size:13px;font-style:normal;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  html body #view .ve .rp-room-moves:has(.rp-move-mid){margin-top:6px;padding:6px 0 4px}
  html body #view .ve .rp-room-moves:has(.rp-move-mid) :is(.rp-move,.rp-move-mid){position:relative;padding:14px 0 14px 32px;border-top:0}
  html body #view .ve .rp-room-moves:has(.rp-move-mid) :is(.rp-move,.rp-move-mid)::before{content:"";position:absolute;left:2px;top:20px;box-sizing:border-box;width:13px;height:13px;
    border:2px solid var(--ink-3);border-radius:50%;background:var(--card)}
  html body #view .ve .rp-room-moves:has(.rp-move-mid) .rp-move-mid::before{border-color:var(--sig);background:var(--sig)}
  html body #view .ve .rp-room-moves:has(.rp-move-mid) :is(.rp-move,.rp-move-mid):not(:last-child)::after{content:"";position:absolute;left:7px;top:36px;bottom:-22px;width:2px;background:var(--line-2)}
  html body #view .ve .rp-room-moves:has(.rp-move-mid) :is(.rp-move,.rp-move-mid) i{margin-bottom:4px;font-size:12.5px;letter-spacing:.08em}
  html body #view .ve .rp-room-moves .rp-mid{display:block;line-height:1.45}
  html body #view .ve .rp-room-moves .rp-mid b{font-weight:600}
  html body #view .ve .rp-room-moves .rp-2x{display:block;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--card-2);font-size:15px;line-height:1.45;color:var(--ink-2)}
  html body #view .ve .rp-room-moves .rp-2x b{font-weight:600;color:var(--ink)}
  /* Owner ruling, 22 Oct 2026 (r258): a room whose joins are both the app's is ONE row, the instruction alone: no label, no ring, no rail. */
  html body #view .ve .rp-room-moves .rp-move-one[hidden]{display:block}
  html body #view .ve .rp-room-moves .rp-move-one{padding:12px 0;font-size:16px;line-height:1.45;color:var(--ink)}
  html body #view .ve .rp-xf{margin:0 12px 14px;padding:16px;border-radius:14px;background:var(--card-2)}
  html body #view .ve .rp-xf-head b{font-size:18px;font-weight:600;color:var(--ink)}
  html body #view .ve .rp-xf-head .ve-quiet{font-size:15px;color:var(--ink-3)}
  html body #view .ve .rp-xf-add{min-height:48px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);font-size:16px}
  html body #view .ve .rp-xf-none{font-size:15px;line-height:1.5;color:var(--ink-3)}
  html body #view .ve .ve-link.rp-room-delete{min-height:44px;font-size:16px;font-weight:400;color:var(--bad,#b3402f);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}

  /* The Voiceover card: the mic in a green disc, the title, Edit script as a white secondary at the right, one line of
     guidance, the script in its warm tinted block, then Record (green) over Upload audio (white), and what is in (comps 6, 7). */
  html body #view .ve .ve-vo.rp-vo{gap:14px;padding:18px 16px}
  html body #view .ve .rp-vo-head{flex-wrap:nowrap;gap:14px}
  html body #view .ve .rp-vo-mic{flex:none;width:46px;height:46px;background:var(--sig-bg);color:var(--sig)}
  html body #view .ve .rp-vo-mic svg{width:22px;height:22px}
  html body #view .ve .rp-vo-head h3{flex:1 1 auto;min-width:0;font-size:22px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
  /* Under 380px the card has no room for the disc as well as the title and Edit script: the disc is the one that goes, so the
     row stays one row at every text size (it only repeats the mic the title already names). */
  @media (max-width:379px){
    html body #view .ve .rp-vo-mic{display:none}
  }
  html body #view .ve .rp-vo-edit{flex:none;gap:8px;min-height:46px;padding:0 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);font-size:16px;color:var(--ink)}
  html body #view .ve .rp-vo-sub{font-size:14px;line-height:1.45;color:var(--ink-3)}
  html body #view .ve .rp-vo-script{padding:16px 18px;border-radius:14px;font-size:16px;line-height:1.65;color:var(--ink)}
  html body #view .ve .rp-vo-acts{gap:14px}
  html body #view .ve .rp-vo-acts .solid,html body #view .ve .rp-vo-acts .ghost{min-height:48px;border-radius:10px;font-size:16px}
  html body #view .ve .rp-vo-acts .solid{font-weight:600}
  html body #view .ve .rp-vo-acts .ghost{border:1px solid var(--line-2);background:var(--card);color:var(--ink)}
  html body #view .ve .ve-vo-state{font-size:15px;color:var(--ink-3)}
  /* Her recording's waveform is 110 bars: at 1px each with a 2px gap that is 328px, wider than the card on any phone. A phone
     draws every other bar with a 1px gap and lets them shrink, so the player never runs past the card (found by the step
     stress, which opens the filming steps the list-only stress does not reach). The bars that stay still light as it plays. */
  html body #view .ve .rp-wave-bars{gap:1px;overflow:hidden}
  html body #view .ve .rp-wave-bars i{min-width:0}
  html body #view .ve .rp-wave-bars i:nth-child(even){display:none}

  /* The foot of a filming step: its ask at reading size over one full-width 48px primary. Keyed to section.rp-wiz so the
     Review step's foot, which carries Create reel, is not touched; what the button does and when it opens is unchanged. */
  html body #view .ve:has(section.rp-wiz) .ve-gate .ve-gate-text{font-size:16px;line-height:1.4}
  html body #view .ve:has(section.rp-wiz) .ve-gate .solid{min-height:48px;border-radius:10px;font-size:17px;font-weight:600}

  /* Owner ruling, 21 Oct 2026 (second ruling, replaces the inset card): THE FOOT IS DOCKED, EDGE TO EDGE. He counted his nine
     comps again, 7 to 2: the white band reaches both screen edges in 7fc3011a, a71dc35f, 57b7b78a, d09b422b, b8f8c3ce, b84c88ef
     and 064b60df; only b0aca397 and b3132e2a draw the inset card. So the band bleeds through the page's gutters (a negative
     inline margin of --m-gutter, the very variable the page's padding is made of, so it is exact at every width), takes the
     page's bottom padding as its own (the home-indicator inset moves inside the band), has a hairline and a rounded top, and a
     square bottom, because the bottom is the screen's edge.
     SHORT PAGES (the photo step, or any step whose content does not fill the screen): a docked band that merely sat after its
     content would float mid-air with a cut-off edge. The foot was already position:sticky;bottom:0, which pins it to the screen
     while a LONG page scrolls but does nothing for a short one. So a short page is made as tall as the screen and the foot
     is pushed to its end: #view, the zone's host, the editor and the step become one column of flex (each grows to fill what
     is left, never shrinks below its content), and the foot's margin-top is auto. On a short page the foot is at the bottom
     of the screen; on a long one the column is as tall as its content, the margin is zero, and the sticky foot pins at the
     screen's bottom while she scrolls and rests at the end of the content when she arrives, flush with the page's own end.
     100dvh, not 100vh, so a phone's collapsing address bar does not leave a gap or a second scroll. The top bar is fixed, so
     it adds no height of its own; the page's top padding is inside #view's box. */
  html body #view:has(.ve-step>section.rp-wiz){display:flex;flex-direction:column;min-height:100dvh;padding-bottom:0!important}
  html body #view:has(.ve-step>section.rp-wiz)>.ve-host,
  html body #view .ve-host>.ve:has(.ve-step>section.rp-wiz),
  html body #view .ve-step:has(>section.rp-wiz){display:flex;flex-direction:column;flex:1 0 auto;min-width:0}
  /* The dashboard centres every child of the page with auto side margins (.main>*), which in a flex column makes the host
     shrink to its content instead of filling the page: it is told its width. */
  html body #view:has(.ve-step>section.rp-wiz)>.ve-host{width:100%}
  html body #view .ve-step:has(>section.rp-wiz)>.ve-gate{margin:auto calc(-1 * var(--m-gutter)) 0;padding:14px 20px calc(16px + var(--m-safe-b));
    border:1px solid var(--line-2);border-bottom:0;border-radius:14px 14px 0 0}
  /* The footer's three parts cannot share one phone row: the note asks for 220px, Back is about 120, and the primary
     keeps a 200px minimum, which comes to more than the screen is wide. The primary ran off the right edge instead, so
     "Start filming" read as "Start ming" (owner, 29 Oct 2026). The note takes the row above; the two buttons share the
     one below and shrink to it, since what they say is short and the row is theirs alone. */
  html body #view .ve-step:has(>section.rp-wiz)>.ve-gate .ve-gate-text{flex:1 1 100%}
  html body #view .ve-step:has(>section.rp-wiz)>.ve-gate :is(.solid,.ghost){flex:0 1 auto;min-width:0;padding:0 14px}
  /* Whatever the row does, a button's own words never wrap inside it. That is what turned "Start filming" into "Start
     ming": the label broke over three lines in a button sized for one, and the rest was cut off. A label that cannot
     wrap either fits or takes the button to its own line, and both of those are readable. */
  html body #view .ve-step:has(>section.rp-wiz)>.ve-gate :is(.solid,.ghost) span{white-space:nowrap}
  /* A flex item does not let its children's margins collapse out through it, as a block did: the step title's 4px top margin used
     to be swallowed by the gap above the step and now would push the whole step down, so it is taken off. (Measured: every box of
     every filming step sits where it sat, to the pixel, bar the foot.) */
  html body #view .ve-step:has(>section.rp-wiz)>.rp-wiz-head{margin-top:0}
  /* A little air between the last card and the band when the page is long enough to scroll under it. */
  html body #view .ve-step:has(>section.rp-wiz)>section.rp-wiz{margin-bottom:12px}
/* INSERT in public/css/mobile-reels.css, inside the existing @media (max-width:767px),(pointer:coarse) and (max-height:500px) block,
   after the "Filming steps" rules (above the closing brace). Phone only. Review your reel and its Settings.
   Every rule is keyed to a class the Review step already draws, or to .ve-step[data-step=preview]:has(.rp-check), so the
   filming steps and the older Preview & export (no .rp-check) are not touched. */

/* ---- Review your reel: the page, not a bordered card (owner comps 12, 14, 23 to 26) ---- */
html body #view .ve-step[data-step=preview]>.rp-wiz-head{margin:6px 0 16px}
html body #view .ve .ve-check.rp-check{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;border:0;border-radius:0;background:transparent;box-shadow:none}
html body #view .ve .rp-check>.ve-stage{gap:12px;padding:0;border:0!important;border-radius:0;background:transparent;box-shadow:none!important}
html body #view .ve .rp-check>.ve-check-side{gap:20px;padding:0;border:0}
html body #view .ve .rp-check .rp-review{padding:0}

/* Preview, its quality quietly beside it, and whether it is up to date on its own line under (comp 14). */
html body #view .ve .rp-stage-top{flex-wrap:wrap;align-items:baseline;gap:2px 12px}
html body #view .ve .rp-stage-top .ve-stage-h{font-size:21px;font-weight:700;line-height:1.25;color:var(--ink)}
html body #view .ve .rp-stage-q{font-size:14.5px;color:var(--ink-3)}
html body #view .ve .rp-stale-slot{flex:1 0 100%;margin:0}
html body #view .ve .rp-stale-slot:empty{display:none}
html body #view .ve .rp-stale{gap:8px;font-size:14.5px;font-weight:500}
html body #view .ve .rp-stale.is-fresh svg{width:18px;height:18px}

/* The player's tail: the length at the right, then the bar (comps 12, 22, 24). */
html body #view .ve .rp-check .ve-strip-head{justify-content:flex-end;margin:0 0 10px;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-3)}
html body #view .ve .rp-check .ve-track{height:49px;border:1px solid var(--line-2);border-radius:10px;background:transparent}

/* "Preview ready." (comp 26). */
html body #view .ve .rp-made{gap:12px;padding:8px 12px;font-size:16px}
html body #view .ve .rp-made .rp-disc{width:26px;height:26px}

/* ---- Tabs become text tabs on a rule: Settings underlined in green (comp 12) ---- */
html body #view .ve .rp-tabs{display:flex;gap:0;margin:0 0 16px;border:0;border-bottom:1px solid var(--line);border-radius:0;overflow:visible;background:none}
html body #view .ve .rp-tab{flex:none;min-height:48px!important;margin-bottom:-1px;padding:0 17px;border:0;border-bottom:3px solid transparent;border-radius:0;background:none;box-shadow:none;font-size:16px;font-weight:400;color:var(--ink-2)}
html body #view .ve .rp-tab+.rp-tab{border-left:0}
html body #view .ve .rp-tab[aria-selected="true"]{border-bottom-color:var(--sig);background:none;box-shadow:none;color:var(--sig);font-weight:600}
/* One panel, no tabs: the Settings title (comps 22, 24, 30). */
html body #view .ve .rp-set-title{margin:0;padding:0 0 12px}

/* ---- The groups: a card each when the reel has tabs (comps 12, 13), flat on the page when it has none (comps 22, 24, 30) ---- */
html body #view .ve .rp-set{gap:16px}
html body #view .ve .rp-review:has(.rp-tabs) .rp-set-group,
html body #view .ve .rp-review:has(.rp-tabs) .rp-set-group:first-child,
html body #view .ve .rp-review:has(.rp-tabs) .rp-set-group:last-child,
html body #view .ve .rp-review:has(.rp-tabs) .rp-set-group+.rp-set-group{gap:0;padding:16px;border:0;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent),0 1px 4px color-mix(in srgb,var(--ink) 10%,transparent)}
html body #view .ve .rp-review:has(.rp-set-title) .rp-set{gap:0}
html body #view .ve .rp-review:has(.rp-set-title) .rp-set-group,
html body #view .ve .rp-review:has(.rp-set-title) .rp-set-group:first-child{gap:0;padding:20px 0}
html body #view .ve .rp-review:has(.rp-set-title) .rp-set-group:last-child{padding-bottom:4px}
html body #view .ve .rp-set-h{gap:12px;margin:0 0 14px;font-size:17px;font-weight:600}

/* Colour: a dropdown (44px, 16px so the phone does not zoom on it), then the chosen look's strip and its line (owner ruling r264, 22 Oct 2026). */
html body #view .ve .rp-grade-pick{gap:12px}
html body #view .ve .rp-grade-sel{min-height:44px;border:1px solid var(--line-2);border-radius:12px;background:var(--card-2,var(--card));font-size:16px}
html body #view .ve .rp-grade-strip{border-radius:5px}
html body #view .ve .rp-grade-strip i{height:26px}
html body #view .ve .rp-grade-line{font-size:15px}

/* Rows: the label grey over the slider, its value in a box at the right; a hairline between rows (comps 12, 22). */
html body #view .ve .rp-set-row,html body #view .ve .rp-check .rp-set-row{grid-template-columns:minmax(0,1fr) 72px;gap:10px 14px;padding:14px 0;font-size:14.5px;color:var(--ink-3)}
html body #view .ve .rp-set-h+.rp-set-row{padding-top:0}
html body #view .ve .rp-set-row+.rp-set-row{border-top:1px solid var(--line)}
html body #view .ve .rp-set-label{font-size:14.5px;color:var(--ink-3)}
html body #view .ve .rp-read{min-height:37px;border-radius:8px;background:var(--card);font-size:16px}

/* The slider: a thick pill track filled green up to a 20px thumb (comps 11 to 13). --f is set by the page, 0 to 1. */
html body #view .ve .rp-set input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;min-height:28px;margin:0;padding:0;background:transparent;cursor:pointer}
html body #view .ve .rp-set input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(to right,var(--sig) calc(var(--f,0) * (100% - 20px) + 10px),color-mix(in srgb,var(--ink) 12%,transparent) 0)}
html body #view .ve .rp-set input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-6px;border:0;border-radius:50%;background:var(--sig)}
html body #view .ve .rp-set input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
html body #view .ve .rp-set input[type=range]::-moz-range-progress{height:8px;border-radius:99px;background:var(--sig)}
html body #view .ve .rp-set input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--sig)}
html body #view .ve .rp-set input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--sig) 30%,transparent)}
html body #view .ve .rp-set input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px color-mix(in srgb,var(--sig) 30%,transparent)}

/* Music track: the picker with its round play button beside it (comp 12); a format's own song in one box (comps 22, 24, 30). */
html body #view .ve .rp-set-row:has(#rp-track){grid-template-columns:minmax(0,1fr) 46px;gap:10px 18px}
html body #view .ve .rp-set-row select{min-height:43px;border-radius:8px;background:var(--card-2);font-size:16px}
html body #view .ve .rp-track-play{width:46px;height:46px;border-width:2px}
html body #view .ve .rp-track-fixed{grid-template-columns:minmax(0,1fr)}
html body #view .ve .rp-track-box{grid-column:1 / -1;min-height:48px;border-radius:10px}
html body #view .ve .rp-track-box .rp-track-name{min-height:46px;padding:0 14px;font-size:16px;font-weight:400}
html body #view .ve .rp-track-box .rp-track-play{width:38px;height:38px}

/* Captions: the value box at the right of the label, the slider beneath (comp 13); the said-word note in a grey box. */
html body #view .ve .rp-cap-row{grid-template-areas:"l v" "r r";gap:12px 14px}
html body #view .ve .rp-cap-row>.rp-set-label{grid-area:l;font-size:16px;font-weight:500;color:var(--ink)}
html body #view .ve .rp-cap-row>.rp-range{grid-area:r}
html body #view .ve .rp-cap-row>.rp-read{grid-area:v}
html body #view .ve .rp-said-row>.rp-set-label{font-size:16px;font-weight:500;color:var(--ink)}
html body #view .ve .rp-said-none{grid-column:1 / -1;margin:0;padding:14px 15px;border-radius:8px;background:var(--card-2);font-size:15px;line-height:1.45;color:var(--ink-3)}
html body #view .ve .rp-cap-reset{font-size:16px;font-weight:600;color:var(--sig);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
html body #view .ve .rp-cap-note{margin:2px 0 0;padding:0 2px;font-size:13px;color:var(--ink-3)}

/* ---- The foot: docked edge to edge, like the filming steps' (comps 13, 14, 22 to 26, 30) ---- */
html body #view:has(.ve-step[data-step=preview] .rp-check){display:flex;flex-direction:column;min-height:100dvh;padding-bottom:0!important}
html body #view:has(.ve-step[data-step=preview] .rp-check)>.ve-host,
html body #view .ve-host>.ve:has(.ve-step[data-step=preview] .rp-check),
html body #view .ve-step[data-step=preview]:has(.rp-check){display:flex;flex-direction:column;flex:1 0 auto;min-width:0}
html body #view:has(.ve-step[data-step=preview] .rp-check)>.ve-host{width:100%}
html body #view .ve-step[data-step=preview]:has(.rp-check)>.rp-check{margin-bottom:16px}
html body #view .ve-step[data-step=preview]:has(.rp-check)>.ve-gate{margin:auto calc(-1 * var(--m-gutter)) 0;padding:12px 20px calc(12px + var(--m-safe-b));gap:10px;border:1px solid var(--line-2);border-bottom:0;border-radius:14px 14px 0 0}
html body #view .ve-step[data-step=preview]:has(.rp-check)>.ve-gate .ve-gate-text:empty{display:none}
html body #view .ve-step[data-step=preview]:has(.rp-check)>.ve-gate .solid{min-height:48px!important;border-radius:10px;font-size:16px;font-weight:600}
html body #view .ve-step[data-step=preview]:has(.rp-check)>.ve-gate :is(.ghost,.rp-gate-more>summary){min-height:48px!important;border:1px solid var(--line-2);border-radius:10px;background:var(--card);font-size:16px;font-weight:500}
/* More opens a small sheet upward from the button, its items on rules, with a caret at the button (comp 25). */
html body #view .ve-step[data-step=preview]:has(.rp-check)>.ve-gate .rp-gate-more .ve-menu-panel{bottom:calc(100% + 14px);width:200px;max-width:calc(100vw - 32px);padding:4px 12px;border:0;border-radius:14px;box-shadow:0 10px 30px -10px color-mix(in srgb,var(--ink) 45%,transparent)}
html body #view .ve-step[data-step=preview]:has(.rp-check)>.ve-gate .rp-gate-more .ve-menu-panel::after{content:"";position:absolute;right:44px;bottom:-7px;width:14px;height:14px;transform:rotate(45deg);background:var(--card);border-radius:0 0 3px 0}
html body #view .ve-step[data-step=preview]:has(.rp-check)>.ve-gate .rp-gate-more .ve-menu-panel>button{gap:14px;min-height:56px!important;padding:0;border-radius:0;font-size:16px;line-height:1.3}
html body #view .ve-step[data-step=preview]:has(.rp-check)>.ve-gate .rp-gate-more .ve-menu-panel>button+button{border-top:1px solid var(--line)}

/* The stale foot: the amber notice first and on its own, then Back and a filled Update preview (comp 11). */
html body #view .ve .ve-gate:has(.rp-stale-msg){border-color:var(--line-2);background:var(--card)}
html body #view .ve .ve-gate .ve-gate-text.rp-stale-msg{order:-1;flex:1 1 100%;gap:12px;margin:0;padding:12px 14px;border:1px solid var(--ve-amber-line);border-radius:10px;background:var(--ve-amber-bg)}
html body #view .ve .ve-gate:has(.rp-stale-msg) .ghost{flex:0 0 140px}

/* ---- The stepper above Review: a ring with a tick for a finished step, a filled numbered disc for this one, a line through (comps 23, 25, 26).
   Keyed to the Review step only; the filming steps keep their own tabs. A stepped reel's bar is .is-numbered, which the 28 block
   below draws on every step including this one, so these rules skip it (they used to stack on it and squeezed the fourth badge). ---- */
html body #view .ve:has(.ve-step[data-step=preview] .rp-check) .ve-tabs:not(.is-numbered){position:relative;justify-content:space-between;counter-reset:rp-step;margin:0 0 14px;padding:6px 0}
html body #view .ve:has(.ve-step[data-step=preview] .rp-check) .ve-tabs:not(.is-numbered)::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-2)}
html body #view .ve:has(.ve-step[data-step=preview] .rp-check) .ve-tabs:not(.is-numbered) button{position:relative;z-index:1;counter-increment:rp-step;gap:10px;min-height:44px;padding:0 12px;border:0;background:var(--paper);font-size:16px;color:var(--ink-2)}
html body #view .ve:has(.ve-step[data-step=preview] .rp-check) .ve-tabs:not(.is-numbered) button:first-child{padding-left:0}
html body #view .ve:has(.ve-step[data-step=preview] .rp-check) .ve-tabs:not(.is-numbered) button:last-child{padding-right:0}
html body #view .ve:has(.ve-step[data-step=preview] .rp-check) .ve-tabs:not(.is-numbered) button[data-done] svg{box-sizing:border-box;width:28px;height:28px;padding:6px;border:1.5px solid var(--sig);border-radius:50%;color:var(--sig)}
html body #view .ve:has(.ve-step[data-step=preview] .rp-check) .ve-tabs:not(.is-numbered) button:not([data-done]) svg{display:none}
html body #view .ve:has(.ve-step[data-step=preview] .rp-check) .ve-tabs:not(.is-numbered) button:not([data-done])::before{content:"";position:static;display:grid;place-items:center;box-sizing:border-box;width:28px;height:28px;border:1.5px solid var(--line-2);border-radius:50%;background:none}
html body #view .ve:has(.ve-step[data-step=preview] .rp-check) .ve-tabs:not(.is-numbered) button[aria-current=true]::before{content:counter(rp-step);border-color:var(--sig);background:var(--sig);color:var(--on-sig);font-size:15px;font-weight:600}
html body #view .ve:has(.ve-step[data-step=preview] .rp-check) .ve-tabs:not(.is-numbered) button[data-done]::before{display:none}


/* ---------------------------------------------------------------------------------------------------------------------
   BLOCK 1 of 3. File: public/css/mobile-reels.css. Where: INSIDE the existing phone @media, as the LAST rules, just before
   the file's closing "}" (line 406). Same "html body #view .ve" prefix as the rules above it, so order and specificity agree.
   Screens: 28, 21, 29, 27 (the rooms step).
   --------------------------------------------------------------------------------------------------------------------- */

  /* 28: the stepper. A round badge per step joined by a line: a finished step a tick in a green outline, the step she is on
     a filled green disc with its number, a step ahead its number in a grey outline. The line before a step is green once the
     step before it is finished, grey otherwise. The number is the badge's data-n, so the tab's text stays its label.
     The old underline is a 3px border-bottom on the button, so it is reset. Only a stepped reel carries .is-numbered. */
  /* A label is never squeezed: a button cannot shrink below its own words (min-width:min-content; the old min-width:0 lost to
     dashboard-f27.css's 44px floor on every #view button, which a button of three words must not be held to) and the label span stays whole
     (reel-mobile.css gives it an ellipsis, which is what clipped "Rooms" to "R…"), so the joining lines are the only thing that
     gives way, down to their 4px floor. The bar's size comes from five variables so each width band sets them once: the label's
     size, the badge, the badge's gap to its word, and the line's side margin. Measured at 320 to 430 against the four labels
     Opening, Rooms, Ending, Review. */
  html body #view .ve .ve-tabs.is-numbered{--st-fs:13px;--st-dot:20px;--st-dot-fs:11px;--st-dm:4px;--st-lm:2px;
    display:flex;align-items:center;justify-content:flex-start;gap:0;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line);overflow:visible}
  html body #view .ve .ve-tabs.is-numbered button{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-start;gap:0;min-width:max(44px,min-content);min-height:44px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
    font-size:var(--st-fs);font-weight:400;color:var(--ink-3);white-space:nowrap}
  html body #view .ve .ve-tabs.is-numbered button:first-child{flex:0 0 auto}
  html body #view .ve .ve-tabs.is-numbered button>span:not(.ve-tab-dot):not(.ve-sr){flex:none;overflow:visible;text-overflow:clip}
  html body #view .ve .ve-tabs.is-numbered button+button::before{content:"";position:static;display:block;flex:1 1 4px;min-width:4px;width:auto;height:1.5px;margin:0 var(--st-lm);background:var(--line-2)}
  html body #view .ve .ve-tabs.is-numbered button[data-done]:not([aria-current=true])+button::before{background:var(--sig)}
  html body #view .ve .ve-tabs.is-numbered .ve-tab-dot{flex:none;display:grid;place-items:center;box-sizing:border-box;width:var(--st-dot);height:var(--st-dot);margin-right:var(--st-dm);border:1.5px solid var(--ink-3);border-radius:50%;
    font-size:var(--st-dot-fs);font-weight:500;line-height:1;color:var(--ink-3)}
  html body #view .ve .ve-tabs.is-numbered .ve-tab-dot:empty::before{content:attr(data-n)}
  html body #view .ve .ve-tabs.is-numbered .ve-tab-dot svg{display:block;width:13px;height:13px;stroke-width:2.4}
  /* From 360px three steps (the comp's Opening, Rooms, Review) take 14px; from 390px the comp's full 16px. */
  @media (min-width:360px){
    html body #view .ve .ve-tabs.is-numbered:has(button:nth-child(3):last-child){--st-fs:14px;--st-dot:22px;--st-dot-fs:12px;--st-dm:6px;--st-lm:3px}
  }
  @media (min-width:390px){
    html body #view .ve .ve-tabs.is-numbered:has(button:nth-child(3):last-child){--st-fs:16px;--st-dot:26px;--st-dot-fs:14px;--st-dm:8px;--st-lm:8px}
  }
  /* Four steps take 14px once the bar is 372px wide or more (412 and up). */
  @media (min-width:400px){
    html body #view .ve .ve-tabs.is-numbered:has(button:nth-child(4):last-child){--st-fs:14px;--st-dot:22px;--st-dot-fs:12px;--st-dm:6px;--st-lm:4px}
  }
  /* 320px: the bar is 288 wide (the gutter stays 16 below 360) and four labels at 13px need 307, so four steps drop to the 12px
     floor (plinth-mobile.css: nothing reads under 12px) and an 18px badge, which need 274. */
  @media (max-width:339px){
    html body #view .ve .ve-tabs.is-numbered:has(button:nth-child(4):last-child){--st-fs:12px;--st-dot:18px;--st-dot-fs:11px;--st-dm:3px;--st-lm:1px}
  }
  /* A one-take reel (Opening, One take, Mark walks, Ending, Review) is five steps with long words: five labels and five badges need
     416px at 13px, more than any phone's bar, so only the step she is on keeps its word. The others are their badge, a tick or a
     number, and the word stays in the button for a screen reader. */
  @media (max-width:479px){
    html body #view .ve .ve-tabs.is-numbered:is(:has(button:nth-child(5)),:has([data-section=mark])) button:not([aria-current=true])>span:not(.ve-tab-dot):not(.ve-sr){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    html body #view .ve .ve-tabs.is-numbered:is(:has(button:nth-child(5)),:has([data-section=mark])) button:not([aria-current=true]) .ve-tab-dot{margin-right:0}
  }
  html body #view .ve .ve-tabs.is-numbered button[data-done] .ve-tab-dot{border-color:var(--sig);color:var(--sig)}
  html body #view .ve .ve-tabs.is-numbered button[aria-current=true]{font-weight:600;color:var(--sig)}
  html body #view .ve .ve-tabs.is-numbered button[aria-current=true] .ve-tab-dot{border-color:var(--sig);background:var(--sig);color:var(--on-sig)}
  html body #view .ve .rp-wiz-head h2{font-size:28px}

  /* 28: Room clips is a plain section on the page, not a white card: the title and its count, the sentence, a full-width outlined
     Add room, and the rooms under it. */
  html body #view .ve .rp-rooms-card.card{border:0;border-radius:0;background:transparent!important;box-shadow:none!important}
  html body #view .ve .ve-rooms-head.rp-rooms-head{padding:0 0 14px}
  html body #view .ve .rp-room-rows{padding:0}
  html body #view .ve .rp-rooms-title h3{font-size:22px}
  html body #view .ve .rp-rooms-title .rp-rooms-quiet,html body #view .ve .rp-rooms-title .rp-rooms-do{font-size:17px}
  html body #view .ve .rp-rooms-head .rp-rooms-edit .rp-add-room{border-radius:8px;min-height:48px;font-size:17px}

  /* 28 and 27: a closed room is a white card, a 84x74 picture, the name over its tick pill, a chevron at the right. */
  html body #view .ve .rp-wiz-rooms .rp-room-main.ve-room{grid-template-columns:84px minmax(0,1fr) 28px;padding:16px;gap:12px 16px}
  html body #view .ve .rp-room-main .ve-room-thumb{width:84px;height:74px}
  html body #view .ve .rp-room-main .rp-room-name b{font-size:19px}
  html body #view .ve .rp-room-main .rp-room-name .rp-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;font-size:15px;font-weight:500}
  html body #view .ve .rp-room-main .rp-room-name .rp-pill svg{width:16px;height:16px;stroke-width:2.4}
  html body #view .ve .rp-room-chev svg{width:24px;height:24px}

  /* 21: an open room is not a card. It sits on the page: the picture, the name over a green tick and "Clip added", a chevron
     down, a hairline, then its parts. */
  html body #view .ve .rp-room-row.is-open,html body #view .ve .rp-room-row.is-open+.rp-room-row.is-open{border:0;border-radius:0;background:transparent}
  html body #view .ve .rp-room-row.is-open .rp-room-main.ve-room{grid-template-columns:98px minmax(0,1fr) 28px;padding:12px 0 16px;border-bottom:1px solid var(--line)}
  html body #view .ve .rp-room-row.is-open .rp-room-main .ve-room-thumb{width:98px;height:74px}
  html body #view .ve .rp-room-row.is-open .rp-room-main .rp-room-name b{font-size:21px}
  html body #view .ve .rp-room-row.is-open .rp-room-main .rp-room-name .rp-pill{padding:0;border-radius:0;background:none;font-size:16px;font-weight:400;color:var(--ink-2)}
  html body #view .ve .rp-room-row.is-open .rp-room-main .rp-room-name .rp-pill svg{box-sizing:border-box;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--sig);color:var(--on-sig)}

  /* 21: the steps. Each is a numbered grey disc, its label small over its instruction at 18px, a hairline between steps. The
     Middle is the part she does, so its disc is filled green and a green bar runs down its left edge. Replaces the dots and the
     grey rail of the earlier rule: same selectors, so these come later and win. */
  html body #view .ve .rp-room-moves:has(.rp-move-mid){counter-reset:rp-step;margin:0;padding:0;border-top:0}
  html body #view .ve .rp-room-moves:has(.rp-move-mid) :is(.rp-move,.rp-move-mid){counter-increment:rp-step;padding:20px 0 20px 56px;border-top:1px solid var(--line);font-size:18px;line-height:1.45}
  html body #view .ve .rp-room-moves:has(.rp-move-mid) :is(.rp-move,.rp-move-mid):first-child{border-top:0}
  html body #view .ve .rp-room-moves:has(.rp-move-mid) :is(.rp-move,.rp-move-mid)::before{content:counter(rp-step);display:grid;place-items:center;left:0;top:20px;width:36px;height:36px;border:0;
    background:var(--card-2);font-size:18px;font-weight:500;line-height:1;color:var(--ink)}
  html body #view .ve .rp-room-moves:has(.rp-move-mid) .rp-move-mid::before{background:var(--sig);color:var(--on-sig)}
  html body #view .ve .rp-room-moves:has(.rp-move-mid) :is(.rp-move,.rp-move-mid):not(:last-child)::after{content:none}
  html body #view .ve .rp-room-row .rp-room-main .rp-room-moves:has(.rp-move-mid) .rp-move-mid::after{content:"";position:absolute;left:-6px;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--sig)}
  html body #view .ve .rp-room-moves:has(.rp-move-mid) :is(.rp-move,.rp-move-mid) i{margin-bottom:4px;font-size:13px;letter-spacing:.08em}
  html body #view .ve .rp-room-moves .rp-mid{line-height:1.45}
  /* 21: the 2x suggestion is a tip box, a bulb at the left, "Or try 2x:" in ink and the rest grey. A one-row room is the instruction alone at
     the step's size. */
  html body #view .ve .rp-room-moves .rp-2x{display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding:14px 16px 14px 12px;border-radius:12px;font-size:16px;line-height:1.45}
  html body #view .ve .rp-room-moves .rp-2x>svg{display:block;flex:none;width:22px;height:22px;margin-top:2px;color:var(--ink-3)}
  html body #view .ve .rp-room-moves .rp-move-one{padding:20px 0;font-size:18px;line-height:1.45}

  /* 29 and 27: Clip options is a full-width row: the scissors, its words, a chevron at the right. The chevron stays pointing down
     (comp 27; review-verdicts.test.ts pins it); comp 29 draws it pointing right, which is the one thing not taken. */
  html body #view .ve .rp-room-acts>.rp-clip-menu{display:block;width:100%;margin-left:0}
  html body #view .ve .rp-room-acts>.rp-clip-menu>summary{display:flex;align-items:center;justify-content:flex-start;gap:14px;width:100%;min-height:56px;padding:0 16px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);font-size:17px;color:var(--ink)}
  html body #view .ve .rp-room-acts>.rp-clip-menu>summary svg:first-child{width:22px;height:22px}
  html body #view .ve .rp-room-acts>.rp-clip-menu>summary svg:last-child{margin-left:auto;width:22px;height:22px}

  /* 29: Extra footage is flat on the page under a hairline: its title with Optional, its sentence, a full-width outlined
     Add extra footage, a hairline, then Delete this room with a red bin. The button sits in the heading's box in the markup, so
     the heading is dissolved into the section's grid and the button ordered below the sentence; the delete keeps its place and
     its confirmation. */
  html body #view .ve .rp-xf{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:12px 14px;margin:8px 0 14px;padding:22px 0 0;border-top:1px solid var(--line);border-radius:0;background:none}
  html body #view .ve .rp-xf-head{display:contents}
  html body #view .ve .rp-xf-head b{font-size:22px}
  html body #view .ve .rp-xf-head .ve-quiet{font-size:17px}
  html body #view .ve .rp-xf>:is(.rp-xf-none,.rp-xf-list,.rp-unit-last){grid-column:1 / -1}
  html body #view .ve .rp-xf-none{font-size:17px;line-height:1.5}
  html body #view .ve .rp-xf-head .rp-xf-add{grid-column:1 / -1;order:3;justify-content:center;width:100%;margin:0;min-height:52px;border-radius:8px;font-size:17px}
  html body #view .ve .rp-xf>.rp-xf-foot{grid-column:1 / -1;order:4;justify-content:flex-start;margin-top:6px;padding-top:18px;border-top:1px solid var(--line)}
  html body #view .ve .ve-link.rp-room-delete{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:18px;text-decoration:none}
  html body #view .ve .ve-link.rp-room-delete svg{width:26px;height:26px}
  html body #view .ve .ve-link.rp-room-delete span{text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}

  /* 28: the dock is one row: the step's line at the left, the next step's button at the right at its own width. Replaces the
     stacked line over a full-width button, in the same selectors as the dock rules above (these come after). */
  html body #view .ve-step:has(>section.rp-wiz)>.ve-gate{flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px}
  html body #view .ve-step:has(>section.rp-wiz)>.ve-gate .ve-gate-text{flex:1 1 150px;margin:0}
  html body #view .ve-step:has(>section.rp-wiz)>.ve-gate .solid{flex:0 0 auto;min-width:0;padding:0 22px}

  /* Owner design comps, 22 Oct 2026 (3-room-list, 1-room-open), phones only (430px and under). Written to match the comps:
     a closed room is a white card with a light edge, a 78x67 tile, the name at 19px, a chevron near the edge and an OUTLINED
     Choose clip (only the open room's Choose clip is solid green). An open room is a white card of its own: a 62px tile in green,
     the name large, START and END as two grey rounded rows led by a ring (a dot for the start, a square for the end), then the
     solid Choose clip; Extra footage is a second white card under it, and Delete this room hangs below that, red, with no
     underline. Markup is untouched, so this block cannot reach the desktop sheets. */
  @media (max-width:430px){
    html body #view .ve .rp-wiz-rooms .rp-room-rows{gap:16px}
    html body #view .ve .rp-wiz-rooms .rp-room-row:not(.is-open),html body #view .ve .rp-wiz-rooms .rp-room-row.is-open+.rp-room-row:not(.is-open){border-color:color-mix(in srgb,var(--ink) 16%,transparent)}
    html body #view .ve .rp-wiz-rooms .rp-room-row:not(.is-open) .rp-room-main.ve-room{grid-template-columns:78px minmax(0,1fr) 28px;gap:14px 18px;padding:16px}
    html body #view .ve .rp-wiz-rooms .rp-room-row:not(.is-open) .rp-room-main .ve-room-thumb{width:78px;height:67px}
    html body #view .ve .rp-wiz-rooms .rp-room-row:not(.is-open) .rp-room-main .rp-room-name b{font-size:19px;font-weight:500}
    html body #view .ve .rp-wiz-rooms .rp-room-row:not(.is-open) .rp-room-chev{justify-self:end;margin-right:-8px}
    html body #view .ve .rp-wiz-rooms .rp-room-chev svg{stroke-width:2.2}
    /* Choose clip: 52px tall, 17px, a 22px icon; outlined on a closed room, solid on the open one. */
    html body #view .ve .rp-wiz-rooms .rp-room-row .rp-room-acts>label.solid{gap:10px;min-height:52px;border-radius:10px;font-size:17px;font-weight:500}
    html body #view .ve .rp-wiz-rooms .rp-room-row .rp-room-acts>label.solid svg{width:22px;height:22px}
    html body #view .ve .rp-wiz-rooms .rp-room-row:not(.is-open) .rp-room-acts>label.solid{border:1.5px solid var(--sig)!important;background:var(--card)!important;color:var(--sig)!important}

    /* The open room: a card of its own. */
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main.ve-room{grid-template-columns:62px minmax(0,1fr) 28px;gap:19px 21px;margin-bottom:20px;padding:24px 16px 20px;
      border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:14px;background:var(--card)}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .ve-room-thumb{width:62px;height:62px;margin-left:4px;color:var(--sig)}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-name b{font-size:23px;font-weight:700}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-chev{justify-self:end;margin-right:-4px}

    /* START and END: grey rounded rows, a ring at the left, the label small over the instruction. The Middle, where a format has one,
       is the same row with a filled green disc and an arrow. */
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0;padding:0;border:0}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves :is(.rp-move,.rp-move-mid){position:relative;display:block;box-sizing:border-box;min-height:82px;margin:0;padding:20px 16px 20px 68px;
      border:0;border-radius:12px;background:var(--card-2);font-size:17px;line-height:1.4;color:var(--ink)}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves :is(.rp-move,.rp-move-mid) i{display:block;margin:0 0 3px;font-size:12px;font-weight:500;letter-spacing:.09em;color:var(--ink-3)}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves :is(.rp-move,.rp-move-mid)::before{content:"";position:absolute;left:17px;top:50%;display:block;box-sizing:border-box;width:30px;height:30px;margin:0;
      transform:translateY(-50%);border:2.5px solid var(--sig);border-radius:50%;background:radial-gradient(circle,var(--sig) 0 6.5px,transparent 7px)}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves .rp-move:last-child::before{background:linear-gradient(var(--sig),var(--sig)) center/12px 12px no-repeat}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves .rp-move-mid::before{top:20px;transform:none;border-color:var(--sig);
      background:var(--sig) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves :is(.rp-move,.rp-move-mid)::after{content:none}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves .rp-2x{margin-top:12px;background:var(--card)}
    /* A one-row room (r258): the single instruction as one grey rounded row, no ring and no label. */
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves .rp-move-one{box-sizing:border-box;margin:0;padding:20px 16px;border-radius:12px;background:var(--card-2);font-size:17px;line-height:1.4}

    /* Extra footage: a second white card; Delete this room hangs under it. */
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf{position:relative;margin:0;padding:20px 18px 22px;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:14px;background:var(--card)}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf-head b{font-size:22px;font-weight:700}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf-head .ve-quiet,html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf-none{font-size:17px;line-height:1.4}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf-head .rp-xf-add{gap:12px;min-height:53px;border:1.5px solid color-mix(in srgb,var(--ink) 40%,transparent);border-radius:10px;background:var(--card);font-size:17px;font-weight:400;color:var(--ink)}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf:has(>.rp-xf-foot:last-child>.rp-room-delete){margin-bottom:78px}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf>.rp-xf-foot:last-child:has(>.rp-room-delete){position:absolute;left:4px;top:100%;margin:26px 0 0;padding:0;border:0}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .ve-link.rp-room-delete{gap:20px;min-height:44px;padding:0;font-size:18px;font-weight:400;color:var(--bad,#b3402f)}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .ve-link.rp-room-delete svg{width:24px;height:24px}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .ve-link.rp-room-delete span{text-decoration:none}
  }
  /* 320 to 359: the name column is under 120px at the comp's sizes, so the open room's name ("Living room") broke in two; the tile,
     the gaps and the name come down a step, and the rows' ring and indent with them. */
  @media (max-width:359px){
    html body #view .ve .rp-wiz-rooms .rp-room-row:not(.is-open) .rp-room-main.ve-room{grid-template-columns:64px minmax(0,1fr) 28px;gap:12px 12px}
    html body #view .ve .rp-wiz-rooms .rp-room-row:not(.is-open) .rp-room-main .ve-room-thumb{width:64px;height:56px}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main.ve-room{grid-template-columns:52px minmax(0,1fr) 28px;gap:16px 12px;padding:20px 14px 18px}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .ve-room-thumb{width:52px;height:52px;margin-left:0}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-name b{font-size:20px}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves :is(.rp-move,.rp-move-mid){padding:18px 12px 18px 56px;font-size:16px}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves :is(.rp-move,.rp-move-mid)::before{left:14px;width:28px;height:28px}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves .rp-move-mid::before{top:18px}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf{padding:18px 14px 20px}
    html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf-head b{font-size:20px}
  }

  /* =================================================================================================================
     THE REVIEW, rebuilt (owner design, 22 Oct 2026; comps m1 to m3 in scratch-tmp/desktop-2026-10-22/review). Phone only.
     Overview and By clip are a column of cards on the page: the title and its two tabs, the player, the strip of clips, then
     Reel settings or the clip's panel; the foot stays the docked Export reel and More (Back and Make more are in More, as
     the earlier phone rulings have them). It replaces the earlier phone Review's one-column Preview card and text tabs for
     a stepped reel; a reel made before plans keeps the old rules above. Every class is rv-; no grade is named.
     Differences from the comps, each deliberate: the tabs are 50px tall (the comps' bar is under 44px, the touch floor in
     plinth-mobile.css); the clip's Caption text and its play and Show captions controls stack (the comps' side-by-side
     boxes leave 40% of the width for a caption that may run to 200 characters); the up-to-date line stays on its own line
     under the header (its words are pinned, and "Preview up to date" does not fit beside "Full reel 540p . 30fps").
     ================================================================================================================= */
  html body #view .ve .rp-wiz-head.rv-head{display:grid;gap:14px;margin:6px 0 16px}
  html body #view .ve .rv-view-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:10px}
  html body #view .ve .rv-view-tab{min-width:0;min-height:50px;padding:0 8px;font-size:17px;text-align:center}
  html body #view .ve .rv-wrap input[type=range]{background:transparent!important}

  /* The check box dissolves so the strip, which follows it in the page, can sit between the player and the panel. */
  html body #view .ve .ve-check.rp-check.rv-wrap{display:contents}
  html body #view .ve .rv-wrap>.ve-stage{order:1;gap:12px;margin:0 0 12px;padding:16px!important;border:1px solid var(--line-2)!important;border-radius:14px!important;background:var(--card)!important;box-shadow:none!important}
  html body #view .ve-step[data-step=preview] .rv-clips{order:2;margin:0 0 12px;padding:10px 10px 12px;border:1px solid var(--line-2);border-radius:14px;box-shadow:none}
  html body #view .ve .rv-wrap>.ve-check-side{order:3;gap:0;margin:0 0 16px;padding:16px!important;border:1px solid var(--line-2)!important;border-radius:14px!important;background:var(--card)!important;box-shadow:none!important}
  html body #view .ve-step[data-step=preview]:has(.rv-wrap)>.ve-gate{order:9}
  html body #view .ve .rv-wrap>.ve-stage>.ve-phone{width:min(190px,54%);max-width:none;justify-self:center}
  /* A render in progress is not a film, and it does not fit the shape of one. The stage is 190px wide and 9:16, which is
     right for a preview and far too small for a title, four steps, a clock and a line of help: the frame is absolutely
     positioned, centred and clipped, so the content spilled out of both ends. The owner's phone showed "Making your
     preview" sitting on top of "Cutting your clips" with the last line cut off mid-word (29 Oct 2026). While the steps
     are on screen the stage sizes to them instead, and goes back to being a phone the moment there is a video to show. */
  html body #view .ve .rv-wrap>.ve-stage>.ve-phone:has(.ve-phases){width:100%;aspect-ratio:auto;overflow:visible}
  html body #view .ve .ve-phone:has(.ve-phases)>.ve-frame{position:static;inset:auto;overflow:visible}

  /* The player's header: the name between its arrows, "This clip" for the tag; the full reel's with its size beside it. */
  html body #view .ve .rv-t-wide{display:none}
  html body #view .ve .rv-t-narrow{display:inline}
  html body #view .ve .rv-stage-clip{grid-template-columns:48px minmax(0,1fr) 48px}
  html body #view .ve .rv-arrow{width:48px;height:48px}
  html body #view .ve .rv-stage-mid .ve-stage-h{font-size:21px}
  html body #view .ve .rv-wrap.is-overview .rp-stage-top{justify-content:flex-start}

  /* The clips: three across and the rest by a swipe, a picture over its name over its state (m1 to m3). The strip's heading is the
     Overview's on a desktop only; By clip says "Changes apply to this clip only." under the pictures. */
  html body #view .ve .rv-clips-head{display:none}
  html body #view .ve .rv-clips-note{display:block}
  html body #view .ve .rv-clip-list{gap:8px;padding:2px 2px 6px}
  html body #view .ve .rv-clip-cell{flex:0 0 calc((100% - 16px) / 3)}
  html body #view .ve .rv-clip-join{display:none}
  html body #view .ve .rv-clip{flex-direction:column;align-items:stretch;gap:8px;padding:6px 6px 10px;text-align:center}
  html body #view .ve .rv-clip.is-on{padding:5px 5px 9px}
  html body #view .ve .rv-clip-pic{flex:none;aspect-ratio:4 / 3}
  html body #view .ve .rv-clip-txt{justify-items:center;gap:6px}
  html body #view .ve .rv-clip-name{font-size:16px}
  html body #view .ve .rv-clip-act{gap:6px;font-size:14.5px}
  html body #view .ve .rv-clip-state{padding:3px 8px;border-radius:10px;font-size:12.5px;line-height:1.25}

  /* The panel's head: Reel settings with its scope; a clip's name is already over its player, so the panel starts at its tabs. */
  html body #view .ve .rv-panel-title{font-size:22px;white-space:nowrap}
  html body #view .ve .rv-scope{flex:0 1 150px;min-width:0;min-height:46px;font-size:16px}
  /* Reel settings' colours sit in one row, as in m3: the hex box is the desktop's. */
  html body #view .ve .rv-wrap.is-overview .rp-said-row>.rp-read{display:none}
  html body #view .ve .rv-wrap.is-overview .rp-said-row{grid-template-columns:minmax(0,1fr)}
  html body #view .ve .rv-wrap .rp-said{gap:10px}
  html body #view .ve .rv-wrap.is-overview .rp-said-sw,html body #view .ve .rv-wrap.is-overview .rp-said-wheel{width:34px;height:34px}
  html body #view .ve .rv-panel-clip{display:none}
  html body #view .ve .rv-ctabs{margin:0 0 14px;border-radius:10px}
  html body #view .ve .rv-ctab{min-height:50px;font-size:17px}

  /* Groups that fold: a row that says what it is set to, a chevron at the right, opening on a tap. Colour and Audio on the
     Overview are flat rows on rules (m3); on a clip each is a card of its own (m1). */
  html body #view .ve .rv-fold .rp-set-h{position:relative;min-height:48px;margin:0;padding-right:36px}
  html body #view .ve .rv-fold-btn{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:flex-end;margin:0;padding:0 2px;border:0;border-radius:0;background:none;color:var(--ink-2)}
  html body #view .ve .rv-fold-btn svg{width:24px;height:24px;transition:transform .15s}
  html body #view .ve .rv-fold.is-open .rv-fold-btn svg{transform:rotate(180deg)}
  html body #view .ve .rv-fold-val{display:block;grid-column:2;color:var(--ink-3);font-size:15px;font-weight:400;line-height:1.3}
  html body #view .ve .rv-fold.is-open .rv-fold-val{display:none}
  html body #view .ve .rv-fold:not(.is-open)>.rv-set-body{display:none}
  html body #view .ve .rv-wrap.is-overview .rp-set{gap:0}
  html body #view .ve .rv-wrap.is-overview .rp-set-group{gap:0;padding:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
  html body #view .ve .rv-wrap.is-overview .rp-set-group.rv-fold .rp-set-h{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:10px;row-gap:0;padding:12px 36px 12px 0}
  html body #view .ve .rv-wrap.is-overview .rv-fold .rp-set-h>svg{grid-row:1 / span 2;align-self:center}
  html body #view .ve .rv-wrap.is-overview .rv-fold .rp-set-h>span{grid-column:2;font-size:18px;font-weight:600}
  html body #view .ve .rv-wrap.is-overview .rv-fold.is-open .rp-set-h{grid-template-rows:auto}
  html body #view .ve .rv-wrap.is-overview .rv-fold.is-open>.rv-set-body{padding:2px 0 16px}
  html body #view .ve .rv-wrap.is-overview .rp-cap-group{padding:16px 0 4px}
  html body #view .ve .rv-wrap.is-overview .rp-cap-group .rp-set-h{margin:0 0 6px}
  html body #view .ve .rv-wrap.is-clip .rv-cset{gap:12px}
  html body #view .ve .rv-cset .rp-set-group,html body #view .ve .rv-cset .rp-set-group+.rp-set-group,html body #view .ve .rv-cset .rp-set-group:first-child,html body #view .ve .rv-cset .rp-set-group:last-child{gap:0;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);box-shadow:none}
  html body #view .ve .rv-cset .rv-fold .rp-set-h{display:grid;grid-template-columns:30px auto minmax(0,1fr);align-items:center;column-gap:10px;padding-right:36px}
  html body #view .ve .rv-cset .rv-fold .rp-set-h>svg{grid-column:1}
  html body #view .ve .rv-cset .rv-fold .rp-set-h>span{grid-column:2;font-size:18px;font-weight:600}
  html body #view .ve .rv-cset .rv-fold .rv-fold-val{grid-column:3;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
  html body #view .ve .rv-cset .rv-fold .rp-set-h{column-gap:8px}
  html body #view .ve .rv-cset .rv-fold.is-open>.rv-set-body{padding:6px 0 4px}

  /* Use reel settings: a row with its switch at the right, the words in green (m1). */
  html body #view .ve .rv-use{position:static;display:block;margin:0 0 12px}
  html body #view .ve .rv-switch{width:100%;justify-content:space-between;color:var(--sig);font-size:16px}
  html body #view .ve .rv-switch-l{font-size:16px}
  html body #view .ve .rv-badge{display:none}
  html body #view .ve .rv-reset{padding:8px 0;font-size:16px}
  html body #view .ve .rv-reset span{text-decoration:underline;text-underline-offset:4px}
  html body #view .ve .rv-reset:disabled span{text-decoration:none}

  /* Audio and Captions on a clip: the read-only song over its hint; the two level sliders as the reel's rows are; the Captions row's
     how-it-is-set and its arrow to the Caption text tab. */
  html body #view .ve .rv-cset .rp-set-row,html body #view .ve .rp-check .rv-cset .rp-set-row{grid-template-columns:minmax(0,1fr) 72px}
  html body #view .ve .rp-check .rv-track-ro{grid-template-columns:minmax(0,1fr)}
  html body #view .ve .rv-track-ro-box{min-height:48px;border-radius:10px;font-size:16px}
  html body #view .ve .rv-track-hint{font-size:14px}
  html body #view .ve .rv-cs-sum .rp-set-h{grid-template-columns:30px auto minmax(0,1fr) auto;min-height:48px;column-gap:10px}
  html body #view .ve .rv-cs-sum .rp-set-h>span:not(.rv-cs-line){font-size:18px;font-weight:600}
  html body #view .ve .rv-cs-line{justify-self:end;gap:5px;font-size:14px;white-space:nowrap}
  html body #view .ve .rv-cs-sum .rp-set-h{column-gap:8px}
  html body #view .ve .rv-cs-k{display:none}
  html body #view .ve .rv-wrap.is-overview .rp-said{gap:8px}
  html body #view .ve .rv-wrap.is-overview .rp-said-sw,html body #view .ve .rv-wrap.is-overview .rp-said-wheel{width:32px;height:32px}
  html body #view .ve .rv-cs-edit span{display:none}
  html body #view .ve .rv-cs-edit svg{width:22px;height:22px;color:var(--ink-2)}

  /* Caption text: her words in a box, then the play button and the Show captions switch in a row under it (m2). */
  html body #view .ve .rv-ctext{grid-template-columns:auto minmax(0,1fr);border-radius:12px}
  html body #view .ve .rv-ctext-in{grid-column:1 / -1;min-height:56px;padding:16px;border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;font-size:17px}
  html body #view .ve .rv-ctext .rp-ct-play{min-width:64px;min-height:56px;border-left:0}
  html body #view .ve .rv-ctext .rv-switch{grid-column:2;min-height:56px;padding:0 16px 0 4px;border-left:0;color:var(--ink)}
  html body #view .ve .rv-ctext:not(:has(.rp-ct-play)) .rv-switch{grid-column:1 / -1;padding:0 16px}
  html body #view .ve .rv-ctext-more .ve-link{min-height:44px;font-size:16px}

  /* Caption style: the value box at the right of its label, the slider under it (as the reel's Captions are); the colours in a row. */
  html body #view .ve .rv-cset .rp-said-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:10px 0 4px}
  html body #view .ve .rv-cset .rp-said{justify-content:flex-start;gap:8px}
  html body #view .ve .rv-cset .rp-said-sw,html body #view .ve .rv-cset .rp-said-wheel{width:30px;height:30px}
  html body #view .ve .rv-cset .rp-cap-row{gap:4px 14px;padding:8px 0}
  html body #view .ve .rv-cset .rp-said-none{grid-column:1 / -1}


}


/* ======================================================================================================================
   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 PHONE SCALE FOR REELS (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, of every old phone ruling: "BREAK ALL EXISTING RULES IF NEEDED, NO MORE RULES WILL APPLY".
     Everything above this block was drawn to the earlier, larger phone rulings (the 20 to 22 Oct comps, 16px and 17px type, 48px
     and 56px buttons, 20px gutters). Where a rule below meets one above it, this block wins: it sits last, and its selectors
     carry the same `html body #view .ve` weight. Type and spacing come from the scale tokens at the foot of mobile-media.css and
     nothing here invents a size. THE VIDEO FRAMES ARE NOT TOUCHED: the player's 9:16 box, the scrubber's hit strip, the
     thumbnails' aspect ratio and the demo film keep their geometry. Only the chrome around them comes down.
     Checked by verification/mobile-scale-2026-10-26/walk.mjs and the video-survey scripts beside it.
     ===================================================================================================================== */

  /* The gutter is the app's 16, not the 20 the 22 Oct comps drew. */
  @media (min-width:360px){
    html body #view:has(.ve:not(.vm-fill)){--m-gutter:var(--m-page-x)}
  }

  /* A button the walk can read: its height comes from its padding as well as its floor, so a one-line label is one line tall
     (a bare min-height with no padding looks, to the walk, like two lines of text). The look does not change: the label is centred. */
  html body #view .ve :is(button,summary,a.solid,a.ghost,label.solid,label.ghost):not(.rp-word,.rp-ct-word,.rv-clip,.rp-room-chev,.ve-x){padding-block:var(--m-pad-s)}

  /* ------------------------------------------------------------------------------ the zone's header: title, tips, New reel */
  html body #view .ve>.head h1{font-size:var(--m-h1)!important;line-height:1.15;font-weight:700!important;letter-spacing:-.02em}
  html body #view .ve:has(.ve-finder) .head h1{font-size:var(--m-h1)!important}
  html body #view .ve p.ve-m-sub[hidden]{margin:var(--m-gap-xs) 0 var(--m-gap);font-size:var(--m-body);line-height:1.4}
  html body #view .ve>.head .tools>a:is(.ve-tips,.vm-tips){width:var(--m-tap);height:var(--m-tap);min-height:0;border-radius:var(--m-radius)}
  html body #view .ve>.head .tools>a:is(.ve-tips,.vm-tips) svg{width:20px;height:20px}
  html body #view .ve>.head .tools>.solid{min-height:var(--m-tap);height:var(--m-tap);padding-inline:var(--m-pad);gap:var(--m-gap-s);border-radius:var(--m-radius);font-size:var(--m-body);font-weight:600;white-space:nowrap}
  html body #view .ve>.head .tools>.solid svg{width:18px;height:18px}
  /* An empty library says "New reel" in its own card: the header's second one steps aside, and a search over nothing goes with it. */
  html body #view .ve:has(.slot-empty) .head .tools>.solid{display:none}
  html body #view .ve .ve-library:has(.slot-empty) .tour-library-bar{display:none}
  html body #view .ve .slot-empty{padding:var(--m-pad) var(--m-gap-l)}
  html body #view .ve .slot-empty-art{width:160px;max-width:100%;margin:0 auto var(--m-gap)}
  html body #view .ve .slot-empty-title{margin:0 0 var(--m-gap-xs);font-size:var(--m-h4);line-height:1.25}
  html body #view .ve .slot-empty-line{margin:0 0 var(--m-gap);font-size:var(--m-body);line-height:1.4}
  html body #view .ve .slot-empty .solid{min-height:var(--m-tap);padding-inline:var(--m-gap-l);border-radius:var(--m-radius);font-size:var(--m-body)}
  html body #view .ve .ve-empty{padding:var(--m-gap-l) var(--m-pad);font-size:var(--m-body)}
  html body #view .ve .ve-empty b{font-size:var(--m-body-lg)}
  html body #view .ve .ve-empty p,html body #view .ve .ve-none{font-size:var(--m-body)}
  html body #view .ve .ve-empty .ghost{min-height:var(--m-control);padding-inline:var(--m-gap-l);border-radius:var(--m-radius);font-size:var(--m-body)}

  /* ------------------------------------------------------------------------------------------------ the library */
  html body .ve .ve-library .tour-library-bar{gap:var(--m-gap-s);padding:0 0 var(--m-gap)!important}
  html body .ve .ve-library .tour-library-bar>label:first-child{height:var(--m-control);padding:0 var(--m-gap);gap:var(--m-gap-s);border-radius:var(--m-radius)}
  html body .ve .ve-library .tour-library-bar>label:first-child svg{width:18px;height:18px}
  html body .ve .ve-library .tour-library-bar>label:first-child input{font-size:var(--m-input)}
  html body .ve .ve-library .ve-lib-filter{min-height:var(--m-control);height:var(--m-control);padding-block:0;border-radius:var(--m-radius);font-size:var(--m-input)}
  html .ve .tour-table{gap:var(--m-gap-s)}
  html body #view .tour-library-row.ve-row{grid-template-columns:56px minmax(0,1fr)!important;gap:0 var(--m-gap)!important;padding:var(--m-pad)!important;border-radius:var(--m-radius)!important}
  html .ve .ve-row .ve-cover{width:56px;border-radius:8px}
  html .ve .ve-row .ve-row-title{padding-right:var(--m-tap)}
  html .ve .ve-row .ve-row-text b{font-size:var(--m-body-lg)!important;line-height:1.3;font-weight:600!important;letter-spacing:0;-webkit-line-clamp:2}
  html .ve .ve-row .ve-m-addr[hidden]{margin-top:var(--m-gap-xs);font-size:var(--m-cap);line-height:1.3}
  html .ve .ve-row .ve-m-pill[hidden]{height:22px;margin-top:var(--m-gap-s);padding:0 var(--m-gap-s);gap:6px;font-size:var(--m-cap)}
  html .ve .ve-row .ve-m-pill::before{width:6px;height:6px}
  html .ve .ve-row .ve-m-facts[hidden]{display:flex;flex-wrap:wrap;gap:var(--m-gap-xs) var(--m-gap);margin-top:var(--m-gap-s)}
  html .ve .ve-row .ve-m-fact{gap:var(--m-gap-xs);font-size:var(--m-cap);line-height:1.3}
  html .ve .ve-row .ve-m-fact svg{display:none}
  html .ve .ve-row .ve-m-k{flex:none;padding-right:0}
  html .ve .ve-row .ve-m-k::after{content:":"}
  html .ve .tour-library-row.ve-row>span:last-child:has(.ve-chip-stale){margin-top:var(--m-gap-s)}
  html .ve .ve-row .ve-m-foot[hidden]{min-height:var(--m-control);margin-top:var(--m-gap-s);padding-top:0}
  html .ve .ve-row .ve-m-len{font-size:var(--m-cap)}
  html .ve .ve-row .ve-m-go{gap:var(--m-gap-xs);font-size:var(--m-body)}
  html .ve .ve-row .ve-m-go svg{width:16px;height:16px}
  /* the kebab: a 44px target (the floor), sitting in the card's corner */
  html .ve .ve-row-wrap>.ve-km[hidden]{top:var(--m-gap-xs);right:var(--m-gap-xs)}
  html .ve .ve-km .ve-km-menu>summary{width:var(--m-tap);height:var(--m-tap);min-height:var(--m-tap);padding:0;border-radius:var(--m-radius)}
  html .ve .ve-km .ve-km-menu>summary svg{width:20px;height:20px}
  html .ve .ve-km .ve-km-menu .ve-menu-panel{min-width:180px;padding:var(--m-gap-xs);border-radius:var(--m-radius)}
  html .ve .ve-km .ve-km-menu .ve-menu-panel button{min-height:var(--m-tap);gap:var(--m-gap-s);padding-inline:var(--m-gap-s);font-size:var(--m-body)}
  html .ve .ve-km .ve-km-menu .ve-menu-panel button svg{width:18px;height:18px}
  html .ve .ve-row-wrap>.ve-row-remove.is-asking{gap:var(--m-gap-s);padding:var(--m-pad);border-radius:var(--m-radius)}
  html .ve .ve-row-remove.is-asking .ve-quiet{font-size:var(--m-body-lg)}
  html .ve .ve-row-remove.is-asking .ve-link{min-height:var(--m-tap);border-radius:var(--m-radius);font-size:var(--m-body)}
  html body #view .ve .tour-library-card.tour-library-card .tour-pagination{font-size:var(--m-cap)}
  html body #view .ve .tour-library-card.tour-library-card .tour-pagination button{min-height:var(--m-control);font-size:var(--m-body)}

  /* ---------------------------------------------------------------------------------------- New reel: the questions */
  html body #view .ve .rp-ask{gap:var(--m-gap);padding:var(--m-pad)}
  html body #view .ve .rp-q-title{margin-bottom:var(--m-gap-s);font-size:var(--m-body-lg);font-weight:600}
  html body #view .ve .rp-q-sub{margin:0 0 var(--m-gap-s);font-size:var(--m-body)}
  html body #view .ve .rp-opts{gap:var(--m-gap-s)}
  html body #view .ve .rp-opts:not(.is-big) .rp-opt{min-height:var(--m-tap);padding-inline:var(--m-gap);font-size:var(--m-body)}
  html body #view .ve .rp-opts.is-big{gap:var(--m-gap-s)}
  html body #view .ve .rp-opt.has-sub{grid-template-columns:24px minmax(0,1fr) 20px;column-gap:var(--m-gap);row-gap:2px;min-height:var(--m-tap);padding:var(--m-gap-s) var(--m-gap)}
  html body #view .ve .rp-opt.has-sub .rp-opt-ico{width:20px;height:20px}
  html body #view .ve .rp-opt.has-sub b{font-size:var(--m-body-lg);font-weight:600;line-height:1.25}
  html body #view .ve .rp-opt.has-sub small{font-size:var(--m-cap);line-height:1.35}
  html body #view .ve .rp-opt .rp-radio{width:18px;height:18px}
  html body #view .ve .rp-answers{margin:var(--m-gap-xs) 0 var(--m-gap);font-size:var(--m-body);line-height:1.4}

  /* the crumb is a back link: a 44px target that does not take a row of its own for its one word */
  html body #view .ve .head .crumb{min-height:var(--m-control);margin:0}
  html body #view .ve:has(.ve-finder) .head .crumb{min-height:var(--m-control);margin:0 0 var(--m-gap-xs)}
  html body #view .ve .head .crumb,html body #view .ve:has(.ve-finder) .head .crumb button{font-size:var(--m-body)!important}
  html body #view .ve:has(.ve-finder) .head .crumb button{min-height:var(--m-control);gap:var(--m-gap-xs)}
  html body #view .ve:has(.ve-finder) .head .crumb button::before{width:18px;height:18px}

  /* ----------------------------------------------------------------------------------- New reel: which home */
  html body #view .ve:has(.ve-finder) .ve-finder{margin:var(--m-gap-l) 0 0}
  html body #view .ve:has(.ve-finder) .ve-finder::before{margin:0 0 var(--m-gap-s);font-size:var(--m-body-lg);font-weight:600;color:var(--ink)}
  html body #view .ve:has(.ve-finder) .ve-finder>.card{border-radius:var(--m-radius)}
  html body #view .ve:has(.ve-finder) .ve-finder .fbar{gap:var(--m-gap-s);min-height:var(--m-tap);padding:0 var(--m-gap)}
  html body #view .ve:has(.ve-finder) .ve-finder .fbar svg{width:18px;height:18px}
  html[data-theme] body #view .ve:has(.ve-finder) .ve-finder .fbar input{height:var(--m-tap);font-size:var(--m-input)}
  html body #view .ve:has(.ve-finder) .ve-finder .fbar:has(input:placeholder-shown)::after{left:calc(var(--m-gap) + 18px + var(--m-gap-s));font-size:var(--m-input)}
  html body #view .ve:has(.ve-finder) .ve-shelves.p86-shelves{gap:var(--m-gap-l);margin:var(--m-gap-l) 0 0}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfcol{gap:var(--m-gap-s)}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfcap{margin:0;font-size:var(--m-cap)!important;letter-spacing:.08em}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow{grid-template-columns:36px minmax(0,1fr) 20px;column-gap:var(--m-gap);min-height:var(--m-tap)!important;padding:var(--m-gap-s) var(--m-gap);border-radius:var(--m-radius)}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow::before{width:36px;height:36px;border-radius:var(--m-gap-s)}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow .sr1::before{left:calc(var(--m-gap) + 9px);width:18px;height:18px;margin-top:-9px}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow::after{width:20px;height:20px;-webkit-mask-size:20px;mask-size:20px}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow .sr1{font-size:var(--m-body-lg);font-weight:600}
  html body #view .ve:has(.ve-finder) .ve-shelves .shelfrow .sr2{font-size:var(--m-cap)!important}
  html body #view .ve .ve-finder .sugg button,html body #view .ve .ve-finder .sugg .none{font-size:var(--m-body)}
  html body #view .ve .ve-finder .sugg .k{font-size:var(--m-cap)!important}
  /* Back sits at the foot on the right, not alone on a row of its own: the ask's and the pick's footers stay one slim row. */
  html body #view .ve:has(.ve-finder) .ve-gate.ve-details-foot.rp-foot{margin-top:var(--m-gap)}
  html body #view .ve:has(.ve-finder) .ve-gate .ghost{min-height:var(--m-control)!important;padding-inline:var(--m-gap-l);border-radius:var(--m-radius);font-size:var(--m-body)}

  /* The way back from a screen is a chevron beside the screen's title, not a word on a row of its own (a row that held one
     lonely control, "Reels", in otherwise empty space). The button keeps its name for a screen reader and is a 44px target. */
  html body #view .ve>.head:has(>.crumb>button:only-child){display:grid;grid-template-columns:var(--m-tap) minmax(0,1fr);align-items:center;column-gap:var(--m-gap-xs);margin-left:calc(-1 * var(--m-gap-s))}
  html body #view .ve>.head:has(>.crumb>button:only-child)>.crumb{grid-column:1;grid-row:1;min-height:0;margin:0}
  html body #view .ve>.head:has(>.crumb>button:only-child)>.htop{grid-column:2;grid-row:1;padding-left:0}
  html body #view .ve>.head:has(>.crumb>button:only-child)>:not(.crumb,.htop){grid-column:1 / -1}
  html body #view .ve>.head>.crumb>button:only-child{display:inline-flex;align-items:center;justify-content:center;width:var(--m-tap);height:var(--m-tap);min-height:var(--m-tap);padding:0;font-size:var(--m-body)!important;gap:0;color:transparent}
  html body #view .ve>.head>.crumb>button:only-child::before{content:"";flex:none;width:22px;height:22px;background:var(--ink);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 3.5 6 10l6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 3.5 6 10l6.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat}

  /* Which home: the answers line and the way back to the questions share a row (Back used to sit alone in a footer row of its own). */
  html body #view section.ve:has(.ve-finder){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "note note" "ans back" "find find" "shelves shelves";align-items:center}
  html body #view section.ve:has(.ve-finder)>.head{grid-area:head}
  html body #view section.ve:has(.ve-finder)>.ve-note{grid-area:note}
  html body #view section.ve:has(.ve-finder)>.rp-answers,html body #view .ve:has(.ve-finder) .rp-answers{grid-area:ans;margin:0;font-size:var(--m-cap);line-height:1.35}
  html body #view section.ve:has(.ve-finder)>.ve-gate{grid-area:back;position:static;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
  html body #view section.ve:has(.ve-finder)>.ve-gate .ve-gate-text{display:none}
  html body #view section.ve:has(.ve-finder)>.finderwrap{grid-area:find}
  html body #view section.ve:has(.ve-finder)>.ve-shelves{grid-area:shelves}
  html body #view section.ve:has(.ve-finder)>.ve-gate .ghost{min-height:var(--m-control)!important;padding-inline:var(--m-gap);gap:var(--m-gap-xs)}
  html body #view section.ve:has(.ve-finder)>.ve-gate .ghost svg{width:16px;height:16px}

  /* The format's own header: its name and Try another share a row (Try another sat alone on a row of its own). */
  html body #view .ve .rp-comp{padding:var(--m-pad)}
  html body #view .ve .rp-comp-head{gap:var(--m-gap-s)}
  html body #view .ve .rp-comp-icon{width:var(--m-control);height:var(--m-control)}
  html body #view .ve .rp-comp-icon svg{width:20px;height:20px}
  html body #view .ve .rp-comp .rp-title{flex:1 1 0;font-size:var(--m-h3);line-height:1.2}
  html body #view .ve .rp-comp-tools{margin-left:auto;flex-basis:auto}
  html body #view .ve .rp-comp-tools .rp-try{min-height:var(--m-control);padding-inline:var(--m-gap);gap:var(--m-gap-xs);font-size:var(--m-body)}
  html body #view .ve .rp-sec{grid-template-columns:28px minmax(0,1fr);column-gap:var(--m-gap-s)}
  html body #view .ve .rp-sec-badge{width:28px;height:28px}
  html body #view .ve .rp-sec-h{font-size:var(--m-body-lg);font-weight:600}
  html body #view .ve .rp-comp p,html body #view .ve .rp-sec p{font-size:var(--m-body);line-height:1.45}


  /* =====================================================================================================================
     THE EDITOR: the home card, the step bar, and the filming steps (Opening, Rooms, Ending, One take, Mark walks)
     ===================================================================================================================== */

  /* The home card over the steps: a slim thumbnail, the name, its facts. */
  html body #view .ve .ve-steps-home{gap:var(--m-gap)}
  html body #view .ve .ve-steps-thumb{width:56px;height:40px;border-radius:var(--m-gap-s)}
  html body #view .ve .ve-steps-thumb svg{width:20px;height:20px}
  html body #view .ve .ve-steps-who b{font-size:var(--m-body-lg)!important;line-height:1.25;font-weight:600}
  html body #view .ve .ve-steps-who small{font-size:var(--m-cap)!important;line-height:1.3}
  html body #view .ve .ve-steps-sticky.rp-strip-card .ve-steps-home,html body #view .ve-steps-sticky.rp-strip-card .ve-steps-home{gap:var(--m-gap);padding:var(--m-gap-s) var(--m-gap)}
  html body #view .ve-steps-sticky.rp-strip-card .ve-steps-thumb{width:56px;height:40px}

  /* The stepper: one size at every width, 14px names on 20px badges, a line between. */
  html body #view .ve .ve-tabs.is-numbered{margin:0 0 var(--m-gap);padding:0 0 var(--m-gap-s)}
  html body #view .ve .ve-tabs.is-numbered button{min-height:var(--m-control);font-size:var(--m-body)!important}
  html body #view .ve .ve-tabs.is-numbered .ve-tab-dot{width:20px;height:20px;margin-right:6px;font-size:var(--m-cap)!important}
  html body #view .ve .ve-tabs.is-numbered .ve-tab-dot svg{width:12px;height:12px}
  html body #view .ve .ve-tabs.is-numbered button+button::before{margin:0 var(--m-gap-xs)}
  /* A narrow screen keeps only the open step's word (as a five-step bar already does): the others are their badge. */
  @media (max-width:379px){
    html body #view .ve .ve-tabs.is-numbered button:not([aria-current=true])>span:not(.ve-tab-dot):not(.ve-sr){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    html body #view .ve .ve-tabs.is-numbered button:not([aria-current=true]) .ve-tab-dot{margin-right:0}
  }
  /* the older, un-numbered bar (a reel before its plan, Review's ring-and-tick bar): the same size */
  html body #view .ve:has(.ve-step[data-step=preview] .rp-check) .ve-tabs:not(.is-numbered) button{min-height:var(--m-control);font-size:var(--m-body)!important}
  html body #view .ve:has(.rp-wiz) .ve-tabs button,html body #view .ve .ve-tabs:has([data-section=rooms]) button{min-height:var(--m-control);font-size:var(--m-body)!important}

  /* The step's title: its count in small capitals, the title at the screen-subject size. */
  html body #view .ve .rp-wiz-head .rp-step-n{font-size:var(--m-cap)!important}
  html body #view .ve .rp-wiz-head h2{font-size:var(--m-h2)!important;line-height:1.2}
  html body #view .ve .ve-step[data-step=preview]>.rp-wiz-head{margin:var(--m-gap-xs) 0 var(--m-gap)}

  /* Opening, Ending, One take: two cards, 14px words. */
  html body #view .ve .rp-wiz-grid{gap:var(--m-gap)}
  html body #view .ve .rp-wiz-grid>.rp-wiz-card,html body #view .ve .rp-wiz-grid>.rp-wiz-clips{padding:var(--m-pad);border-radius:var(--m-radius)}
  html body #view .ve .rp-wiz-grid .rp-card-h{gap:var(--m-gap-s);font-size:var(--m-h4)!important}
  html body #view .ve .rp-wiz-grid .rp-card-h svg{width:20px;height:20px}
  html body #view .ve .rp-wiz-grid .rp-quote{padding:var(--m-pad);border-radius:var(--m-radius)}
  html body #view .ve .rp-wiz-grid .rp-quote .rp-star{font-size:var(--m-body-lg)!important;line-height:1.45}
  html body #view .ve .rp-wiz-grid>.rp-wiz-card>section+section{margin-top:var(--m-gap);padding-top:var(--m-gap)}
  html body #view .ve .rp-wiz-grid .rp-how .rp-do{gap:var(--m-gap)}
  html body #view .ve .rp-wiz-grid .rp-how .rp-do li{grid-template-columns:28px minmax(0,1fr);gap:var(--m-gap)}
  html body #view .ve .rp-wiz-grid .rp-do li>span{width:28px;height:28px;font-size:var(--m-body)!important}
  html body #view .ve .rp-wiz-grid .rp-do li>p{padding-top:var(--m-gap-xs);font-size:var(--m-body)!important;line-height:1.45}
  html body #view .ve .rp-wiz-grid .rp-do-one{font-size:var(--m-body)!important;line-height:1.45}
  html body #view .ve .rp-wiz-grid .rp-hint{padding-top:var(--m-gap)}
  html body #view .ve .rp-wiz-grid .rp-hint::before{font-size:var(--m-body)!important}
  html body #view .ve .rp-wiz-grid .rp-clip-card{gap:var(--m-gap)}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone.ve-file{gap:var(--m-gap-s);padding:var(--m-gap-l) var(--m-gap);border-radius:var(--m-radius)}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone.ve-file>svg{width:32px;height:32px}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone.ve-file>b::before{font-size:var(--m-body)!important}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone-btn{min-height:var(--m-tap);min-width:min(200px,100%);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html body #view .ve .rp-wiz-grid .rp-clip-card .ve-dropzone.ve-file>small{font-size:var(--m-cap)!important}
  html body #view .ve .rp-pov-line{font-size:var(--m-body)!important}

  /* Rooms: the two-part switch, the Room clips head, and the rooms. */
  html body #view .ve .rp-rooms-switch{border-radius:var(--m-radius)}
  html body #view .ve .rp-rooms-switch button{min-height:var(--m-tap);padding:var(--m-gap-xs) var(--m-gap-s);column-gap:var(--m-gap-xs);font-size:var(--m-body)!important;line-height:1.2}
  html body #view .ve .rp-rooms-switch button svg{width:18px;height:18px}
  html body #view .ve .rp-count{font-size:var(--m-cap)!important}
  html body #view .ve .ve-rooms-head.rp-rooms-head{gap:var(--m-gap-s);padding:0 0 var(--m-gap)}
  html body #view .ve .rp-rooms-title h3{font-size:var(--m-h4)!important}
  html body #view .ve .rp-rooms-title h3 .ve-quiet{font-size:var(--m-cap)!important}
  html body #view .ve .rp-rooms-title .rp-rooms-quiet,html body #view .ve .rp-rooms-title .rp-rooms-do{font-size:var(--m-body)!important;line-height:1.45}
  html body #view .ve .rp-rooms-title:has(.rp-rooms-do~.rp-rooms-do) .rp-rooms-do{margin-top:var(--m-gap-s);padding-left:36px;min-height:28px}
  html body #view .ve .rp-rooms-title:has(.rp-rooms-do~.rp-rooms-do) .rp-rooms-do::before{width:26px;height:26px;font-size:var(--m-body)!important}
  html body #view .ve .rp-rooms-head .rp-rooms-edit .rp-add-room{min-height:var(--m-control);padding-inline:var(--m-gap);border-radius:var(--m-radius);font-size:var(--m-body)!important;white-space:nowrap}
  html body #view .ve .rp-room-rows{gap:var(--m-gap-s)}
  html body #view .ve .rp-wiz-rooms .rp-room-rows{gap:var(--m-gap-s)}
  html body #view .ve .rp-room-row,html body #view .ve .rp-room-row+.rp-room-row{border-radius:var(--m-radius)}
  html body #view .ve .rp-wiz-rooms .rp-room-main.ve-room,html body #view .ve .rp-wiz-rooms .rp-room-row:not(.is-open) .rp-room-main.ve-room{grid-template-columns:64px minmax(0,1fr) 28px;gap:var(--m-gap-s) var(--m-gap);padding:var(--m-gap)}
  html body #view .ve .rp-room-main .ve-room-thumb,html body #view .ve .rp-wiz-rooms .rp-room-row:not(.is-open) .rp-room-main .ve-room-thumb{width:64px;height:56px;border-radius:var(--m-gap-s)}
  html body #view .ve .rp-room-main .ve-room-thumb svg{width:22px;height:22px}
  html body #view .ve .rp-room-main .rp-room-name b,html body #view .ve .rp-wiz-rooms .rp-room-row:not(.is-open) .rp-room-main .rp-room-name b{font-size:var(--m-body-lg)!important;font-weight:600}
  html body #view .ve .rp-room-main .rp-room-name small{font-size:var(--m-cap)!important}
  html body #view .ve .rp-room-main .rp-room-name .rp-pill{gap:var(--m-gap-xs);padding:2px var(--m-gap-s);font-size:var(--m-cap)!important;margin-top:var(--m-gap-xs)}
  html body #view .ve .rp-room-main .rp-room-name .rp-pill svg{width:14px;height:14px}
  html body #view .ve .rp-room-chev svg{width:20px;height:20px}
  html body #view .ve .rp-wiz-rooms .rp-room-row:not(.is-open) .rp-room-chev{margin-right:0}
  html body #view .ve .rp-room-row:not(.is-open) .rp-room-flag{font-size:var(--m-cap)!important}
  html body #view .ve .rp-wiz-rooms .rp-room-say{font-size:var(--m-body)!important}
  html body #view .ve .rp-room-acts .solid,html body #view .ve .rp-room-acts>label.solid,html body #view .ve .rp-wiz-rooms .rp-room-row .rp-room-acts>label.solid{min-height:var(--m-tap);gap:var(--m-gap-s);border-radius:var(--m-radius);font-size:var(--m-body)!important;font-weight:600}
  html body #view .ve .rp-wiz-rooms .rp-room-row .rp-room-acts>label.solid svg{width:18px;height:18px}
  html body #view .ve .rp-room-acts .ghost,html body #view .ve .rp-room-acts .ve-link{min-height:var(--m-control);font-size:var(--m-body)!important}
  html body #view .ve .rp-room-acts>.rp-clip-menu>summary{min-height:var(--m-tap);gap:var(--m-gap-s);padding-inline:var(--m-gap);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html body #view .ve .rp-room-acts>.rp-clip-menu>summary svg:first-child,html body #view .ve .rp-room-acts>.rp-clip-menu>summary svg:last-child{width:18px;height:18px}
  html body #view .ve .rp-wiz-rooms .rp-room-row .rp-room-notes .ve-fine,html body #view .ve .ve-fine{font-size:var(--m-cap)!important}

  /* An open room: a card with its name, then START, MIDDLE and END as three quiet rows, then Extra footage. */
  html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main.ve-room{grid-template-columns:56px minmax(0,1fr) 28px;gap:var(--m-gap);margin-bottom:var(--m-gap);padding:var(--m-pad);border-radius:var(--m-radius)}
  html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .ve-room-thumb{width:56px;height:56px;margin-left:0}
  html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-name b{font-size:var(--m-h4)!important;font-weight:700}
  html body #view .ve .rp-room-row.is-open .rp-room-main .rp-room-name .rp-pill{font-size:var(--m-body)!important}
  html body #view .ve .rp-room-row.is-open .rp-room-main .rp-room-name .rp-pill svg{width:18px;height:18px}
  html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves{gap:var(--m-gap-s)}
  html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves :is(.rp-move,.rp-move-mid){min-height:0;padding:var(--m-gap) var(--m-gap) var(--m-gap) 52px;border-radius:var(--m-radius);font-size:var(--m-body)!important;line-height:1.4}
  html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves :is(.rp-move,.rp-move-mid) i{font-size:var(--m-cap)!important;letter-spacing:.06em}
  html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves :is(.rp-move,.rp-move-mid)::before{left:var(--m-gap);width:24px;height:24px}
  html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves .rp-move-mid::before{top:var(--m-gap);background-size:14px}
  html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves .rp-move:last-child::before{background-size:10px 10px}
  html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-room-main .rp-room-moves .rp-move-one{padding:var(--m-gap);font-size:var(--m-body)!important}
  html body #view .ve .rp-room-moves .rp-2x{margin-top:var(--m-gap-s);padding:var(--m-gap-s) var(--m-gap);font-size:var(--m-body)!important}
  html body #view .ve .rp-room-moves .rp-2x>svg{width:18px;height:18px}
  html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf,html body #view .ve .rp-xf{padding:var(--m-pad);border-radius:var(--m-radius);gap:var(--m-gap-s) var(--m-gap)}
  html body #view .ve .rp-xf-head b,html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf-head b{font-size:var(--m-h4)!important}
  html body #view .ve .rp-xf-head .ve-quiet,html body #view .ve .rp-xf-none,html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf-head .ve-quiet,html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf-none{font-size:var(--m-body)!important;line-height:1.4}
  html body #view .ve .rp-xf-head .rp-xf-add,html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .rp-xf-head .rp-xf-add{min-height:var(--m-tap);gap:var(--m-gap-s);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html body #view .ve .ve-link.rp-room-delete,html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .ve-link.rp-room-delete{gap:var(--m-gap-s);min-height:var(--m-control);font-size:var(--m-body)!important}
  html body #view .ve .ve-link.rp-room-delete svg,html body #view .ve .rp-wiz-rooms .rp-room-row.is-open .ve-link.rp-room-delete svg{width:18px;height:18px}
  html body #view .ve .rp-xf-card{gap:var(--m-gap-s);padding:var(--m-gap-s)}
  html body #view .ve .rp-xf-card .rp-xf-choose{min-height:var(--m-control)!important}
  html body #view .ve .rp-xf-card .rp-more-menu>summary,html body #view .ve .rp-xf-x{width:var(--m-control);min-height:var(--m-control);height:var(--m-control)}

  /* The Voiceover card. */
  html body #view .ve .ve-vo.rp-vo{gap:var(--m-gap);padding:var(--m-pad)}
  html body #view .ve .rp-vo-head{gap:var(--m-gap-s)}
  html body #view .ve .rp-vo-mic{width:var(--m-control);height:var(--m-control)}
  html body #view .ve .rp-vo-mic svg{width:20px;height:20px}
  html body #view .ve .rp-vo-head h3{font-size:var(--m-h4)!important}
  html body #view .ve .rp-vo-edit{min-height:var(--m-control);padding-inline:var(--m-gap);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html body #view .ve .rp-vo-sub{font-size:var(--m-cap)!important}
  html body #view .ve .rp-vo-script{padding:var(--m-gap);border-radius:var(--m-radius);font-size:var(--m-body)!important;line-height:1.55}
  html body #view .ve .rp-vo-acts{gap:var(--m-gap-s)}
  html body #view .ve .rp-vo-acts .solid,html body #view .ve .rp-vo-acts .ghost{min-height:var(--m-tap);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html body #view .ve .ve-vo-state{font-size:var(--m-cap)!important}
  html body #view .ve .rp-vo-editing .ve-line-input{font-size:var(--m-input)!important}
  html body #view .ve .rp-vo-line,html body #view .ve .rp-vo-room{font-size:var(--m-body)!important}

  /* The words and already-filmed screens (Which rooms did you film, Upload clips). */
  html body #view .ve .rp-words{gap:var(--m-gap);padding:var(--m-pad)}
  html body #view .ve .rp-words .rp-notes-title,html body #view .ve .rp-filmed .rp-notes-title{font-size:var(--m-h2)!important}
  html body #view .ve .rp-words .rp-note-box>textarea,html body #view .ve .rp-words .rp-note-box:has(.rp-room-drop)>textarea,html body #view .ve .rp-words .rp-extra textarea{font-size:var(--m-input)!important}
  html body #view .ve .rp-words .rp-note-room b{font-size:var(--m-body-lg)!important}
  html body #view .ve .rp-room-box .rp-room-name-t{font-size:var(--m-body)!important}
  html body #view .ve .rp-room-chips .rp-room-chip{min-height:var(--m-tap);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html body #view .ve .rp-room-chips .rp-add-room.is-chip{min-height:var(--m-tap)!important;border-radius:var(--m-radius)!important;font-size:var(--m-body)!important}
  html body #view .ve .rp-room-box{min-height:var(--m-tap);border-radius:var(--m-radius)}
  html body #view .ve .rp-clip-room{font-size:var(--m-h4)!important}
  html body #view .ve .rp-clip-row{gap:var(--m-gap);padding:var(--m-pad);border-radius:var(--m-radius)}
  html body #view .ve .rp-clip-head>.rp-clip-state{font-size:var(--m-body)!important}
  html body #view .ve .rp-mix-row,html body #view .ve .rp-mix-head{font-size:var(--m-body)!important}

  /* THE FOOT of a filming step, docked: its line, its one button. */
  html body #view .ve-step:has(>section.rp-wiz)>.ve-gate{margin:auto calc(-1 * var(--m-gutter)) 0;padding:var(--m-gap-s) var(--m-page-x) calc(var(--m-gap-s) + var(--m-safe-b));gap:var(--m-gap-s) var(--m-gap);border-radius:var(--m-radius) var(--m-radius) 0 0}
  html body #view .ve .ve-gate .ve-gate-text,html body #view .ve:has(section.rp-wiz) .ve-gate .ve-gate-text,html body #view .ve-step:has(>section.rp-wiz)>.ve-gate .ve-gate-text{font-size:var(--m-body)!important;line-height:1.35}
  html body #view .ve .ve-gate .solid,html body #view .ve:has(section.rp-wiz) .ve-gate .solid,html body #view .ve-step[data-step=preview]:has(.rp-check)>.ve-gate .solid{min-height:var(--m-tap)!important;padding-inline:var(--m-gap-l);border-radius:var(--m-radius);font-size:var(--m-body)!important;font-weight:600}
  html body #view .ve .ve-gate .ghost,html body #view .ve .ve-gate .rp-gate-more>summary,html body #view .ve-step[data-step=preview]:has(.rp-check)>.ve-gate :is(.ghost,.rp-gate-more>summary){min-height:var(--m-tap)!important;padding-inline:var(--m-gap);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html body #view .ve .ve-gate .solid svg,html body #view .ve .ve-gate .ghost svg,html body #view .ve .ve-gate summary svg{width:18px;height:18px}
  html body #view .ve-step[data-step=preview]:has(.rp-check)>.ve-gate{padding:var(--m-gap-s) var(--m-page-x) calc(var(--m-gap-s) + var(--m-safe-b));border-radius:var(--m-radius) var(--m-radius) 0 0}
  html body #view .ve-step[data-step=preview]:has(.rp-check)>.ve-gate .rp-gate-more .ve-menu-panel>button{min-height:var(--m-tap)!important;font-size:var(--m-body)!important}
  html body #view .ve .ve-gate .rp-gate-more .ve-menu-panel>button{min-height:var(--m-tap)}
  html body #view .ve .ve-gate .ve-gate-text.rp-stale-msg{padding:var(--m-gap-s) var(--m-gap);border-radius:var(--m-radius)}

  /* The listing header of the editor's steps (this file's own comps-4 rules, drawn smaller): a slim card, the house at the left. */
  html body #view .ve .ve-steps-sticky[data-r=steps] .ve-steps-home{padding:var(--m-gap-s) var(--m-gap) var(--m-gap-s) 0;border-radius:var(--m-radius)}
  html body #view .ve .ve-steps-sticky[data-r=steps] .ve-steps-thumb{width:56px;height:36px}
  html body #view .ve .ve-steps-sticky[data-r=steps] .ve-steps-thumb svg{width:22px;height:22px}
  html body #view .ve .ve-steps-sticky[data-r=steps] .ve-steps-thumb:has(img){width:auto;height:36px;padding:0 var(--m-gap-s) 0 var(--m-gap-s)}
  html body #view .ve .ve-steps-sticky[data-r=steps] .ve-steps-thumb img{width:44px;border-radius:6px}
  html body #view .ve .ve-steps-sticky[data-r=steps] .ve-steps-who{padding-left:var(--m-gap)}
  html body #view .ve .ve-steps-sticky[data-r=steps] .ve-steps-who b{font-size:var(--m-body-lg)!important;line-height:1.3}
  html body #view .ve .ve-steps-sticky[data-r=steps] .ve-steps-who small:not(.ve-steps-answers){font-size:var(--m-cap)!important;line-height:1.3}
  html body #view .ve .ve-steps-sticky:not([data-r=steps]):not(.rp-strip-card) .ve-steps-home{gap:var(--m-gap)}
  html body #view .ve .ve-steps-sticky:not([data-r=steps]):not(.rp-strip-card) .ve-steps-thumb{width:36px;height:36px;border-radius:var(--m-gap-s)}
  html body #view .ve .ve-steps-sticky:not([data-r=steps]):not(.rp-strip-card) .ve-steps-thumb svg{width:20px;height:20px}
  html body #view .ve .ve-steps-sticky:not([data-r=steps]):not(.rp-strip-card) .ve-steps-who b{font-size:var(--m-body-lg)!important}
  html body #view .ve .ve-steps-answers{font-size:var(--m-cap)!important}

  /* Film the rooms: the filming lines, one card, a numbered list. */
  html body #view .ve .ve-rooms.rp-rooms-card .rp-rooms-title.rp-steps-card{padding:var(--m-pad) var(--m-pad) var(--m-gap-xs);border-radius:var(--m-radius)}
  html body #view .ve .ve-rooms.rp-rooms-card .rp-rooms-title.rp-steps-card h3{gap:var(--m-gap-xs) var(--m-gap-s);margin:0 0 var(--m-gap-s);font-size:var(--m-h4)!important}
  html body #view .ve .ve-rooms.rp-rooms-card .rp-rooms-title.rp-steps-card h3 .rp-count-pill{padding:2px var(--m-gap);font-size:var(--m-cap)!important}
  html body #view .ve .ve-rooms.rp-rooms-card .rp-rooms-title.rp-steps-card :is(.rp-rooms-quiet,.rp-rooms-do){padding:var(--m-gap-s) 0 var(--m-gap-s) 40px;font-size:var(--m-body)!important;line-height:1.4}
  html body #view .ve .ve-rooms.rp-rooms-card .rp-rooms-title.rp-steps-card :is(.rp-rooms-quiet,.rp-rooms-do)::before{top:var(--m-gap-s);width:26px;height:26px;font-size:var(--m-body)!important}
  html body #view .ve .ve-rooms.rp-rooms-card .ve-rooms-head.rp-rooms-head{gap:var(--m-gap-s)}

  /* Property details: the form, drawn to the scale. Fields are 40px boxes, labels 14px, the card's own heading 18px. */
  html body #view .ve .ve-details.is-facts-only .ve-details-grid{gap:var(--m-gap)}
  html body #view .ve .ve-details.is-facts-only .ve-details-grid>.ve-fields{gap:var(--m-gap);padding:var(--m-pad);border-radius:var(--m-radius)}
  html body #view .ve .ve-details.is-facts-only .ve-details-pair{gap:var(--m-gap)}
  html body #view .ve .ve-details.is-facts-only .ve-field{gap:var(--m-gap-xs)}
  html body #view .ve .ve-details.is-facts-only .ve-field-label{font-size:var(--m-body)!important;line-height:1.3}
  html body #view .ve .ve-details.is-facts-only .ve-field-label.ve-card-h,html body #view .ve .ve-details.is-facts-only h3.ve-card-h{font-size:var(--m-h4)!important}
  html body #view .ve .ve-details.is-facts-only .ve-field-label.ve-card-h .ve-optional-word{font-size:var(--m-cap)!important}
  html body #view .ve .ve-details.is-facts-only .ve-details-grid .sinput:not(.ve-feature),html body #view .ve .ve-details.is-facts-only .ve-details-grid .sselect{min-height:var(--m-control);padding:0 var(--m-gap);border-radius:var(--m-gap-s);font-size:var(--m-input)!important}
  html body #view .ve .ve-details.is-facts-only .ve-affix,html body #view .ve .ve-details.is-facts-only .ve-unit{min-height:var(--m-control);border-radius:var(--m-gap-s)}
  html body #view .ve .ve-details.is-facts-only .ve-details-grid :is(.ve-affix,.ve-unit) :is(.sinput,.sselect):not(.ve-feature){min-height:calc(var(--m-control) - 2px)}
  html body #view .ve .ve-details.is-facts-only .ve-affix>i{padding:0 var(--m-gap) 0 var(--m-gap);font-size:var(--m-body)!important}
  html body #view .ve .ve-details.is-facts-only .ve-affix>i::after{top:var(--m-gap-s);bottom:var(--m-gap-s)}
  html body #view .ve .ve-details.is-facts-only .ve-unit .sselect{flex:0 0 80px;width:80px;padding:0 28px 0 var(--m-gap)}
  html body #view .ve .ve-details.is-facts-only .ve-unit::after{right:var(--m-gap);width:14px;height:14px;margin-top:-7px;-webkit-mask-size:14px;mask-size:14px}
  html body #view .ve .ve-details.is-facts-only .ve-details-extra textarea.ve-feature{height:120px;padding:var(--m-gap);border-radius:var(--m-gap-s);font-size:var(--m-input)!important;line-height:1.45}

  /* A button's height comes from its padding as well as its floor, so a one-line label is one line tall and the walk (and a screen reader's
     reading of the box) sees one line, not two. The label is centred, so nothing moves. */
  html body #view .ve :is(.solid,.ghost,.ve-link,.rp-add-room,.rv-switch,.rv-view-tab,.rv-ctab,.rp-tab,.rp-vo-edit,.rp-xf-add,.rp-try,.rp-mix-choose,.rp-up,.rp-filmed-chip){padding-block:var(--m-pad-s)!important}

  /* =====================================================================================================================
     THE REVIEW (a made reel: Overview and By clip) and the older Review before a reel is made
     The player's box (9:16, its own width), the scrubber and the swatches keep their geometry; the chrome around them comes down.
     ===================================================================================================================== */
  html body #view .ve .rp-wiz-head.rv-head{gap:var(--m-gap-s);margin:var(--m-gap-xs) 0 var(--m-gap)}
  html body #view .ve .rv-view-tabs{border-radius:var(--m-radius)}
  html body #view .ve .rv-view-tab{min-height:var(--m-tap);font-size:var(--m-body)!important;font-weight:600}
  /* r404 (6 Nov 2026): the B-roll Frequency row, a full-width strip with a tap-sized option. */
  html body #view .ve .rp-freq-row{grid-template-columns:minmax(0,1fr);gap:6px}
  html body #view .ve .rv-freq-opt{min-height:var(--m-tap);font-size:var(--m-body)!important;font-weight:600}
  html body #view .ve .rv-wrap>.ve-stage{gap:var(--m-gap-s);margin:0 0 var(--m-gap-s);padding:var(--m-pad)!important;border-radius:var(--m-radius)!important}
  html body #view .ve-step[data-step=preview] .rv-clips{margin:0 0 var(--m-gap-s);padding:var(--m-gap-s) var(--m-gap-s) var(--m-gap);border-radius:var(--m-radius)}
  html body #view .ve .rv-wrap>.ve-check-side{margin:0 0 var(--m-gap);padding:var(--m-pad)!important;border-radius:var(--m-radius)!important}
  html body #view .ve .rv-stage-clip{grid-template-columns:var(--m-control) minmax(0,1fr) var(--m-control)}
  html body #view .ve .rv-arrow{width:var(--m-control);height:var(--m-control)}
  html body #view .ve .rp-stage-top .ve-stage-h,html body #view .ve .rv-stage-mid .ve-stage-h{font-size:var(--m-h4)!important;line-height:1.25}
  html body #view .ve .rp-stage-q,html body #view .ve .rp-stale{font-size:var(--m-cap)!important}
  html body #view .ve .rp-stale.is-fresh svg{width:16px;height:16px}
  html body #view .ve .ve-render-note,html body #view .ve .rp-render-note{font-size:var(--m-cap)!important;line-height:1.4}
  html body #view .ve .rv-t-narrow{font-size:var(--m-cap)!important}
  html body #view .ve .rv-clips-note{font-size:var(--m-cap)!important}
  html body #view .ve .rv-clip-list{gap:var(--m-gap-s)}
  html body #view .ve .rv-clip{gap:var(--m-gap-xs);padding:var(--m-gap-xs) var(--m-gap-xs) var(--m-gap-s)}
  html body #view .ve .rv-clip-txt{gap:2px}
  html body #view .ve .rv-clip-name{font-size:var(--m-body)!important;font-weight:600}
  html body #view .ve .rv-clip-act{gap:var(--m-gap-xs);font-size:var(--m-cap)!important}
  html body #view .ve .rv-clip-act svg{width:14px;height:14px}
  html body #view .ve .rv-clip-state{padding:2px var(--m-gap-s);font-size:var(--m-cap)!important}
  html body #view .ve .rv-clip-pic em,html body #view .ve .rv-clip-len,html body #view .ve .rv-clip-pic>em{font-size:var(--m-cap)!important}
  html body #view .ve .rv-panel-title{font-size:var(--m-h4)!important}
  html body #view .ve .rv-scope{flex:0 1 140px;min-height:var(--m-control);font-size:var(--m-input)!important}
  html body #view .ve .rv-ctabs{margin:0 0 var(--m-gap);border-radius:var(--m-radius)}
  html body #view .ve .rv-ctab{min-height:var(--m-control);font-size:var(--m-body)!important}
  html body #view .ve .rv-fold .rp-set-h{min-height:var(--m-tap)}
  html body #view .ve .rv-fold-btn svg{width:20px;height:20px}
  html body #view .ve .rv-fold-val{font-size:var(--m-cap)!important}
  html body #view .ve .rv-wrap.is-overview .rv-fold .rp-set-h>span,html body #view .ve .rv-cset .rv-fold .rp-set-h>span,html body #view .ve .rv-cs-sum .rp-set-h>span:not(.rv-cs-line){font-size:var(--m-body-lg)!important;font-weight:600}
  html body #view .ve .rv-wrap.is-overview .rp-set-group.rv-fold .rp-set-h{grid-template-columns:28px minmax(0,1fr);column-gap:var(--m-gap-s);padding:var(--m-gap-s) 28px var(--m-gap-s) 0}
  html body #view .ve .rv-cset .rv-fold .rp-set-h{grid-template-columns:28px auto minmax(0,1fr);column-gap:var(--m-gap-s);padding-right:28px}
  html body #view .ve .rv-cs-sum .rp-set-h{grid-template-columns:28px auto minmax(0,1fr) auto;min-height:var(--m-tap);column-gap:var(--m-gap-s)}
  html body #view .ve .rv-cset .rv-fold .rv-fold-val{font-size:var(--m-cap)!important}
  html body #view .ve .rv-cs-line{font-size:var(--m-cap)!important}
  html body #view .ve .rv-cset .rp-set-group,html body #view .ve .rv-cset .rp-set-group+.rp-set-group,html body #view .ve .rv-cset .rp-set-group:first-child,html body #view .ve .rv-cset .rp-set-group:last-child{padding:var(--m-gap-xs) var(--m-gap);border-radius:var(--m-radius)}
  html body #view .ve .rv-wrap.is-clip .rv-cset{gap:var(--m-gap-s)}
  html body #view .ve .rv-wrap.is-overview .rv-fold.is-open>.rv-set-body{padding:0 0 var(--m-gap)}
  html body #view .ve .rv-switch,html body #view .ve .rv-switch-l{font-size:var(--m-body)!important}
  html body #view .ve .rv-switch{min-height:var(--m-tap)}
  html body #view .ve .rv-reset{font-size:var(--m-body)!important}
  html body #view .ve .rv-track-ro-box{min-height:var(--m-control);border-radius:var(--m-gap-s);font-size:var(--m-body)!important}
  html body #view .ve .rv-track-hint{font-size:var(--m-cap)!important}
  html body #view .ve .rv-ctext-in{min-height:var(--m-control);padding:var(--m-gap);font-size:var(--m-input)!important}
  html body #view .ve .rv-ctext .rp-ct-play{min-width:var(--m-tap);min-height:var(--m-tap)}
  html body #view .ve .rv-ctext .rv-switch{min-height:var(--m-tap)}
  html body #view .ve .rv-ctext-more .ve-link{min-height:var(--m-control);font-size:var(--m-body)!important}
  html body #view .ve .rv-cs-edit svg{width:20px;height:20px}

  /* the settings rows (shared by both Reviews): labels 14, value boxes 14, a hairline between */
  html body #view .ve .rp-set{gap:var(--m-gap)}
  html body #view .ve .rp-set-h{gap:var(--m-gap-s);margin:0 0 var(--m-gap-s);font-size:var(--m-body-lg)!important;font-weight:600}
  html body #view .ve .rp-set-title{padding:0 0 var(--m-gap-s)}
  html body #view .ve .rp-review:has(.rp-tabs) .rp-set-group,html body #view .ve .rp-review:has(.rp-tabs) .rp-set-group:first-child,html body #view .ve .rp-review:has(.rp-tabs) .rp-set-group:last-child,html body #view .ve .rp-review:has(.rp-tabs) .rp-set-group+.rp-set-group{padding:var(--m-pad);border-radius:var(--m-radius)}
  html body #view .ve .rp-review:has(.rp-set-title) .rp-set-group,html body #view .ve .rp-review:has(.rp-set-title) .rp-set-group:first-child{padding:var(--m-gap) 0}
  html body #view .ve .rp-set-row,html body #view .ve .rp-check .rp-set-row,html body #view .ve .rv-cset .rp-set-row,html body #view .ve .rp-check .rv-cset .rp-set-row{grid-template-columns:minmax(0,1fr) 64px;gap:var(--m-gap-xs) var(--m-gap);padding:var(--m-gap-s) 0;font-size:var(--m-body)!important}
  html body #view .ve .rp-set-label,html body #view .ve .rp-cap-row>.rp-set-label,html body #view .ve .rp-said-row>.rp-set-label{font-size:var(--m-body)!important;font-weight:500}
  html body #view .ve .rp-read{min-height:var(--m-control);border-radius:var(--m-gap-s);font-size:var(--m-body)!important}
  html body #view .ve .rp-set-row select,html body #view .ve .rp-grade-sel{min-height:var(--m-control);border-radius:var(--m-gap-s);font-size:var(--m-input)!important}
  html body #view .ve .rp-grade-line{font-size:var(--m-cap)!important}
  html body #view .ve .rp-track-play{width:var(--m-control);height:var(--m-control)}
  html body #view .ve .rp-track-box{min-height:var(--m-control)}
  html body #view .ve .rp-track-box .rp-track-name{min-height:var(--m-control);padding:0 var(--m-gap);font-size:var(--m-body)!important}
  html body #view .ve .rp-said-none{padding:var(--m-gap);font-size:var(--m-cap)!important}
  html body #view .ve .rp-cap-reset{font-size:var(--m-body)!important}
  html body #view .ve .rp-cap-note{font-size:var(--m-cap)!important}
  html body #view .ve .rp-tab{min-height:var(--m-tap)!important;font-size:var(--m-body)!important}
  html body #view .ve .rp-made{gap:var(--m-gap-s);padding:var(--m-gap-xs) var(--m-gap-s);font-size:var(--m-body)!important}
  html body #view .ve .rp-made .rp-disc{width:22px;height:22px}
  html body #view .ve .rp-check .ve-strip-head{font-size:var(--m-cap)!important}
  html body #view .ve .ve-check.rp-check{gap:var(--m-gap)}
  html body #view .ve .rp-check>.ve-check-side{gap:var(--m-gap)}

  /* =====================================================================================================================
     DIALOGS AND SHEETS inside the editor: Clip options, the missing-clip popups, the voice-over recorder, progress
     ===================================================================================================================== */
  html body .ve-dialog-in,html body #view .ve-dialog-in{gap:var(--m-gap);padding:var(--m-pad)}
  html body .ve-dialog h2{font-size:var(--m-h3)!important;line-height:1.25}
  html body .ve-dialog .rp-bare h2,html body .ve-dialog .rp-nudge h2{font-size:var(--m-h3)!important}
  html body .ve-dialog p,html body .ve-dialog li,html body .ve-dialog label{font-size:var(--m-body)!important;line-height:1.45}
  html body .ve-dialog small,html body .ve-dialog .ve-quiet,html body .ve-dialog .ve-fine{font-size:var(--m-cap)!important}
  html body .ve-dialog-foot{gap:var(--m-gap-s)}
  html body .ve-dialog-foot .solid,html body .ve-dialog-foot .ghost,html body .ve-dialog-foot>a{min-height:var(--m-tap);padding-inline:var(--m-gap-l);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html body .ve-dialog :is(.solid,.ghost,.ve-link,a.solid,a.ghost,button){padding-block:var(--m-pad-s)}
  html body .ve-dialog-vo>.ve-dialog-in{padding:var(--m-pad);gap:var(--m-gap-s)}
  html body .ve-dialog-vo .ve-dialog-head h2{font-size:var(--m-h3)!important}
  html body .ve-dialog-vo .ve-vo-pane{gap:var(--m-gap);padding:var(--m-gap)}
  html body .ve-dialog-vo .ve-vo-pane .solid,html body .ve-dialog-vo .ve-vo-pane .ghost{min-height:var(--m-tap);padding-inline:var(--m-gap-l);font-size:var(--m-body)!important}
  html body .ve-dialog-vo .rp-vo-room .ve-note-actions>*{min-height:var(--m-tap)}
  html body .ve-dialog-vo .rp-vo-timer{font-size:var(--m-h1)!important}
  html body .ve-dialog-vo .ve-vo-pane [data-ve=vo-stop],html body .ve-dialog-vo .ve-vo-pane [data-r=vo-moment]{height:var(--m-tap);min-height:var(--m-tap)!important;font-size:var(--m-body)!important}
  html body .ve-dialog-vo .ve-vo-top>.ve-box{padding:var(--m-gap-s) var(--m-gap)}
  html body .ve-dialog-vo .ve-tabs2 button{min-height:var(--m-control);font-size:var(--m-body)!important}
  html body .rp-vo-line,html body .rp-vo-room{font-size:var(--m-body)!important}
  html body .rp-pop.rp-pop-float.is-sheet{padding:var(--m-pad);border-radius:var(--m-radius) var(--m-radius) 0 0}
  html body .rp-pop-float.is-sheet .rp-pop-says{font-size:var(--m-body)!important}
  html body .rp-pop-float.is-sheet .rp-pop-close{min-height:var(--m-tap);border-radius:var(--m-radius);font-size:var(--m-body)!important}

  /* ---------------------------------------------------------------------------------------------------------------------
     MOP-UP: sizes that the measured screens still drew off the scale
     --------------------------------------------------------------------------------------------------------------------- */
  html body #view .ve .rp-room-does{font-size:var(--m-cap)!important}
  html body #view .ve .ve-warn,html body #view .ve .ve-warn>span{font-size:var(--m-body)!important;line-height:1.4}
  html body #view .ve :is(button.ghost,button.solid,a.ghost,a.solid,label.solid,label.ghost){font-size:var(--m-body)}
  html body #view .ve :is(button.ghost,button.solid,a.ghost,a.solid,label.solid,label.ghost)>span{font-size:inherit}
  html body #view .ve .rp-check-text b{font-size:var(--m-body-lg)!important;font-weight:600}
  html body #view .ve .rp-check-text small{font-size:var(--m-cap)!important}

  /* On camera + montage (a room's Talk and Montage parts): drawn to the scale */
  html body #view .ve .rp-mix{gap:var(--m-gap-s);padding:var(--m-gap-s);border-radius:var(--m-radius)}
  html body #view .ve .rp-mix-rooms{gap:var(--m-gap-s)}
  html body #view .ve .rp-mix-room{border-radius:var(--m-radius)}
  html body #view .ve .rp-mix-head{gap:var(--m-gap);padding:var(--m-gap-s) var(--m-gap)}
  html body #view .ve .rp-mix-head h3{font-size:var(--m-h4)!important}
  html body #view .ve .rp-mix-icon{width:var(--m-control);height:var(--m-control);border-radius:var(--m-gap-s)}
  html body #view .ve .rp-mix-icon svg{width:20px;height:20px}
  html body #view .ve .rp-mix-kind{width:32px;height:32px;border-radius:var(--m-gap-s)}
  html body #view .ve .rp-mix-kind svg{width:18px;height:18px}
  html body #view .ve .rp-mix-x{width:var(--m-control);height:var(--m-control)}
  html body #view .ve .rp-mix-row{grid-template-columns:32px minmax(0,1fr) auto;gap:var(--m-gap-xs) var(--m-gap);padding:var(--m-gap-s) var(--m-gap)}
  html body #view .ve .rp-mix-kind-name{font-size:var(--m-body-lg)!important}
  html body #view .ve .rp-mix-what{gap:var(--m-gap-xs)}
  html body #view .ve .rp-mix-file{padding:2px var(--m-gap-s) 2px var(--m-gap-xs);border-radius:var(--m-gap-s);font-size:var(--m-cap)!important;line-height:1.4}
  html body #view .ve .rp-mix-file svg{width:14px;height:14px}
  html body #view .ve .rp-mix .rp-mix-said-btn{min-height:var(--m-control);padding-block:var(--m-pad-s);font-size:var(--m-body)!important}
  html body #view .ve .rp-mix-film{font-size:var(--m-body)!important}
  html body #view .ve .rp-mix-ends{gap:2px var(--m-gap);font-size:var(--m-body)!important;line-height:1.4}
  html body #view .ve .rp-mix-ends dt{font-size:var(--m-cap)!important}
  html body #view .ve .rp-mix-choose{min-height:var(--m-control);padding-inline:var(--m-gap);gap:var(--m-gap-s);border-radius:var(--m-gap-s);font-size:var(--m-body)!important}
  html body #view .ve .rp-mix-choose svg{width:16px;height:16px}
  html body #view .ve .rp-mix-said{gap:var(--m-gap-xs);padding:0 var(--m-gap) var(--m-gap-s)}
  html body #view .ve .rp-mix-said small{font-size:var(--m-cap)!important}
  html body #view .ve .rp-mix-busy,html body #view .ve .rp-mix-error,html body #view .ve .rp-mix-prompt{font-size:var(--m-body)!important}
  html body #view .ve .rp-mix-add{min-height:var(--m-control);padding-inline:var(--m-gap);border-radius:var(--m-gap-s);font-size:var(--m-body)!important}
  html body #view .ve .rp-mix-line .rp-room-say{padding:var(--m-gap-xs) var(--m-gap);font-size:var(--m-body)!important}

  /* hints, the mark-the-walks screen's words (the strip and its handles keep their geometry), menu summaries */
  html body #view .ve summary,html body #view .ve summary>span{font-size:var(--m-body)}
  html body #view .ve p.ve-quiet,html body #view .ve .rp-wiz-card .ve-quiet{font-size:var(--m-cap)!important;line-height:1.4}
  html body #view .ve .rp-order li{font-size:var(--m-cap)!important}
  html body #view .ve .rm-time{font-size:var(--m-cap)!important}
  html body #view .ve .rm-hint,html body #view .ve .rp-walk p.ve-quiet{font-size:var(--m-body)!important;line-height:1.4}
  html body #view .ve .rm-w,html body #view .ve .rm-w span{font-size:var(--m-cap)!important}
  html body #view .ve .rm-at{font-size:var(--m-cap)!important}
  html body #view .ve kbd{font-size:var(--m-cap-s)!important}

  /* dialogs' own headings, and the items of a menu */
  html body .ve-dialog h3,html body .ve-dialog .ve-box h3{font-size:var(--m-h4)!important;line-height:1.25}
  html body #view .ve .ve-menu-panel span,html body #view .ve .rp-menu-item span,html body #view .ve .ve-menu-panel button,html body #view .ve .rp-menu-item{font-size:var(--m-body)!important}

  /* working, stopped and failed renders; loading; a reel that is gone */
  html body #view .ve .default-load-v22 h3{font-size:var(--m-body-lg)!important}
  html body #view .ve .default-load-v22 p,html body #view .ve .default-load-count-v22,html body #view .ve .default-load-count-v22 b{font-size:var(--m-cap)!important}
  html body #view .ve .ve-phases .step .w,html body #view .ve .ve-frame p{font-size:var(--m-body)!important;line-height:1.4}
  html body #view .ve .ve-frame b,html body #view .ve .ve-note b{font-size:var(--m-body-lg)!important}
  html body #view .ve .ve-note p{font-size:var(--m-body)!important}

  /* THE PLAYER'S FRAME WHILE A RENDER RUNS. The frame is the player's 9:16 box and keeps its size; what it says has to fit inside it. Its "working" block
     was collapsing to no height, so the mark, the title and the step list drew on top of one another. The block is sized by its content, the step list
     is one slim line per step, and the step's name (already the lit line of the list) is not said a second time. */
  html body #view .ve .ve-frame{gap:var(--m-gap-xs);padding:var(--m-gap) var(--m-gap-s);overflow:hidden}
  html body #view .ve .ve-frame .default-load-v22{height:auto;min-height:0;gap:var(--m-gap-xs)}
  html body #view .ve .ve-frame .default-load-v22 p,html body #view .ve .ve-frame .pm-wait-mark>span:not(.pm-mark){display:none}
  html body #view .ve .ve-frame .default-load-v22 h3{margin:0;line-height:1.25}
  html body #view .ve .ve-frame .ve-phases{margin-top:var(--m-gap-xs)}
  html body #view .ve .ve-frame .ve-phases .step{gap:var(--m-gap-s);padding:var(--m-gap-xs) 0}
  html body #view .ve .ve-frame .ve-phases .step .w{font-size:var(--m-cap)!important;line-height:1.25}
  html body #view .ve .ve-frame .ve-phases .step .dot{width:20px;height:20px}
  html body #view .ve .ve-frame .ve-phases .step:not(:last-child)::before{left:9px;top:calc(var(--m-gap-xs) + 20px);bottom:calc(-1 * var(--m-gap-xs))}
  html body #view .ve .ve-frame .ve-phases .step.ve-now .dot::after{width:10px;height:10px}
  html body #view .ve .ve-frame .ve-phases .step[data-done="1"]:not(.ve-now) .dot::after{width:8px;height:4px}
  html body #view .ve .ve-frame .default-load-count-v22{margin-top:var(--m-gap-xs)}

  /* the words screen (What's good in each room) and Already filmed */
  html body #view .ve .rp-words .rp-note-room{justify-content:flex-start;gap:var(--m-gap)}
  html body #view .ve .rp-note-ico svg{width:24px;height:24px}
  html body #view .ve .rp-words .rp-note-list{gap:var(--m-gap-s)}
  html body #view .ve .rp-words .rp-note-box{padding:var(--m-gap) var(--m-pad);border-radius:var(--m-radius)}
  html body #view .ve .rp-words .rp-note-box>textarea,html body #view .ve .rp-words .rp-note-box:has(.rp-room-drop)>textarea,html body #view .ve .rp-words .rp-note-added .rp-note-box>textarea{min-height:var(--m-control);padding:var(--m-gap-s) var(--m-gap);border-radius:var(--m-gap-s)}
  html body #view .ve .rp-words .rp-extra-h{font-size:var(--m-h4)!important}
  html body #view .ve .rp-words .rp-extra textarea{min-height:72px}
  html body #view .ve .rp-words .rp-add-room{min-height:var(--m-control);border-radius:var(--m-radius)!important;font-size:var(--m-body)!important}
  html body #view .ve .ve-gate.ve-details-foot.rp-foot.is-notes{flex-wrap:nowrap;gap:var(--m-gap-s)}
  html body #view .ve .rp-foot.is-notes .ve-gate-text{padding:var(--m-gap) var(--m-gap) var(--m-gap) 44px;border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html body #view .ve .rp-foot.is-notes .ve-gate-text::before{left:var(--m-gap);top:var(--m-gap);width:20px;height:20px;-webkit-mask-size:20px;mask-size:20px}
  html body #view .ve .rp-foot.is-notes .ghost{flex:0 0 auto;min-height:var(--m-tap);padding-inline:var(--m-gap-l);border-radius:var(--m-radius)}
  html body #view .ve .rp-foot.is-notes .solid{flex:1 1 0;min-height:var(--m-tap);border-radius:var(--m-radius)}
  html body #view .ve .rp-filmed .rp-words-head{gap:var(--m-gap-s)}
  html body #view .ve .rp-filmed-chip{min-height:var(--m-control);font-size:var(--m-body)!important}
  html body #view .ve .rp-room-grid,html body #view .ve .rp-room-chips{gap:var(--m-gap-s)}
  html body #view .ve .rp-room-chips .rp-room-chip{padding-inline:var(--m-gap);gap:var(--m-gap-s)}
  html body #view .ve .rp-room-box{padding:0 var(--m-gap);gap:var(--m-gap-s)}
  html body #view .ve .rp-room-box .rp-room-ico svg{width:22px;height:22px}
  html body #view .ve .rp-clip-list{gap:var(--m-gap-s)}
  html body #view .ve .rp-clip-ico svg{width:24px;height:24px}
  html body #view .ve .rp-clip-text small,html body #view .ve .rp-clip-words small{font-size:var(--m-cap)!important}
  html body #view .ve .rp-clip-none,html body #view .ve .rp-clip-foot>.rp-clip-said{font-size:var(--m-body)!important}
  html body #view .ve .rp-clip-state svg{width:20px;height:20px}
  html body #view .ve .rp-clip-thumb{border-radius:var(--m-radius)}
  html body #view .ve .rp-clip-play{width:var(--m-tap);height:var(--m-tap)}
  html body #view .ve .rp-clip-foot{gap:var(--m-gap-s)}
  html body #view .ve .rp-clip-foot .rp-clip-acts .ghost,html[data-theme] body .rp-filmed .rp-clip-foot .rp-clip-acts .ghost{min-height:var(--m-control);padding-inline:var(--m-gap-l);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html[data-theme] body .rp-filmed .rp-clip-row:not(.is-in) .rp-clip-acts .ghost.rp-up{min-height:var(--m-tap);border-radius:var(--m-radius);font-size:var(--m-body)!important}
  html body #view .ve .rp-clip-row:not(.is-in) .rp-clip-acts .rp-up svg{width:22px;height:22px}
  html body #view .ve .rp-add-room-form button.ve-link{font-size:var(--m-body)!important}
  html body #view .ve .rp-thumb-cap,html body #view .ve .rp-thumb-cap span{font-size:var(--m-cap)!important}
  html body #view .ve .rp-opts:not(.is-big) .rp-opt b{font-size:var(--m-body)!important}
  /* Add room on the words screen is a full-width dashed cell (it was one short button alone on a row) */
  html body #view .ve .rp-words .rp-add-room-row{margin:0}
  html body #view .ve .rp-words .rp-add-room{width:100%;justify-content:center;border:1.5px dashed var(--line-2)!important}

  /* the finder's suggestions, the one-tab bar while a plan is written, a card heading's inner words */
  html body #view .ve .ve-finder .sugg mark,html body #view .ve .ve-finder .sugg button span{font-size:inherit}
  html body #view .ve .ve-finder .sugg button .a{font-size:var(--m-body)!important}
  html body #view .ve .ve-tabs:has(button:only-child){display:none}
  html body #view .ve .rp-card-h>span,html body #view .ve .rp-card-h span{font-size:inherit}
  html body #view .ve .rp-review h3,html body #view .ve .rp-review .rp-card-h{font-size:var(--m-h4)!important}

  /* Starting your reel (the plan being written): the spinner is a mark, not the screen */
  html body #view .ve .ve-planning{gap:var(--m-gap-xs);padding:var(--m-gap-l) var(--m-pad) var(--m-gap)}
  html body #view .ve .ve-planning h2{margin:var(--m-gap-s) 0 0;font-size:var(--m-h3)!important}
  html body #view .ve .ve-planning>.ve-quiet{margin:0 0 var(--m-gap-s);font-size:var(--m-cap)!important}
  html body #view .ve .ve-spin{width:40px;height:40px;border-width:4px}
  html body #view .ve .ve-stages{gap:var(--m-gap-s);margin:0 0 var(--m-gap-s)}
  html body #view .ve .ve-stages li{gap:var(--m-gap);font-size:var(--m-body)!important}
  html body #view .ve .ve-stages li span{font-size:inherit}
  html body #view .ve .ve-planning .ve-link{min-height:var(--m-tap);font-size:var(--m-body)!important}

  /* Filming 101 (the page the Filming tips icon opens, from Reels and from Listing video): its sheet is css/filming-101.css, so its sizes are brought to the scale from here */
  html body #view .ve .head .crumb button{white-space:nowrap}
  html body #view .ve .f1-n{min-width:32px;height:32px;font-size:var(--m-body)!important}
  html body #view .ve .f1-title,html body #view .ve .f1-side h3,html body #view .ve .f1-note b,html body #view .ve .f1-card b{font-size:var(--m-body-lg)!important;font-weight:600}
  html body #view .ve .f1-sub,html body #view .ve .f1-count,html body #view .ve .f1-badge-pill,html body #view .ve .f1-sample figcaption b,html body #view .ve .f1-line,html body #view .ve .f1-tech,html body #view .ve .f1-note p,html body #view .ve .f1-card p,html body #view .ve .f1-part-l,html body #view .ve .f1-foot,html body #view .ve .f1-fig figcaption{font-size:var(--m-cap)!important}
  html body #view .ve .f1-intro,html body #view .ve .f1-side>p:not(.f1-strip),html body #view .ve .f1-part p,html body #view .ve .f1-close,html body #view .ve .f1-strip{font-size:var(--m-body)!important;line-height:1.45}
  html body #view .ve .f1-sub-h,html body #view .ve .f1-block-h{font-size:var(--m-body-lg)!important}
  html body #view .ve .f1{gap:var(--m-gap)}
  html body #view .ve .f1-sec{border-radius:var(--m-radius)}
  html body #view .ve .f1-head{gap:var(--m-gap);min-height:var(--m-tap);padding:var(--m-gap) var(--m-pad);border-radius:var(--m-radius)}
  html body #view .ve .f1-body{gap:var(--m-gap);padding:var(--m-gap-xs) var(--m-pad) var(--m-pad)}
  html body #view .ve .f1-sec-ico{width:20px;height:20px}
  html body #view .ve .rp-card-h{font-size:var(--m-h4)!important}

  /* LESS SCROLLING, second pass. A room's advice and its "I'm fine with it" share a row (the words on the left, the button on the right) instead of stacking. */
  html body #view .ve .rp-room-row .ve-fine{display:flex;align-items:center;gap:var(--m-gap-s)}
  html body #view .ve .rp-room-row .ve-fine .ve-qc{flex:1 1 0;min-width:0;margin:0}
  html body #view .ve .rp-room-row .ve-fine .ve-warn,html body #view .ve .rp-room-row .ve-fine .ve-warn>span{font-size:var(--m-cap)!important;line-height:1.35}
  html body #view .ve .rp-room-row .ve-fine .ve-fine-btn{flex:none;min-height:var(--m-control);padding-inline:var(--m-gap)}
  /* a reel's card: its address and its state pill share a row, and the foot is a slim line (the whole card is the tap, so the foot is not a button of its own) */
  html .ve .ve-row .ve-row-text{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--m-gap-s)}
  html .ve .ve-row .ve-row-title{flex:0 0 100%}
  html .ve .ve-row .ve-m-addr[hidden]{flex:1 1 0;width:auto;min-width:0}
  html .ve .ve-row .ve-m-pill[hidden]{flex:none;margin-top:var(--m-gap-xs)}
  html .ve .ve-row .ve-m-facts[hidden]{flex:0 0 100%}
  html .ve .ve-row .ve-m-foot[hidden]{min-height:32px;margin-top:var(--m-gap-s)}

}