/*
 * Bopstars UI components on the Atlassian Design System tokens (design/tokens.css) and the Bopstars
 * brand layer (top of styles.css). Pages being redesigned use these classes; styles.css still holds
 * the older page styles until every page has moved over.
 *
 * Rules (from the UI review): colour has jobs (green = main action and selection, coral = stars and
 * points, yellow = rewards), one primary button per view, flat single-level sections with divided
 * rows, content before forms, and a real type scale.
 */

/* Page header: title, optional supporting line, actions on the right. */
.ui-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-space-200);
  margin-bottom: var(--ds-space-300);
}

.ui-page-header h1 {
  margin: 0;
  font: var(--ds-font-heading-xlarge);
  color: var(--ds-text);
  text-wrap: balance;
}

.ui-page-header p {
  margin: var(--ds-space-050) 0 0;
  color: var(--ds-text-subtle);
  font: var(--ds-font-body-large);
}

.ui-page-header .ui-actions {
  display: flex;
  gap: var(--ds-space-100);
}

/* Buttons: 40px (44px on touch screens), 6px corners, no shadows. */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-100);
  min-height: 40px;
  padding: 0 var(--ds-space-200);
  border: 0;
  border-radius: var(--ds-radius-medium);
  background: var(--ds-background-neutral);
  color: var(--ds-text);
  font: var(--ds-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ui-btn:hover {
  background: var(--ds-background-neutral-hovered);
}

.ui-btn:active {
  background: var(--ds-background-neutral-pressed);
}

.ui-btn-primary {
  background: var(--ds-background-brand-bold);
  color: var(--ds-text-inverse);
}

.ui-btn-primary:hover {
  background: var(--ds-background-brand-bold-hovered);
}

.ui-btn-primary:active {
  background: var(--ds-background-brand-bold-pressed);
}

.ui-btn-subtle {
  background: transparent;
  color: var(--ds-text-subtle);
}

.ui-btn-subtle:hover {
  background: var(--ds-background-neutral-subtle-hovered);
  color: var(--ds-text);
}

.ui-btn-danger {
  background: transparent;
  color: var(--ds-text-danger);
}

.ui-btn-danger:hover {
  background: var(--ds-background-danger);
}

.ui-btn-danger-bold {
  background: var(--ds-background-danger-bold);
  color: var(--ds-text-inverse);
}

.ui-btn-danger-bold:hover {
  background: var(--ds-background-danger-bold-hovered);
}

.ui-btn-remove,
.ui-btn-compact {
  min-height: 32px;
  padding: 0 var(--ds-space-100);
  font-size: 0.875rem;
}

.ui-btn-block {
  width: 100%;
}

.ui-btn-lg {
  min-height: 48px;
  padding: 0 var(--ds-space-300);
  font-size: 1rem;
}

.ui-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

@media (pointer: coarse) {
  .ui-btn {
    min-height: 44px;
  }
}

/* Section: one container per topic, with plain rows separated by dividers. */
.ui-section {
  margin-bottom: var(--ds-space-300);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
  background: var(--ds-surface);
}

.ui-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-150);
  padding: var(--ds-space-200) var(--ds-space-200) var(--ds-space-100);
}

.ui-section-head h2 {
  margin: 0;
  font: var(--ds-font-heading-small);
  font-size: 1.125rem;
  color: var(--ds-text);
}

.ui-head-person {
  display: flex;
  align-items: center;
  gap: var(--ds-space-100);
}

.ui-section-head a,
.ui-link {
  color: var(--ds-link);
  font-weight: 600;
  text-decoration: none;
}

.ui-section-head a:hover,
.ui-link:hover {
  text-decoration: underline;
}

.ui-section-body {
  padding: 0 var(--ds-space-200) var(--ds-space-200);
}

.ui-section > .ui-section-body:first-child {
  padding-top: var(--ds-space-200);
}

.ui-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-row {
  display: flex;
  align-items: center;
  gap: var(--ds-space-150);
  min-height: 56px;
  padding: var(--ds-space-150) var(--ds-space-200);
  color: inherit;
  text-decoration: none;
}

/* Dividers sit between items, whatever each item contains (a row, a link, an expanding row). */
.ui-list > li + li {
  border-top: 1px solid var(--ds-border);
}

a.ui-row:hover {
  background: var(--ds-background-neutral-subtle-hovered);
}

.ui-row-main {
  flex: 1;
  min-width: 0;
}

.ui-row-title .ui-lozenge {
  margin-left: var(--ds-space-050);
  vertical-align: 2px;
}

.ui-row-title {
  display: block;
  color: var(--ds-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ui-row-meta {
  display: block;
  margin-top: 2px;
  color: var(--ds-text-subtle);
  font-size: 0.875rem;
}

.ui-row-side {
  flex: 0 0 auto;
  color: var(--ds-text-subtlest);
  font-size: 0.875rem;
  text-align: right;
}

.ui-row-when {
  flex: 0 0 96px;
  color: var(--ds-text-subtle);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ui-row-when strong {
  display: block;
  color: var(--ds-text);
}

/* Small avatars in rows and tiles. */
.ui-avatar .kid-avatar.avatar-circle,
.kid-avatar.ui-avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.kid-avatar.ui-avatar-md {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.kid-avatar.ui-avatar-lg {
  width: 88px;
  height: 88px;
  border-radius: 50%;
}

.kid-avatar.ui-avatar-sm,
.kid-avatar.ui-avatar-md,
.kid-avatar.ui-avatar-lg {
  flex: 0 0 auto;
  animation: none;
}

/* Lozenge: short status label. */
.ui-lozenge {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--ds-space-050);
  border-radius: var(--ds-radius-small);
  background: var(--ds-background-neutral);
  color: var(--ds-text-subtle);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ui-lozenge-success {
  background: var(--ds-background-success);
  color: var(--ds-text-success);
}

.ui-lozenge-warning {
  background: var(--ds-background-warning);
  color: var(--ds-text-warning);
}

.ui-lozenge-brand {
  background: var(--ds-background-brand-subtlest);
  color: var(--ds-text-brand);
}

.ui-lozenge-trip {
  background: var(--ds-background-discovery);
  color: var(--ds-text-discovery);
}

.ui-lozenge-feed {
  background: var(--ds-background-information);
  color: var(--ds-text-information);
  text-transform: none;
}

.ui-text-danger {
  color: var(--ds-text-danger);
}

/* Stars and points always read in coral. */
.ui-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--bs-coral-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ui-stars::after {
  content: "★";
  color: var(--bs-coral);
}

/* Child tiles on the dashboard: one standalone card per child. */
.ui-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ds-space-150);
  margin-bottom: var(--ds-space-300);
}

.ui-tile {
  display: flex;
  align-items: center;
  gap: var(--ds-space-150);
  padding: var(--ds-space-200);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
  background: var(--ds-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.ui-tile:hover {
  border-color: var(--ds-border-brand);
  background: var(--ds-background-brand-subtlest);
}

.ui-tile-main {
  flex: 1;
  min-width: 0;
}

.ui-tile-number {
  display: block;
  margin-top: 2px;
  font-size: 1.5rem;
  line-height: 1.2;
}

/* Progress towards a reward. */
.ui-progress {
  height: 8px;
  overflow: hidden;
  border-radius: var(--ds-radius-full);
  background: var(--ds-background-neutral);
}

.ui-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--bs-coral);
}

/* Callout: one highlighted message with an optional action. */
.ui-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-150);
  margin-bottom: var(--ds-space-300);
  padding: var(--ds-space-150) var(--ds-space-200);
  border-radius: var(--ds-radius-large);
  background: var(--ds-background-warning);
  color: var(--ds-text);
}

