/* The beta pages (beta.html, beta-feedback.html). Paper tokens from store.css
   only; nothing new is invented. Markup comes from js/beta.js. */

.beta-wrap { max-width: 640px; margin: 0 auto; padding: 0 16px 80px; }
.beta-head { padding: 46px 0 8px; }
.beta-head h1 { font-size: clamp(34px, 8vw, 56px); margin-bottom: 14px; }
.beta-sub-head { font-size: 16px; color: var(--inkMuted); max-width: 52ch; }

.beta-card {
  background: var(--surface); border: 1px solid var(--ink); border-radius: 3px;
  padding: 22px 20px; margin: 22px 0; box-shadow: 3px 3px 0 var(--hairline2);
}
.beta-card--ok { border-color: var(--olive); box-shadow: 3px 3px 0 var(--olive); }
.beta-h2 { font-size: clamp(24px, 5vw, 32px); margin-bottom: 12px; }
.beta-lede { font-size: 15px; color: var(--inkMuted); margin: 0 0 12px; max-width: 56ch; }
.beta-next { font-size: 15px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.beta-who { font-size: 13px; color: var(--inkDim); margin: 18px 0 0; }
.beta-alt { font-size: 13px; color: var(--inkDim); margin-top: 16px; }
.beta-sub { font-size: 12px; color: var(--inkDim); }
.beta-code { font-size: 17px; letter-spacing: 1px; color: var(--ink); margin-right: 6px; }

.beta-form { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.beta-form label, .beta-form legend { font-size: 12px; font-weight: 600; color: var(--inkMuted); text-transform: lowercase; letter-spacing: 0.3px; }
.beta-form input[type="text"], .beta-form input[type="email"], .beta-form input[type="password"],
.beta-form select, .beta-form textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--bg);
  border: 1px solid var(--ink); border-radius: 0; padding: 10px 12px; width: 100%;
}
.beta-form textarea { resize: vertical; min-height: 140px; }
.beta-form .st-btn { align-self: flex-start; margin-top: 8px; }
.beta-codeform input { font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; }
.beta-form input:focus-visible, .beta-form select:focus-visible, .beta-form textarea:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 1px; }
#betaFeedback { max-width: none; }

.beta-status { font-size: 13px; color: var(--inkMuted); min-height: 1.2em; }
.beta-status.is-error { color: var(--oxblood); }

.beta-mods, .beta-cohorts { list-style: none; margin: 4px 0 8px; padding: 0; }
.beta-mods li, .beta-cohorts li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 9px 0; border-bottom: 1px solid var(--hairline);
}
.beta-mods li:last-child, .beta-cohorts li:last-child { border-bottom: 0; }
.beta-mod { font-weight: 700; text-transform: lowercase; letter-spacing: -0.01em; }
.beta-fb { margin-left: auto; font-size: 12px; font-weight: 600; text-transform: lowercase; }

/* 1-5 stars, right-to-left so :checked ~ label lights the ones before it. */
.beta-stars { border: 0; padding: 0; margin: 6px 0 2px; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.beta-stars legend { width: 100%; margin-bottom: 4px; }
.beta-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.beta-stars label { font-size: 30px; line-height: 1; color: var(--hairline2); cursor: pointer; padding: 2px; }
.beta-stars input:checked ~ label, .beta-stars label:hover, .beta-stars label:hover ~ label { color: var(--mustard); }
.beta-stars input:focus-visible + label { outline: 2px solid var(--oxblood); outline-offset: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.beta-ctx { margin: 10px 0 4px; font-size: 13px; color: var(--inkMuted); }
.beta-ctx summary { cursor: pointer; font-weight: 600; text-transform: lowercase; }
.beta-ctx-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 12px; align-items: center; margin-top: 10px; }
.beta-ctx-grid input { font-size: 14px !important; padding: 7px 10px !important; }

.beta-foot { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--inkDim); }

@media (max-width: 520px) {
  .beta-card { padding: 18px 14px; }
  .beta-ctx-grid { grid-template-columns: 1fr; }
  .beta-fb { margin-left: 0; }
}