.button, button {
    text-decoration: none;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border-radius: 15px;

    @media screen and (min-width: 768px) {
        font-size: 16px;
    }
}

.button--primary {
    background-color: var(--primary);
    color: var(--primary-font);
    border: 1px solid var(--primary);
    padding: 10px;
}

.button--secondary {
    color: var(--primary-font);
    background-color: transparent;
    border: 1px solid var(--text-color);
    width: fit-content;
    padding: 10px;
}

.button--destructive {
    border: 2px solid var(--destructive);
    background-color: transparent;
    color: var(--destructive);
    box-sizing: border-box;
    padding: 10px;
}

.button--success {
    background-color: var(--success-interact);
    border: 1px solid var(--success-interact);
    padding: 10px;
    color: var(--text-color);
}

.button--highlight {
    color: var(--text-color);
    border: 2px solid var(--button-border-highlight);
    padding: 10px;
}

.button--reset {
    background-color: transparent;
    border: none;
    padding: 0;
    color: var(--text-color);
}
.groups-index-page {
   padding: 10px;
   display: grid;
   gap: 20px;

   @media screen and (min-width: 768px) {
    padding: 50px;
   }
}

.discoverable-groups-page {
   padding: 10px;
   display: grid;
   gap: 20px;

   @media screen and (min-width: 768px) {
    padding: 50px;
   }

   & > .title {
      text-align: center;
   }
}

.discoverable-groups-list {
   display: grid;
   gap: 20px;
}

.groups-index-page-header {
   display: grid;
   grid-template-columns: min-content 1fr min-content;
}

.groups-index-title {
   text-align: center;
   font-size: 24px;
   font-weight: 800;

   @media screen and (min-width: 768px) {
    font-size: 36px
   }
}

.groups-index-page-card {
   display: grid;
   gap: 20px;
   padding: 10px;
   border: 1px solid var(--highlight-card-border);
   background-color: var(--highlight-card-background);
   border-radius: 15px;
   grid-template-rows: 1fr min-content;

   @media screen and (min-width: 768px) {
      padding: 20px;
   }
}

.groups-index-header-actions {
   display: grid;
   grid-auto-flow: column;
   gap: 20px;
}

.groups-index-page-card__header {
   display: grid;
   justify-content: space-between;
   grid-auto-flow: column;
}

.groups-index-page-card__text {
   display: grid;
   gap: 15px;
}

.groups-index-page-card__actions {
   display: grid;
   gap: 10px;
   grid-auto-flow: column;
}

.discoverable-text {
   --indicator-color: var(--indicator-success);
   &::before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: var(--indicator-color);
      margin-inline-end: 5px;
      border-radius: 50%;
   }
}

.card__header--join-code {
   display: grid;
   gap: 5px;

   & > .secondary-text {
      justify-self: end;
   }

   @media screen and (min-width: 768px) {
      gap: 10px;
   }
}

.copy-join-code {
   display: grid;
   align-items: center;
   grid-auto-flow: column;
   gap: 10px;
}

.progress-bar__layout {
   display:grid;
   grid-template-columns: 1fr min-content;
   grid-template-rows: 1fr 1fr;
   gap: 5px;

   & > .progress-bar {
      grid-column: 1 / -1;
      grid-row: 2/3;
   }
}

.key-value-pair {
   display: grid;
   grid-auto-flow: column;
   gap: 5px;
   justify-content: start;
   align-items: baseline;
}

.groups-index-page-card__header-layout {
   display: grid;
   gap: 5px;
}

.group-index-page-list {
   list-style: none;
   display: grid;
   gap: 20px;
   container: size;

   @media screen and (min-width: 768px) {
      grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
      width: 100%;
      justify-self: center;
   }
}

.mobile-icon-button-internals {
   display: grid;
   grid-template-columns: min-content 1fr;
   justify-content: center;
   white-space: nowrap;
   align-items: center;
   color: inherit;

   @media screen and (min-width: 768px) {
      gap: 10px;
   }
}

.mobile-icon-button {
   border: none;
   border-radius: 10px;
}

.base-text {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-color);

    @media screen and (min-width: 768px) {
      font-size: 18px;
   }
}

.secondary-text {
    font-weight: 600;
    font-size: 14px;
    color: hsl(from var(--text-color) h s l / 0.8);

   @media screen and (min-width: 768px) {
      font-size: 16px;
   }
}

.desktop-button--secondary {
   @media screen and (min-width: 768px) {
      color: var(--primary-font);
      background-color: transparent;
      border: 1px solid var(--text-color);
      width: fit-content;
      padding: 10px;
      border-radius: 15px;
   }
}
.join-group-with-code-page {
   padding: 20px;
   display: grid;
   gap: 20px;

   @media screen and (min-width: 1000px) {
        gap: 50px;
    }

    & > .join-group-with-code-card {
        margin-top: 80px;

        @media screen and (min-width: 768px) {
            margin-top: 111px;
        }
    }

    & > .title, .join-group-with-code-card, .join-code-output {
        justify-self: center;
    }

    & .no-results-found {
        margin-top: 30px;

        @media screen and (min-width: 768px) {
            margin-top: 85px;
        }
    }
}

.join-group-with-code-header {
    display: grid;
    grid-template-columns: min-content 1fr min-content;

    & > .title {
        text-align: center;
        grid-column: 2/3;
    }

    & > .join-code-output {
        justify-self: end;
        display: none;
        width: max-content;

        @media screen and (min-width: 1000px) {
            display: grid;
        }
    }

    & > .back-to-groups-button {
        display: none;
       @media screen and (min-width: 1000px) {
            display: grid;
        }
    }
}

.join-group-form-text {
    display: grid;
    gap: 20px;
    justify-items: center;
    justify-content: center;

    @media screen and (min-width: 768px) {
        width: 60%;
    }
}

.join-code-form-controls {
    display: grid;
    grid-template-columns: min-content min-content;
    gap: 10px;
    place-content: center;
}
.join-code-label {
    text-align: center;

    @media screen and (min-width: 768px) {
        text-wrap: balance;
    }
}

.join-code-input {
    border: 2px solid var(--primary);
    text-align: center;
}

.join-group-with-code-card {
    justify-items: center;
    grid-template-rows: auto min-content;
    max-width: 796px;
    gap: 30px;
    padding: 30px 10px;

    & > .join-code-form-controls {
        width: 100%;

        @media screen and (min-width: 768px) {
            width: auto
        }
    }

    @media screen and (min-width: 768px) {
        padding: 50px 30px;
    }
}

.join-code-output {
    border-radius: 15px;
    border-width: 1px;
    gap: 10px;
    padding: 14px 58px;
    border: 2px solid var(--primary);
    background: var(--card-background);
    color: var(--text-color);
    font-size: clamp(16px, 1rem, 20px);
    align-items: center;
}

.no-results-found {
    display: grid;
    place-items: center;
    gap: 10px;

    & > svg {
        width: 100px;
        height: 100px;

        @media screen and (min-width: 1000px) {
            width: 150px;
            height: 150px;
        }
    }

    @media screen and (min-width: 1000px) {
        gap: 20px;
    }
}