.ui-callout p {
  flex: 1;
  margin: 0;
  min-width: 12rem;
}

.ui-install-hint {
  background: var(--ds-background-brand-subtlest);
}

/* Empty state inside a section. */
.ui-empty {
  padding: var(--ds-space-300) var(--ds-space-200);
  color: var(--ds-text-subtle);
  text-align: center;
}

.ui-empty strong {
  display: block;
  margin-bottom: var(--ds-space-050);
  color: var(--ds-text);
}

/* Forms: labels in dark grey, fields with ADS borders. */
.ui-form {
  display: grid;
  gap: var(--ds-space-200);
}

.ui-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ds-space-200);
}

.ui-field {
  display: grid;
  gap: var(--ds-space-075);
  margin: 0;
  padding: 0;
  border: 0;
}

.ui-field > span,
.ui-field > legend {
  padding: 0;
  color: var(--ds-text-subtle);
  font-size: 0.875rem;
  font-weight: 600;
}

.ui-field input[type="text"],
.ui-field input[type="number"],
.ui-field input[type="password"],
.ui-field input[type="email"],
.ui-field input[type="date"],
.ui-field input[type="time"],
.ui-field select,
.ui-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--ds-space-150);
  border: 1px solid var(--ds-border-input);
  border-radius: var(--ds-radius-medium);
  background: var(--ds-background-input);
  color: var(--ds-text);
  font: inherit;
}

.ui-field textarea {
  padding: var(--ds-space-100) var(--ds-space-150);
}

/* Flat dropdowns everywhere (Safari otherwise draws its own shaded control). */
.ui-field select {
  padding-right: var(--ds-space-400);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23505258' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 18px;
  -webkit-appearance: none;
  appearance: none;
}

.ui-field input:focus,
.ui-field select:focus,
.ui-field textarea:focus {
  border-color: var(--ds-border-focused);
  outline: 1px solid var(--ds-border-focused);
}

.ui-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-100);
}

/* Range (ADS Range): a slider with its value shown beside the label. */
.ui-range-label {
  display: flex;
  justify-content: space-between;
}

.ui-range {
  width: 100%;
  max-width: 480px;
  height: 24px;
  margin: 0;
  background: transparent;
  accent-color: var(--ds-background-brand-bold);
  -webkit-appearance: none;
  appearance: none;
}

.ui-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-background-neutral-hovered);
}

.ui-range::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 2px solid var(--ds-surface);
  border-radius: 50%;
  background: var(--ds-background-brand-bold);
  box-shadow: var(--ds-shadow-raised);
  -webkit-appearance: none;
}

.ui-range::-moz-range-track {
  height: 4px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-background-neutral-hovered);
}

.ui-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ds-surface);
  border-radius: 50%;
  background: var(--ds-background-brand-bold);
}

/* Segmented choice: a row of options where one is selected. */
.ui-segmented {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--ds-radius-medium);
  background: var(--ds-background-neutral);
}

.ui-segmented label {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.ui-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ui-segmented span {
  display: block;
  padding: var(--ds-space-100) var(--ds-space-050);
  font-size: 0.9375rem;
  white-space: nowrap;
  border-radius: var(--ds-radius-small);
  color: var(--ds-text-subtle);
  font-weight: 600;
  text-align: center;
}

.ui-segmented input:checked + span {
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-raised);
}

/* The same control as links (History: Everything / Stars earned / Shop). */
.ui-segmented a {
  flex: 1;
  padding: var(--ds-space-100) var(--ds-space-050);
  border-radius: var(--ds-radius-small);
  color: var(--ds-text-subtle);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.ui-segmented a[aria-current] {
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-raised);
}

.ui-history-filter {
  margin-bottom: var(--ds-space-300);
}

.ui-segmented input:focus-visible + span {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
}

/* A panel that opens in place for "New …" forms. */
.ui-disclosure > summary {
  list-style: none;
}

.ui-disclosure > summary::-webkit-details-marker {
  display: none;
}

.ui-disclosure[open] > summary {
  display: none;
}

/* Anything marked hidden stays hidden, whatever display a class gives it. */
[hidden] {
  display: none !important;
}

/* A person beside a page title (avatar + name), with any action kept on the same line. */
.ui-page-header-person {
  flex-wrap: nowrap;
  align-items: center;
}

.ui-page-header-person .ui-person {
  min-width: 0;
}

.ui-person {
  display: flex;
  align-items: center;
  gap: var(--ds-space-150);
}

.ui-btn-icon {
  min-height: 36px;
  width: 36px;
  padding: 0;
  font-size: 1.125rem;
}

/* Points: "What did they do?" drill-down. One level shows at a time once the script runs;
   without it every level is listed. */
.js-picker .picker-level:not(.is-active),
.js-picker .picker-fallback-title {
  display: none;
}

.picker-fallback-title {
  margin: var(--ds-space-200) 0 var(--ds-space-100);
  font-size: 1rem;
}

.ui-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--ds-space-100);
}

.ui-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-075);
  min-height: 88px;
  padding: var(--ds-space-150);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ui-choice:hover {
  border-color: var(--ds-border-brand);
  background: var(--ds-background-brand-subtlest);
}

.ui-choice-emoji {
  font-size: 1.75rem;
  line-height: 1;
}

.ui-choice-grid-compact .ui-choice {
  min-height: 56px;
}

.ui-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-100);
}

.ui-chip {
  position: relative;
  cursor: pointer;
}

.ui-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ui-chip span {
  display: block;
  padding: var(--ds-space-100) var(--ds-space-150);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-medium);
  background: var(--ds-surface);
  color: var(--ds-text);
  font-size: 0.9375rem;
  font-weight: 500;
}

.ui-chip:hover span {
  background: var(--ds-background-neutral-subtle-hovered);
}

.ui-chip input:checked + span {
  border-color: transparent;
  background: var(--ds-background-selected-bold);
  color: var(--ds-text-inverse);
  font-weight: 600;
}

.ui-chip input:focus-visible + span {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
  outline-offset: 2px;
}

/* The one big brand moment: the coral star that gives a point. */
.ui-give {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-150);
  padding: var(--ds-space-250) var(--ds-space-200) var(--ds-space-300);
  border-top: 1px solid var(--ds-border);
  text-align: center;
}

.ui-give-summary {
  color: var(--ds-text);
  font-weight: 600;
}

.ui-star-button {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 0;
  border-radius: 50%;
  background: var(--bs-coral);
  color: var(--ds-text-inverse);
  font-size: 2.75rem;
  line-height: 1;
  box-shadow: var(--ds-shadow-raised);
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.15s ease;
}

.ui-star-button:active {
  transform: scale(0.92);
}

.ui-star-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* Toggle (ADS Toggle): a switch in place of a checkbox. */
.ui-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-150);
  color: var(--ds-text);
  font-weight: 500;
  cursor: pointer;
}

.ui-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ui-toggle-track {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 24px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-text-subtlest);
  transition: background-color 0.15s ease;
}

.ui-toggle-track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ds-surface);
  transition: transform 0.15s ease;
}

.ui-toggle input:checked + .ui-toggle-track {
  background: var(--ds-background-brand-bold);
}

.ui-toggle input:checked + .ui-toggle-track::after {
  transform: translateX(16px);
}

.ui-toggle input:focus-visible + .ui-toggle-track {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
  outline-offset: 2px;
}

.ui-toggle small,
.ui-hint {
  color: var(--ds-text-subtlest);
  font-size: 0.875rem;
  font-weight: 400;
}

/* Section message (ADS): errors and warnings above a form. */
.ui-message {
  margin-bottom: var(--ds-space-300);
  padding: var(--ds-space-150) var(--ds-space-200);
  border-radius: var(--ds-radius-large);
  background: var(--ds-background-neutral);
  color: var(--ds-text);
}

