/* ==========================================================================
   Race Day Aerials — /footage and /footage/{event}
   Loaded after styles.css on the footage pages only, the same way admin.css
   and license.css sit on theirs. The rider's page, not the promoter's: find a
   bike number fast, see the clip, pay. Clip prices appear here and nowhere
   else on the site.
   ========================================================================== */

.fg-intro { display: flex; flex-direction: column; gap: 16px; max-width: 720px; padding-top: clamp(48px, 6vw, 72px); padding-bottom: 28px; }
.fg-intro h1,
.fg-head h1 { font: 700 clamp(32px, 4.4vw, 52px)/1.05 var(--sans); letter-spacing: -.02em; color: var(--paper-bright); overflow-wrap: anywhere; }
.fg-intro__lede { font: 400 16px/1.6 var(--sans); color: var(--on-dark-body); }
.fg-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.fg-steps li {
  font: 600 11px/1 var(--mono);
  letter-spacing: .1em;
  color: rgba(244, 242, 238, .85);
  border: 1px solid rgba(244, 242, 238, .28);
  padding: 8px 12px;
}
.fg-steps b { color: var(--accent); font-weight: 600; margin-right: 6px; }

.fg-status { font: 500 13px/1.6 var(--mono); letter-spacing: .04em; color: var(--on-dark-label); padding: 24px 0 64px; }
.fg-status a { color: var(--accent); }

/* ---------------------------------------------------------- event list -- */
.fg-events {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding-bottom: clamp(56px, 7vw, 84px);
}
.fg-event { display: flex; flex-direction: column; background: #141518; border: 1px solid var(--on-dark-rule-soft); color: var(--paper); transition: border-color var(--ease); }
.fg-event:hover { border-color: rgba(244, 242, 238, .4); color: var(--paper); }
.fg-event__thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #1b1c20; }
.fg-event__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.fg-event__meta { font: 600 11px/1.3 var(--mono); letter-spacing: .1em; color: var(--accent); }
.fg-event__title { font: 700 21px/1.2 var(--sans); color: var(--paper-bright); }
.fg-event__count { font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--on-dark-label); margin-top: 4px; }

/* ---------------------------------------------------------- coming soon -- */
/* A published event with no clips yet: a badge on its card, and on its page
   a signup panel in place of the gallery. */
.fg-soon { align-self: flex-start; margin: 0; padding: 6px 9px; background: var(--accent); color: var(--ink); font: 700 10.5px/1 var(--mono); letter-spacing: .14em; }
.fg-event--soon .fg-event__count { color: var(--accent); }
span.fg-event__thumb { display: flex; align-items: center; justify-content: center; }
.fg-event__soon-mark {
  font: 600 11px/1 var(--mono); letter-spacing: .16em; color: rgba(244, 242, 238, .45);
  padding: 10px 14px; border: 1px dashed rgba(244, 242, 238, .22);
}
.fg-soonpanel { display: flex; flex-direction: column; gap: 16px; max-width: 620px; margin: 8px 0 clamp(72px, 9vw, 110px); padding: 26px 26px 24px; background: #141518; border: 1px solid var(--on-dark-rule-soft); border-left: 3px solid var(--accent); }
.fg-soonpanel[hidden] { display: none; }
.fg-soonpanel__lede { font: 400 16px/1.6 var(--sans); color: var(--on-dark-body); }
.fg-soonpanel__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; }
.fg-soonpanel__form[hidden] { display: none; }
.fg-soonpanel__form .field { flex: 1 1 260px; min-width: 0; }
.fg-soonpanel__form .btn { flex: none; }
.fg-soonpanel__done { display: flex; flex-direction: column; gap: 8px; }
.fg-soonpanel__done[hidden] { display: none; }
.fg-soonpanel__done p { font: 400 15px/1.6 var(--sans); color: var(--on-dark-body); overflow-wrap: anywhere; }
.fg-soonpanel__done b { color: var(--paper-bright); font-weight: 600; }
.fg-soonpanel__done .fg-soonpanel__title { font: 700 20px/1.25 var(--sans); color: var(--paper-bright); }
.fg-soonpanel__other { align-self: flex-start; padding: 0; background: none; border: 0; cursor: pointer; font: 600 11.5px/1.3 var(--mono); letter-spacing: .06em; color: var(--accent); }
@media (max-width: 620px) {
  .fg-soonpanel { padding: 20px 18px; }
  .fg-soonpanel__form .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------- event page -- */
.fg-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; padding-top: clamp(40px, 5vw, 60px); padding-bottom: 24px; }
.fg-head__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fg-head__meta { font: 600 12px/1.4 var(--mono); letter-spacing: .1em; color: var(--on-dark-label); }
.fg-head__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fg-btn-sm { padding: 12px 16px; font-size: 12px; }
/* the site's ghost buttons are all links; on a <button> the UA grey shows */
button.btn--ghost { background: transparent; }

