/* Critical Point Vision Site: tweaks.css
 * Styles for the tweaks pill, card, header, wrapping radiogroups, preset and
 * action buttons, status line, note, and reset button. Token variables only
 * (css/tokens.css); both themes work because the tokens flip under
 * [data-theme="dark"].
 */

.tweaks {
  position: fixed;
  right: var(--space-300);
  bottom: var(--space-300);
  z-index: 60;
  font-family: var(--font-body);
}

.tweaks__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-100);
  min-height: var(--touch-target-min);
  padding: var(--space-100) var(--space-300);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--card-foreground);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: var(--body-bold-weight);
  box-shadow: var(--shadow-2);
  cursor: pointer;
}

.tweaks__pill:hover {
  border-color: var(--ring);
}

.tweaks__pill:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.tweaks__pill svg {
  width: var(--icon-size-default);
  height: var(--icon-size-default);
  flex: none;
}

.tweaks__card {
  position: absolute;
  right: 0;
  bottom: calc(var(--touch-target-min) + var(--space-150));
  width: 360px;
  max-width: calc(100vw - var(--space-400));
  /* Ten groups do not fit on one screen, so the card scrolls inside itself.
     The cap leaves room for the pill beneath it and a margin above it. */
  max-height: calc(100vh - var(--touch-target-min) - var(--space-150) - var(--space-300) - var(--space-300));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--space-300) var(--space-300);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
  color: var(--card-foreground);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
}

/* The plain `.tweaks__card { display: flex }` rule above is an author
   style, which beats the UA stylesheet's default `[hidden] { display:
   none }` regardless of specificity. Without this, setting the `hidden`
   attribute (tweaks.js's closed state) does nothing and the card renders
   open at all times. */
.tweaks__card[hidden] {
  display: none !important;
}

/* Title and Close stay pinned while the groups scroll under them. On a
   phone the open card covers the pill, so Close is the way out by touch. */
.tweaks__header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-150);
  flex: none;
  margin: 0 calc(var(--space-300) * -1);
  padding: var(--space-150) var(--space-300);
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.tweaks__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--display-weight);
  line-height: var(--leading-heading);
  color: var(--card-foreground);
}

.tweaks__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-075);
  flex: none;
}

.tweaks__field-label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--body-bold-weight);
  color: var(--muted-foreground);
  text-transform: none;
}

/* A block title inside the card ("Rebuild", "Particle field"). */
.tweaks__section {
  flex: none;
  margin-top: var(--space-100);
  padding-top: var(--space-150);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--display-weight);
  line-height: var(--leading-heading);
  color: var(--card-foreground);
}

.tweaks__header + .tweaks__section {
  margin-top: 0;
  border-top: 0;
  padding-top: var(--space-100);
}

/* Timing slider (shape hold and morph). The label above it carries the value. */
.tweaks__slider {
  width: 100%;
  min-height: var(--touch-target-min);
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.tweaks__slider:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Segmented radiogroup. The checked look is a per-button fill, not a
   sliding pill, so it stays correct when a group wraps onto a second row. */
.tweaks__group {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-050);
  padding: var(--space-050);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--secondary);
}

/* More than four options: three to a row, a short last row stretches. */
.tweaks__group--wrap {
  flex-wrap: wrap;
}

.tweaks__group--wrap .tweaks__option {
  flex: 1 1 30%;
}

.tweaks__option {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--touch-target-min);
  padding: var(--space-050) var(--space-075);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--card-foreground);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  line-height: var(--leading-heading);
  cursor: pointer;
  text-align: center;
  transition: background var(--motion-select), color var(--motion-select);
}

.tweaks__option:hover {
  background: var(--card);
}

.tweaks__option[aria-checked="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: var(--body-bold-weight);
}

/* Two-part ring: a card-coloured gap, then the ring, so focus stays visible
   on the filled (checked) button as well as the plain ones. */
.tweaks__option:focus-visible,
.tweaks__action:focus-visible {
  outline: none;
  z-index: 2;
  box-shadow:
    0 0 0 var(--focus-ring-offset) var(--card),
    0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--ring);
}

/* Presets and the three actions share one wrapping button row. */
.tweaks__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-100);
  flex: none;
}

.tweaks__action {
  position: relative;
  flex: 1 1 auto;
  min-height: var(--touch-target-min);
  padding: var(--space-050) var(--space-150);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--card-foreground);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: var(--body-bold-weight);
  line-height: var(--leading-heading);
  cursor: pointer;
  transition: background var(--motion-hot), border-color var(--motion-hot);
}

.tweaks__action:hover {
  background: var(--secondary);
  border-color: var(--ring);
}

.tweaks__action:active {
  transform: scale(.98);
}

.tweaks__action--close {
  flex: none;
}

/* Inline status for the actions ("Copied"). Announced politely; takes no
   room while empty. */
.tweaks__status {
  margin: 0;
  flex: none;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--body-bold-weight);
  line-height: var(--leading-body);
  color: var(--muted-foreground);
}

.tweaks__status:empty {
  display: none;
}

.tweaks__note {
  margin: 0;
  flex: none;
  padding: var(--space-150);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--muted);
  color: var(--muted-foreground);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}

.tweaks__reset {
  align-self: flex-start;
  flex: none;
  min-height: var(--touch-target-min);
  padding: var(--space-100) var(--space-300);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: var(--body-bold-weight);
  cursor: pointer;
  transition: background var(--motion-hot), border-color var(--motion-hot);
}

.tweaks__reset:hover {
  background: var(--secondary);
  border-color: var(--ring);
}

.tweaks__reset:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 480px) {
  .tweaks {
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    padding: var(--space-200);
    /* This wrapper spans the full width so the pill can sit flush right,
       but that means its empty left-hand three-quarters would otherwise
       sit on top of page content and swallow clicks meant for whatever is
       underneath, even though nothing is painted there. Only the pill
       (closed) or the card (open) should ever be clickable. */
    pointer-events: none;
  }

  .tweaks__pill,
  .tweaks__card {
    pointer-events: auto;
  }

  /* Bottom sheet. 70% of the height keeps a strip of the hero in view above
     it, so a change can be judged without closing the panel. */
  .tweaks__card {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    border-bottom: 0;
  }
}

html[data-motion="none"] .tweaks * {
  transition: none !important;
}