.video-choices { flex-wrap:wrap; }
.video-choices .open-series { background:#c9ed79; border:1px solid #b2d65f; color:#17352d; border-radius:1rem; font:inherit; font-weight:700; padding:.72rem 1rem; min-height:44px; cursor:pointer; }
.replay-nav { display:flex; justify-content:flex-end; gap:.5rem; align-items:center; padding:.5rem .9rem; }
.replay-nav button { min-height:44px; font:inherit; font-weight:650; color:#143b35; background:#edf5ee; border:1px solid #a6bdb5; border-radius:.7rem; padding:.45rem .75rem; cursor:pointer; }
.workspace.expanded .replay-nav { position:absolute; top:0; z-index:4; left:0; right:0; justify-content:space-between; padding:max(.25rem,env(safe-area-inset-top)) max(.5rem,env(safe-area-inset-right)) .2rem max(.5rem,env(safe-area-inset-left)); pointer-events:none; }
.workspace.expanded .replay-nav button { pointer-events:auto; background:rgba(246,251,248,.94); }
.workspace.expanded .stagehead { visibility:hidden !important; }
.workspace.expanded.is-saving .player { visibility:visible; pointer-events:auto; }
#save[aria-busy=true] { opacity:1; }
#saveBar #download[hidden] { display:none; }
#saveBar #download { display:inline-flex; align-items:center; min-height:42px; padding:.35rem .8rem; border-radius:.6rem; background:#143d3b; color:white; text-decoration:none; }
.workspace.expanded .player { z-index:3; overflow-y:auto; }
@media(max-width:540px){.card .metric {width:49%;} .elbow-metric strong {font-size:16px;} .elbow-metric button {margin-top:.4rem;}}

/* Keep the video and its measurement canvas in the same portrait rectangle. */
@media (hover: hover) and (pointer: fine), (min-width: 980px) {
  .workspace:not(.expanded) .stage.loaded.portrait {
    width: min(100%, calc(66vh * var(--source-ratio)));
    width: min(100%, calc(66dvh * var(--source-ratio)));
    height: auto;
    max-height: none;
    margin-inline: auto;
    aspect-ratio: var(--source-ratio);
  }
  .workspace.expanded:has(.stage.loaded.portrait) {
    display: grid;
    grid-template: "nav" auto "frame" minmax(0, 1fr) "controls" auto / minmax(0, 1fr);
  }
  .workspace.expanded:has(.stage.loaded.portrait) .replay-nav {
    grid-area: nav;
    position: relative;
    inset: auto;
  }
  .workspace.expanded:has(.stage.loaded.portrait) .player {
    grid-area: controls;
    position: relative;
    inset: auto;
    max-height: 40vh;
  }
  .workspace.expanded.quiet:has(.stage.loaded.portrait) .player { display: none; }
  .workspace.expanded .stage.loaded.portrait {
    grid-area: frame;
    position: relative;
    inset: auto;
    place-self: center;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: 100%;
    max-width: 100%;
    aspect-ratio: var(--source-ratio);
    /* Fill the grid row until its width becomes the limiting dimension. */
    align-self: stretch;
  }
  .stage.loaded.portrait #vid { object-fit: contain; }
}