/* The beta application form (beta.js), in a native dialog. */
.beta-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; border: 1px solid #d7d7d4; border-radius: 4px; background: #fff; color: var(--ink); box-shadow: 0 30px 70px -30px #050c1ad0; }
.beta-dialog::backdrop { background: #0d1b36b3; backdrop-filter: blur(2px); }
.beta-dialog[open] { display: flex; animation: beta-in .24s cubic-bezier(.22,.61,.36,1); }
@keyframes beta-in { from { opacity: 0; transform: translateY(8px); } }
/* The heading stays; only the form scrolls, with the page's slim scrollbar inside the panel. */
.beta-panel { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.beta-head { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-inline: 28px; padding: 26px 0 20px; border-bottom: 1px solid var(--line); }
.beta-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 18px 22px 28px; }
.beta-body::-webkit-scrollbar-track { margin-block: 6px; }
.beta-head .eyebrow { font-size: 10px; letter-spacing: .05em; color: var(--accent-ink); }
.beta-head h2 { margin: 10px 0 8px; font-size: 28px; }
.beta-head p { margin: 0; max-width: 560px; font-size: 14px; line-height: 1.7; color: #69747c; }
.beta-close { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; font-size: 20px; line-height: 1; color: #66737c; }
.beta-close:hover { border-color: #a6a6a6; color: var(--ink); }

.beta-form fieldset { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 16px; margin: 0; padding: 18px 0 20px; border: 0; border-bottom: 1px solid var(--line); }
.beta-form legend { float: left; grid-column: 1 / -1; width: 100%; padding: 0; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #6f7880; }
.beta-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; color: #4f5961; }
.beta-form label b, .beta-note>b { margin-left: 2px; color: var(--accent-ink); font-weight: 400; }
.beta-wide { grid-column: 1 / -1; }
.beta-form>.beta-wide { margin-top: 18px; }
.beta-form input, .beta-form select, .beta-form textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #d9dcde; border-radius: 3px; background: #fff; color: var(--ink); font: 15px var(--font); transition: border-color .15s; }
.beta-form textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
/* Dropdowns look like the inputs, with a drawn chevron (the page uses no SVGs). Where the browser
   allows (appearance: base-select), the list opens as a popover like shadcn's Select. */
.beta-form select { appearance: none; padding-right: 36px; cursor: pointer; background: linear-gradient(45deg, transparent 40%, #7a858d 40% 60%, transparent 60%) calc(100% - 19px) 50% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 40%, #7a858d 40% 60%, transparent 60%) calc(100% - 13px) 50% / 6px 6px no-repeat, #fff; }
.beta-form select:has(option[value=""]:checked) { color: #7a858d; }
@supports (appearance: base-select) {
  .beta-form select, .beta-form ::picker(select) { appearance: base-select; }
  .beta-form select { display: flex; align-items: center; }
  .beta-form select::picker-icon { display: none; }
  .beta-form ::picker(select) { margin-block: 4px; padding: 4px; border: 1px solid #e1e5e8; border-radius: 4px; background: #fff; box-shadow: 0 12px 28px -12px #1d2b4f40, 0 2px 6px -2px #1d2b4f14; opacity: 1; transition: opacity .12s, overlay .12s allow-discrete, display .12s allow-discrete; }
  .beta-form ::picker(select):not(:popover-open) { opacity: 0; }
  @starting-style { .beta-form ::picker(select):popover-open { opacity: 0; } }
  .beta-form option { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px; border-radius: 3px; color: var(--ink); font-size: 14px; cursor: pointer; }
  .beta-form option[value=""] { display: none; }
  .beta-form option:hover, .beta-form option:focus-visible { background: #f3f4f5; outline: 0; }
  .beta-form option:checked { font-weight: 500; }
  .beta-form option::checkmark { order: 1; margin-left: auto; color: var(--accent-ink); content: '✓'; }
}
.beta-form input:hover, .beta-form select:hover, .beta-form textarea:hover { border-color: #b4bbc0; }
.beta-form input:focus-visible, .beta-form select:focus-visible, .beta-form textarea:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 0; border-color: transparent; }
.beta-form input:user-invalid, .beta-form textarea:user-invalid { border-color: #c2410c; }
/* Hidden from people; bots that fill it in are ignored by the API. */
.beta-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.beta-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.beta-note { margin: 0; font-size: 12px; line-height: 1.6; color: #66737c; }
.beta-actions .button:disabled { opacity: .6; cursor: progress; }
.beta-status { min-height: 1.6em; margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: #66737c; }
.beta-status[data-tone="error"] { color: #b4380a; }
.beta-done { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 34px 0 10px; }
.beta-done h3 { margin: 12px 0 0; font-size: 22px; font-weight: 500; letter-spacing: -.4px; }
.beta-done p { margin: 4px 0 22px; font-size: 14px; line-height: 1.7; color: #69747c; }

@media (max-width: 640px) {
  .beta-dialog { width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .beta-dialog[open] { height: 100dvh; }
  .beta-head { margin-inline: 16px; padding-top: 20px; }
  .beta-body { padding: 0 6px 24px 16px; }
  .beta-head h2 { font-size: 24px; }
  .beta-form fieldset { grid-template-columns: 1fr; }
  .beta-actions { flex-direction: column-reverse; align-items: stretch; }
  .beta-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .beta-dialog[open] { animation: none; }
}