/* style.css (v0.6.3) - Overrides and adjustments for 98.css */

/* --- Local Font Loading --- */
@font-face {
  font-family: 'MS Sans Serif';
  src: url('ms_sans_serif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'MS Sans Serif';
  src: url('ms_sans_serif_bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* --- Apply Font --- */
body {
  font-family: 'MS Sans Serif', 'Tahoma', 'Verdana', 'Arial', sans-serif;
  background-color: #008080;
  font-size: 11px;
}

/* Window and general spacing */
.app-window {
  margin: 32px auto;
  width: 650px;
  max-width: 95%;
}
.window-body {
  padding: 10px 12px;
}
.window-body > *:not(:last-child) {
  margin-bottom: 12px;
}
.window-body > fieldset {
  margin-bottom: 16px;
}

/* Output area */
.field-row-stacked > label:first-of-type {
  display: block; /* Ensure label is above */
  margin-bottom: 4px;
}
.input-with-button {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* --- Fieldset Options Styling --- */
.options-group p.options-label {
  font-weight: bold;
  margin-top: 12px;
  margin-bottom: 6px;
}
.options-group > p.options-label:first-of-type {
  margin-top: 0;
}
.options-group .field-row {
  margin-bottom: 4px;
  align-items: center; /* Align label/input */
}
.options-group .field-row label {
  padding-top: 2px; /* Fine-tune vertical alignment if needed */
}

/* --- Length Slider --- */
.length-slider-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.length-slider-container label[for="length_slider"] {
  flex-shrink: 0; /* Prevent label shrinking */
}
#length_slider {
  flex-grow: 1;
  min-width: 150px;
}
#length_display {
  font-weight: bold;
  min-width: 2.5em; /* Space for 3 digits */
  text-align: right;
}

/* --- Character Type Container --- */
.char-types-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 15px; /* Row and column gap (less vertical gap) */
    margin-top: 5px; /* Space below its label */
}
/* Remove bottom margin from field-row within this container */
.char-types-container .field-row {
    margin-bottom: 0;
    /* margin-right: 10px; /* Removed, gap handles spacing */
}


/* --- Special Character Buttons --- */
.special-chars-button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* Gap between buttons */
  margin-top: 5px; /* Space below its label */
}

/* Style for individual buttons */
.special-char-button {
  min-width: 30px; /* Ensure buttons have some width */
  font-family: monospace;
  padding: 2px 5px; /* Adjust padding as needed */
  /* 98.css default button styles apply */
}

/* Active state uses 98.css style for pressed button */
.special-char-button.active {
    box-shadow: none; /* Remove outer shadow */
    border-style: inset; /* Ensure inset border for pressed look */
    border-width: 1px; /* Standard border width */
    /* The following colors mimic 98.css inset border */
    border-top-color: rgb(0, 0, 0);
    border-left-color: rgb(0, 0, 0);
    border-bottom-color: rgb(255, 255, 255);
    border-right-color: rgb(255, 255, 255);
    /* Dotted background for pressed state */
    background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    background-position: 1px 1px; /* Adjust as needed */
    background-repeat: repeat;
     padding: 3px 4px 1px 6px; /* Fine-tune padding for inset effect */
}

/* Hide the checkboxes associated with the buttons */
.hidden-special-checkbox {
  display: none;
}


/* Generate Button */
.generate-button-container {
  text-align: center;
  margin-top: 16px;
}

/* Cookie Notice */
.cookie-info {
  font-size: 0.85em;
  color: #555;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #ccc;
  text-align: center;
}
.cookie-info a {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
.cookie-info a:hover {
  color: purple;
}
.cookie-info.hidden {
  display: none;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .app-window {
        width: auto;
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    h1 {
        font-size: 1.2em;
    }
    .input-with-button {
        flex-direction: column;
        align-items: stretch;
    }
    #copy-button {
        margin-top: 5px;
    }
    .length-slider-container label[for="length_slider"] {
        width: 100%; /* Stack label */
    }
    .length-slider-container input[type=range] {
        width: 100%; /* Full width slider */
    }
    .char-types-container {
        gap: 5px 10px; /* Slightly less gap */
    }
}