/* mtbinkdotcom_utility.css v0.0.49 */
/* ================================ */

textarea,
input[type="text"].mtbinkdotcom {
  width: 100%;
  box-sizing: border-box; /* Ensures padding and border are included in the width calculation */
}

textarea, 
input[type="text"].mtbinkdotcom, 
input[type="number"], 
input[type="date"], 
input[type="tel"] {
  /* example:
     textarea                        = convert-backslash-to-forward-slash.html
     input[type="text"].mtbinkdotcom = mtbink.com-query.html
     input[type="number"]            = calculate-percentage.html
     input[type="date"]              = calculate-the-difference-between-two-dates.html
     input[type="tel"]               = generate-whatsapp-link-to-chat.html
  */
  font-family: monospace;
  font-size: 1rem; /* something wrong with default */
  
  padding: var(--padding);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  
  border: var(--border-light);
  border-width: var(--border-thick); /* emphasize input box against border container */
}

input[type="radio"], 
input[type="checkbox"] {
  /* example:
     input[type="radio"]    = convert-list-to-bbcode-list.html
     input[type="checkbox"] = convert-url-to-bbcode-youtube.html
  */
  margin-bottom: var(--margin-bottom);
  width: 1rem;
  height: 1rem;
}

textarea:focus,
input[type="text"].mtbinkdotcom:focus, 
input[type="number"]:focus, 
input[type="date"]:focus, 
input[type="tel"]:focus  {
  border: var(--border-thick) solid var(--color-green-200);
}

input[type="number"]:invalid,
textarea.error,
input.error {
  border: var(--border-thick) solid var(--color-red-900);
  color: var(--color-red-900);
}

.error {
  color: var(--color-red-900);
}

button {
  font-size: 1rem; /* something wrong with default */
  border-radius: var(--border-radius);
  
  margin-top:    0.5rem; /* in mobile, buttons too near */
  margin-bottom: 0.5rem; /* in mobile, buttons too near */
  
  cursor: pointer;
  padding: calc(var(--padding)*2);
  color: black;
  font-weight: bold;
}

#ok           {color: var(--color-green-900);}
#load_example {color: var(--color-orange-900);}
#clear_input  {color: var(--color-red-900);}
#select_all   {color: black;}

.keyboard {
  color: black;
}

.bigger_one_liner {
  /* example: *show-current-day-of-the-year.html              (3 lines in mobile) */ 
  /* example: *calculate-percentage.html                      (2 lines in mobile) */ 
  /* example: *show-current-datestamp.html                    (2 lines in mobile) */ 
  /* example: calculate-the-difference-between-two-dates.html (1 lines in mobile) */ 
  /* example: counter.html                                    (1 lines in mobile) */ 
  /* example: generate-a-random-number.html                   (1 lines in mobile) */ 
  /* height: 7.5rem; */
  font-size: 1.5rem;
  /* background-color: red;   */
}

.qr {
  text-align: center;
  background-color: white;
  padding: 1rem;
  margin-left: auto;
  margin-right: auto;
  width: 75%; /* this is the best on mobile, reasonable on others */
}

.orbit-chart,
.pie-chart {
  width: 350px;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
}

/* dark mode */
/* ========= */
/* FORCEDARKMODE */
/* @media (prefers-color-scheme:dark) { */
  textarea, 
  input[type="text"].mtbinkdotcom, 
  input[type="number"], 
  input[type="date"], 
  input[type="tel"] {
    /* example:
       textarea                        = convert-backslash-to-forward-slash.html
       input[type="text"].mtbinkdotcom = mtbink.com-query.html
       input[type="number"]            = calculate-percentage.html
       input[type="date"]              = calculate-the-difference-between-two-dates.html
       input[type="tel"]               = generate-whatsapp-link-to-chat.html
    */
    color: inherit;
    background-color: var(--background-color-dark);
    border: var(--border-dark);
    border-width: var(--border-thick); /* emphasize input box against border container */
  }
  
  input[type="number"]:invalid,
  textarea.error,
  input.error {
    border: var(--border-thick) solid var(--color-red-200);
    color: var(--color-red-200);
  }
  
  .error {
    color: var(--color-red-200);
  }
     
  #ok,
  #load_example,
  #clear_input,
  #select_all,
  .keyboard,
  button  {
    background-color: black;
  }
  
  #ok {
    color:        var(--color-green-200);
    border-color: var(--color-green-200);
  }

  #load_example {
    color:        var(--color-yellow-200);
    border-color: var(--color-yellow-200);
  }

  #clear_input {
    color:        var(--color-red-200);
    border-color: var(--color-red-200);
  }

  #select_all, 
  .keyboard,
  button {
    color:        var(--text-color-dark);
    border-color: var(--text-color-dark);
  }
/* } */