.no-results-heading {
    font-weight: 700;
    font-size: 24px;

     @media screen and (min-width: 1000px) {
        font-weight: 800;
        font-size: 36px;
    }
}

.no-results-subheading {
    text-align: center;
    font-weight: 500;
    font-size: 14px;

    @media screen and (min-width: 1000px) {
         font-size: 16px;
    }
}

.button--plump {
    padding: 16px 30px;
}
.list__group-show-page {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    list-style: none;

    @media screen and (min-width: 768px) {
        grid-template-columns: repeat(4, 1fr);
    }
}

.profile-background {
   background-color: var(--profile-background);
   border-radius: 15px;
   overflow: clip;
   aspect-ratio: 1;
   position: relative;
   word-break: break-word;

   @media screen and (min-width: 768px) {
        aspect-ratio: 2/1;
        max-width: 100%;
    }

   & svg {
        height: 100%;
        width: 100%;
        position: absolute;
        inset: 0;
        top: 10%;
   }
}

.alert-text {
    font-weight: 600;
    font-size: 14px;
    color: var(--orange-text);

    @media screen and (min-width: 768px) {
        font-size: 16px;
    }
}

.primary-color-text {
    font-weight: 600;
    font-size: 14px;
    color: var(--primary);

    @media screen and (min-width: 768px) {
        font-size: 16px;
    }
}

.list-item__header {
    display: grid;
    grid-auto-flow: column;
    gap: 5px;
    padding: 5px 0;

    & > .text-container__group-member-rank {
        justify-self: end;
    }
}

.text__group-member-title {
    font-size: 14px;
    font-weight: 600;
}

.text-container__group-member-rank {
    display: grid;
    gap: 5px;
    grid-auto-flow: column;
    grid-auto-columns: min-content;
    align-items: center;
}

.details {
   display: inherit;
   grid-template-columns: inherit;
   grid-column: 1/-1;

   & details-summary::-webkit-details-marker {
      display:none;
   }
}

.details > .details-summary {
   list-style: none;
   display: grid;
   grid-auto-flow: column;
   padding-bottom: 5px;

   &::after {
      justify-self: end;
   }
}

.details[open] {

   & .details-summary {
      border-bottom: 1px solid var(--border-color-dim);
   }
   & .details-summary::after {
      transform: rotate(180deg);
   }

   & .details-content {
    height: auto;
    visibility: visible;
    padding: 10px 0;

    & .separator {
        margin-left: -20px;
        width: calc(100% + 40px);
    }
   }
}

.details[data-open-indicator="true"] .details-summary::after {
   margin-left: 1ch;
   display: block;
   content: '';
   transition: 0.2s;
   /**
      TODO: come up with strategy to make icons in psuedo classes dark mode compatible
   */
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="hsla(0, 0%, 100%, 1)" d="m12 10.8l-4.6 4.6L6 14l6-6l6 6l-1.4 1.4z"/></svg>');
   background-color: var(--primary);
   border-radius: 50%;
   width: 20px;
   height: 20px;
   line-height: 0;
   display: grid;
   justify-content: center;
   place-items: center;
}

.details-content {
    display: grid;
    grid-template-columns: inherit; 
    gap: 10px;
    height: 0;
    visibility: hidden;

    transition: height 0.3s ease;
    interpolate-size: allow-keywords;
}

.list-item--show-group-members {
    padding: 10px;
}

.icon-tile {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 5px;

    & > .icon {
        grid-row: 1 / -1;
        grid-column: 1/2;
        align-self: center;
    }

    & > .icon-tile-label, .icon-tile-value {
        grid-column: 2/3;
        line-height: 1;
    }
}

.icon-tile-label {
    font-weight: 700;
    font-size: 14px;
}

.icon-tile-value {
    font-weight: 700;
    font-size: 16px;
}

.icon-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: grid;
    grid-template-columns: min-content 1fr;
    align-items: center;
    gap: 10px;
}

.button--remove-member {
    color: var(--destructive);
}
.progress-bar {
    background-color: var(--progress-background);
    width: 100%;
    border-radius: 999px;
    overflow: clip;
    height: 12px;

    &::-webkit-progress-bar {
        background-color: var(--progress-background);
        border-radius: 999px;
        
    }

    &::-webkit-progress-value {
        background-color: var(--progress-foreground);
        border-radius: 999px;
    }
}
.toast {
    backdrop-filter: blur(150px);
    box-shadow: var(--elevation);
    background: var(--background-dark);
    border: 1px solid var(--border-color-dim);
    border-radius: 30px;
    width: 80%;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 18px;
    z-index: 99999; 
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    gap: 10px;

    @media screen and (min-width: 768px) {
        bottom: 40px;
        padding: 30px 36px;
        width: 85%;
    }
}

.toast__text {
    font-weight: 600;
    font-size: 18px;
    color: var(--text-color);
}

.toast__time {
    font-weight: 400;
    font-size: 14px;
    color: var(--time-color);
}
.title {
    font-size: 24px;
    font-weight: 800;

    @media screen and (min-width: 768px) {
      font-size: 36px;
   }
}

.main-text-font {
    font-size: 20px;
    font-weight: 800;

    @media screen and (min-width: 768px) {
      font-size: 36px;
   }
}

.form-title {
   color: var(--primary);
   text-align: center;
   font-weight: 800;
   font-size: 30px;

   @media screen and (min-width: 768px) {
      text-align: left;
      font-size: 36px;
      font-weight: 700;
   }
}

.button-typography {
    font-weight: 600;
    font-size: 14px;

    @media screen and (min-width: 768px) {
      font-size: 16px;
   }
}

/* ABOVE IS DESIGN COMPONENTS */

.font--medium--bold--dim {
    font-weight: 600;
    font-size: 14px;
    color: hsl(from var(--text-color) h s l / 0.7);
}

.font--large--bold {
    font-weight: 600;
    font-size: 16px;

    @media screen and (min-width: 768px) {
    font-size: 24px;
   }
}

.title-text {
    font-weight: 600;
    font-size: 18px;
}

.muted-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--muted-text);
}

.emphasized-text {
    font-weight: 700;
    font-size: 16px;
}


