@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *, path)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

input, textarea { 
    min-width: 0;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
    cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style-type: revert;
}

/* noscript is handled internally, as it depends on settings. */

html { 
    height : 100%; 
    min-height : 100dvh;
}

body {
  background-image: linear-gradient(72deg, #3e2da0, #863aaa);
  background-attachment: fixed;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  display: flex;
  flex-direction: column;
  place-items: center;
  place-content: center;
  min-height : 100%;
  min-height : 100dvh;
  text-rendering : optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* For images to not be able to exceed their container */
img {
    max-inline-size: 100%;
    max-block-size: 100%;
    max-inline-size: 100%;
    max-block-size: 100%;
    display: block;
}

h1 {
  font-size:clamp(2rem, 5vw, 3rem);
  color: white;
  font-weight: bold;
}

range-sliders {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  max-width:1000px;
  padding:2rem;
  
  h1 {
    font-size:2rem;
    font-weight:bold;
  }
  
  .noUi-value {
      font-size:0.8em;
      top:1.4em; 
  }

.noUi-target {
  box-shadow: none;
}

.noUi-connect {
  background: #4A34AB;
}

.noUi-pips {
  position: relative;
  margin-top:-0.9em;
}

.noUi-pips-horizontal  {
  height: auto;
}

  .noUi-value[data-value='12'] {
    color:#FE8D59; 
    &::before {
      content:"Lunch";
      position:absolute;
      left:0; 
      top:calc(100% - 0.4em); 
      font-size:0.5em;
      text-align:center;
      letter-spacing:0.4em;
      text-transform:uppercase;
    }
  }

  .day-container {
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0 0dvb 10px -4px rgba(0,0,0,0.66);
    gap: 1rem;
    background-color: white; 
    padding: 2rem;
    border-radius: 0.4rem;
    overflow: hidden;


    &.today {
      outline: 1px solid #fef359;
      box-shadow: 0px 0px 16px 2px rgba(252, 202, 0, 0.644);
    }
  }
  
  .person { 
    display: flex;
    align-items: center;
    font-size: 1rem;
    &::before {
      content: "";
      width:1.6rem; 
      height:1.6rem; 
      aspect-ratio: 1;
      border-radius: 50%;
      display:inline-block;
      margin-right:1ch;
      vertical-align: middle;
      background-size: cover;
      background-position: center;  
      background-color: var(--theme);
      outline:2px solid var(--theme);
    }
    &.lizzie::before { 
      background-image: url('/lizzie.jpg');
    }
    &.mark::before { 
      background-image: url('/mark.jpg');
    }
  }
  .lizzie { 
    font-weight: bold;
    --theme : #FE8C58;
    /* background: #FF6A00;  */
    /* color:white;  */
  }
  .mark { 
    font-weight: bold;
    --theme : #A7C6FA;
    /* background: #131F6B;  */
    /* color:white;  */
  }
  
.range-display {
  grid-area: time;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hours-display {
  grid-area: duration;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.day-type {
  grid-area: type;
  white-space: nowrap;
}  .error {
    color:red; 
    &.too-few { color:purple; }
    &.too-much { color:blue; }
  }

  .day-label {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
  }

  .pickup-info {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }



  h2 {
    scale: 8;
    transform-origin: 0 0em;
    opacity: 0.05;
    translate : -2em -0.5em;
    rotate : -5deg;
    color:#3e2da0;
     text-wrap: balance;
    text-box: trim-both cap alphabetic;
  }

  .day-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    order:99;
    grid-template-columns: repeat(4, 1fr);
    margin-top:46px; 
    border-radius: 0.4rem;
    padding:1em 2em;
    font-weight: bold;
    background-color: rgba(0,0,0,0.05);
    box-shadow: 1px -1px 10px -4px rgba(0,0,0,0.2) inset;
  }  
  
  input[type="checkbox"] {
    outline: 1px solid grey;
    width: 20px; 
    justify-self: center;
    grid-area: checkbox;
    height: 20px; 
    &:checked {
      background: green;
    }
  }
    
  .reset-button {
    padding:1em 2em;
    border-radius:0.4rem;
    border:none;
    background:whitesmoke;
    color:black;
    font-weight:bold;
    cursor:pointer;
  }

}


@layer reset { 
  *:where(:not(html,canvas,img,svg):not(svg *,symbol *, path)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}img{max-inline-size:100%;max-block-size:100%;vertical-align:bottom}svg{overflow:visible;vertical-align:bottom}a,button{cursor:revert}[hidden]{display:none}html{height:100%}body{min-height:100%;padding:clamp(1rem, 4vw, 3rem);font:normal 400 clamp(1rem, 2vw, 1.1875rem)/1.6 "Open Sans",sans-serif;}
}