/* Style the page with CSS: the lab in the "Content and Presentation with HTML and CSS" section.
   The shared lab kit (css/labs.css) does the layout and the controls. This file adds the preview frame, the colour
   swatches and a cue for the chosen colour that does not depend on colour alone. The preview itself is a shadow root
   styled only through element.style, so no rule from the site reaches it. */
.cssplay-frame {
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cssplay-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.15rem;
  align-items: start;
}
.cssplay-col { display: grid; gap: .75rem; min-width: 0; }
.cssplay-fields { display: grid; gap: 1rem; }
@media (max-width: 720px) {
  .cssplay-cols { grid-template-columns: minmax(0, 1fr); }
}
.cssplay-chip { display: inline-flex; align-items: center; gap: .15rem; }
.cssplay-chip[aria-pressed="true"] { text-decoration: underline; text-underline-offset: .2em; }
.cssplay-sw {
  display: inline-block;
  flex: none;
  width: .8rem;
  height: .8rem;
  margin-right: .4rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}
.cssplay-sw[data-c="black"] { background-color: black; }
.cssplay-sw[data-c="navy"] { background-color: navy; }
.cssplay-sw[data-c="teal"] { background-color: teal; }
.cssplay-sw[data-c="purple"] { background-color: purple; }
.cssplay-sw[data-c="red"] { background-color: red; }
.cssplay-sw[data-c="gold"] { background-color: gold; }
.cssplay-sw[data-c="white"] { background-color: white; }
.cssplay-sw[data-c="lightyellow"] { background-color: lightyellow; }
.cssplay-sw[data-c="azure"] { background-color: azure; }
.cssplay-sw[data-c="honeydew"] { background-color: honeydew; }
.cssplay-sw[data-c="lavender"] { background-color: lavender; }
.cssplay-sw[data-c="mistyrose"] { background-color: mistyrose; }