/* Readable button lab (topics/user-experience.html, "Building a UI That Is Usable and Accessible").
   Only the Send button uses the student's colours and size: js/pages/user-experience.js sets them as style
   properties on that one element. Everything else comes from the lab kit (css/labs.css) and the theme tokens. */

.ux-rd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .9rem; margin: 0 0 .85rem; }
.ux-rd-pair select { width: 100%; }
.ux-rd-controls .lab-field + .lab-field { margin-top: .8rem; }
.ux-rd-controls .lab-actions { margin-top: 1rem; }

.ux-rd-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .1rem .6rem; }
.ux-rd-head output { font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* A tinted card, so a white or cream preview button still shows its edge. On a very narrow phone a wide preview
   scrolls inside the card, so it never spills out of the lab. */
.ux-rd-card {
  display: grid; justify-items: start; gap: .85rem;
  padding: 1rem; min-width: 0; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary);
}
.lab .ux-rd-card-text { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text-secondary); }
.lab-readable .ux-rd-send {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .6em; border: 0; border-radius: 8px;
  font-family: var(--font-body); font-weight: 700; line-height: 1;
  white-space: nowrap; overflow: hidden;
}

/* The site's list rules (.content-body ul, li) are more specific than a bare class, so these start with .lab */
.lab .ux-rd-checks { display: grid; gap: .5rem; list-style: none; margin: .85rem 0 0; padding: 0; }
.lab .ux-rd-check {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .65rem; align-items: start;
  margin: 0; padding: .55rem .7rem; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-md);
  background: var(--bg-tertiary);
}
.lab .ux-rd-check.is-good { border-left-color: var(--lab-good-line); }
.lab .ux-rd-check.is-warn { border-left-color: var(--lab-warn-line); }
.ux-rd-check .lab-badge { margin-top: .05rem; }
.lab .ux-rd-check-name { margin: 0; font-size: .9rem; font-weight: 600; line-height: 1.4; }
.lab .ux-rd-tip { margin: .25rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--text-secondary); }

@media (max-width: 480px) {
  .ux-rd-pair { grid-template-columns: minmax(0, 1fr); }
}