.fg-tools {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: flex-end;
  padding-top: 14px;
  padding-bottom: 14px;
  background: rgba(13, 13, 15, .94);
  border-bottom: 1px solid var(--on-dark-rule-soft);
}
.fg-tools .field { flex: 1 1 200px; max-width: 320px; }
.fg-tools .field--narrow { flex: 0 1 200px; }
.fg-tools .field[hidden] { display: none; }
.field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(244, 242, 238, .28);
  padding: 9px 0;
  color: var(--paper);
  font: 400 15px var(--sans);
  outline: none;
}
.field select:focus { border-bottom-color: var(--accent); }
.field select option { background: var(--ink); color: var(--paper); }
.field input.fg-search { font: 700 22px/1 var(--mono); letter-spacing: .06em; }
.fg-tools .field--race { flex: 2 1 280px; max-width: 520px; min-width: 0; }
/* a <select> can't wrap: a long class name is cut with an ellipsis, never
   pushed past the field (the card under it has the whole name) */
.field select { width: 100%; min-width: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.field select.fg-race { font: 700 18px/1.2 var(--sans); color: var(--paper-bright); }
.fg-optional { color: var(--on-dark-label); font-weight: 400; }
.fg-grid__race { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.fg-grid__race h2 { min-width: 0; font: 700 20px/1.25 var(--sans); color: var(--paper-bright); margin: 0; overflow-wrap: break-word; }
.fg-grid__race h2 b { font-family: var(--mono); color: var(--accent); }
.fg-grid__race span { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--on-dark-label); }
.fg-tools__count { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--on-dark-label); padding-bottom: 10px; margin-left: auto; }

/* The gallery: a stack of sections (one per race, or the race grid on its
   own), each section's cards in a grid of their own. */