.ui-message-error {
  background: var(--ds-background-danger);
}

.ui-message-success {
  background: var(--ds-background-success);
}

.ui-message-warning {
  background: var(--ds-background-warning);
}

/* A child's own sign-in box, first in their panel on the Family page. */
.ui-signin {
  display: grid;
  gap: var(--ds-space-150);
  justify-items: start;
  padding: var(--ds-space-200);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
  background: var(--ds-surface);
}

.ui-signin h3 {
  margin: 0;
  font-size: 1rem;
}

.ui-signin p {
  margin: 0;
  color: var(--ds-text-subtle);
}

.ui-signin-status.is-waiting {
  padding: var(--ds-space-100) var(--ds-space-150);
  border-radius: var(--ds-radius-medium);
  background: var(--ds-background-warning);
  color: var(--ds-text);
}

.ui-signin-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ds-space-100);
  width: 100%;
}

.ui-signin-form .ui-field {
  flex: 1 1 220px;
}

/* Modal (ADS Modal dialog): shown over the page, with a dimmed backdrop. */
.ui-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--ds-space-200);
  border: 0;
  background: var(--ds-blanket);
}

.ui-modal:not([open]) {
  display: none;
}

/* Pop-ups opened with showModal() already sit on a dimmed layer of their own. */
.ui-modal::backdrop {
  background: transparent;
}

.ui-modal-card {
  display: grid;
  gap: var(--ds-space-150);
  width: 100%;
  max-width: 440px;
  padding: var(--ds-space-300);
  border-radius: var(--ds-radius-xlarge);
  background: var(--ds-surface-overlay);
  box-shadow: var(--ds-shadow-overlay);
}

.ui-modal-card h2 {
  margin: 0;
  font: var(--ds-font-heading-large);
  text-wrap: balance;
}

.ui-modal-card p {
  margin: 0;
  color: var(--ds-text-subtle);
}

.ui-modal-card .ui-modal-warning {
  padding: var(--ds-space-150);
  border-radius: var(--ds-radius-medium);
  background: var(--ds-background-danger);
  color: var(--ds-text);
}

.ui-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-space-100);
  margin-top: var(--ds-space-100);
}

.ui-modal-welcome {
  justify-items: center;
  text-align: center;
}

.ui-modal-welcome .ui-modal-actions {
  justify-content: center;
}

.ui-modal-star {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--bs-coral);
  color: var(--ds-text-inverse);
  font-size: 2.25rem;
}

/* Sign-in pages (log in, name your family, join, kid mode PIN): one centred card. */
.ui-auth-body {
  margin: 0;
  background: var(--ds-surface-sunken);
}

.ui-auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--ds-space-300) var(--ds-space-200);
}

.ui-auth-card {
  display: grid;
  gap: var(--ds-space-200);
  width: 100%;
  max-width: 420px;
  padding: var(--ds-space-400) var(--ds-space-300);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xlarge);
  background: var(--ds-surface);
}

.ui-auth-card h1 {
  margin: 0;
  font: var(--ds-font-heading-xlarge);
  text-wrap: balance;
}

.ui-auth-brand {
  display: flex;
  align-items: center;
  gap: var(--ds-space-100);
  font-size: 1.125rem;
  font-weight: 800;
}

.ui-auth-lede {
  margin: calc(var(--ds-space-100) * -1) 0 0;
  color: var(--ds-text-subtle);
}

.ui-auth-divider {
  display: flex;
  align-items: center;
  gap: var(--ds-space-150);
  color: var(--ds-text-subtlest);
  font-size: 0.875rem;
}

.ui-auth-divider::before,
.ui-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ds-border);
}

.ui-auth-demo {
  display: grid;
  gap: var(--ds-space-100);
  padding: var(--ds-space-200);
  border-radius: var(--ds-radius-large);
  background: var(--ds-background-neutral);
}

.ui-auth-demo-buttons {
  display: grid;
  gap: var(--ds-space-100);
}

.ui-auth-demo .ui-btn:not(.ui-btn-primary) {
  background: var(--ds-surface);
}

.ui-auth-footer {
  margin: 0;
  color: var(--ds-text-subtle);
  font-size: 0.9375rem;
  text-align: center;
}

.ui-auth-footer a,
.ui-auth-card .ui-hint a {
  color: var(--ds-link);
  font-weight: 600;
}

.ui-message ul {
  margin: var(--ds-space-050) 0 0;
  padding-left: 1.2rem;
}

/* Event form: times hide for all-day events, "until" only shows for weekly ones, and ticking
   Everyone greys out the individual names. */
.event-form:has(input[name="all_day"]:checked) .time-fields,
.event-form:not(:has(input[name="repeat_weekly"]:checked)) .repeat-fields {
  display: none;
}

.event-people:has(input[name="whole_family"]:checked) .person-chip {
  opacity: 0.4;
  pointer-events: none;
}

/* Buttons side by side at the end of a row. */
.ui-row-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--ds-space-050);
}

/* Shop, child view: progress towards each reward sits under its name. */
/* My tasks: a finished task steps back so what's left stands out. */
.ui-task-row.is-done .ui-row-title {
  color: var(--ds-text-subtlest);
  text-decoration: line-through;
}

.ui-btn-stars {
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

/* Visually hidden, but read by screen readers. */
.ui-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ui-section-intro {
  margin: 0;
  padding: 0 var(--ds-space-200) var(--ds-space-100);
  color: var(--ds-text-subtle);
  font-size: 0.9375rem;
}

/* A row that opens underneath to edit it (Family children). */
.ui-row-details > summary {
  list-style: none;
  cursor: pointer;
}

.ui-row-details > summary::-webkit-details-marker {
  display: none;
}

.ui-row-details > summary:hover {
  background: var(--ds-background-neutral-subtle-hovered);
}

.ui-row-chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: var(--ds-space-050);
  border-right: 2px solid var(--ds-icon-subtle);
  border-bottom: 2px solid var(--ds-icon-subtle);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.ui-row-details[open] .ui-row-chevron {
  transform: rotate(45deg);
}

.ui-row-panel {
  display: grid;
  gap: var(--ds-space-200);
  padding: var(--ds-space-200);
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface-sunken);
}

.ui-danger-zone {
  padding-top: var(--ds-space-150);
  border-top: 1px solid var(--ds-border);
}

.ui-add-panel {
  padding: var(--ds-space-200);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
  background: var(--ds-surface-sunken);
}

.ui-add-panel h3 {
  margin: 0;
  font: var(--ds-font-heading-small);
  font-size: 1.0625rem;
}

/* Initials for parents and guardians. */
.ui-initials {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ds-background-brand-subtlest);
  color: var(--ds-text-brand);
  font-weight: 700;
}

.ui-initials-pending {
  border: 1px dashed var(--ds-border-bold);
  background: transparent;
  color: var(--ds-text-subtlest);
}

/* Invite link, ready to copy or share. */
.ui-invite {
  display: grid;
  gap: var(--ds-space-100);
  margin: 0;
}

.ui-invite p {
  margin: 0;
  color: var(--ds-text-subtle);
}

.ui-invite-link {
  display: flex;
  gap: var(--ds-space-100);
}

.ui-invite-link input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 var(--ds-space-150);
  border: 1px solid var(--ds-border-input);
  border-radius: var(--ds-radius-medium);
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
}

/* Avatar picker: round avatars, the chosen one ringed in green. */
.ui-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: var(--ds-space-100);
}

.ui-avatar-option {
  position: relative;
  display: grid;
  place-items: center;
  padding: 6px;
  cursor: pointer;
}

