/* -- Phil's StyleSheet 2025-06-26 -- */
/*
  IDs:     use underscores for space
  classes: use hyphens for space
*/
/* changed
   + color names (mid-dark, lighter, light, darker, darkest, lightest, etc
     to  l, ll, lll, llll for lightness
     and d, dd, ddd, dddd for darkness
     
     todo: same for valid and invalid
     e.g col-valid-dark to col-valid-d 
*/
  html, :root 
    {
      
      --border-radius-default:  16px;
      --border-width-default:   3px;
      --collapsible-anim-speed: .2s;
      
      
      /* COLORS --------------------------------------------- 
         col-A: mAin color 
         col-B: Backgrounds
         col-C: aCcents
        
       To refer to a color use --var(col-A), the d and l stand for darker and lighter shades
          d, dd, ddd, dddd - slightly darker to darkest
          l, ll, lll, llll - slightly lighter to lightest
      */
      
      --col-A:       #ffcb00;
      --col-B:       #656565;
      --col-C:       #00cbcb;
      --col-valid:   #6ebf81;
      --col-invalid: #c16262; 
      
      /* ---- derived from above ----------------------- */

      --col-A-llll:  hsl(from var(--col-A) calc(h - 6) calc(s * 0.80) calc(l * 2.00));
      --col-A-lll:   hsl(from var(--col-A) calc(h - 5) calc(s * 0.80) calc(l * 1.80));
      --col-A-ll:    hsl(from var(--col-A) calc(h - 2) calc(s * 0.95) calc(l * 1.55));
      --col-A-l:     hsl(from var(--col-A) calc(h - 1) calc(s * 0.95) calc(l * 1.20));
      --col-A-d:     hsl(from var(--col-A) calc(h - 4) calc(s * 1.10) calc(l *  .85));
      --col-A-dd:    hsl(from var(--col-A) calc(h - 5) calc(s * 1.50) calc(l *  .60));
      --col-A-ddd:   hsl(from var(--col-A) calc(h - 6) calc(s * 1.20) calc(l *  .45));
      --col-A-dddd:  hsl(from var(--col-A) calc(h - 6) calc(s * 1.50) calc(l *  .05));
      
      --col-B-llll:  hsl(from var(--col-B) calc(h - 6) calc(s * 0.80) calc(l * 1.80 + 20));
      --col-B-lll:   hsl(from var(--col-B) calc(h - 5) calc(s * 0.80) calc(l * 1.80 +  3));
      --col-B-ll:    hsl(from var(--col-B) calc(h - 2) calc(s * 0.95) calc(l * 1.55 +  2));
      --col-B-l:     hsl(from var(--col-B) calc(h - 1) calc(s * 0.95) calc(l * 1.20 +  1));
      --col-B-d:     hsl(from var(--col-B) calc(h - 4) calc(s * 1.10) calc(l *  .78 -  1));
      --col-B-dd:    hsl(from var(--col-B) calc(h - 5) calc(s * 1.50) calc(l *  .60 -  2));
      --col-B-ddd:   hsl(from var(--col-B) calc(h - 6) calc(s * 1.20) calc(l *  .41 -  3));
      --col-B-dddd:  hsl(from var(--col-B) calc(h - 6) calc(s * 1.50) calc(l *  .05 -  4));
      
      --col-C-llll:  hsl(from var(--col-C) calc(h - 6) calc(s * 0.80) calc(l * 2.00));
      --col-C-lll:   hsl(from var(--col-C) calc(h - 5) calc(s * 0.80) calc(l * 1.80));
      --col-C-ll:    hsl(from var(--col-C) calc(h - 2) calc(s * 0.95) calc(l * 1.55));
      --col-C-l:     hsl(from var(--col-C) calc(h - 1) calc(s * 0.95) calc(l * 1.20));
      --col-C-d:     hsl(from var(--col-C) calc(h - 4) calc(s * 1.10) calc(l *  .85));
      --col-C-dd:    hsl(from var(--col-C) calc(h - 5) calc(s * 1.50) calc(l *  .60));
      --col-C-ddd:   hsl(from var(--col-C) calc(h - 6) calc(s * 1.20) calc(l *  .45));
      --col-C-dddd:  hsl(from var(--col-C) calc(h - 6) calc(s * 1.50) calc(l *  .05));
      
      --col-valid-ll:    hsl(from var(--col-valid)   calc(h - 0) calc(s + 100 ) calc(l * 1.50 + 4));
      --col-valid-l:     hsl(from var(--col-valid)   calc(h - 0) calc(s +  54 ) calc(l * 1.40 + 1));
      --col-valid-d:     hsl(from var(--col-valid)   calc(h - 0) calc(s +  00 ) calc(l * 0.75 - 3));
      --col-valid-dd:    hsl(from var(--col-valid)   calc(h - 0) calc(s +  00 ) calc(l * 0.58 - 5));
      
      --col-invalid-ll:  hsl(from var(--col-invalid) calc(h - 0) calc(s + 100 ) calc(l * 1.50 + 4));
      --col-invalid-l:   hsl(from var(--col-invalid) calc(h - 0) calc(s +  54 ) calc(l * 1.40 + 1));
      --col-invalid-d:   hsl(from var(--col-invalid) calc(h - 0) calc(s - .30 ) calc(l * 0.71 - 3));
      --col-invalid-dd:  hsl(from var(--col-invalid) calc(h - 0) calc(s +  00 ) calc(l * 0.58 - 5));
      
      visibility:               inherit;
    }