.small-text {
    font-size: 12px;
    font-weight: 700;

    @media screen and (min-width: 768px) {
        font-size: 14px;
    }
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement. 
 * It is generally better to create a new file per style scope.
 *


 */

@layer foundational, component, utilities;


@layer foundational {
   @font-face {
      font-family: "Manrope";
      font-style: normal;
      font-weight: 100 900;
      font-display: block;
      src: url(/assets/Manrope-VariableFont_wght-2fe3210154137f04245699324cb3b4103e1134698c306b5bbd56005e2c05800e.ttf) format('truetype-variations');
   }
   
   :root {
      &:has(input[name='darkMode'][value="true"]) {
         --background-tile: hsla(227, 32%, 9%, 1);
         --primary: hsla(223, 100%, 56%, 1);
         --secondary: hsla(227, 31%, 14%, 1);
         --text-color: hsla(0, 0%, 100%, 1);
         --primary-font: 'Manrope';
         --destructive: hsla(0, 100%, 56%, 1);
         --card-background: hsla(0, 0%, 100%, 0.05);
         --success: hsla(142, 42%, 49%, 1);
         --warning: hsla(43, 100%, 67%, 1);
         --gold: hsla(38, 92%, 46%, 1);
         --profile-background: hsla(215, 69%, 19%, 1);
         --active-background: hsla(223, 100%, 56%, 0.2);
         --email-text: hsla(0, 0%, 100%, 0.4);
         --time-color: hsla(224, 41%, 73%, 1);
         --text-grey: hsla(0, 0%, 100%, 0.8);
         --border-color-mid: hsla(0, 0%, 100%, 0.2);
         --border-color-dim: hsla(0, 0%, 100%, 0.1);
         --elevation:0px 19px 41px 0px hsla(0, 0%, 0%, 0.1),
         0px 75px 75px 0px hsla(0, 0%, 0%, 0.09),
         0px 170px 102px 0px hsla(0, 0%, 0%, 0.05),
         0px 301px 121px 0px hsla(0, 0%, 0%, 0.01),
         0px 471px 132px 0px hsla(0, 0%, 0%, 0);
         --background-light:hsla(227, 31%, 14%, 1);
         --background-dark: hsla(220, 31%, 9%, 1);
         --gradient-background: linear-gradient(180deg, var(--background-light) 0%, var(--background-dark) 100%);
         --highlight-card-background:hsla(223, 100%, 56%, 0.1);
         --highlight-card-border: hsla(223, 100%, 56%, 0.3);
         --indicator-success: hsla(122, 100%, 64%, 1);
         --indicator-error: hsla(0, 100%, 65%, 1);
         --progress-background: hsla(240, 5%, 17%, 1);
         --progress-foreground: hsla(218, 92%, 60%, 1);
         --button-border-highlight: hsla(223, 100%, 56%, 1);
         --muted-text: hsla(240, 4%, 50%, 1);
         --success-interact: hsla(142, 76%, 36%, 1);
         --orange-text: hsla(27, 96%, 61%, 1);
      }

      &:has(input[name='darkMode'][value="false"]) {
         --background-tile: hsla(227, 32%, 91%, 1);
         --primary: hsla(223, 100%, 44%, 1);
         --secondary: hsla(227, 31%, 86%, 1);
         --text-color: hsla(0, 0%, 0%, 1);
         --primary-font: 'Manrope';
         --destructive: hsla(0, 100%, 44%, 1);
         --card-background: hsla(0, 0%, 0%, 0.05);
         --success: hsla(142, 42%, 51%, 1);
         --warning: hsla(43, 100%, 33%, 1);
         --gold: hsla(38, 92%, 54%, 1);
         --profile-background: hsla(215, 69%, 81%, 1);
         --active-background: hsla(223, 100%, 44%, 0.2);
         --email-text: hsla(0, 0%, 0%, 0.4);
         --time-color: hsla(224, 41%, 27%, 1);
         --text-grey: hsla(0, 0%, 0%, 0.8);
         --border-color-mid: hsla(0, 0%, 0%, 0.2);
         --border-color-dim: hsla(0, 0%, 0%, 0.1);
         --elevation:0px 19px 41px 0px hsla(0, 0%, 100%, 0.1),
                     0px 75px 75px 0px hsla(0, 0%, 100%, 0.09),
                     0px 170px 102px 0px hsla(0, 0%, 100%, 0.05),
                     0px 301px 121px 0px hsla(0, 0%, 100%, 0.01),
                     0px 471px 132px 0px hsla(0, 0%, 100%, 0);
                     --elevation:0px 19px 41px 0px hsla(0, 0%, 0%, 0.1),
                     0px 75px 75px 0px hsla(0, 0%, 0%, 0.09),
                     0px 170px 102px 0px hsla(0, 0%, 0%, 0.05),
                     0px 301px 121px 0px hsla(0, 0%, 0%, 0.01),
                     0px 471px 132px 0px hsla(0, 0%, 0%, 0);
         --background-light:hsla(226, 31%, 86%, 1);
         --background-dark: hsla(220, 31%, 91%, 1);
         --gradient-background: linear-gradient(180deg, var(--background-light) 0%, var(--background-dark) 100%);
         --highlight-card-background:hsla(223, 100%, 44%, 0.1);
         --highlight-card-border: hsla(223, 100%, 44%, 0.3);
         --indicator-success: hsla(122, 100%, 36%, 1);
         --indicator-error: hsla(0, 100%, 35%, 1);
         --progress-background: hsla(240, 5%, 83%, 1);
         --progress-foreground: hsla(218, 92%, 40%, 1);
         --button-border-highlight: hsla(223, 100%, 44%, 1);
         --muted-text: hsla(240, 4%, 50%, 1);
         --success-interact: hsla(142, 76%, 64%, 1);
         --orange-text: hsla(27, 96%, 39%, 1);
      }
   }
   
   * {
      padding: 0;
      margin:0;
   }
   
   html {
      height: 100%;
   }
   
   body {
      background-color: var(--background-tile);
      color: var(--text-color);
      font-family: var(--primary-font);
      min-height: 100%;
   }
   
   link {
      color: var(--primary);
   }
   
   input {
      font-weight: 500;
      font-size: clamp(16px, 1rem, 20px);
   }
   
   input[type="submit"] {
      background-color: var(--primary);
      color: var(--text-color);
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      font-weight: 600;
      font-size: 1rem;
   }

   form input[type=password],input[type=email], input[type=text], input[type=number], select  {
      width: -moz-available;          /* WebKit-based browsers will ignore this. */
      width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
      width: fill-available;
      border-radius: 10px;
      border-width: 1px;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--border-color-dim);
      background: var(--card-background);
      color: var(--text-color);
      font-size: clamp(16px, 1rem, 20px);
   }

   form input[type=checkbox] {
      height: 20px;
      aspect-ratio: 1;
      accent-color: var(--primary);
      margin: 0;
   }

}

.turbo-progress-bar {
   background: linear-gradient(to right, var(--primary), var(--secondary));
}

@layer component {
   .card {
      background: var(--gradient-background);
      padding: 10px;
      border-radius: 15px;
      display: grid;
      grid-auto-flow: row;
      gap: 20px;
      box-shadow: var(--elevation);
   }
   
   .sub-card {
      gap: 20px;
      border-radius: 15px;
      padding: 20px 10px;
      background: var(--card-background);
   
      @media screen and (min-width: 768px) {
         padding: 30px;
      }
   }

   .before-icon-input {
      position: relative;
      height: min-content;
      &::before {
         content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="hsla(0, 0%, 100%, 0.7)" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14"/></svg>');
         width: 24px;
         height: 24px;
         display: inline-block;
         position: absolute;
         left: 10px;
         top: 50%;
         transform: translateY(-50%);
      }

      input {
         /* icon width: 24px + 10px gap + 10px padding */
         padding-left: 44px;
      }
   }

   /* buttons */

   .icon-button-internals {
      display: grid;
      gap: 10px;
      grid-template-columns: min-content 1fr;
      white-space: nowrap;
      align-items: center;
      color: inherit;
   }

   .icon-button-text {
      font-weight: 600;
      font-size: 14px;

      @media screen and (min-width: 768px) {
        font-size: 16px;
      }
   }
}