.ui-avatar-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ui-avatar-option input:checked + .kid-avatar {
  box-shadow: 0 0 0 3px var(--ds-surface), 0 0 0 6px var(--ds-border-selected);
}

.ui-avatar-option input:focus-visible + .kid-avatar {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
  outline-offset: 4px;
}

/* Calendar month grid: today in green, events as dots, trips as a purple bar across their days. */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.calendar-weekday {
  padding: var(--ds-space-050) 0;
  color: var(--ds-text-subtlest);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-050);
  min-height: 48px;
  padding: var(--ds-space-075) 2px var(--ds-space-100);
  border-radius: var(--ds-radius-medium);
  color: var(--ds-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.calendar-day:hover {
  background: var(--ds-background-neutral-subtle-hovered);
}

.calendar-day.is-other-month {
  color: var(--ds-text-subtlest);
  opacity: 0.55;
}

.calendar-day.is-today span:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--ds-background-brand-bold);
  color: var(--ds-text-inverse);
  font-weight: 700;
}

.calendar-day.is-selected {
  background: var(--ds-background-selected);
  box-shadow: inset 0 0 0 2px var(--ds-border-selected);
}

.calendar-dots {
  display: flex;
  gap: 3px;
  min-height: 6px;
}

.calendar-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-background-brand-bold);
}

.calendar-span {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 2px;
  height: 4px;
  background: var(--ds-background-discovery-bold);
}

.calendar-span.is-start {
  left: 6px;
  border-radius: var(--ds-radius-full) 0 0 var(--ds-radius-full);
}

.calendar-span.is-end {
  right: 6px;
  border-radius: 0 var(--ds-radius-full) var(--ds-radius-full) 0;
}

.calendar-span.is-start.is-end {
  border-radius: var(--ds-radius-full);
}

/* Child's own page: warmer and bigger, same components. */
.ui-kid-hero {
  display: flex;
  align-items: center;
  gap: var(--ds-space-200);
  margin-bottom: var(--ds-space-300);
}

.ui-kid-hero h1 {
  margin: 0;
  font: var(--ds-font-heading-xlarge);
  font-size: 2rem;
}

.ui-kid-hero p {
  margin: var(--ds-space-050) 0 0;
  color: var(--ds-text-subtle);
}

/* A child's own page: one big number, the stars they can spend. */
.ui-kid-big-score {
  display: grid;
  justify-items: center;
  gap: var(--ds-space-050);
  margin-bottom: var(--ds-space-300);
  padding: var(--ds-space-300) var(--ds-space-200);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.ui-kid-big-score:hover {
  background: var(--ds-background-neutral-subtle-hovered);
}

.ui-kid-big-score:focus-visible {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
  outline-offset: 2px;
}

.ui-kid-big-score .ui-btn {
  margin-top: var(--ds-space-150);
}

.ui-kid-big-score strong {
  font-size: 4rem;
  line-height: 1;
}

.ui-kid-big-score > span:not(.ui-btn) {
  color: var(--ds-text-subtle);
  font-size: 1.25rem;
  font-weight: 600;
}

.ui-kid-score {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: var(--ds-space-300);
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
}

.ui-kid-score-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-kid-score-three strong {
  font-size: 1.75rem;
}

/* Stars spent in the shop: shown as a take-away, quieter than stars earned. */
.ui-stars-spent,
.ui-stars-spent::after {
  color: var(--ds-text-subtle);
}

.ui-kid-score .ui-hint {
  display: block;
  margin-top: var(--ds-space-050);
}

.ui-kid-score > div {
  padding: var(--ds-space-200);
}

.ui-kid-score > div + div {
  border-left: 1px solid var(--ds-border);
}

.ui-kid-score span {
  display: block;
  color: var(--ds-text-subtle);
  font-size: 0.875rem;
  font-weight: 600;
}

.ui-kid-score strong {
  display: block;
  margin-top: 2px;
  font-size: 2.25rem;
  line-height: 1.1;
}

@media (min-width: 761px) {
  .ui-page-header h1 {
    font: var(--ds-font-heading-xxlarge);
  }
}

@media (max-width: 760px) {
  .ui-hide-phone,
.ui-page-header .ui-hide-phone {
    display: none;
  }

  /* Two child tiles side by side, avatar above the numbers. */
  .ui-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-100);
    padding: var(--ds-space-150);
  }
}

/* Public pages (homepage, privacy policy). */
.ui-site-body {
  margin: 0;
  background: var(--ds-surface);
}

.ui-site {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: var(--ds-space-250);
}

.ui-site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-200);
  padding-block: var(--ds-space-200);
}

.ui-site-brand {
  display: flex;
  align-items: center;
  gap: var(--ds-space-100);
  color: var(--ds-text);
  font-size: 1.125rem;
  font-weight: 800;
  text-decoration: none;
}

.ui-hero {
  display: grid;
  gap: var(--ds-space-500);
  align-items: center;
  padding-block: var(--ds-space-500) var(--ds-space-600);
}

.ui-hero-copy {
  display: grid;
  gap: var(--ds-space-250);
  justify-items: start;
}

.ui-hero h1 {
  margin: 0;
  color: var(--ds-text);
  font-size: clamp(2.5rem, 8vw, 4.25rem);
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.ui-hero-copy > p:not(.ui-hint) {
  max-width: 34em;
  margin: 0;
  color: var(--ds-text-subtle);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.ui-hero-copy .ui-actions {
  flex-wrap: wrap;
}

.ui-hero-shots {
  display: flex;
  justify-content: center;
  gap: var(--ds-space-200);
}

.ui-hero-shots img {
  width: min(46%, 280px);
  height: auto;
  border: 1px solid var(--ds-border);
  border-radius: 28px;
  box-shadow: var(--ds-shadow-overlay);
}

.ui-hero-shots img + img {
  margin-top: var(--ds-space-500);
}

.ui-site-section {
  display: grid;
  gap: var(--ds-space-300);
  justify-items: start;
  padding-block: var(--ds-space-500);
  border-top: 1px solid var(--ds-border);
}

.ui-site-section h2 {
  margin: 0;
  max-width: 22em;
  font: var(--ds-font-heading-xlarge);
  text-wrap: balance;
}

.ui-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--ds-space-200);
  width: 100%;
}

.ui-feature {
  display: grid;
  align-content: start;
  gap: var(--ds-space-100);
  padding: var(--ds-space-250);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
}

.ui-feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-large);
  background: var(--ds-background-brand-subtlest);
  color: var(--ds-icon-brand);
}

.ui-feature-icon .nav-icon {
  width: 22px;
  height: 22px;
}

.ui-feature h3 {
  margin: var(--ds-space-050) 0 0;
  font-size: 1.125rem;
}

.ui-feature p {
  margin: 0;
  color: var(--ds-text-subtle);
}

.ui-steps {
  display: grid;
  gap: var(--ds-space-200);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.ui-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 2px var(--ds-space-200);
  counter-increment: step;
}

.ui-steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ds-background-brand-bold);
  color: var(--ds-text-inverse);
  font-weight: 700;
}

.ui-steps strong {
  font-size: 1.0625rem;
}

.ui-steps span {
  color: var(--ds-text-subtle);
}

.ui-site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ds-space-150);
  padding-block: var(--ds-space-300) var(--ds-space-500);
  border-top: 1px solid var(--ds-border);
  color: var(--ds-text-subtle);
  font-size: 0.9375rem;
}

.ui-site-footer nav {
  display: flex;
  gap: var(--ds-space-250);
}

.ui-site-footer a {
  color: var(--ds-text-subtle);
  text-decoration: none;
}

.ui-site-footer a:hover {
  color: var(--ds-text);
  text-decoration: underline;
}

