/* The beta (beta.html; Cyrus, 22 Oct 2026: "beta page should be mirrored into complex state site following the cyrusrex
   beta page but with the corrected branding"): cyrusrex.com's /apps/beta as it was laid out, in this site's own colours,
   type and parts (site.css: the label, the list, the panel), CS/M's orange square where cyrusrex.com's page had its
   orange: the cursor in each empty field, each line's mark, Latest, the heads' squares. Nothing kept (rule 9). */

.bt-gate[hidden], .bt-in[hidden], .tf-form[hidden] { display: none !important; }

/* a field's label, as the site's labels are */
/* who the password is for (his copy audit, 23 Oct 2026: "Already invited? Enter your beta password") */
.bt-ask { max-width: 46ch; }
.bt-ask b { font-weight: 600; }
.bt-label { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* a field on its line, a button at its end (the gate's); the line darker while it has the focus */
.bt-row { position: relative; display: flex; align-items: center; gap: 0.8rem; border-bottom: 1px solid var(--fg); }
.bt-row:focus-within, .bt-row:has([aria-invalid='true']) { box-shadow: 0 1px 0 currentColor; }
.bt-field { flex: 1; width: 0; min-width: 0; padding: 0.6rem 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: max(16px, 1.15rem); outline: none; }
.bt-field:-webkit-autofill { -webkit-text-fill-color: currentColor; box-shadow: 0 0 0 60px var(--bg) inset; }
/* an old terminal's cursor in each empty field, CS/M's orange square (Cyrus: "have a blinking dot old school type
   interface for pass so they know where to type that its an input"; 18 Oct 2026: "Add blinking dots to the beta page for
   name and email signup"); once anything is typed it goes, and the field's own caret is orange */
.bt-cue { caret-color: var(--square); }
.bt-cue::placeholder { color: transparent; }
.bt-cue:placeholder-shown { caret-color: transparent; }
.bt-cursor { display: none; position: absolute; left: 0; top: 50%; width: 0.62em; height: 0.62em; margin-top: -0.31em; background: var(--square); font-size: max(16px, 1.15rem); pointer-events: none; }
.bt-cue:placeholder-shown + .bt-cursor { display: block; }
@media (prefers-reduced-motion: no-preference) { .bt-cursor { animation: bt-cursor 1.06s steps(1, end) infinite; } }
@keyframes bt-cursor { 50% { opacity: 0; } }

/* the page's buttons: the site's, in its ink, the orange square before their word */
.bt-go { display: inline-flex; flex: none; align-items: center; gap: 0.65rem; min-height: 44px; padding: 0.75em 1.05em; border: 1px solid var(--fg); background: var(--fg); color: var(--bg); font: inherit; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.bt-go::before { content: ''; flex: none; width: 0.7em; height: 0.7em; background: var(--square); }
@media (hover: hover) { .bt-go:hover { background: transparent; color: var(--fg); } }
/* its square, pointed at, makes a quarter turn, as the site's squares do (site.css) */
.bt-go::before { transition: transform 0.4s var(--ease); }
.bt-go:is(:hover, :focus-visible)::before { transform: rotate(90deg); }
.bt-row .bt-go { margin-block: 0.35rem; }
[aria-busy='true'] :is(.bt-go, .bt-get, .bt-leave) { opacity: 0.5; cursor: progress; }

/* what the page says back, under what it is about, its square before it */
.bt-said { min-height: 1.5em; max-width: 56ch; font-size: 0.95rem; line-height: 1.5; }
.bt-said:not(:empty)::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--square); vertical-align: 0.06em; }
.bt-said.is-bad { font-weight: 500; }

/* the gate, the first thing to do: the password, Enter at its line's end */
.bt-gate { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; max-width: 62rem; margin-bottom: clamp(3rem, 7vw, 5rem); }
.bt-gate .bt-row { max-width: 34rem; }

/* each part's head, the site's label with CS/M's square */
.bt-h { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bt-h::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--square); }
.bt-h:focus { outline: none; }
.bt-in .list + .bt-said { margin: 0.8rem 0 clamp(3rem, 7vw, 5rem); }
.bt-in .list:not(.bt-builds) { margin-bottom: clamp(3rem, 7vw, 5rem); }
.bt-in .list code { font-family: inherit; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) { .bt-in.is-in, .tf-form.is-in { animation: bt-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; } }
@keyframes bt-in { from { opacity: 0; transform: translateY(10px); } }

