/* More room for video and review while retaining the existing phone layout. */
body.workspace-wide { max-width: 1400px; }
body.tagging-workspace { max-width: 1680px; }
@media (min-width: 901px) {
  .tagging-workspace .tag-layout { grid-template-columns: minmax(0, 1.7fr) minmax(330px, 1fr); gap: 24px; }
  .tagging-workspace .tag-video-frame,
  .tagging-workspace .tag-video-frame video { max-height: min(65vh, 760px); }
  .tagging-workspace .tag-video-col { min-width: 0; }
  .tagging-workspace #step1 { max-width: 920px; margin-inline: auto; }
}
.family-share-card { border-color: #b7cbee; background: var(--accent-soft); scroll-margin-top: 90px; }
.family-share-card h2 { margin-top: 0; }
.family-share-card p.sub { margin-bottom: 8px; }
.family-share-actions { margin-top: 10px; }
.family-share-actions button { margin-top: 0; min-height: 44px; }
.family-share-actions a { padding: 10px 0; }
.shot-map-marker { cursor: pointer; }
.shot-map-marker:hover .shot-hit-area,
.shot-map-marker:focus .shot-hit-area { fill: #fff; fill-opacity: .7; stroke: #10151c; stroke-width: 1; }
.shot-map-marker:focus { outline: none; }
.shot-map-legend { display: flex; gap: 10px 16px; flex-wrap: wrap; font-size: 13px; margin-top: 12px; }
.shot-map-legend span { display: inline-flex; gap: 6px; align-items: center; }
.map-save, .map-goal { display: inline-block; width: 10px; height: 10px; background: #178a53; }
.map-save { border-radius: 50%; }
.map-goal { background: #c62f22; }
.map-miss { font-size: 23px; color: #5b6472; line-height: 1; }
.map-second { font-size: 27px; color: #7437b5; line-height: 1; }
#shotMapHelp { max-width: 440px; font-size: 13px; }
#shotDots { isolation: isolate; }
.map-clip-dialog { width: min(960px, calc(100vw - 24px)); max-height: 90vh; padding: 20px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); }
.map-clip-dialog::backdrop { background: rgb(10 18 30 / .7); }
.map-clip-dialog h2 { margin: 0; }
.map-clip-dialog button { margin: 12px 0; }
.map-clip-dialog video { width: 100%; max-height: 65vh; display: block; background: #000; border-radius: 8px; }
.workspace-wide .upload-wrap { max-width: 1000px; }
@media (max-width: 640px) {
  .family-share-actions { align-items: stretch; }
  .family-share-actions button { flex: 1 1 140px; }
  .map-clip-dialog { padding: 14px; }
}