/* Beta access page: the form, the issued key and the notes under it. Shares the tokens in style.css. */

.guide.beta {
  max-width:1000px;
}

.beta .lede,.beta .issued,.beta .facts {
  max-width:760px;
}

.entry {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-12);
  margin:40px 0 0;
}

.access {
  display:grid;
  align-content:start;
  gap:20px;
  min-width:0;
}

.access + .access {
  padding-left:var(--space-12);
  border-left:1px solid var(--border);
}

.access h2 {
  font-size:17px;
  font-weight:500;
  margin:0;
}

.entry[hidden],.issued[hidden] {
  display:none;
}

.optional {
  margin-left:var(--space-2);
  font-weight:400;
  color:var(--text-muted);
}

.roles {
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}

.roles legend {
  padding:0;
  margin-bottom:8px;
  font-size:12px;
  font-weight:500;
}

.role-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-2);
}

.role {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  min-height:var(--control-height);
  padding:0 var(--space-3);
  font-size:13px;
  background:var(--surface-raised);
  border:1px solid var(--border-control);
  border-radius:var(--radius-control);
  cursor:pointer;
  transition:border-color var(--duration-fast);
}

.role:hover {
  border-color:var(--text-muted);
}

.role:has(input:checked) {
  border-color:var(--accent);
}

.role input {
  margin:0;
  accent-color:var(--accent);
}

.role:has(input:focus-visible) {
  outline:var(--focus-ring);
  outline-offset:2px;
}

.role input:focus-visible {
  outline:none;
}

.access .download {
  margin-top:4px;
}

.issued {
  margin:48px 0 0;
  padding:28px;
  background:var(--surface-raised);
  border:1px solid var(--border);
  border-radius:4px;
}

.issued h2 {
  font-size:17px;
  font-weight:500;
  margin:0 0 16px;
}

.key-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:stretch;
}

.key {
  display:flex;
  align-items:center;
  min-height:var(--control-height);
  padding:12px 14px;
  font-size:13px;
  line-height:1.6;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border-control);
  border-radius:var(--radius-control);
  user-select:all;
}

.copy {
  min-width:88px;
  height:auto;
  padding:0 18px;
  font-size:12px;
  font-weight:700;
  color:var(--surface);
  background:var(--accent);
  border:0;
  border-radius:var(--radius-control);
  transition:background var(--duration-fast);
}

.copy:hover {
  background:var(--text-hover);
}

.copy[data-state="copied"] {
  background:var(--text);
}

.key-note {
  margin:14px 0 0;
  font-size:12px;
  line-height:1.8;
  color:var(--text-muted);
}

.issued .steps {
  margin-top:24px;
}

.issued .steps li {
  padding:20px 0;
}

.issued .steps li:last-child {
  padding-bottom:0;
}

.issued .steps h3 {
  font-size:14px;
  font-weight:500;
  margin:0 0 8px;
}

.guide .facts {
  margin-top:48px;
}

@media(max-width:760px) {
  .entry {
    grid-template-columns:1fr;
  }
  .access + .access {
    padding:var(--space-12) 0 0;
    border-left:0;
    border-top:1px solid var(--border);
  }
  .issued {
    padding:24px;
  }
  .key-row {
    grid-template-columns:1fr;
  }
  .copy {
    height:var(--control-height);
  }
}

@media(max-width:390px) {
  .issued {
    padding:18px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .copy,.role {
    transition:none;
  }
}