/* shared components */
.controller-wrapper {
   display: contents;
}

.icon-button {
   background-color: transparent;
   border: none;
   align-self: start;
}

/* shared partials */
.nav-bar {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   padding: 10px;

   & .nav-menu-icon-button {
      grid-column: 3/4;
      justify-self: end;
   }

   & .nav-menu-back-button {
      grid-column: 1/2;
      justify-self: start;
   }
}

.nav-bar-logo {
   height: 110px;
   width: 110px;
   grid-column: 2/3;
   justify-self: center;
}

.nav-menu-icon-button, .nav-menu-back-button {
   background-color: transparent;
   border: none;
   cursor: pointer;

   & svg {
      pointer-events: none;
   }
}

.nav-menu-back-button {
   display: grid;
   place-items: center;
}

.nav-menu-icon-close-button {
   background-color: transparent;
   border: none;
   cursor: pointer;
   grid-column: 2/3;
   justify-self: end;

   & svg {
      pointer-events: none;
   }
}

.mobile-nav-menu {
   position: fixed;
   top:0;
   box-sizing: border-box;
   height: 100%;
   width: 100%;
   background-color: var(--secondary);
   opacity: 0.95;
   z-index: 999;
   padding: 20px;
   padding-top: 50px;
   display: grid;
   grid-template-rows: min-content 1fr;
   grid-template-columns: 1fr min-content;
   gap: 75px;
   display: none;

   @media screen and (min-width: 768px) {
      display: none;
   }
}

.mobile-nav-menu-links-list {
   list-style: none;
   grid-column: 1/-1;
}

.mobile-nav-menu-link > a {
   color: var(--text-color);
   font-weight: 600;
   text-decoration: none;
   display: block;
   padding: 10px;
}

.mobile-nav-menu-link {
   border-bottom: 1px solid var(--border-color-mid);
}

/* page-specific-styles */
.login-image, .sign-up-image {
   display: block;
   width: 100%;
   height: 100%;
   aspect-ratio: 1/1;
   border-radius: 20px;
   object-fit: cover;

   /* safari only feature to target only safari */
   @supports(-webkit-backdrop-filter: blur(10px)) {
      aspect-ratio: unset;
      height: -webkit-fill-available;
   }
}

.login-page, .sign-up-page {
   display: grid;
   grid-auto-flow: row;
   gap: 16px;
   height: 100vh;
   padding: 10px;
   box-sizing: border-box;

   @media screen and (min-width: 768px) {
      grid-template-columns: 1fr 1fr;
      align-items: center;
      justify-items: center;
      min-height: 100%;
      padding: 20px;
   }
}

.field {
   display: grid;
   grid-auto-flow: row;
   gap:10px;
   
   & label {
      font-weight: 600;
   }
}

.login-card {
   background: var(--gradient-background);
   padding: 20px;
   border-radius: 30px;
   display: grid;
   grid-auto-flow: row;
   gap: 20px;
   box-shadow: var(--elevation);

   & input[type=checkbox] {
      height: 20px;
      aspect-ratio: 1;
      accent-color: var(--primary);
      margin: 0;
   }
   
   & .checkbox-field {
      display: grid;
      grid-template-columns: min-content 1fr;
      align-items: center;
      gap: 4px;

      & label {
         font-weight: 600;
      }
   }
   
   & .sign-up-link {
      color: var(--primary);
      text-decoration: none;
   }

   @media screen and (min-width: 768px) {
      padding: 70px 80px;
   }
}

.login-form {
   display: grid;
   grid-auto-flow: row;
   gap: 15px;
   
   & .login-form-actions {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
   }

   & .forget-password-link {
      color: var(--text-color);
      text-decoration: none;
      justify-self: end;
      font-weight: 600;
      font-size: 12px;
   }

   & label {
      font-weight: 600;
      font-size: 14px;
   }
}

.sign-up-link-wrapper {
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: max-content max-content;
   gap: 8px;
   font-weight: 600;
   font-size: 12px;
}

.login-separator, .sign-up-separator, .separator {
   width: 100%;
   border: 1px solid var(--border-color-mid);
   height: 0px;
}

.login-image-wrapper, .sign-up-image-wrapper {
   position:relative;
   border-radius: 20px;
   height: -moz-available;          /* WebKit-based browsers will ignore this. */
   height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
   height: fill-available;

   & .login-image-text, .sign-up-image-text {
      position:absolute;
      left: 50%;
      bottom: 20px;
      transform: translate(-50%, 0%);
      text-align: center;

      @media screen and (min-width: 768px) {
         text-align: left;
         left: 20px;
         transform: translate(0%, 0%);
      }
   }
   
   @media screen and (min-width: 768px) {
      order: -1;
   }
}

.sign-up-page {
   display: grid;
   grid-auto-flow: row;
   gap: 20px;
}

.sign-up-form {
   padding: 20px;
   display: grid;
   grid-auto-flow: row;
   gap: 20px;
   border-radius: 20px;
   background: var(--gradient-background);
   box-shadow: var(--elevation);
   
   @media screen and (min-width: 768px) {
      padding: 70px 80px;
   }

   & .field {
      display: grid;
      grid-auto-flow: row;
      gap:10px;
      
      & label {
         font-weight: 600;
         font-size: 14px;
      }
   }

   & .login-link {
      color: var(--primary);
      text-decoration: none;
   }
   
   & .login-link-wrapper {
      font-size: 12px;
   }
}

.field-side-by-side {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
   gap: 10px;
}

.checkbox-field {
   display:grid;
   grid-template-columns: max-content min-content;
   gap: 10px;
}

.home-page {
   --home-page-gap: 20px;

   padding: 10px;
   display: grid;
   gap: var(--home-page-gap);
   overflow: none;

   & .nav-bar {
      grid-column: 1/-1;
   }

   @media screen and (min-width: 957px) {
      grid-template-columns: 2fr 1fr;
      /* 130px is the height of the navbar */
      height: calc(100vh - 130px);
      box-sizing: border-box;
      /* 33px is what the height of min-content with text ends up being here */
      grid-template-rows: min-content calc(100% - calc(var(--home-page-gap) + 33px));
      padding: 50px;
      padding-top: 32px;

      & .home-user-card {
         order: 3;
      }
   }
}

.home-title {
   text-align: center;
   color: var(--text-color);
   @media screen and (min-width: 768px) {
      grid-column: 1/-1;
   }
}

.home-user-card {
   background: var(--gradient-background);
   box-shadow: var(--elevation);
   border-radius: 20px;
   display: grid;
   grid-template-columns: 4fr 3fr;
   justify-content: space-between;
   padding: 10px;
   gap: 20px;

   @media screen and (min-width: 768px) {
      grid-template-columns: 1fr;
      padding: 30px;
   }
}

