/* Element and attribute styling */
.el, .att, .att-val, .att-name {  
  font-family: 'Courier New', Consolas, Monaco, monospace;
}

/* Code example styling */
.ex {  
  background-color: #f6f6f2; /* gray-warm-3 */
  border: 1px solid #e6e6e2; /* gray-warm-10 */
  border-radius: 0.25rem;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
}

/* Source text within examples should use normal font */
.ex .src {
  background-color: #fff;
  padding: 1rem;
}

/*
USWDS-inspired alert styling for version divs
*/
/* version */ 
.version {
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid #dfe1e2;
  border-radius: 0.25rem;
  position: relative;
}

/* Label in the left border area */
.version[data-label]::before {
  content: attr(data-label);
  position: absolute;
  top: 0.5rem;
  left: -2.5rem;
  width: 2.5rem;
  font-size: 0.875rem; /* increased from 0.75rem */
  font-weight: 600;
  color: white;
  text-align: center;
  line-height: 1.2;
  word-wrap: break-word;
  hyphens: auto;
}

/* Mint theme for v2 */
.v2 {
  background-color: #dbf6ed; /* mint-5 */
  border-left: 2.5rem solid #04c585; /* mint-30v - wider for label */
  border-right: 1px solid #92d9bb; /* mint-20 */
  border-top: 1px solid #92d9bb;
  border-bottom: 1px solid #92d9bb;
  color: #1b1b1b;
}

/* Indigo theme for v3 */
.v3 {
  background-color: #efeff8; /* indigo-5 */
  border-left: 2.5rem solid #676cc8; /* indigo-50 - wider for label */
  border-right: 1px solid #c5c5f3; /* indigo-20 */
  border-top: 1px solid #c5c5f3;
  border-bottom: 1px solid #c5c5f3;
  color: #1b1b1b;
}

/* Gold theme for j10 */
.jv1 {
  background-color: #f5f0e6; /* gold-5 */
  border-left: 2.5rem solid #c2850c; /* gold-40v - wider for label */
  border-right: 1px solid #dec69a; /* gold-20 */
  border-top: 1px solid #dec69a;
  border-bottom: 1px solid #dec69a;
  color: #1b1b1b;
}

/* Violet warm theme for j11 */
.j11 {
  background-color: #f8f0f9; /* violet-warm-5 */
  border-left: 2.5rem solid #be32d0; /* violet-warm-50v - wider for label */
  border-right: 1px solid #e2bee4; /* violet-warm-20 */
  border-top: 1px solid #e2bee4;
  border-bottom: 1px solid #e2bee4;
  color: #1b1b1b;
}

/* Cyan theme for j12 */
.j12 {
  background-color: #e7f6f8; /* cyan-5 */
  border-left: 2.5rem solid #0081a1; /* cyan-50v - wider for label */
  border-right: 1px solid #99deea; /* cyan-20 */
  border-top: 1px solid #99deea;
  border-bottom: 1px solid #99deea;
  color: #1b1b1b;
}

/* Magenta theme for j13 */
.j13 {
  background-color: #f9f0f2; /* magenta-5 */
  border-left: 2.5rem solid #d72d79; /* magenta-50v - wider for label */
  border-right: 1px solid #f0bbcc; /* magenta-20 */
  border-top: 1px solid #f0bbcc;
  border-bottom: 1px solid #f0bbcc;
  color: #1b1b1b;
}