/* Score badge: result-page embed section and the sample badges on the explainer page. Uses the tokens from site.css. */

.badge-embed { display: grid; gap: 22px; scroll-margin-top: 92px; }
.badge-embed__form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 32px; }
.badge-embed fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.badge-embed legend { padding: 0; margin: 0 0 8px; font: 400 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.badge-embed__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-embed__opt { position: relative; display: inline-flex; }
.badge-embed__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.badge-embed__opt span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 14px; transition: border-color .2s, color .2s, background .2s; }
.badge-embed__opt input:hover + span { border-color: var(--muted); color: var(--text); }
.badge-embed__opt input:checked + span { border-color: var(--good); background: var(--good-bg); color: var(--good); }
.badge-embed__opt input:focus-visible + span { outline: 2px solid var(--good); outline-offset: 2px; }

/* The button that applies the options without JavaScript is not needed once the options update in place. */
.js .badge-embed [data-badge-update] { display: none; }
.badge-embed__form > .btn { align-self: end; }

/* The preview sits on the opposite surface of the badge theme, so its edge is always visible. */
.badge-embed__stage { margin-top: 10px; display: grid; place-items: center; min-height: 148px; padding: 24px 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.badge-embed__stage.is-dark { background: #F1F4F2; border-color: #D7DDD9; }
.badge-embed__stage img { display: block; max-width: 100%; height: auto; }

.badge-embed__code { display: grid; gap: 8px; }
.badge-embed textarea { width: 100%; min-height: 112px; resize: vertical; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #090B0C; color: #D6DDD9; font: 400 13px/1.65 var(--mono); }
.badge-embed textarea:focus { outline: 0; border-color: var(--good); }
.badge-embed__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Copying needs JavaScript; without it the code is selected by hand in the textarea above. */
.badge-embed [data-badge-copy] { display: none; }
.js .badge-embed [data-badge-copy] { display: inline-flex; }
.badge-embed__notes { display: grid; gap: 8px; font-size: 15px; }
.badge-embed__notes p { margin: 0; max-width: 780px; }

/* Sample badges on the explainer page. */
.badge-samples { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.badge-samples__stage { display: grid; place-items: center; min-height: 100px; padding: 20px 12px; overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); }
.badge-samples__stage--for-dark { background: #F1F4F2; border-color: #D7DDD9; }
.badge-samples__stage svg { display: block; max-width: 100%; height: auto; }