/* stylesheets/styles.css */

/* *********************************** */
/* *** VARIABLES ********************* */
/* *********************************** */

:root {
  --side-padding: 1.6rem;
}

/* *********************************** */
/* *** TYPOGRAPHY ******************** */
/* *********************************** */

html {
  font-size: 100%; /* 16px default */
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  color: #111;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

h4 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

h5 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

h6 {
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

p {
  margin-bottom: 0.75rem;
}

/* Slightly larger on wider screens */
@media (min-width: 768px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.4rem; }
}

em {
  font-style: italic;
}

/* *********************************** */
/* *** LISTS ******************** */
/* *********************************** */

/* Indentation */
ul, ol,
li li ul,
li li ol {
  margin-left: 1.5rem;
}
li ul,
li ol {
  margin-left: 1.25rem;
}

/* Space between */
li + li {
  margin-top: 0.25rem;
}

/* Bullet styles */
ul {
  list-style-type: disc;
}
ol {
  list-style-type: decimal;
}
.alpha {
  list-style-type: lower-alpha;
}
.roman {
  list-style-type: lower-roman;
}
.bullet {
  list-style-type: square;
}
.radio {
  list-style-type: circle;
}
.blank {
  list-style-type: '[ ] ';
}
.example {
  list-style-type: '> ';
  font-style: italic;
  color: gray;
}
.starred {
  list-style-type: '✱ ';
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  /* color: var(--agent-col-drk); */
}

/* *********************************** */
/* *** FORMS ************************* */
/* *********************************** */

.form-row {
  margin-block: 0.5rem;
}
.form-row-label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: bold;
}
.examples {
  font-size: 0.8rem;
  color: gray;
}
.radio-select {
  display: flex;
  justify-content: space-evenly;
}
.radio-option {
  display: flex;
  flex-direction: column;
  text-align: center;
}
textarea {
    width: 99%;
}
textarea.XS { height: 1.4rem; } /* 1 line */
textarea.S  { height: 2.4rem; } /* 2 lines */
textarea.SM { height: 3.3rem; } /* 3 lines */
textarea.M  { height: 4.3rem; } /* 4 lines */
textarea.L  { height: 5.1rem; } /* 5 lines */
textarea.XL { height: 6.1rem; } /* 6 lines */

@media (max-width: 300px) {
  textarea {
    word-break: break-all;
  }
}

/* *********************************** */
/* *** BUTTONS & OUTPUTS ************* */
/* *********************************** */

button.generate-text {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.3rem 0.5rem;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.95rem;
  font-weight: bold;
}
button#generate-prompt {
  background-color: darkolivegreen;
  color: whitesmoke;
}
button#generate-prompt:hover,
button#generate-prompt:active {
  background-color: green;
}

/* Flag errors */
.form-row.is-empty {
  border: 1px dashed #d9534f;
  border-radius: 4px;
  padding: 0.5rem;
}
.form-row.is-empty .form-row-label {
  color: #b24a4a;
}

/* Remain hidden until content is pushed through via js */
#error-message {
  display: none;
  color: #b24a4a;  /* gentle dark red */
  font-size: 0.9rem;
}

.output-block {
  display: none;
}
.output-block.is-visible {
  display: block;
  margin-top: 0.75rem;
}

/* Whole output (text) boxes = copy "button" */
.output-block button.copy-text {
  width: 100%;
  padding: 0;
  border: none;
  /* background-color: whitesmoke; */
  cursor: pointer;
  display: grid;
  grid-template: "fullSpace" 1fr / 1fr;
  justify-items: start;
  align-items: start;
}

.output-block button#copy-prompt {
  outline: 0.1rem outset darkolivegreen;
  border: 0.1rem outset olive;
  background-color: darkolivegreen;
  color: whitesmoke;
}
.output-block button#copy-prompt:hover,
.output-block button#copy-prompt:active {
  outline-color: olive;
  border-color: darkolivegreen;
  background-color: white;
  color: darkolivegreen;
}

/* Individual parts of each button */
.output-block .output-header {
  grid-area: fullSpace;
  align-self: start;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: end;
  padding: 0.2rem;
}
.output-block .output-header .output-title::before {
  content: "<";
}
.output-block .output-header .output-title::after {
  content: ">";
}
.output-block .output-header .copy-icon.copied {
  align-self: center;
  color: green;
  text-shadow: 1px -1px 3px white,
               -1px 1px 3px white;
}
.output-block .output-header .copy-icon.copied i::before {
  content: "✓✓";
  font-size: xx-large;
}
.output-block .output-header .copy-icon.copied i::after {
  content: " copied!";
}
#prompt-block .output-header {
  margin-right: 1rem;  /* scrollbar width */
}

.output-block .output-text {
  --output-padding: 0.2rem;
  grid-area: fullSpace;
  width: calc(100% - var(--output-padding));
  padding-left: var(--output-padding);
  padding-top: var(--output-padding);
  text-align: left;
  font-size: small;
  font-weight: bold;
  font-family: monospace;
  white-space: pre-wrap;   /* preserve newlines + wrap long lines */
  word-wrap: break-word;   /* allow breaking long “words” if needed */
}
#prompt-block .output-text {
  height: 10rem;
  overflow-y: scroll;
}

/* *********************************** */
/* *** SECTIONS ********************** */
/* *********************************** */

body {
  margin: 0 auto;
  overflow-x: hidden;
}

header,
main,
footer {
  padding: 0.6rem var(--side-padding) 0.4rem;
  /* background-color: var(--agent-col-lter); */
}
#copyright p {
  margin-bottom: 0.2rem;
}
#copyright {
  font-size: 0.9rem;
  text-align: center;
}