@media (min-width: 880px) {
  .ui-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    padding-block: var(--ds-space-800) var(--ds-space-1000);
  }
}

@media (max-width: 540px) {
  .ui-site-header .ui-btn-subtle {
    display: none;
  }
}

/* A child's current rewards as cards, three to a row: number, status tab, picture in a frame,
   name, a short note and a status lozenge. Everything is sized from the design tokens. */
.ui-reward-cards {
  --reward-ease: cubic-bezier(0.15, 1, 0.3, 1);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-150);
  margin: 0;
  padding: 0 var(--ds-space-200) var(--ds-space-200);
  list-style: none;
}

.ui-reward-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-050);
  min-width: 0;
  padding: var(--ds-space-400) var(--ds-space-100);
  overflow: hidden;
  border-radius: var(--ds-radius-large);
  background: var(--ds-surface-sunken);
  text-align: center;
  transition: transform 0.2s var(--reward-ease), box-shadow 0.2s var(--reward-ease), background-color 0.2s var(--reward-ease);
}

/* The coloured tab at the top: sun while waiting, green when it's ready, grey once it's done. */
.ui-reward-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--ds-space-150);
  width: var(--ds-space-100);
  height: var(--ds-space-300);
  border-radius: 0 0 var(--ds-radius-xsmall) var(--ds-radius-xsmall);
  background: var(--ds-border);
  transition: height 0.2s var(--reward-ease);
}

.ui-reward-card.is-pending::before {
  background: var(--bs-sun);
}

.ui-reward-card.is-approved::before {
  background: var(--ds-background-brand-bold);
}

.ui-reward-card-num {
  position: absolute;
  top: var(--ds-space-100);
  left: var(--ds-space-150);
  color: var(--ds-text-subtlest);
  font: var(--ds-font-body-small);
  font-variant-numeric: tabular-nums;
}

/* Corner marks around the picture, like a camera viewfinder. */
.ui-reward-card-art {
  --corner: var(--ds-border-bold);
  --corner-size: var(--ds-space-150);
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 88px;
  aspect-ratio: 1;
  margin-bottom: var(--ds-space-100);
  background:
    linear-gradient(var(--corner), var(--corner)) top left / var(--corner-size) 2px,
    linear-gradient(var(--corner), var(--corner)) top left / 2px var(--corner-size),
    linear-gradient(var(--corner), var(--corner)) top right / var(--corner-size) 2px,
    linear-gradient(var(--corner), var(--corner)) top right / 2px var(--corner-size),
    linear-gradient(var(--corner), var(--corner)) bottom left / var(--corner-size) 2px,
    linear-gradient(var(--corner), var(--corner)) bottom left / 2px var(--corner-size),
    linear-gradient(var(--corner), var(--corner)) bottom right / var(--corner-size) 2px,
    linear-gradient(var(--corner), var(--corner)) bottom right / 2px var(--corner-size);
  background-repeat: no-repeat;
  transition: transform 0.2s var(--reward-ease);
}

.ui-reward-icon {
  width: 68%;
  height: auto;
  color: var(--ds-text);
}

.ui-reward-icon .fill-a {
  fill: var(--bs-green-100);
}

.ui-reward-icon .fill-b {
  fill: var(--bs-coral);
}

.ui-reward-icon .fill-c {
  fill: var(--bs-sun);
}

.ui-reward-card-name {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ds-text);
  font: var(--ds-font-heading-small);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ui-reward-card-note {
  color: var(--ds-text-subtle);
  font: var(--ds-font-body);
}

.ui-reward-card .ui-lozenge {
  margin-top: var(--ds-space-100);
}

/* "Ready to use" is the exciting one, so it gets the bold lozenge in the brand green. */
.ui-reward-card.is-approved .ui-lozenge {
  background: var(--ds-background-brand-bold);
  color: var(--ds-text-inverse);
}

.ui-reward-card form {
  position: relative;
  z-index: 1;
}

/* The big faint word along the bottom of each card. */
.ui-reward-card-mark {
  position: absolute;
  bottom: -0.2em;
  left: 50%;
  color: var(--ds-text);
  font-family: var(--ds-font-family-heading);
  font-size: 2.5rem;
  font-weight: var(--ds-font-weight-bold);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.06;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.2s var(--reward-ease), transform 0.2s var(--reward-ease);
}

/* Hover (or keyboard focus inside): the card lifts, the tab grows, the frame opens out,
   the picture gives a little hop and the faint word rises into view. */
@media (hover: hover) {
  .ui-reward-card:hover {
    transform: translateY(-4px);
    background: var(--ds-surface-raised);
    box-shadow: var(--ds-shadow-overlay);
  }
}

.ui-reward-card:focus-within {
  background: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-raised);
}

@media (hover: hover) {
  .ui-reward-card:hover::before {
    height: var(--ds-space-400);
  }

  .ui-reward-card:hover .ui-reward-card-art {
    transform: scale(1.06);
  }

  .ui-reward-card:hover .ui-reward-icon {
    animation: reward-hop 0.5s var(--reward-ease);
  }

  .ui-reward-card:hover .ui-reward-card-mark {
    opacity: 0.1;
    transform: translate(-50%, -4px);
  }
}

@keyframes reward-hop {
  0% { transform: none; }
  35% { transform: translateY(-6px) rotate(-6deg) scale(1.06); }
  70% { transform: translateY(0) rotate(3deg); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-reward-card,
  .ui-reward-card::before,
  .ui-reward-card-art,
  .ui-reward-card-mark {
    transition: none;
  }

  .ui-reward-card:hover,
  .ui-reward-card:hover .ui-reward-card-art {
    transform: none;
  }

  .ui-reward-card:hover .ui-reward-icon {
    animation: none;
  }
}

@media (max-width: 480px) {
  .ui-reward-cards {
    gap: var(--ds-space-100);
    padding: 0 var(--ds-space-150) var(--ds-space-150);
  }

  .ui-reward-card {
    padding: var(--ds-space-300) var(--ds-space-075);
  }

  .ui-reward-card-name {
    font: var(--ds-font-body);
    font-weight: var(--ds-font-weight-bold);
  }

  .ui-reward-card-note {
    font: var(--ds-font-body-small);
  }

  .ui-reward-card .ui-lozenge {
    padding-block: 2px;
    line-height: 1rem;
    white-space: normal;
    text-align: center;
  }

  .ui-reward-card-mark {
    font-size: 1.625rem;
    letter-spacing: 0.02em;
  }
}

/* A reward's picture as a small tile at the start of a Shop row. */
.ui-reward-thumb {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-medium);
  background: var(--ds-surface-sunken);
}

.ui-reward-thumb .ui-reward-icon {
  width: 32px;
}

/* New reward: six ready-made ideas to start from. */
.ui-reward-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-100);
}

.ui-reward-template {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-050);
  min-width: 0;
  padding: var(--ds-space-150) var(--ds-space-100);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
  background: var(--ds-surface);
  color: var(--ds-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.15, 1, 0.3, 1), border-color 0.15s ease, background-color 0.15s ease;
}

.ui-reward-template .ui-reward-icon {
  width: 40px;
}

.ui-reward-template-name {
  font: var(--ds-font-heading-xsmall);
  overflow-wrap: anywhere;
}

.ui-reward-template .ui-stars {
  font: var(--ds-font-body-small);
  font-weight: var(--ds-font-weight-bold);
}

.ui-reward-template:hover {
  border-color: var(--ds-border-bold);
  background: var(--ds-background-neutral-subtle-hovered);
}

@media (hover: hover) {
  .ui-reward-template:hover {
    transform: translateY(-2px);
  }
}