/* the apps' icons, rounded as iOS rounds them */
.bt-icon { flex: none; width: 40px; height: 40px; border-radius: 22.5%; }

/* each app's newest build: its icon and name, when it was made, what is new in it, what it needs, its Download; under it,
   folded, the build before and the change log */
.bt-builds { max-width: 62rem; }
.bt-builds > li { grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-areas: 'n a' 'n t' 'n b' 'f f'; align-items: baseline; }
.bt-builds .a { display: flex; align-items: center; gap: 14px; }
.bt-builds .t { display: grid; gap: 0.25rem; }
.bt-builds > li > .bt-go { grid-area: b; justify-self: start; margin-top: 0.6rem; }
.bt-fine { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); }
@media (min-width: 600px) { .bt-builds > li { grid-template-areas: 'n a' 'n t' 'n b' 'n f'; } }
@media (min-width: 900px) {
  .bt-builds > li { grid-template-columns: 3.2rem minmax(15rem, 1fr) minmax(0, 2fr) auto; grid-template-areas: 'n a t b' '. . f f'; align-items: center; }
  .bt-builds > li > .bt-go { margin-top: 0; }
}
/* Latest, beside the newest build's day */
.bt-builds > .is-first > .t > .bt-when::after { content: 'Latest'; display: inline-block; margin-left: 0.8em; padding: 3px 7px 2px; background: var(--square); color: var(--ink); font-size: 0.6rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; vertical-align: 0.2em; }

/* what changed in a build, a line each, marked New, Improved or Fixed (Cyrus, 17 Oct 2026: "a two line change log of
   features etc"; 19 Oct 2026, "no pills"): each mark a square and its word, New's filled orange, Improved's drawn,
   Fixed's filled; a line going on from the one before has none; a build none of whose lines has one, the square alone */