.home-user-card-info-wrapper {
   display: contents;

   @media screen and (min-width: 768px) {
     display: grid;
     grid-auto-flow: row;
     gap: 10px;
   }
}

.home-user-card-info {
   display: grid;
   justify-content: center;
   gap: 10px;

   & .home-user-name, .home-user-email {
      text-align: center;
   }

   & .home-user-avatar {
      justify-self: center;
   }

   @media screen and (min-width: 768px) {
      align-content: start;
     }
}

.home-user-avatar {
   height: 80px;
   width: 80px;
   border-radius: 50%;
   background-color: transparent;
   display: grid;
   place-content: center;
   font-size: 20px;
   border: 2px solid var(--text-color);
}

.home-user-avatar-inner {
   background-color: var(--primary);
   display: grid;
   place-content: center;
   border-radius: 50%;
   aspect-ratio: 1;
   width: 72px;
}

.home-user-text {
   display: grid;
   grid-auto-flow: row;
   gap: 5px;
}

.home-user-name {
   font-weight: 600;
   font-size: 14px;
}

.home-user-email {
   font-weight: 600;
   font-size: 12px;
   color: var(--email-text);
}

.edit-text {
   font-weight: 600;
   font-size: 14px;
}

.home-user-card-actions {
   display: grid;
   grid-auto-flow: row;
   gap: 20px;
   align-self: center;

   @media screen and (min-width: 768px) {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      align-items: center;
   }
}

.logout-button {
   width: -moz-available;          /* WebKit-based browsers will ignore this. */
   width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
   width: fill-available;
   justify-content: center;
   display:grid;
}

.home-create-new-team {
   background: radial-gradient(circle at center, var(--text-color) -80%, var(--primary));
   gap: 8px;
   border-radius: 15px;
   padding: 10px 10px;
   grid-column: 1/-1;

   display: grid;
   grid-template-rows: repeat(3, min-content);
   gap: 8px;
   justify-content: center;
   position: relative;
   overflow: clip;


   @media screen and (min-width: 768px) {
      padding: 30px;
   }
}

.create-team-image {
   width: 91px;
   height: auto;
   justify-self: center;

   @media screen and (min-width: 768px) {
      width: auto;
      height: 160px;
   }
}

.create-team-image-shadow {
   pointer-events: none;
   @media screen and (min-width: 768px) {
      width: 100%;
      height: auto;
      position: absolute;
      opacity: 0.05;
      top: -33%;
   }
}

.picks-lock-text {
   font-weight: 800;
   font-size: 20px;
   text-align: center;

   @media screen and (min-width: 768px) {
      font-size: 32px;
   }
}

.create-new-team-link {
   text-decoration: none;
   color: var(--primary);
   background-color: var(--text-color);
   padding: 10px;
   display: block;
   width: max-content;
   border-radius: 15px;
   justify-self: center;
   font-weight: 600;
   font-size: 14px;
   height: min-content;
}

.home-teams-card {
   background: var(--gradient-background);
   box-shadow: var(--elevation);
   border-radius: 20px;
   display: grid;
   grid-auto-flow: row;
   padding: 20px 10px;
   gap: 20px;
   max-height: 100%;

   @media screen and (min-width: 768px) {
      padding: 30px;
   }
}

.home-teams-card-title {
   font-weight: 700;
   font-size: 18px;
}

.view-all-teams-link {
   text-decoration: none;
   color: var(--primary-font);
   background-color: transparent;
   border: 1px solid var(--text-color);
   padding: 10px;
   border-radius: 15px;
   display: grid;
   place-items: center;
   width: -moz-available;          /* WebKit-based browsers will ignore this. */
   width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
   width: fill-available;
   justify-self:end;
}

.view-all-qualifiers-link {
   text-decoration: none;
   color: var(--primary-font);
   background-color: transparent;
   border: 1px solid var(--text-color);
   padding: 10px 27px;
   border-radius: 15px;
   display: grid;
   place-items: center;
   width: -moz-available;          /* WebKit-based browsers will ignore this. */
   width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
   width: fill-available;
   justify-self: end;
}

.home-teams-links-container {
   display: grid;
   grid-auto-flow: row;
   gap: 10px;

   @media screen and (min-width: 768px) {
      display: none;
   }
}

.fantasy-team-card-header, .qualifiers-card-header {
   display: grid;
   grid-auto-flow: column;
   align-items: center;
}

.home-teams-title {
   font-weight: 700;
   font-size: 18px;
}

.fantasy-team-card {
   display:grid;
   gap: 20px;

   & .button--primary {
      justify-self: center;
   }

   @media screen and (min-width: 768px) {
      & .button--primary {
         justify-self: end;
      }
   }
}

.home-teams-card-team-info-tile-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);   
   padding-top: 10px;
   padding-bottom: 10px; 
   border-top: 1px solid var(--border-color-mid);
   border-bottom: 1px solid var(--border-color-mid);

   & dt {
      font-weight: 700;
      font-size: 12px;

      @media screen and (min-width: 768px) {
         font-size: 14px;
      }
   }

   & dd {
      font-weight: 700;
      font-size: 14px;

      @media screen and (min-width: 768px) {
        font-size: 20px;
      }
   }
}

.home-teams-card-team-info-tile {
   display: grid;
   grid-template-columns: min-content 1fr;
   gap:5px;

   & svg {
      align-self: center;

      @media screen and (min-width: 768px) {
         width: 24px;
         height: 24px;
       }
   }

   @media screen and (min-width: 768px) {
      gap: 15px;
   }
}

.fantasy-team-name {
   font-weight: 700;
   font-size: 18px;
}

.home-teams-qualifier-headings {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
   background-color: var(--card-background);
   border-radius: 10px;
   gap: 10px;
   padding: 10px;
}

.qualifiers-card {
   display: grid;
   gap: 20px;
   overflow: unset;

   @media screen and (min-width: 768px) {
      overflow-y: scroll;
   }
}

.home-qualifiers {
   display: grid;
   gap: 10px;
}

.qualifiers-new-page, .qualifiers-edit-page {
   --padding: 20px;

   padding: var(--padding);
   display: grid;
   place-items: center;
   gap: 20px;

   .main-card {
      width: calc(100% - calc(2 * var(--padding)));

      @media screen and (min-width: 768px) {
         width: 50%;
         max-width: 750px;
      }
   }
}

.qualifiers-list {
   list-style: none;

   & li {
      list-style-type: "";
   }

   & li:has(+ li > .qualifier[open]) > .qualifier:not([open]) > .qualifier-summary {
      border-bottom: none;
   }

   & li:has(+ li > .qualifier[open]) > .qualifier[open] {
      margin-bottom: 10px;
   }
}

.qualifier-summary {
   &::-webkit-details-marker {
      display:none;
   }
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr min-content;
   border-bottom: 1px solid var(--border-color-dim);
   padding: 10px;
   gap: 10px;
}