.ui-reward-template[aria-pressed="true"] {
  border-color: var(--ds-border-selected);
  background: var(--ds-background-selected);
  box-shadow: inset 0 0 0 1px var(--ds-border-selected);
}

.ui-reward-template:focus-visible {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
  outline-offset: 2px;
}

/* Choosing a reward's picture: a row of tiles, the chosen one outlined. */
.ui-icon-options {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: var(--ds-space-100);
  max-width: 600px;
}

@media (max-width: 480px) {
  .ui-icon-options {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.ui-icon-option {
  position: relative;
  cursor: pointer;
}

.ui-icon-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ui-icon-option > span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-medium);
  background: var(--ds-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ui-icon-option .ui-reward-icon {
  width: 70%;
}

.ui-icon-option-auto > span {
  color: var(--ds-text-subtle);
  font: var(--ds-font-body-small);
  font-weight: var(--ds-font-weight-bold);
}

.ui-icon-option:hover > span {
  background: var(--ds-background-neutral-subtle-hovered);
}

.ui-icon-option input:checked + span {
  border-color: var(--ds-border-selected);
  background: var(--ds-background-selected);
  box-shadow: inset 0 0 0 1px var(--ds-border-selected);
}

.ui-icon-option input:focus-visible + span {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ui-reward-template {
    transition: none;
  }

  .ui-reward-template:hover {
    transform: none;
  }
}

/* Shop cards: green tab when they can get it now, grey while they're still saving up.
   Extra room at the bottom keeps the faint price clear of the button and progress bar. */
.ui-reward-card.is-affordable,
.ui-reward-card.is-saving {
  padding-bottom: var(--ds-space-600);
}

.ui-reward-card.is-affordable::before {
  background: var(--ds-background-brand-bold);
}

.ui-reward-card-cost {
  font: var(--ds-font-heading-small);
  font-weight: var(--ds-font-weight-bold);
}

.ui-reward-card-had {
  padding: 0 var(--ds-space-075);
  border-radius: var(--ds-radius-small);
  background: var(--ds-background-brand-subtlest);
  color: var(--ds-text-brand);
  font: var(--ds-font-body-small);
}

.ui-reward-card > .ui-progress {
  width: 80%;
  margin-top: var(--ds-space-100);
}

.ui-reward-card > form,
.ui-reward-card > .ui-btn {
  margin-top: var(--ds-space-100);
}

.ui-kid-big-score .ui-hint {
  margin-top: var(--ds-space-050);
}

/* Site owner's admin page: headline numbers, then a table of everyone who signed up. */
.ui-admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: var(--ds-space-300);
  overflow: hidden;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
}

.ui-admin-stats > div {
  padding: var(--ds-space-200);
}

.ui-admin-stats > div + div {
  border-left: 1px solid var(--ds-border);
}

.ui-admin-stats span {
  display: block;
  color: var(--ds-text-subtle);
  font: var(--ds-font-body-small);
  font-weight: var(--ds-font-weight-semibold);
}

.ui-admin-stats strong {
  display: block;
  margin-top: var(--ds-space-050);
  font: var(--ds-font-heading-large);
  font-variant-numeric: tabular-nums;
}

.ui-admin-filter {
  margin: 0 var(--ds-space-200) var(--ds-space-150);
}

.ui-admin-search {
  display: flex;
  gap: var(--ds-space-100);
  padding: 0 var(--ds-space-200) var(--ds-space-200);
}

.ui-admin-search input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 var(--ds-space-150);
  border: 1px solid var(--ds-border-input);
  border-radius: var(--ds-radius-medium);
  background: var(--ds-background-input);
  color: var(--ds-text);
  font: inherit;
}

.ui-table-wrap {
  overflow-x: auto;
}

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font: var(--ds-font-body);
}

.ui-table th {
  padding: var(--ds-space-100) var(--ds-space-200);
  border-bottom: 2px solid var(--ds-border);
  color: var(--ds-text-subtle);
  font: var(--ds-font-body-small);
  font-weight: var(--ds-font-weight-bold);
  text-align: left;
  white-space: nowrap;
}

.ui-table td {
  padding: var(--ds-space-150) var(--ds-space-200);
  border-bottom: 1px solid var(--ds-border);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.ui-table tbody tr:hover {
  background: var(--ds-background-neutral-subtle-hovered);
}

.ui-table td[data-label="Registered"],
.ui-table td[data-label="Last login"] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ui-admin-note {
  padding-top: var(--ds-space-150);
}

/* Phones: each person becomes a small card with labels, instead of a wide table. */
@media (max-width: 760px) {
  .ui-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-admin-stats > div:nth-child(3) {
    border-left: 0;
  }

  .ui-admin-stats > div:nth-child(n + 3) {
    border-top: 1px solid var(--ds-border);
  }

  .ui-table thead {
    display: none;
  }

  .ui-table,
  .ui-table tbody,
  .ui-table tr,
  .ui-table td {
    display: block;
  }

  .ui-table tr {
    padding: var(--ds-space-150) var(--ds-space-200);
    border-bottom: 1px solid var(--ds-border);
  }

  .ui-table td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--ds-space-100);
    padding: var(--ds-space-025) 0;
    border: 0;
  }

  .ui-table td::before {
    content: attr(data-label);
    color: var(--ds-text-subtle);
    font: var(--ds-font-body-small);
    line-height: inherit;
  }

  .ui-table td[data-label="Registered"],
  .ui-table td[data-label="Last login"] {
    white-space: normal;
  }
}

/* My rewards tabs (Ready to use / Waiting / All done), built on the segmented control. */
.ui-reward-tablist {
  margin: 0 var(--ds-space-200) var(--ds-space-150);
}

.ui-segmented [role="tab"] {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-075);
  min-height: 40px;
  padding: var(--ds-space-100) var(--ds-space-050);
  border: 0;
  border-radius: var(--ds-radius-small);
  background: none;
  color: var(--ds-text-subtle);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ui-segmented [role="tab"][aria-selected="true"] {
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-raised);
}

.ui-segmented [role="tab"]:focus-visible {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
}

.ui-segmented .ui-tab-count {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 var(--ds-space-050);
  text-align: center;
  border-radius: var(--ds-radius-full);
  background: var(--ds-background-neutral);
  color: var(--ds-text-subtle);
  font: var(--ds-font-body-small);
  font-weight: var(--ds-font-weight-bold);
  font-variant-numeric: tabular-nums;
}

.ui-segmented [role="tab"][aria-selected="true"] .ui-tab-count {
  background: var(--ds-background-brand-bold);
  color: var(--ds-text-inverse);
}

.ui-reward-tabs [role="tabpanel"] > .ui-empty {
  margin: 0 var(--ds-space-200) var(--ds-space-200);
}

@media (max-width: 480px) {
  .ui-segmented [role="tab"] {
    flex-direction: column;
    gap: 2px;
    font-size: 0.8125rem;
  }
}

/* A star that's already spent can't be removed: a quiet Locked button that explains why. */
.ui-btn-locked {
  gap: var(--ds-space-050);
  color: var(--ds-text-subtlest);
}

/* "Not enough stars yet!" pop-up for children: pops in, the sad face wobbles and cries a tear. */
.ui-modal-kid .ui-modal-card {
  text-align: center;
}

