/* beta-modal.css: the closed beta "Private beta" popup (_beta_modal.html,
 * js/beta-modal.js). Owns the .bm-* namespace only. Every colour and face is
 * a page token (home.css :root, world.css html[data-theme="light"]), so it
 * follows both themes and the home type stack without its own palette.
 * Loaded after world.css. */

.bm-root{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.bm-root[hidden]{ display:none; }

.bm-scrim{
  position:absolute; inset:0;
  background:rgba(9,9,11,.46);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity 180ms ease;
}
html[data-theme="light"] .bm-scrim{ background:rgba(33,40,54,.28); }

.bm-dialog{
  position:relative;
  width:100%; max-width:420px;
  padding:28px 28px 22px;
  background:var(--bg-elevated);
  color:var(--text-primary);
  border-radius:10px;
  /* inset ring, not a border: 1px rounded borders bowtie in screenshots */
  box-shadow:inset 0 0 0 1px var(--border-default), var(--shadow-pop);
  font-family:var(--font-sans);
  opacity:0; transform:translateY(6px) scale(.985);
  transition:opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1);
}
.bm-dialog:focus{ outline:none; }

.bm-root.bm-in .bm-scrim{ opacity:1; }
.bm-root.bm-in .bm-dialog{ opacity:1; transform:none; }

.bm-title{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:20px; font-weight:600; line-height:1.25;
  letter-spacing:var(--tr-heading, -0.02em);
  color:var(--text-primary);
}
.bm-body{
  margin:0;
  font-size:15px; line-height:1.6;
  color:var(--text-secondary);
}
.bm-mail{
  color:var(--text-primary);
  text-decoration:underline;
  text-decoration-color:var(--border-default);
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.bm-mail:hover{ text-decoration-color:currentColor; }
.bm-mail:focus-visible{ outline:2px solid var(--text-primary); outline-offset:2px; border-radius:2px; }

.bm-actions{ display:flex; justify-content:flex-end; margin-top:24px; }
.bm-ok{
  min-width:88px; height:38px; padding:0 18px;
  border:none; border-radius:8px;
  background:var(--text-primary); color:var(--bg-primary);
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.01em;
  cursor:pointer;
  transition:opacity 120ms ease, transform 80ms ease;
}
.bm-ok:hover{ opacity:.88; }
.bm-ok:active{ transform:translateY(1px); }
.bm-ok:focus-visible{ outline:2px solid var(--text-primary); outline-offset:3px; }

/* doubled class: outranks world.css html:has(> body.hm) (0,1,2) */
html.bm-open.bm-open, html.bm-open.bm-open body{ overflow:hidden; }

@media (max-width:480px){
  .bm-dialog{ padding:24px 20px 18px; }
  .bm-title{ font-size:18px; }
  .bm-ok{ width:100%; height:44px; }
}

/* touch: a 44px OK on tablets too, not only under 480px */
@media (pointer:coarse){
  .bm-ok{ height:44px; }
  /* inline in the sentence: the box grows, the line does not move */
  .bm-mail{ padding:13px 0; margin:-13px 0; }
}

@media (prefers-reduced-motion:reduce){
  .bm-scrim, .bm-dialog{ transition:none; }
  .bm-dialog{ transform:none; }
}