.qualifier-summary::after {
   margin-left: 1ch;
   display: block;
   content: '';
   transition: 0.2s;
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="hsla(0, 0%, 100%, 1)" d="m12 10.8l-4.6 4.6L6 14l6-6l6 6l-1.4 1.4z"/></svg>');
   background-color: var(--primary);
   border-radius: 50%;
   width: 20px;
   height: 20px;
   line-height: 0;
   display: grid;
   justify-content: center;
   place-items: center;
}

.qualifier[open] {
   background-color: var(--card-background);
   border-radius: 10px;

   & .qualifier-summary::after {
      transform: rotate(180deg);
   }
}

.qualifier-details {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   padding: 10px;

    & dt {
      font-weight: 600;
      font-size: 12px;
      opacity: 0.8;
    }
   
    & dd {
      font-weight: 600;
      font-size: 14px;
    }
}

.show-qualifier-link {
   color: var(--text-color)
}

.qualifiers-page {
   padding: 10px;
   display:grid;
   gap:20px;

   @media screen and (min-width: 768px) {
      padding: 50px;
   }

   @media screen and (min-width: 1200px) {
      padding: 50px;
   }
}

.qualifiers-add-button {
   border: none;
   padding: 0;

   @media screen and (min-width: 768px) {
      border: 1px solid var(--text-color);
      padding: 14px 20px;
   }
}

.qualifiers {
   .main-card {
      grid-template-columns: repeat(9, 1fr);
   }
}

.qualifiers-header {
   display: grid;
   grid-template-columns: 1fr 5fr 1fr;

   & .qualifiers-title {
      grid-column: 2/3;
      justify-self:center;
   }

   & .qualifiers-add-button {
      grid-column: 3/4;
      justify-self:end;
   }
}

.qualifier-headings {
   display: grid;
   grid-template-columns: subgrid;
   background-color: var(--card-background);
   border-radius: 10px;
   gap: 10px;
   padding: 10px;
   grid-column: 1/-1;

   @media screen and (min-width: 768px) {
      padding: 20px;
   }
}


.main-card {
   background: var(--gradient-background);
   padding: 10px;
   border-radius: 15px;
   display: grid;
   grid-auto-flow: row;
   gap: 20px;
   box-shadow: var(--elevation);

   @media screen and (min-width: 768px) {
      padding: 20px;
      border-radius: 30px;
   }
}

.qualifiers-show-qualifier {
   display: grid;
   grid-template-columns: min-content 1fr;
   align-items: center;
   gap: 10px;
}

.qualifiers-show-button {
   padding: 5px 10px;
   border-radius: 10px;
}

.qualifier-partial {
   grid-column: 1/-1;
   padding: 15px 0px;
   border-bottom: 1px solid var(--border-color-dim);
   display: grid; 
   grid-template-columns: subgrid;
   gap: 10px;
   align-items: center;
}

.show-qualifier-page {
   padding: 10px;

   @media screen and (min-width: 768px) {
      padding: 50px;
   }
}

.show-qualifier-page-card {
   background: var(--gradient-background);
   padding: 10px;
   border-radius: 15px;
   display: grid;
   grid-template-columns: repeat(9, 1fr);

   gap: 20px;
   box-shadow: var(--elevation);

   & > .show-qualifier-actions {
      grid-column: 1/-1;
   }

   & > .home-qualifiers {
      grid-column: 1/-1;
   }

   @media screen and (min-width: 768px) {
      padding: 20px;
      border-radius: 30px;
   }
}

.show-qualifier-page-header {
   background-color: var(--card-background);
   border-radius: 10px;
   gap: 10px;
   padding: 10px;
   grid-column: 1/-1;
   display: grid;
   grid-template-columns: subgrid;
}

.show-qualifier-actions {
   display: grid;
   gap: 20px;
   
   & > a {
      width: -moz-available;          /* WebKit-based browsers will ignore this. */
      width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
      width: fill-available;
   }
   
   & button {
      width: -moz-available;          /* WebKit-based browsers will ignore this. */
      width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
      width: fill-available;
   }

   @media screen and (min-width: 768px) {
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
   }
}

.fantasy-team-show-page {
   padding: 10px;
   display: grid;
   gap: 20px;

   @media screen and (min-width: 768px) {
      padding: 50px;
   }
}

.fantasy-team-show-heading {
   text-align: center;
}

.fantasy-team-ncaa-trophy {
   display: grid;
   place-items: center;
   margin-bottom: 45px;
   gap: 20px;
}

.fantasy-team-ncaa-trophy-text {
   font-weight: 800;
   font-size: 36px;
   text-align: center;
   text-wrap: balance;
}

.text-gold {
   color: var(--gold);
}

.fantasy-team-tile-list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);   
   padding: 10px;

   @media screen and (min-width: 768px) {
      padding: 20px 30px;
   }

   & dt {
      font-weight: 700;
      font-size: 12px;

      @media screen and (min-width: 768px) {
         font-size: 14px;
      }
   }

   & dd {
      font-weight: 700;
      font-size: 14px;

      @media screen and (min-width: 768px) {
        font-size: 20px;
      }
   }
}

.fantasy-team-tile {
   display: grid;
   grid-template-columns: min-content 1fr;
   gap:5px;

   & svg {
      align-self: center;

      @media screen and (min-width: 768px) {
         width: 24px;
         height: 24px;
      }
   }

   @media screen and (min-width: 768px) {
      gap: 15px;
   }
}

.fantasy-team-show-players-card {
   padding: 20px 10px;
   gap: 10px;

   @media screen and (min-width: 768px) {
      padding: 20px 30px;
   }
}

.fantasy-team-show-players-list-wrapper {
   display: grid;
   grid-auto-flow: row;
   gap: 10px;
   display: grid;
   grid-template-columns: 1fr 2fr max-content;

   & > .separator {
      grid-column: 1/-1;
   }

   @media screen and (min-width: 768px) {
      grid-template-columns: repeat(3, 1fr);
   }
}

.fantasy-team-show-players-list-heading {
   display: grid;
   grid-template-columns: subgrid;
   padding: 10px;
   gap: 10px;
   grid-column: 1/-1;
}

.fantasy-team-show-qualifier-list {
   list-style: none;
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1/-1;
}

.fantasy-team-show-qualifier-list-item {
   display: grid;
   grid-template-columns: subgrid;
   gap: 10px;
   padding: 10px;
   border-bottom: 1px solid var(--border-color-dim);
   grid-column: 1/-1;
}

.fantasy-team-action-card {
   display: grid;
   grid-template-columns: 1fr min-content;
   align-items: center;
   position: relative;
   top: -45px;
   padding: 10px;

   @media screen and (min-width: 768px) {
      padding: 20px 30px;
    }

   & dt {
      font-weight: 700;
      font-size: 12px;
      color: var(--text-grey);

      @media screen and (min-width: 768px) {
         font-size: 14px;
      }
   }

   & dd {
      font-weight: 700;
      font-size: 18px;

      @media screen and (min-width: 768px) {
        font-size: 20px;
      }
   }
}

.fantasy-team-action-text {
   display: grid;
   gap: 10px;
}

