/* The beta invitation shares the site's semantic navy, white and orange tokens. */
.beta { display: grid; grid-template-columns: 1fr 1.15fr; align-items: start; gap: clamp(2rem, 5vw, 5rem); }
.beta-intro, .beta-panel, .beta-field { min-width: 0; }
.beta-next { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1rem; }
.beta-next li { display: flex; align-items: start; gap: .8rem; font-size: .9375rem; }
.beta-next .symbol { color: var(--sb-copper); width: 24px; height: 24px; flex: none; margin-top: .1rem; }
.beta-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 1.5rem; padding: clamp(1.15rem, 3vw, 2rem); }
.beta-required, .beta-hint { color: var(--muted); font-size: .8125rem; line-height: 1.65; }
.beta-required { margin-bottom: 1.4rem; }
.beta-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.beta-field { display: grid; gap: .45rem; align-content: start; }
.beta-wide { grid-column: 1 / -1; }
.beta-field label { font-weight: 600; font-size: .9375rem; }
.beta-optional { font-weight: 400; color: var(--muted); }
.beta-hint { margin: 0; }
.beta-field :is(input, select, textarea) { width: 100%; min-width: 0; max-width: 100%; min-height: 48px; border: 1px solid var(--sb-control-border, var(--accent)); border-radius: .65rem; background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5; padding: .7rem .8rem; }
.beta-field textarea { resize: vertical; min-height: 8rem; }
.beta :is(input, textarea, select, button):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.beta-field [aria-invalid="true"] { border-width: 2px; }
.beta-field-error { display: block; font-size: .875rem; line-height: 1.6; font-weight: 600; color: var(--ink); }
.beta [hidden] { display: none !important; }
.beta-trap { display: none; }
.beta-consent { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: start; column-gap: .65rem; margin-top: 1.3rem; }
.beta-consent input { width: 1.25rem; height: 1.25rem; margin: .85rem 0 0; accent-color: var(--accent); }
.beta-consent label { min-height: 44px; padding-block: .65rem; font-size: .9375rem; line-height: 1.6; cursor: pointer; }
.beta-consent .beta-field-error { grid-column: 2; }
.beta-hint a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.beta-submit { margin-top: 1.5rem; width: 100%; border: 1px solid transparent; cursor: pointer; white-space: normal; }
.beta-submit:disabled { cursor: wait; background: var(--sb-accent); color: var(--sb-on-accent); }
.beta-errors { border: 2px solid var(--sb-control-border, var(--accent)); border-radius: .65rem; padding: .85rem 1rem; margin-bottom: 1.3rem; font-size: .9375rem; line-height: 1.6; }
.beta-status { margin: 1rem 0 0; font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.beta-status:empty { margin: 0; }
.beta-errors:focus, .beta-status:focus { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 55rem) { .beta { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .beta-fields { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .beta { scroll-behavior: auto; } }

/* Visible disclosure affordance, including its expanded state. */
.beta-optional-fields>summary{position:relative;min-height:48px;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:12px 32px 12px 0;list-style:none;cursor:pointer}
.beta-optional-fields>summary::-webkit-details-marker{display:none}
.beta-optional-fields>summary:after{content:"";position:absolute;right:8px;top:20px;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s}
.beta-optional-fields[open]>summary:after{transform:rotate(225deg);top:24px}
.beta-optional-fields>summary:hover{color:var(--accent)}
.beta-optional-fields>summary:focus-visible{outline:3px solid var(--sb-focus);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.beta-optional-fields>summary:after{transition:none}}

/* Keep the native role menu while reserving space for an inset arrow. */
.beta-select{position:relative;min-width:0}
.beta-select select{appearance:none;-webkit-appearance:none;padding-inline-end:42px}
.beta-select:after{content:"";position:absolute;inset-inline-end:17px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}