.ui-modal-kid[open] .ui-modal-card {
  animation: kid-modal-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ui-modal-kid h2 {
  font: var(--ds-font-heading-large);
}

.ui-modal-kid .ui-modal-actions {
  justify-content: center;
}

.ui-sad-face {
  display: block;
  width: 112px;
  height: 112px;
  margin: 0 auto var(--ds-space-100);
  overflow: visible;
}

.ui-sad-face .face {
  fill: var(--bs-sun);
  stroke: var(--ds-text);
  stroke-width: 3;
}

.ui-sad-face .brow,
.ui-sad-face .mouth {
  fill: none;
  stroke: var(--ds-text);
  stroke-width: 4;
  stroke-linecap: round;
}

.ui-sad-face .eyes {
  fill: var(--ds-text);
  transform-origin: 60px 56px;
  animation: sad-blink 3.2s ease-in-out infinite;
}

.ui-sad-face .tear {
  fill: var(--ds-icon-information);
  animation: sad-tear 2s ease-in infinite;
}

.ui-sad-face-head {
  transform-origin: 60px 100px;
  animation: sad-wobble 2.4s ease-in-out infinite;
}

.ui-need-stars {
  display: grid;
  gap: var(--ds-space-075);
  justify-items: center;
  margin: var(--ds-space-150) 0;
}

.ui-need-stars .ui-progress {
  width: 100%;
  height: 12px;
}

@keyframes kid-modal-pop {
  0% { opacity: 0; transform: scale(0.8) translateY(12px); }
  100% { opacity: 1; transform: none; }
}

@keyframes sad-wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes sad-tear {
  0% { opacity: 0; transform: translateY(-4px); }
  20% { opacity: 1; }
  80% { opacity: 1; transform: translateY(22px); }
  100% { opacity: 0; transform: translateY(28px); }
}

@keyframes sad-blink {
  0%, 44%, 50%, 100% { transform: scaleY(1); }
  47% { transform: scaleY(0.1); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-modal-kid[open] .ui-modal-card,
  .ui-sad-face-head,
  .ui-sad-face .eyes,
  .ui-sad-face .tear {
    animation: none;
  }
}

/* Avatars from the builder: an SVG filling the round avatar. */
.kid-avatar.kid-avatar-svg {
  background: none;
  animation: none;
}

.kid-avatar-svg > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Family page: a child's avatar with its Change button. */
.ui-avatar-edit {
  display: flex;
  align-items: center;
  gap: var(--ds-space-200);
}

/* A child's own avatar on their home page opens the builder; the pencil says so. */
.ui-avatar-edit-link {
  position: relative;
  flex: 0 0 auto;
  border-radius: 50%;
  color: inherit;
}

.ui-avatar-edit-link:focus-visible {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
  outline-offset: 3px;
}

.ui-avatar-edit-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--ds-surface);
  border-radius: 50%;
  background: var(--ds-background-brand-bold);
  color: var(--ds-text-inverse);
}

/* The avatar builder. */
.ui-avatar-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ds-space-200);
}

/* Grid items may shrink below their content (the tab row scrolls instead of widening the page). */
.ui-avatar-builder > * {
  min-width: 0;
}

.ui-avatar-stage {
  display: grid;
  justify-items: center;
  gap: var(--ds-space-150);
  padding: var(--ds-space-200);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
  background: var(--ds-surface-sunken);
}

.ui-avatar-preview {
  width: min(200px, 56vw);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: var(--ds-shadow-raised);
}

.ui-avatar-preview svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ui-avatar-preview.is-bouncing {
  animation: avatar-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ui-avatar-tools {
  display: flex;
  gap: var(--ds-space-100);
}

.ui-dice {
  display: inline-block;
}

.ui-dice.is-rolling {
  animation: dice-roll 0.5s ease-out;
}

.ui-avatar-editor {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
  background: var(--ds-surface);
}

/* Category tabs: a row that scrolls sideways on narrow screens. */
.ui-avatar-tablist {
  display: flex;
  gap: var(--ds-space-075);
  padding: var(--ds-space-150);
  overflow-x: auto;
  border-bottom: 1px solid var(--ds-border);
  scrollbar-width: none;
}

.ui-avatar-tablist [role="tab"] {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 var(--ds-space-200);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface);
  color: var(--ds-text-subtle);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.ui-avatar-tablist [role="tab"][aria-selected="true"] {
  border-color: var(--ds-background-brand-bold);
  background: var(--ds-background-brand-bold);
  color: var(--ds-text-inverse);
}

.ui-avatar-tablist [role="tab"]:focus-visible {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
  outline-offset: 2px;
}

.ui-avatar-editor [role="tabpanel"] {
  display: grid;
  gap: var(--ds-space-250);
  padding: var(--ds-space-200);
}

.ui-avatar-editor [role="tabpanel"][hidden] {
  display: none;
}

.ui-avatar-field {
  display: grid;
  gap: var(--ds-space-100);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ui-avatar-field legend {
  margin-bottom: var(--ds-space-100);
  padding: 0;
  font: var(--ds-font-heading-xsmall);
}

.ui-avatar-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--ds-space-100);
}

.ui-avatar-tile {
  position: relative;
  display: grid;
  gap: var(--ds-space-050);
  justify-items: center;
  cursor: pointer;
}

.ui-avatar-tile input,
.ui-avatar-swatch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ui-avatar-tile-art {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
  transition: border-color 0.15s ease, transform 0.2s cubic-bezier(0.15, 1, 0.3, 1);
}

.ui-avatar-tile-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ui-avatar-tile-label {
  color: var(--ds-text-subtle);
  font: var(--ds-font-body-small);
  text-align: center;
}

.ui-avatar-tile:hover .ui-avatar-tile-art {
  border-color: var(--ds-border-bold);
}

.ui-avatar-tile input:checked + .ui-avatar-tile-art {
  border-color: var(--ds-border-selected);
  box-shadow: 0 0 0 2px var(--ds-border-selected);
  transform: scale(1.04);
}

.ui-avatar-tile input:checked ~ .ui-avatar-tile-label {
  color: var(--ds-text);
  font-weight: var(--ds-font-weight-bold);
}

.ui-avatar-tile input:focus-visible + .ui-avatar-tile-art,
.ui-avatar-swatch input:focus-visible + span {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
  outline-offset: 3px;
}

.ui-avatar-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-100);
}

.ui-avatar-swatch {
  position: relative;
  cursor: pointer;
}

.ui-avatar-swatch > span:not(.ui-visually-hidden) {
  display: block;
  width: 40px;
  height: 40px;
  border: 2px solid var(--ds-surface);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px var(--ds-border);
  transition: transform 0.15s ease;
}

.ui-avatar-swatch input:checked + span {
  box-shadow: 0 0 0 3px var(--ds-border-selected);
  transform: scale(1.1);
}

/* Save and Cancel stay in reach while scrolling through parts (above the phone tab bar). */
.ui-avatar-savebar {
  position: sticky;
  bottom: var(--ds-space-200);
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-space-100);
  padding: var(--ds-space-100);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-large);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-overlay);
}

.ui-avatar-savebar .ui-btn-primary {
  min-width: 120px;
}

@media (max-width: 900px) {
  .ui-avatar-savebar {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 761px) {
  .ui-avatar-builder {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
  }

  .ui-avatar-stage {
    position: sticky;
    top: var(--ds-space-300);
  }

  .ui-avatar-savebar {
    grid-column: 1 / -1;
  }
}

@keyframes avatar-bounce {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.04); }
  100% { transform: none; }
}