.fg-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 22px;
  padding-bottom: clamp(96px, 10vw, 120px);
}
.fg-grid[hidden] { display: none; }
.fg-sec { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--on-dark-rule-soft); }
.fg-sec:first-child { padding-top: 0; border-top: 0; }
.fg-grid__sep { font: 600 11px/1.5 var(--mono); letter-spacing: .14em; color: var(--on-dark-label); }
.fg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
/* race files (a whole race each): 3 across, 2 on a tablet, 1 on a phone */
.fg-cards--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1080px) { .fg-cards--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.clip { display: flex; flex-direction: column; min-width: 0; background: #141518; border: 1px solid var(--on-dark-rule-soft); transition: border-color var(--ease); }
.clip[data-in-cart="true"] { border-color: var(--accent); }
.clip__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #1b1c20; overflow: hidden; cursor: pointer; }
.clip__media img,
.clip__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip__media video { opacity: 0; transition: opacity var(--ease); }
.clip__media[data-playing="true"] video { opacity: 1; }
.clip__dur,
.clip__play { position: absolute; bottom: 8px; padding: 4px 6px; background: rgba(13, 13, 15, .78); font: 600 11px/1 var(--mono); color: var(--paper); }
.clip__dur { right: 8px; }
.clip__play { left: 8px; font-size: 10px; letter-spacing: .1em; color: rgba(244, 242, 238, .8); }
.clip__media[data-playing="true"]:not([data-pinned="true"]) .clip__play { display: none; }
.clip__media[data-pinned="true"] .clip__play { color: var(--paper-bright); background: rgba(13, 13, 15, .9); }
.clip__badge { position: absolute; left: 8px; top: 8px; padding: 5px 8px; background: var(--accent); color: var(--ink); font: 700 10px/1 var(--mono); letter-spacing: .14em; }
.clip__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.clip__title { font: 700 16px/1.3 var(--sans); color: var(--paper-bright); overflow-wrap: break-word; }
.clip__title b { font-family: var(--mono); color: var(--accent); }
.clip__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.clip__price { font: 600 14px/1 var(--mono); color: var(--paper); }
.clip__add { padding: 11px 16px; font-size: 12px; }
.clip[data-in-cart="true"] .clip__add { background: transparent; border-color: var(--accent); color: var(--accent); }
.clip__claim { align-self: flex-start; background: none; border: 0; border-bottom: 1px solid rgba(244, 242, 238, .25); padding: 0 0 1px; cursor: pointer; font: 500 11px/1.3 var(--mono); letter-spacing: .04em; color: var(--on-dark-label); }
.clip__claim:hover { color: var(--paper); }

/* a whole race in one file: the card is the race's heading, then two ways
   to buy it, each with its price */
.clip--race .clip__body { padding: 16px 18px 18px; gap: 14px; }
.clip__head { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.clip__race { margin: 0; font: 700 22px/1.15 var(--sans); color: var(--paper-bright); }
.clip__race b { font-family: var(--mono); color: var(--accent); }
.clip__cls { margin: 0; font: 600 15px/1.35 var(--sans); color: var(--paper); overflow-wrap: break-word; hyphens: auto; }
/* the race the picker chose, highlighted where it sits in the grid */
.clip { scroll-margin: calc(var(--header-h) + 96px) 0 24px; }
.clip[data-picked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px rgba(232, 155, 60, .16); }
.clip__opts { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.clip__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 2px;
  background: transparent; color: var(--paper-bright); cursor: pointer; text-align: left;
  font: 700 12.5px/1.2 var(--sans); letter-spacing: .08em;
}
.clip__opt:hover { background: rgba(232, 155, 60, .1); }
.clip__opt--part { background: var(--accent); color: var(--ink); }
.clip__opt--part:hover { background: var(--accent-hover); }
.clip__opt small { display: block; margin-top: 3px; font: 500 11px/1.2 var(--mono); letter-spacing: .02em; text-transform: none; opacity: .8; }
.clip__opt small:empty { display: none; }
.clip__opt-price { flex: none; font: 700 15px/1 var(--mono); }
.clip__opt[data-on="true"]:not(.clip__opt--part) { background: rgba(232, 155, 60, .16); }

/* the race-file modal: "watch" (big viewer) and "trim" modes */
.fg-trim[data-mode="watch"] .trim-only,
.fg-trim[data-mode="trim"] .watch-only { display: none; }
.fg-dialog.fg-trim[data-mode="watch"] { width: min(1120px, calc(100% - 28px)); }
.fg-trim[data-mode="watch"] .fg-trim__stage { aspect-ratio: auto; height: min(calc(100vh - 290px), 62vw); min-height: 220px; }
.fg-view__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fg-view__actions .btn { flex: 1 1 220px; }
.fg-trim__back { align-self: flex-start; padding: 0; background: none; border: 0; cursor: pointer; font: 600 12px/1.3 var(--mono); letter-spacing: .06em; color: var(--accent); }

/* ------------------------------------------------------------- trimmer -- */
/* .fg-dialog.fg-trim: .fg-dialog's 460 px comes later in this file */
.fg-dialog.fg-trim { width: min(760px, calc(100% - 28px)); }
.fg-trim .fg-panel { gap: 14px; }
.fg-trim__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.fg-trim__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fg-trim__bar { display: flex; align-items: center; gap: 12px; }
.fg-trim__play { width: 40px; height: 36px; background: none; border: 1px solid rgba(244, 242, 238, .3); border-radius: 2px; color: var(--paper); cursor: pointer; font: 600 13px/1 var(--mono); }
.fg-trim__play:hover { border-color: var(--paper); }
.fg-trim__time { font: 500 13px/1 var(--mono); color: var(--on-dark-label); }
.fg-trim__time #fg-trim-now { color: var(--paper-bright); }

/* the timeline: the selected part in accent, a handle at each end. The
   grips hang outside their points like brackets, IN's to the left and OUT's
   to the right, so a short part never stacks one on the other. The side
   margins leave room for a grip at either end of the race. */
.fg-tl { position: relative; height: 52px; margin: 0 34px; touch-action: none; cursor: pointer; user-select: none; }
.fg-tl__track { position: absolute; left: 0; right: 0; top: 22px; height: 8px; background: rgba(244, 242, 238, .14); }
.fg-tl__sel { position: absolute; top: 16px; height: 20px; background: rgba(232, 155, 60, .32); border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
.fg-tl__head { position: absolute; top: 4px; width: 2px; height: 44px; margin-left: -1px; background: var(--paper-bright); pointer-events: none; }
.fg-tl__head::before { content: ""; position: absolute; left: -5px; top: -4px; border: 6px solid transparent; border-top: 7px solid var(--paper-bright); border-bottom: 0; }
.fg-tl__h { position: absolute; top: 6px; width: 32px; height: 40px; background: var(--accent); cursor: ew-resize; outline: none; display: flex; align-items: center; justify-content: center; }
.fg-tl__h span { font: 700 10px/1 var(--mono); letter-spacing: .04em; color: var(--ink); pointer-events: none; }
.fg-tl__h--in { margin-left: -32px; border-radius: 3px 0 0 3px; }
.fg-tl__h--out { margin-left: 0; border-radius: 0 3px 3px 0; }
.fg-tl__h:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--paper-bright); }
.fg-trim__set { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.fg-trim__at { margin-left: 4px; font-weight: 500; text-transform: none; opacity: .75; font-variant-numeric: tabular-nums; }
.fg-trim__sum { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 13px/1.3 var(--mono); color: var(--on-dark-label); }
.fg-trim__sum b { color: var(--paper-bright); font-weight: 600; }
.fg-trim__sum small { font-size: 11px; opacity: .7; }
.fg-trim__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 400 12.5px/1.5 var(--mono); color: rgba(244, 242, 238, .7); }
.fg-trim__steps li > b:first-child { display: inline-block; width: 18px; color: var(--accent); }
.fg-trim__steps b { color: var(--paper-bright); font-weight: 600; }
.fg-trim__steps .fg-trim__fine { margin-top: 4px; color: rgba(244, 242, 238, .5); }
.fg-trim__price { margin-left: auto; font-weight: 700; color: var(--paper-bright); }
.fg-trim__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.fg-note:empty { display: none; }

/* ---------------------------------------------------------------- cart -- */
/* a bar that's always reachable once something is in the cart, and the
   drawer it opens */
.fg-cartbar {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100% - 28px);
  padding: 15px 20px 15px 22px;
  background: var(--accent);
  color: var(--ink);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font: 700 13px/1 var(--sans);
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.fg-cartbar:hover { background: var(--accent-hover); }
.fg-cartbar__total { font-family: var(--mono); }

.fg-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 80;
  width: min(440px, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--on-dark-rule);
  background: var(--ink);
  color: var(--paper);
  overflow-y: auto;
}
.fg-drawer::backdrop,
.fg-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.fg-panel { display: flex; flex-direction: column; gap: 18px; padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); }
.fg-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fg-panel__title { font: 700 22px/1.1 var(--sans); color: var(--paper-bright); }
.fg-x { flex: none; width: 36px; height: 36px; background: none; border: 1px solid rgba(244, 242, 238, .3); border-radius: 2px; color: var(--paper); cursor: pointer; font: 400 18px/1 var(--sans); }
.fg-x:hover { border-color: var(--paper); }

