/* The public view (public/view.html). It shares the document with the other
   views, so every rule holds only while it shows: html[data-view="public"].
   :where() keeps each rule's own specificity, as on the page this view was. */
:where(html[data-view="public"]) {
  &:root { color-scheme: light; --ink:#051c23; --link:#064d90; }
  & * { box-sizing:border-box; }
  & body { margin:0; height:100dvh; display:flex; flex-direction:column; background:#eef0ef; color:var(--ink); font:14px/1.5 var(--font-sans); }
  & #preview { flex:1; min-height:0; position:relative; cursor:pointer; overflow:hidden; overflow:clip; }
  & #preview picture, & #preview img, & #preview-animation { display:block; width:100%; height:100%; object-fit:fill; }
  & #preview-animation { position:absolute; inset:0; }
  & [hidden], & #preview img[hidden] { display:none !important; }
  & #preview-unavailable { position:absolute; inset:40% 20px auto; margin:0; text-align:center; }
  /* The bar floats over the recording in the map's own button style, so the
     page reads as the app and not as a web page with a footer. */
  & footer { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:2; max-width:calc(100% - 24px); }
  & footer nav { display:flex; align-items:center; gap:8px; white-space:nowrap; }
  & button { cursor:pointer; font:inherit; }
  & .pbar-group { display:flex; align-items:center; height:38px; padding:0 6px; border-radius:999px; background:#fff; box-shadow:0 3px 14px rgba(5,28,35,.18); }
  & .pbar-group button { height:38px; padding:0 12px; border:0; background:none; color:#37494f; font:600 13.5px/1 var(--font-sans); }
  & .pbar-group button:hover { color:var(--ink); }
  & .pbar-icon { width:38px; display:grid; place-items:center; padding:0 !important; }
  & #preview-motion { border-right:1px solid #dfe5e7; border-radius:0; margin-right:4px; }
  & #preview-motion .pbar-play, & #preview-motion.paused .pbar-pause, & .pbar-label { display:none; }
  & #preview-motion.paused .pbar-play { display:block; }
  & #preview-signin { height:38px; padding:0 18px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:600 13.5px/1 var(--font-sans); box-shadow:0 3px 14px rgba(5,28,35,.22); }
  & #preview-signin:hover { background:#0b2f3a; }
  @media(max-width:640px) { & footer { bottom:16px; } & footer nav { gap:6px; } & .pbar-group button { padding:0 10px; } & #preview-signin { padding:0 16px; } }
  & :focus-visible { outline:3px solid var(--link); outline-offset:-3px; }
  & dialog { box-sizing:border-box; width:min(440px, calc(100% - 40px)); border:0; border-radius:14px; padding:26px 26px 22px; color:var(--ink); box-shadow:0 24px 60px -12px rgba(2,14,18,.45); }
  & dialog::backdrop { background:rgba(5,28,35,.58); }
  & dialog h1 { margin:0 0 8px; padding-right:36px; font-family:var(--font-display); font-size:19px; line-height:1.25; }
  & dialog p { margin:0 0 18px; font-size:14.5px; line-height:1.55; color:#37494f; }
  & dialog .dialog-x { position:absolute; top:10px; right:10px; width:36px; height:36px; border:0; border-radius:999px; background:#f1f4f5; color:#37494f; display:grid; place-items:center; }
  & dialog .dialog-close { height:38px; padding:0 18px; border:0; border-radius:999px; background:var(--ink); color:#fff; font:600 13.5px/1 var(--font-sans); }

  & #preview-card { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; box-sizing:border-box; width:min(480px, calc(100% - 32px)); text-align:center; pointer-events:none; background:rgba(5,28,35,.9); color:#fff; padding:22px 26px 24px; border-radius:14px; box-shadow:0 6px 28px rgba(0,0,0,.45); }
  & #preview-card-when { margin:0 0 10px; font-family:var(--display, inherit); font-size:22px; font-weight:normal; line-height:1.2; letter-spacing:-.01em; }
  & #preview-card-now { margin:-4px 0 12px; font-size:15px; line-height:1.3; color:#9edfff; font-variant-numeric:tabular-nums; }
  & #preview-card p { margin:0 auto 18px; max-width:34ch; font-size:17px; line-height:1.5; text-wrap:balance; }
  & #preview-card .preview-card-note { box-sizing:border-box; max-width:42.8ch; padding:10px 12px; background:rgba(158,223,255,.10); border:1px solid rgba(158,223,255,.24); border-radius:8px; font-size:13.5px; }
  & #preview-card-cta { display:inline-block; margin:0; border:0; background:#9edfff; color:#051c23; border-radius:999px; padding:9px 18px; font-weight:600; font-size:13.5px; line-height:1; }
  & #preview:hover #preview-card-cta { background:#c4ebff; }
  @media(max-width:640px) { & #preview-card { display:none; } }
  /* A shared link: the card says who shared it, also on a phone. */
  & #preview-card-now[hidden] { display:none; }
  & #preview-card[data-share="live"] ul, & #preview-card[data-share] .preview-card-note { display:none; }
  @media(max-width:640px) { & #preview-card[data-share] { display:block; } }
  & #preview-card ul { list-style:none; margin:0 auto 16px; padding:0; max-width:40ch; text-align:left; display:flex; flex-direction:column; gap:8px; font-size:14px; line-height:1.4; }
  & #preview-card li { display:flex; gap:9px; align-items:flex-start; }
  & #preview-card li svg { flex:none; margin-top:2px; color:#9edfff; }
  & #preview-card { width:min(520px, calc(100% - 32px)); }
  @media(max-height:760px) { & #preview-card { padding:16px 20px 18px; } & #preview-card p { font-size:15px; margin-bottom:12px; } & #preview-card ul { gap:5px; font-size:13px; margin-bottom:12px; } }
  /* A short window: the card stays above the bar, so its button shows when it has the focus. */
  @media(max-height:640px) { & #preview-card { top:calc(50% - 28px); max-height:calc(100% - 72px); overflow-y:auto; } & #preview-card:not([data-share]) ul, & #preview-card .preview-card-note { display:none; } }
  @media(max-height:500px) { & #preview-card ul { display:none; } }
}