@keyframes dice-roll {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(200deg) scale(1.3); }
  100% { transform: rotate(360deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-avatar-preview.is-bouncing,
  .ui-dice.is-rolling {
    animation: none;
  }

  .ui-avatar-tile-art {
    transition: none;
  }
}

/* Soft light outline under eyes and mouths on the darkest skin tones (see AVATAR_HALO_SKINS). */
.avatar-halo * {
  fill: #fff;
  stroke: #fff;
  stroke-width: 3.2px;
  stroke-linejoin: round;
  opacity: 0.5;
}

/* Avatars come alive: eyes blink every few seconds and mouths give a little grin now and then.
   --avatar-delay (set on each avatar) staggers them so a page of avatars doesn't blink in step. */
.avatar-eyes,
.avatar-mouth {
  transform-box: fill-box;
  transform-origin: center;
}

.avatar-eyes {
  animation: avatar-blink 5s ease-in-out infinite;
  animation-delay: var(--avatar-delay, 0s);
}

.avatar-mouth {
  animation: avatar-grin 7s ease-in-out infinite;
  animation-delay: var(--avatar-delay, 0s);
}

/* The builder's tiles stay still; only the big preview moves. */
.ui-avatar-tile-art .avatar-eyes,
.ui-avatar-tile-art .avatar-mouth {
  animation: none;
}

@keyframes avatar-blink {
  0%, 90%, 96%, 100% { transform: scaleY(1); }
  93% { transform: scaleY(0.1); }
}

@keyframes avatar-grin {
  0%, 70%, 90%, 100% { transform: scale(1); }
  76%, 84% { transform: scale(1.14, 1.1); }
  80% { transform: scale(1.1, 1.14) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-eyes,
  .avatar-mouth {
    animation: none;
  }
}

/* An "Add ..." button that sits above a section on the right (Family: Add a child). When it's
   open, the form takes its place above the section. */
.ui-add-above {
  margin-bottom: var(--ds-space-150);
  text-align: right;
}

/* (A <details> lays its children out in its own hidden wrapper, so grid or flex alignment on it
   doesn't reach the summary; right-aligned text does.) */
.ui-add-above > summary.ui-btn {
  display: inline-flex;
}

.ui-add-above > form {
  text-align: left;
}

/* Numbered steps inside an app section (Kid mode: how the PIN works). */
.ui-steps-compact {
  gap: var(--ds-space-150);
}

.ui-steps-compact li {
  grid-template-columns: 32px 1fr;
}

.ui-steps-compact li::before {
  width: 32px;
  height: 32px;
  font-size: 0.875rem;
}

.ui-steps-compact strong {
  font-size: 1rem;
}

/* Shop: the dashed "Ask for something new" card at the end of the rewards. */
.ui-reward-card.ui-reward-card-new {
  border: 2px dashed var(--ds-border-bold);
  background: var(--ds-surface);
}

.ui-idea-form {
  text-align: left;
}

.ui-reward-card-new .ui-reward-card-name {
  -webkit-line-clamp: 3;
}

.ui-task-row.is-done .ui-reward-thumb {
  opacity: 0.5;
}

.ui-admin-stars {
  display: block;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Giving a star: a giant star grows and explodes into fireworks (assets/star-burst.js), and a short
   note confirms it without leaving the page. */
.ui-fireworks {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ui-toast {
  position: fixed;
  top: calc(var(--ds-space-200) + env(safe-area-inset-top));
  left: 50%;
  z-index: 1001;
  max-width: min(92vw, 480px);
  padding: var(--ds-space-150) var(--ds-space-250);
  border-radius: var(--ds-radius-full);
  background: var(--ds-background-brand-bold);
  box-shadow: var(--ds-shadow-overlay);
  color: var(--ds-text-inverse);
  font: var(--ds-font-body);
  font-weight: var(--ds-font-weight-bold);
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  animation: toast-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ui-toast.is-error {
  background: var(--ds-background-danger-bold);
}

.ui-toast.is-leaving {
  opacity: 0;
  transform: translate(-50%, -12px);
}

@keyframes toast-in {
  0% { opacity: 0; transform: translate(-50%, -16px) scale(0.9); }
  100% { opacity: 1; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-toast {
    animation: none;
  }
}

/* The giant star that grows out of the button before it explodes (window.starCharge). */
.ui-star-charge {
  position: fixed;
  z-index: 999;
  margin: 0;
  pointer-events: none;
  box-shadow: 0 0 0 6px rgba(242, 107, 79, 0.25), 0 0 40px 10px rgba(246, 200, 95, 0.55);
  transform-origin: center;
  will-change: transform;
}

.ui-star-button.is-charging {
  opacity: 0.3;
}

.ui-star-flash {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 998;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #FFF3C4 35%, rgba(246, 200, 95, 0) 70%);
  pointer-events: none;
}

/* Fun zone: a card on the child's home page, and the soundboard's big bouncy pads. */
.ui-fun-card {
  display: flex;
  align-items: center;
  gap: var(--ds-space-200);
  margin-bottom: var(--ds-space-300);
  padding: var(--ds-space-200);
  border: 2px solid var(--bs-sun);
  border-radius: var(--ds-radius-large);
  background: var(--bs-sun-subtle);
  color: var(--ds-text);
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.15, 1, 0.3, 1);
}

.ui-fun-card > span:nth-child(2) {
  flex: 1;
  display: grid;
}

.ui-fun-card strong {
  font: var(--ds-font-heading-small);
}

.ui-fun-card-emoji {
  font-size: 1.75rem;
  letter-spacing: -0.1em;
}

@media (hover: hover) {
  .ui-fun-card:hover {
    transform: translateY(-2px);
  }
}

.ui-soundboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-150);
}

@media (min-width: 761px) {
  .ui-soundboard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 640px;
  }

  .ui-sound-hint {
    max-width: 640px;
  }
}

.ui-sound-pad {
  --pad: var(--bs-sun);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--ds-space-050);
  aspect-ratio: 1;
  padding: var(--ds-space-100);
  border: 0;
  border-radius: var(--ds-radius-xlarge);
  background: var(--pad);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.14);
  color: var(--ds-text);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.ui-sound-pad.is-mint { --pad: #9FE0C9; }
.ui-sound-pad.is-coral { --pad: #FFB3A1; }
.ui-sound-pad.is-sky { --pad: #A9D4F5; }
.ui-sound-pad.is-grape { --pad: #D2BFF2; }
.ui-sound-pad.is-pink { --pad: #F9B8D6; }
.ui-sound-pad-random {
  --pad: var(--ds-background-brand-bold);
  grid-column: 1 / -1;
  grid-auto-flow: column;
  justify-content: center;
  gap: var(--ds-space-150);
  aspect-ratio: auto;
  min-height: 80px;
  color: var(--ds-text-inverse);
}

.ui-sound-pad:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.14);
}

.ui-sound-pad:focus-visible {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
  outline-offset: 3px;
}

.ui-sound-emoji {
  font-size: clamp(2rem, 10vw, 3.25rem);
  line-height: 1;
}

.ui-sound-label {
  font: var(--ds-font-heading-xsmall);
  font-size: 0.9375rem;
}

.ui-sound-pad.is-playing .ui-sound-emoji {
  animation: pad-wiggle 0.35s ease-in-out infinite;
}

.ui-sound-pad.is-playing {
  animation: pad-bounce 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pad-wiggle {
  0%, 100% { transform: rotate(0) scale(1.1); }
  25% { transform: rotate(-12deg) scale(1.2); }
  75% { transform: rotate(12deg) scale(1.2); }
}

@keyframes pad-bounce {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.ui-sound-hint {
  margin-top: var(--ds-space-200);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .ui-sound-pad.is-playing,
  .ui-sound-pad.is-playing .ui-sound-emoji,
  .ui-fun-card {
    animation: none;
    transition: none;
  }
}

/* The Bopstars wordmark, "b★pstars", with a rainbow star as the "o". */
.bs-wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--ds-text);
  font-family: "Figtree", ui-sans-serif, sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}

.bs-wordmark-star {
  width: 0.8em;
  height: 0.8em;
  margin: 0 0.02em;
  transform: translateY(0.07em) rotate(-10deg);
}

.bs-wordmark-lg {
  font-size: 2.1rem;
}