body
{
  font-family:      "Arial", "Helvetica", sans-serif;
  color:            var(--col-B-llll);
  background-color: var(--col-B-dd);
  
  margin:           2em auto;
  padding:          1em 10vw;
  max-width:        1200px;
  
  line-height:      1.35;

  scrollbar-gutter: stable both-edges;
}

h1, h2, h3, h4
{
  color:       var(--col-A);
  margin:      0;
  line-height: 100%;
}

h2, h3
{
  margin-top:    .5em;
  margin-bottom: .5em;
}

pre
{
  font-family:     "Liberation Mono", "Lucida Console", monospace;
  font-size:       80%;
  margin: 0;
}

a
{
  color: var(--col-A);
}
a:visited
{
  color: var(--col-A-d);
}
a:active, a:hover
{
  color: var(--col-A-lll);
}

.code
{
  font-family: monospace;
}

/* -- stickies ---- */
.top-sticky-container
{
  top:               0;
  position:          sticky;
  background-color:  var(--col-B-dd);
  padding-bottom:    2px;
}




/* ---- drop zones ----*/

.dropzone-container
{
  display:           flex;
  flex-direction:    row;

}
.dropzone
{
  box-sizing:          border-box;
  -moz-box-sizing:     border-box;
  -webkit-box-sizing:  border-box;
                      
  width:               100%;
  min-height:          1em; 
  height:              20em;
  padding:             1em;
  margin:              1em;
                      
  color:               var(--col-B-llll);
  background-color:    var(--col-B);
                      
  border-color:        var(--col-B-ll);
  border-style:        dashed;
  border-radius:       var(--border-radius-default);
  border-width:        var(--border-width-default);
                      
  display:             flex;
  align-items:         center;
  justify-content:     center;
  
  transition-property: height, min-height, max-height; 
  transition-duration: .5s; 
  transition-timing-function: ease-out; 
}
.dropzone-label
{
  font-style:     italic;
  pointer-events: none;
  margin: 0;
  text-align: center;
}
.dropzone-highlight
{
  color:             var(--col-A);
  border-color:      var(--col-A);
  background-color:  initial;
}
.dropzone-valid
{
  border-color:      var(--col-valid);
  background-color:  var(--col-valid-dd);
}
.dropzone.collapsed input[type="file"]
{
  display: none;
}
.invalid-shake
{
  animation:       anim_shake 0.3s;
}




/* --- unsused, make sure that? -----*/
.valid
{
  border-color:      var(--col-valid);
  color:             var(--col-valid-ll);
  background-color:  var(--col-valid-dd);
}
.invalid
{
  border-color:      var(--col-invalid);
  color:             var(--col-invalid-ll);
  background-color:  var(--col-invalid-dd);
}