.bt-notes { display: grid; gap: 0.4rem; margin: 0.4rem 0 0.2rem; font-size: 0.95rem; line-height: 1.5; }
.bt-note { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.bt-kind { font-size: 0.66rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.bt-kind::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border: 1px solid currentColor; }
.bt-kind[data-kind='new'] { color: var(--fg); }
.bt-kind[data-kind='new']::before { border-color: var(--square); background: var(--square); }
.bt-kind[data-kind='fixed']::before { background: currentColor; }
.bt-kind:empty::before { content: none; }
.bt-say { min-width: 0; }
.bt-notes.is-plain .bt-note { grid-template-columns: 7px minmax(0, 1fr); gap: 12px; }
.bt-notes.is-plain .bt-kind { align-self: start; width: 7px; height: 7px; margin-top: 0.56em; background: var(--square); }
@media (max-width: 560px) {
  .bt-notes:not(.is-plain) .bt-note { display: block; }
  .bt-notes:not(.is-plain) .bt-kind { margin-right: 0.8em; }
  .bt-notes:not(.is-plain) .bt-kind:empty { display: none; }
}

/* the build before and the change log, folded under each app's newest (Cyrus, 19 Oct 2026: "show the newest, then have
   a fold open that shows the last version as well as a change log"): a box with a plus that turns to a minus, its words,
   how many builds its log holds; open, the build before with a Download of its own, then every build from the first,
   the six newest at first and the rest a press away */
.bt-more { grid-area: f; min-width: 0; margin-top: 0.5rem; }
.bt-more > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0.55rem 0; border-top: 1px solid var(--hair); list-style: none; cursor: pointer; font-size: 0.72rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
.bt-more > summary::-webkit-details-marker { display: none; }
.bt-sign { position: relative; flex: none; width: 22px; height: 22px; border: 1px solid currentColor; }
.bt-sign::before, .bt-sign::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; background: currentColor; transition: transform 0.3s; }
.bt-sign::after { transform: rotate(90deg); }
.bt-more[open] > summary .bt-sign::after { transform: rotate(180deg); }
.bt-more-say { min-width: 0; text-wrap: balance; }
.bt-more-count { flex: none; margin-left: auto; padding-left: 0.8rem; color: var(--muted); letter-spacing: 0.06em; }
@media (hover: hover) { .bt-more > summary:hover .bt-sign, .bt-all:hover .bt-sign { border-color: var(--square); } }
.bt-sub { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bt-more-body > .bt-sub { margin: 1.3rem 0 0.2rem; }
.bt-prev { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.4rem; padding: 0.5rem 0 1rem; border-bottom: 1px solid var(--hair); }
.bt-prev-id { display: grid; gap: 0.3rem; min-width: 0; }
.bt-was { font-size: 0.95rem; }
.bt-get { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 44px; padding: 0 16px; border: 1px solid var(--fg); background: transparent; color: var(--fg); font: inherit; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.bt-get::before { content: ''; flex: none; width: 0.7em; height: 0.7em; border: 1.5px solid currentColor; }
@media (hover: hover) { .bt-get:hover { background: var(--fg); color: var(--bg); } }
.bt-get::before { transition: transform 0.4s var(--ease); }
.bt-get:is(:hover, :focus-visible)::before { transform: rotate(90deg); }
.bt-log > li { padding: 0.9rem 0 0.85rem; border-top: 1px solid var(--hair); }
.bt-log > li:first-child { padding-top: 0.6rem; border-top: 0; }
.bt-log > li:focus { outline: none; }
.bt-log-head { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bt-log-head b { color: var(--fg); font-weight: 500; }
.bt-log .bt-notes { margin: 0.5rem 0 0; }
.bt-all { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0.55rem 0; border: 0; border-top: 1px solid var(--hair); background: none; color: inherit; font: inherit; font-size: 0.72rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.14em; text-align: left; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* the TestFlight list, in the site's reversed panel once the gate has opened: its head, the address and a name, the
   apps with their icons and boxes, and Join; on one row on a wide screen, one under another on a phone */
.tf-form { gap: 1rem clamp(1rem, 3vw, 2rem); grid-template-columns: minmax(0, 1fr); grid-template-areas: 'h' 'email' 'name' 'apps' 'go' 'said' 'fine'; max-width: 62rem; margin-bottom: clamp(3rem, 7vw, 5rem); }
.tf-form .bt-h { grid-area: h; margin: 0; color: inherit; }
.tf-email { grid-area: email; } .tf-name-field { grid-area: name; } .tf-apps { grid-area: apps; } .tf-go { grid-area: go; } #tf-said { grid-area: said; } .tf-fine { grid-area: fine; }
@media (min-width: 600px) { .tf-form { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: 'h h' 'email name' 'apps apps' 'go go' 'said said' 'fine fine'; } }
@media (min-width: 960px) { .tf-form { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; grid-template-areas: 'h h h' 'email name go' 'apps apps apps' 'said said said' 'fine fine fine'; } .tf-go { align-self: end; } }
.tf-field { display: grid; gap: 0.35rem; min-width: 0; }
.tf-form .bt-row { border-bottom-color: currentColor; }
.tf-form .bt-field:-webkit-autofill { box-shadow: 0 0 0 60px var(--rev-bg) inset; }
.tf-apps { min-width: 0; margin: 0; padding: 0; border: 0; }
.tf-apps legend { padding: 0; margin-bottom: 0.5rem; }
.tf-choices { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; }
.tf-app { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.tf-app input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 0; border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; cursor: pointer; }
.tf-app input::before { content: ''; width: 12px; height: 12px; background: currentColor; transform: scale(0); transition: transform 0.15s; }
.tf-app input:checked::before { transform: none; }
.tf-form .bt-go { border-color: var(--rev-fg); background: var(--rev-fg); color: var(--rev-bg); }
@media (hover: hover) { .tf-form .bt-go:hover { background: transparent; color: var(--rev-fg); } }
.tf-form .bt-said { min-height: 0; margin: 0; }
.tf-fine { max-width: 64ch; margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.bt-leave { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; cursor: pointer; }