.fantasy-team-show-button {
   width: -moz-available;          /* WebKit-based browsers will ignore this. */
   width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
   width: fill-available;
   padding: 14px 20px;
}

.fantasy-team-edit-button {
   color: var(--text-color);
   text-decoration: none;
   width: max-content;
   padding: 0;
   border-radius: 15px;
   width: -moz-available;          /* WebKit-based browsers will ignore this. */
   width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
   width: fill-available;
   display: grid;
   place-content: center;
   background-color: transparent;
   
   @media screen and (min-width: 768px) {
      border: none;
      padding: 14px 20px;
      background-color: var(--primary);
   }
}

.fantasy-team-delete-button {
   background: transparent;
   border: none;
   cursor: pointer;
   border-radius: 15px;
   width: -moz-available;          /* WebKit-based browsers will ignore this. */
   width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
   width: fill-available;
   display: grid;
   place-content: center;
   color: var(--destructive);
   font-family: var(--primary-font);
   font-size: 16px;
   font-weight: 600;
   
   @media screen and (min-width: 768px) {
      padding: 14px 20px;
      border: 2px solid var(--destructive);
   }
}

.fantasy-team-show-actions {
   display: grid;
   grid-auto-flow: column;
   gap: 10px;

   @media screen and (min-width: 768px) {
     gap: 20px;
    }
}

.fantasy-teams-index-page {
   padding: 10px;
   display: grid;
   gap: 20px;

   @media screen and (min-width: 768px) {
      padding: 50px;
   }
}

.fantasy-team-add-button {
   white-space: nowrap;
}

.fantasy-team-add-fantasy-team {
   display: grid;
   grid-auto-flow: column;
   gap: 10px;
}

.fantasy-teams-header {
   display: grid;
   grid-template-columns: repeat(3, 1fr);

   & .fantasy-team-add-button {
      justify-self: end;
      border: none;
      padding: 0;

      @media screen and (min-width: 768px) {
         border: 1px solid var(--text-color);
         padding: 10px 27px;
      }
   }
}

.fantasy-team-index-title {
   white-space: nowrap;
   grid-column: 2/3;
   justify-self: center;
}

.fantasy-team-index-list {
   display: grid;
   gap: 10px;
   grid-template-columns: 1fr 1fr 1fr 1fr min-content;
}

.fantasy-teams-item-headers {
   display: grid;
   grid-column: 1/-1;
   grid-template-columns: subgrid;
}

.fantasy-teams-item {
   list-style: none;
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1/-1;
   padding: 0px;
}

.fantasy-teams-item .fantasy-teams-item-details {
   display: inherit;
   grid-template-columns: inherit;
   grid-column: 1/-1;

   & fantasy-teams-item-details-summary::-webkit-details-marker {
      display:none;
   }
}

.fantasy-teams-item .fantasy-teams-item-details > .fantasy-teams-item-details-summary {
   list-style: none;
   display: inherit;
   grid-template-columns: inherit;
   grid-column: 1/-1;
   padding: 20px;

   &::after {
      justify-self: end;
   }
}

.fantasy-teams-item .fantasy-teams-item-details[open] {

   & .fantasy-teams-item-details-summary {
      border-bottom: 1px solid var(--border-color-dim);
   }
   & .fantasy-teams-item-details-summary::after {
      transform: rotate(180deg);
   }

   & .fantasy-teams-item-details-content {
      display: grid;
      grid-template-columns: inherit; 
      grid-column: 1/-1;
      gap: 20px;
      padding: 20px;

      & .separator {
         grid-column: 1/-1;
         margin-left: -20px;
         width: calc(100% + 40px);
      }
   }
}

.fantasy-teams-item .fantasy-teams-item-details[data-open-indicator="true"] .fantasy-teams-item-details-summary::after {
   margin-left: 1ch;
   display: block;
   content: '';
   transition: 0.2s;
   /**
      TODO: come up with strategy to make icons in psuedo classes dark mode compatible
   */
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="hsla(0, 0%, 100%, 1)" d="m12 10.8l-4.6 4.6L6 14l6-6l6 6l-1.4 1.4z"/></svg>');
   background-color: var(--primary);
   border-radius: 50%;
   width: 20px;
   height: 20px;
   line-height: 0;
   display: grid;
   justify-content: center;
   place-items: center;
}

.fantasy-teams-item-details-content {
   display: none;
}

.fantasy-team-qualifier-list {
   grid-column: 1/-1;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   justify-content: center;
   gap: 20px;
   
   @media screen and (min-width: 768px) {
      grid-template-columns: repeat(9, max(100px, 9.5vw));
      justify-content: normal;
      overflow-x: scroll;
   }
}

.fantasy-team-qualifier-item {
   display: grid;
   grid-template-rows: min-content max(100px, 9.5vw) min-content;
   justify-items: center;
   gap: 10px;
   text-align: center;
}

.fantasy-team-qualifier-item-profile-background {
   background-color: var(--profile-background);
   border-radius: 15px;
   overflow: clip;
   aspect-ratio: 4/5;
   position: relative;
   height: 100%;
   word-break: break-word;

   & svg {
      width: 100%;
      height: auto;
      position: absolute;
      bottom: 0;
      left: 0;
   }
}

.fantasy-teams-index-item-actions {
   display: grid;
   grid-template-rows: repeat(3, 1fr);
   grid-column: 1/-1;
   gap: 10px;

   @media screen and (min-width: 1000px) {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr;
      gap: 20px;
   }

   & .button {
      width: -moz-available;          /* WebKit-based browsers will ignore this. */
      width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
      width: fill-available;
   }

   & > :first-child:last-child {
      grid-column: 1/-1;
   }

   &:has(:first-child:last-child) {
      grid-template-rows: 1fr;
   }
}

.fantasy-team-edit-page, .fantasy-team-new-page {
   display: grid;
   gap: 20px;
   padding: 10px;

   @media screen and (min-width: 1000px) {
      padding: 50px;
      box-sizing:border-box;
      height: calc(100vh - 130px);
      grid-template-rows: min-content 1fr;
   }
}

.fantasy-team-edit-title, .fantasy-team-new-title {
   text-align: center;
}

.fantasy-team-form {
   height: calc(100% - 145px);
   min-height: 100%;
}

.fantasy-team-form-container {
   display: grid;
   gap: 20px;

   @media screen and (min-width: 1000px) {
      grid-template-columns: 6fr 4fr;
      grid-template-rows: 6fr 1fr;
      height: 100%;
   }
}

.fantasy-team-form-card {
   @media screen and (min-width: 1000px) {
      grid-template-rows: min-content 1fr;
      padding: 30px;
   }
}

.fantasy-team-form-card-heading {
   display: grid;
   grid-template-columns: 1fr max-content;

   @media screen and (min-width: 1000px) {
    grid-column: 1/2;
    grid-row: 1/2;
   }
}

.fantasy-team-form-card-heading-group {
   display: grid;
   gap: 10px;
}

.fantasy-team-form-selected-players-title {
   font-weight: 700;
   font-size: 18px;

   @media screen and (min-width: 768px) {
      font-size: 24px;
   }
}