/* ------ input ----- */
button
{
  font-family: inherit;
  font-size:   initial;
}
input[type=text]
{
  padding:      .7em .8em;
  margin:       .15em 0;
  box-sizing:   border-box;
  font-size:    110%;
  width:        fit-content;
}
/*
input[type=number]
{
  padding:      .7em .8em;
  margin:       .15em 0;
  box-sizing:   border-box;
  font-size:    110%;
  width:        fit-content;
}
*/

.input-group
{
  display:         flex;
  gap:             .5em;
  flex-wrap:       wrap;
  margin:          10px 10px;
  justify-content: center;
}
.vertical
{
  margin: 0 .5em;
}
.input-field
{
  display:        flex;
  flex-direction: column;
  gap:            .5em;
}





/* ------- button divs -------------*/
.button /* inactive by default */
{
  background-color: var(--col-B);
  color:            var(--col-B-llll);
  font-size:        90%;
  text-align:       center;
  
  display:          flex;
  justify-content:  center;
  align-items:      center;
  
  width:            fit-content;
  padding:          .75em 1em;
  border-radius:    3em;
  
  cursor:           not-allowed;
  pointer-events:   none;
}
.button.active
{
  background-color: var(--col-A);
  color:            var(--col-B-dddd);
  cursor:           pointer;
  pointer-events:   all !important;
}
.button.active:hover
{
  background-color: var(--col-A-ll);
}





/* ---- text box content ----- */
.text-box
{
  background-color: var(--col-B-llll);
  color:            var(--col-B-dddd);
  padding:          1em;
  border-radius:    var(--border-radius-default);
  overflow:         hidden;
  text-wrap:        balance;
}
.text-box h1, .text-box h2, .text-box h3, .text-box h4
{
  color:  var(--col-A-dd);
}
.text-box a
{
  display:         inline-block;
  color:           inherit;
  text-decoration: underline;
}
.text-box a:hover, .text-box a:focus{
  color:           var(--col-A-dd);
  text-decoration: underline var(--col-A-dd) ;
}
.text-box p:first-of-type
{
  margin-top: 0;
}



/* ------- output containers ------------*/
.output-div
{
  display:         flex;
  flex-direction:  row;
}
  

/* ----- checkboxes -----*/
/* -- was deactivated in 2024 ---*/

input[type="checkbox"]
{
  appearance:         none;
  -webkit-appearance: none;
  
  display:            flex;
  align-content:      center;
  justify-content:    center;
                      
  border:             var(--border-width-default) solid var(--col-A);
  font-size:          23px;
  height:             1.1em;
  padding:            0.12em;
  border-radius:      0.15em;
}
input[type="checkbox"]::before
{
  content: "";
  width:  .6em;
  height: .6em;
  /*
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  */
  transform:        scale(0);
  background-color: var(--col-A);
}
input[type="checkbox"]:checked::before
{
  transform: scale(1);
}
input[type="checkbox"]:hover
{
  border: var(--border-width-default) solid var(--col-B-llll);
}






/* ----- modal ---------*/
#modal-container
{
  position:          absolute;
  top:               0;
  left:              0;
  width:             100%;
  height:            100%;
  background-color:  #111111ee;
  overflow:          clip;
  display:           flex;
  flex-direction:    row;
  justify-content:   space-between;
  align-items:       center;
}
.modal-hidden
{
  top: -110% !important;
  transition:        top 0.35s ease-out;
}
.modal-nav
{
  height:            5em;
  aspect-ratio:      1;
  max-width:         7%;
  border-radius:     50%;
  margin:            .5em;

  display:           flex;
  justify-content:   center;
  align-items:       center;
  background-color:  var(--col-B-dd);
}
.modal-nav:hover, .modal-nav:active
{
  background-color: var(--col-A-ddd);
  color:            var(--col-B-dddd);
}
#modal_left
{
  visibility:      inherit;
}
#modal_center
{
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  width:           100%;
  height:          100%;
}
#modal_center_img
{
  visibility:      inherit;
  max-height:      90vh;
  max-width:       90%;
}
#modal_right
{
  visibility:       inherit;
}