.fg-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--on-dark-rule); }
.fg-line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--on-dark-rule); }
.fg-line img { flex: none; width: 64px; aspect-ratio: 16 / 9; object-fit: cover; background: #1b1c20; }
.fg-line__title { flex: 1; min-width: 0; font: 600 14px/1.3 var(--sans); color: var(--paper-bright); }
.fg-line__price { font: 600 13px/1 var(--mono); color: var(--paper); }
.fg-line__rm { padding: 6px; background: none; border: 0; cursor: pointer; font: 500 11px/1 var(--mono); color: var(--on-dark-label); }
.fg-line__rm:hover { color: var(--paper); }
.fg-line__acts { display: flex; flex-direction: column; align-items: flex-end; }
.fg-empty { font: 400 14px/1.6 var(--sans); color: var(--on-dark-card); }

.fg-offer { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--accent); }
.fg-offer[data-active="true"] { background: rgba(232, 155, 60, .08); }
.fg-offer__title { font: 700 16px/1.3 var(--sans); color: var(--paper-bright); }
.fg-offer p { font: 400 13.5px/1.55 var(--sans); color: var(--on-dark-card); }
.fg-offer .btn { align-self: flex-start; padding: 11px 16px; font-size: 12px; }

.fg-line__price s, .fg-offer__title s { opacity: .55; font-weight: 500; margin-right: 4px; }
.fg-deal { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font: 600 12px/1 var(--mono); letter-spacing: .08em; color: var(--accent); }
.fg-deal[hidden] { display: none; }
.fg-total { display: flex; justify-content: space-between; align-items: baseline; font: 700 18px/1 var(--sans); color: var(--paper-bright); }
.fg-total span:last-child { font-family: var(--mono); }
.fg-note { font: 400 12.5px/1.55 var(--mono); color: rgba(244, 242, 238, .6); }
.fg-note--accent { color: var(--accent); }