.fantasy-team-form-selected-players-subtext {
   font-weight: 400;
   font-size: 12px;

   @media screen and (min-width: 768px) {
      font-size: 14px;
   }
}

.fantasy-team-form-card-clear-all {
   color: var(--primary);
   background-color: transparent;
   border: none;
   cursor: pointer;
   font-size: 12px;
   font-weight: 700;

   @media screen and (min-width: 768px) {
      font-size: 14px;
   }
}

.fantasy-team-form-qualifier-selector {
   display:grid;
   gap:10px;
   grid-template-rows: min-content 1fr;

   & > .small-text, .qualfier-name-text {
      padding-left: 5px;
   }
}

.qualfier-name-text {
  font-weight: 600; 
  font-size: 14px;

  @media screen and (min-width: 768px) {
      font-size: 18px;
   }
}

.fantasy-team-form-qualifier-selectors {
   display: grid;
   grid-auto-flow: column;
   gap: 10px;
   overflow-x: scroll;

   .selected-qualifier {
      position: relative;
      padding-left: 5px;
      padding-right: 5px;
      align-self: start;
      display:grid;
      gap: 10px;

      & .remove-qualifier-button {
         position: absolute;
         background-color: var(--primary);
         color: white;
         border-radius: 50%;
         display: grid;
         place-items: center;
         width: 26px;
         height: 26px;
         right: 0%;
         top: 0%;
         transform: translate(25%, -50%);
         border: none;
         z-index: 1;

         & svg {
            pointer-events: none;
         }
      }

      @media screen and (min-width: 768px) {
         padding-left: 0;
         padding-right: 0;
      }

   }

   /*
      TODO: see if we can use a container query here to set the width/height of the selected qualifier/add button
   */
   & .fantasy-team-qualifier-item-profile-background {
      width: max(100px, calc(100vw / 9));
   }

}

.fantasy-team-form-add-qualifier-button {
   display:block;
   width: max(110px, calc(100vw / 9));
   aspect-ratio: 2/3;
   border-radius: 15px;
   background: var(--card-background);
   border: none;

   & svg {
      pointer-events: none;
   }
}

.fantasy-team-form-qualifier-options-list {
   list-style: none;
   display:none;
   gap: 15px;
   grid-auto-rows: min-content;

   @media screen and (min-width: 1000px) {
    grid-column: 2/3;
    grid-row: 1/2;
    overflow-y: auto;
    max-height: 100%;
    padding: 30px;
   }
}

.fantasy-team-form-qualifier-options-list-item {
   display: grid;
   gap: 10px;
   grid-template-columns: min-content 1fr min-content;
   align-items: center;
   padding: 8px 16px;
   border: 1px solid var(--card-background);
   width: 100%;
   color: inherit;
   height: max-content;

   & > svg {
      width: 24px;
      height: 24px;
      
      & > path {
         stroke: var(--primary);
         fill: var(--primary);
         stroke-opacity: 1;
         fill-opacity: 1;
      }
   }

   & .fantasy-team-form-qualifier-text {
      justify-self: start;
   }

   & .add-indicator {
      justify-self: end;
   }

   & * {
      pointer-events: none;
   }

   @media screen and (min-width: 768px) {
     padding: 12.5px 16px;
   }
}

.fantasy-team-form-qualifier-text {
   text-align: start;
}

.selected {
   display: grid;
   gap: 10px;
   height: 88%;
}
.selected-option {
   border: 1px solid var(--primary);
}

.fantasy-team-form-qualifier-name {
   font-weight: 600;
   font-size: 12px;

   @media screen and (min-width: 768px) {
     font-size: 16px;
   }
}

.fantasy-team-form-qualifier-weight {
   font-weight: 500;
   font-size: 12px;
   color: hsl(from var(--text-color) h s l / 0.8);

   @media screen and (min-width: 768px) {
     font-size: 16px;
   }
}

.fantasy-team-form-submit-text {
   display: grid;
   gap: 10px;
}

.fantasy-team-form-submit-card {
   display: grid;
   grid-auto-flow: column;
   align-items: center;
   padding: 10px;

   & .fantasy-team-submit-button {
      justify-self: end;
   }

   @media screen and (min-width: 1000px) {
      grid-column: 1 / -1;
      grid-row: 2 / 3;
      padding: 20px 30px;
   }
}

.fantasy-team-form-submit-title-text {
   font-size: 12px;
   font-weight: 600;
}

.fantasy-team-form-submit-count-text {
   font-size: 18px;
   font-weight: 600;
}

.fantasy-team-submit-button {
   display: grid;
   grid-template-columns: 1fr min-content;
   place-content: center;
   width: max-content;
   gap: 10px;
   font-size: 14px;
   font-weight: 600;
}

.add-indicator {
   width: 24px;
   height: 24px;
   background-color: var(--primary);
   border-radius: 5px;
   display: grid;
   place-content: center;
}

.active {
   background: var(--active-background);
   border: 1px solid var(--primary);
}

.countdown-timer {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
   justify-items: center;
}

.timer-time {
   font-size: 20px;
   font-weight: 700;
}

.group-item {
   display: grid;
   grid-template-columns: subgrid;
   gap: 10px;
   padding-bottom: 20px;
   padding-left: 10px;
   border-bottom: 1px solid var(--border-color-dim);
   
   .show-group {
      grid-column: 2/4;
   }
}

.show-group {
   width:auto;
}


.group-show-page {
   padding: 10px;
   display: grid;
   gap: 20px;

   & > .title {
      text-align: center;
   }

   @media screen and (min-width: 1000px) {
      padding: 50px;
   }
}

.group-show-page-actions {
   display: grid;
   grid-column: 1/-1;
   gap: 10px;
   grid-template-columns: repeat(2, 1fr);

   @media screen and (min-width: 1000px) {
      gap: 20px;
   }

   & .button {
      width: -moz-available;          /* WebKit-based browsers will ignore this. */
      width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
      width: fill-available;
   }
}

.group-show-members-list {
   list-style: none;
}

.edit-user-page {
   display: grid;
   place-items: center;
   padding: 20px;
   gap: 20px;
}

.two-action-container {
   display:grid;
   grid-template-rows: repeat(2, 1fr);
   gap: 10px;

   & .button {
      width: -moz-available;          /* WebKit-based browsers will ignore this. */
      width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
      width: fill-available;
   }
}

.create-group-page {
   padding: 20px;
   display:grid;
   place-content: center;
}

.group-form {
   display: grid;
   gap: 20px;
}

.groups-index-page-card__actions  .button--success{
    height: 100%;    
    width: 100%;
}

.no-wrap {
   white-space: nowrap;
}

.mobile-only {
   display: inherit;

   @media screen and (min-width: 768px) {
      display: none;
   }
}

.tablet-only {
   display: inherit;

   @media screen and (min-width: 1000px) {
      display: none;
   }
}

.desktop-only {
   display: none;
   
   @media screen and (min-width: 768px) {
      display: inherit;
   }
}

@layer utilities {

}