/* -- Collapsibles --------------------------------------------------------- */
.collapsible-top
{
  background-color:  var(--col-B-l);
  color:             var(--col-B-dddd);
  
  font-size:         100%;
  text-align:        left;
  font-weight:       bold;
  
  width:             100%;
  box-sizing:        border-box;
  margin-bottom:     var(--border-width-default);
  margin-top:        1.5em;
  padding:           8px 1em;
  border:            none;
  border-radius:     var(--border-radius-default);
  
  cursor:            pointer;
  user-select:       none;
}
.collapsible-top:hover
{
  background-color:  var(--col-B-llll);
  transition:        border-radius 0.1s ease-out;
}
.collapsible-top.c-active
{
  background-color:           var(--col-A);
  border-bottom-left-radius:  0px;
  border-bottom-right-radius: 0px;
}
.collapsible-top:after
{
  content:       '►';
  color:         var(--col-B-dddd);
  font-weight:   bold;
  float:         left;
  margin-right:  .5em;
}
.collapsible-top.c-active:after
{
  content:      '▼';
}
.collapsible-content 
{
  max-height: 0;
  transition: max-height var(--collapsible-anim-speed) ease-out, padding var(--collapsible-anim-speed) ease-out;
  overflow:   hidden;
  margin-top: -0.2em;
  border:     none;
  padding:    0 .6em;
}
.collapsible-content.c-active
{
  border: var(--border-width-default) solid var(--col-A); 
  border-bottom-left-radius:  var(--border-radius-default);
  border-bottom-right-radius: var(--border-radius-default);
  padding: .6em;
}
.collapsed
{
  height: 1em;
}
    
    
    



/* ------ custom fields -------------*/

  /* framerates --------------------------*/
  #framerate_field
    {
    display:               grid;
    grid-template-columns: repeat(4, 60px);
    column-gap:            5px;
    row-gap:               5px;
  }
  .fr_tag
    {
    width:         3.5em;
    height:        1.66em;
    border-radius: 15px;
    box-sizing:    border-box;
    text-align:    center;

    display:         flex;
    align-items:     center; 
    justify-content: center;

    background-color: var(--col-B-d);
    user-select:      none;
  }
  .fr_tag:hover
    {
    background-color: var(--col-B);
  }
  .fr_tag.selected
    {
    background-color: var(--col-A);
    color:            var(--col-B-dddd);
    font-weight:      bold;
  }



  /* swatches ---------------------- */
  #swatches_field
    {
    display:               grid;
    grid-template-columns: repeat(8, var(--size-swatch));
    column-gap:            5px;
    row-gap:               5px;
  }
  .swatch
    {
    width:         var(--size-swatch);
    height:        var(--size-swatch);
    border-radius: 5px;
    box-sizing:    border-box;
    border:        2px solid rgba(0,0,0,.5);
  }
  .swatch:hover
    {
    border: none;
  }

  .swatch.selected
    {
    border: 2px solid white;
  }





/* --- helpers ---- */
.noselect
{
-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}
.monospaced
{
    font-family: "Liberation Mono", "Lucida Console", monospace;
    font-size:    85%;
}
.hidden
{
   display: none;
}




/* --- animations --- */
@keyframes anim_shake
{
    00% { transform: translate( 1px,  1px) rotate(0deg); }
  10%   { transform: translate(-1px, -2px) rotate(-1deg); }
  20%   { transform: translate(-5px,  0px) rotate(1deg);  }
  30%   { transform: translate( 5px,  2px) rotate(0deg);  }
  40%   { transform: translate( 1px, -1px) rotate(1deg);  }
  50%   { transform: translate(-1px,  2px) rotate(-1deg); }
  60%   { transform: translate(-3px,  1px) rotate(0deg);  }
  70%   { transform: translate( 5px,  1px) rotate(-1deg); }
  80%   { transform: translate(-1px, -1px) rotate(1deg);  }
  90%   { transform: translate( 1px,  2px) rotate(0deg);  }
  100% { transform: translate( 1px, -2px) rotate(-1deg); }
}