.line2{
  display: inline-block;
}

h3 {
  text-align: left;
  color: rgb(117, 56, 56);
  margin-left: 2px;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}
  
thead,
  tfoot {
  background-color: rgb(228 240 245);
}
  
th,td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}
  
td:last-of-type {
  text-align: center;
}
  
tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}
  
tfoot th {
  text-align: right;
}
  
tfoot td {
  font-weight: bold;
}

#milk {
  margin: 0.75rem auto;
  width: 90%;
  max-width: 520px;
  border: 2px solid #1e90ff;
  padding: 12px 16px;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: 0 1px 4px rgba(30,144,255,0.08);
  text-align: center;
}

#panel{     
  width: 150px;
  height: 150px;
  background-color: #3498db;
  transform: rotate(45deg); /* Rotate square to make diamond */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  margin: auto;
  margin-top: 70px;
  border-radius: 10%;
}

#panel span {
  transform: rotate(-45deg); /* Rotate text back to normal */
  align-items: center;
}
  
#topbar1, #topbar2, #topbar3, #topbar4 {
  margin: auto;
  width: 100px;
  height: 55px;
  color: #000; /* text color - changed to black for WCAG AA contrast */
  position: relative;
  background: rgb(51, 168, 177);
  border-color: black;
  border-radius: 30%;
  border-style: double;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left-width: 1px;
  border-top-left-radius: var(--r);
  border-right-width: 1px;
  border-top-right-radius: var(--r);
}

#square1, #square2, #square3, #square4{
  width:60px;
  margin-top: 5px;
  height:60px;
  border-radius: 40%;
  background-color: rgb(142, 165, 42);
  position: relative;
  border-style: double;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#hidden,#visible, #btn{
  border-color: blue;
  border-radius: 30%;
}

#clk1, #clk2, #clk3, #clk4{
  margin: 0;
  padding: 0;
  display: inline-block;
  text-align: center;
}

#drag{ 
  width: 150px;
  height: 150px;
  background-color: rgb(209, 180, 15);
  color: #000; /* changed to black to meet WCAG contrast against the yellow background */
  text-align: center;
  line-height: 150px;
  border-radius: 8px;
  cursor: move; 
  left: 50%; 
}

/* Make draggable element focusable and clearly visible when focused (keyboard users) */
#drag:focus {
  outline: 3px solid rgba(0,0,0,0.8);
  outline-offset: 3px;
}

#accordion{
  margin-bottom: 15px;
}

#button1,#button2,#addItem1, #addItem2{
  border-color: red;
  margin-bottom : 15px;
  margin-top : 15px;
}
 
.useCSSStyle{
  font-size: x-large;
  font-weight: bold;
}

/* Ensure #heading2 is large and readable */
#heading2 {
  font-size: 1.5rem; /* ~24px - qualifies as large text */
  font-weight: 700;
  line-height: 1.2;
  color: #000; /* high-contrast black to meet WCAG large-text (>=3:1) */
}

/* Ensure jQuery UI generated title (eg. #ui-id-1) meets contrast */
#ui-id-1 {
  color: #000 !important;
}

/* Skip link: hidden until focused for keyboard users */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 10px;
  top: 10px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: #000;
  color: #fff;
  z-index: 1000;
  border-radius: 4px;
  text-decoration: none;
}

/* Center the stop control */
.stop {
  display: block;
  margin: 0.5rem auto;
}

/* Space between the panel section and the square controls */
#squares {
  margin-top: 1.5rem;
  padding-top: 0.5rem;
}

/* Simple decorative separator line */
.section-sep {
  border: 0;
  border-top: 1px solid #d0d6dd;
  height: 0;
  margin: 0.75rem 0 1rem 0;
}

/* Space between #rules table and the vertical control column */
#rules {
  margin-right: 1.5rem;
}

.vertical {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 1rem;
}

/* Utility classes to replace inline styles */
.text-center { text-align: center; }
.flex { display: flex; }
.flex-gap-8 { display: flex; gap: 8px; }
.flex-gap-100 { display: flex; gap: 100px; }
.display-block { display: block; }
.inline-block { display: inline-block; }
.justify-around { display: flex; justify-content: space-around; }
.three-col-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 20px; }
.width-15 { width: 15%; }
.width-25 { width: 25%; }
.green-text { color: green; }
.no-border { border: 0; }
.rules-inline { display: inline-block; border-color: blue; }
/* Utilities added for page2 formatting cleanup */
.bg-green { background: green; padding: 6px; border-radius: 4px; color: #fff; display: inline-block; }
.mt-15 { margin-top: 15px; }
.mb-15 { margin-bottom: 15px; }
.flex-space-evenly { display: flex; justify-content: space-evenly; }
.img-full { width: 100%; height: auto; display: block; }
.dropdown { margin-left: 15px; }