/* ------------------------------------------------------ claim + share -- */
.fg-dialog {
  width: min(460px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  padding: 0;
  border: 1px solid var(--on-dark-rule);
  background: var(--ink);
  color: var(--paper);
}
.fg-qr { align-self: center; width: 220px; padding: 14px; background: var(--white); }
.fg-qr svg { display: block; width: 100%; height: auto; }
.fg-copy { display: flex; gap: 10px; align-items: flex-end; }
.fg-copy input { flex: 1; min-width: 0; padding: 9px 0; background: transparent; border: 0; border-bottom: 1px solid rgba(244, 242, 238, .28); color: var(--paper); font: 400 14px var(--mono); }

/* --------------------------------------------------------- paid return -- */
.fg-delivery { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 24px; padding: 24px; border: 1px solid var(--accent); }
.fg-delivery__title { font: 700 22px/1.2 var(--sans); color: var(--paper-bright); }
.fg-delivery p { font: 400 14.5px/1.6 var(--sans); color: var(--on-dark-body); }
.fg-delivery__ref { font: 600 13px/1 var(--mono); letter-spacing: .08em; color: var(--accent); }
.fg-downloads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--on-dark-rule); }
.fg-downloads li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid var(--on-dark-rule); }
.fg-downloads__name { font: 600 14.5px/1.3 var(--sans); color: var(--paper-bright); }
.fg-downloads__exp { display: block; margin-top: 4px; font: 500 11px/1.4 var(--mono); color: var(--on-dark-label); }
.fg-downloads .btn { padding: 11px 16px; font-size: 12px; }
.fg-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px; border: 2px solid rgba(244, 242, 238, .25); border-top-color: var(--accent); border-radius: 50%; animation: fg-spin .8s linear infinite; }
@keyframes fg-spin { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  .fg-tools { position: static; }
  .fg-tools .field,
  .fg-tools .field--narrow,
  .fg-tools .field--race { flex: 1 1 100%; max-width: none; }
  .fg-tools__count { margin-left: 0; padding-bottom: 0; }
  .field select { font-size: 16px; }
  .fg-cards,
  .fg-cards--wide { grid-template-columns: 1fr; }
  .clip__add { flex: 1; }
  .fg-drawer { border-left: 0; }
  .fg-copy { flex-direction: column; align-items: stretch; }
  .fg-trim__set .btn { flex: 1 1 40%; }
  .fg-trim__set #fg-trim-loop { order: 3; flex-basis: 100%; }
  /* the viewer is the whole screen on a phone */
  .fg-dialog.fg-trim { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; }
  .fg-dialog.fg-trim[data-mode="watch"] { width: 100%; }
  .fg-trim[data-mode="watch"] .fg-trim__stage { height: auto; aspect-ratio: 4 / 3; }
  .fg-trim__actions .btn { flex: 1 1 100%; }
}