/* Common styles for dev.html pages */
body {
    font-family: sans-serif;
    margin: 0; /* Reset margin */
    padding: 0;
    background-color: #f0f0f0;
    color: #333;
    /*line-height: 1.6;*/
}

.container { 
    max-width: 1400px;
    margin: 20px auto;
    background-color: #ffffff;
    padding: 20px 30px; /* More padding */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.dev-container { /* Renamed from .container to be more specific to dev pages */
    max-width: 1400px;
    margin: 20px auto;
    background-color: #ffffff;
    padding: 20px 30px; /* More padding */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

hr {
    margin: 30px 0;
    border: 0;
    border-top: 1px solid #eeeeee;
}

h1, h2, h3, h4, h5, h6 {
    color: #333333;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 500;
}

h1 {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 0.4em;
    font-size: 2em;
    margin-top: 0; /* First h1 in container often doesn't need top margin */
}

h2 {
    font-size: 1.5em;
}

/* 
  A generic class for showcasing individual components or groups of components.
  Individual dev.html pages can wrap their <otr-component-name> tags with this
  if they want a consistent bordered/background look for the showcase area.
*/
.component-showcase {
    border: 1px dashed #cccccc;
    padding: 20px;
    margin: 25px 0;
    background-color: #f9f9f9;
    border-radius: 4px;
}

/* Styling for the actual component tags, if a very generic style is desired across all dev pages.
   However, it's often better for components to have their own sensible default display modes (block, inline-block).
   This is commented out as it might be too broad.
otr-unit-display, 
otr-button, 
otr-text-input {
    display: block; 
    margin: 10px 0;
}
*/