:root {
       --barrier-none: hsl(120, 61%, 50%);
       --barrier-minimal: hsl(217, 98%, 50%);
       --barrier-some: hsl(30, 100%, 39%);
       --barrier-many: hsl(300, 87%, 46%);
       --primary-clr: hsl(194, 60%, 32%);
   }

   .view-screener-results {
       .no-trait {
           --trait-color: var(--barrier-none);
       }

       .average-traits {
           --trait-color: var(--barrier-minimal);
       }

       .some-traits {
           --trait-color: var(--barrier-some);
       }

       .many-traits {
           --trait-color: var(--barrier-many);
       }

       [data-once="traitsClassApplied"] {
           color: var(--trait-color);
           background-color: hsl(from var(--trait-color) h s 85%);
       }


       &>.view-header {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
            gap: 0 1rem;

            &> #block-nexus-providerwhitelistinput {
                grid-row: 3;
                grid-column: 1 / -1;

                & > .content,
                & #whitelist-input-form {
                    grid-column: 1 / -1;
                    display: grid;
                    grid-template-columns: subgrid;
                }
                & > .content {
                    grid-template-columns: 1fr 1fr;
                }

                :is(.form-item-new-whitelist, .form-item-send-emails, .form-submit) {
                    grid-column: 1;
                }
            }

            #edit-duplicate-dialog {
                grid-column: 1 / -1;
            }

            &>:is(#block-views-whitelist-block, #block-views-admin-whitelist-block) {
                grid-row: 3;
                grid-column: 2;               
            }

            &> #block-nexus-providerretakeinput {
                grid-column: 1 / -1;
            }

            & > h5 {
                grid-row: 1;
                grid-column: 1 / -1;
                margin-top: 0;
                margin-bottom: 1rem;
            }

            & > p {
                grid-row: 2;
                grid-column: 1 / -1;
                margin-top: 0;
                margin-bottom: .75rem;
            }
       }
   }

   #block-nexus-providerretakeinput {
       margin-top: 1rem;

       & .content {
           width: 100%;
       }
   }

   #retake-input-form {
       display: grid;
       grid-template-areas:
           "settings";
       gap: 1rem;
       align-items: start;

       & #edit-retake-settings {
           grid-area: settings;
           border-radius: var(--b-rad);
           overflow: clip;
           padding-block: 1rem 1.25rem;

           & > summary {
               cursor: pointer;
               font-size: 1.2rem;
               font-weight: 600;
           }

           & > .details-wrapper {
               display: grid;
               grid-template-columns: repeat(2, minmax(0, 1fr));
               grid-template-areas:
                   "provider ."
                   "intro intro"
                   "current enable";
               gap: 1rem 1.5rem;
               align-items: start;
            }
       }

       & .retake-manager-intro {
           grid-area: intro;
           grid-column: 1 / -1;

           & > p {
               margin: 0;
           }
       }

       & #edit-intro {
           grid-column: 1 / -1;
       }

       & .retake-provider-row {
           grid-area: provider;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 1rem;
            align-items: center;

           & .form-item-override-provider {
               margin-bottom: 0;
           }

           & #edit-apply-provider {
               align-self: center;
               justify-self: end;
               width: fit-content;
               margin-top: 0;
           }
       }

       & .retake-current-group {
           grid-area: current;
           display: grid;
           gap: .5rem;
           align-content: start;
       }

       & .retake-enable-group {
           grid-area: enable;
           display: grid;
           gap: .5rem;
           align-content: start;
       }

       & .retake-inline-row {
           display: grid;
           grid-template-columns: minmax(0, 1fr) auto;
           gap: 1rem;
           align-items: center;

           & :is(.form-item-current-retake-email, .form-item-retake-email) {
               margin-bottom: 0;
           }
       }

       & .current-retakes-empty {

           & h5 {
               margin-top: 0;
               margin-bottom: .5rem;
               font-size: 1rem;
           }

           & p {
               margin: 0;
           }
       }

       & :is(#edit-current-retake-email, #edit-retake-email) {
           width: 100%;
       }

       & #edit-retake-email::placeholder {
           color: transparent;
       }

       & :is(#edit-remove-retake, #edit-enable-retake) {
           align-self: center;
           justify-self: end;
           width: fit-content;
           margin-top: 0;
       }

       & .retake-help {
           & p {
               margin: 0;
           }
        }
   }

   @media (max-width: 900px) {
       #retake-input-form {
            grid-template-areas:
                "settings";

           & #edit-retake-settings > .details-wrapper {
               grid-template-columns: 1fr;
               grid-template-areas:
                   "provider"
                   "intro"
                   "current"
                   "enable";
           }

           & :is(.retake-provider-row, .retake-inline-row) {
               grid-template-columns: 1fr;

               & :is(#edit-apply-provider, #edit-remove-retake, #edit-enable-retake) {
                   justify-self: start;
               }
           }
        }
   }

   #provider-link-wrapper {
       #provider-link {
           color: #208194;
           text-decoration: underline;
           font-weight: 600;
       }
   }

   :is(#whitelist-input-form, #block-views-admin-whitelist-block) {
       margin-bottom: 2rem;

       textarea {
           background: #fefefe;
       }

       & .form-item-send-emails {
           display: grid;
           align-items: center;
           grid-template-columns: min-content 1fr;

           & .description {
               grid-column: 1 / -1;
               margin-left: 0;
           }
       }
   }

   #block-views-admin-whitelist-block {
       & .view-filters {
           margin-bottom: 1rem;
       }

       & .views-exposed-form:not(.bef-exposed-form) .form--inline {
           margin-right: 0;
           margin-left: 0;
       }

       & .views-exposed-form .form--inline {
           display: flex;
           flex-wrap: nowrap;
           align-items: flex-end;
           justify-content: flex-start;
           width: fit-content;
           max-width: 100%;
           gap: 1rem;
       }

       & .views-exposed-form :is(.js-form-item, .form-actions) {
           min-width: 0;
           margin: 0;
           padding-left: 0;
           padding-right: 0;
       }

       & .views-exposed-form .js-form-item {
           display: flex;
           flex-direction: column;
           gap: .35rem;
       }

       & .views-exposed-form .js-form-item > label {
           margin-bottom: 0;
       }

       & .views-exposed-form .form-actions {
           width: fit-content;
           align-self: flex-end;
       }

       & .views-exposed-form .form-select {
           inline-size: clamp(11rem, 42vw, 18rem);
       }

       & .views-exposed-form .button {
           inline-size: fit-content;
           min-width: 0;
           margin: 0;
           padding-inline: 1.75rem;
           white-space: nowrap;
       }
   }

   :is(#block-views-whitelist-block, #block-admin-whitelist-block, #block-views-admin-whitelist-block) {


       & #whitelist-filter {
           position: sticky;
           align-self: start;
           top: 0;
           width: 100%;
           max-width: 400px;
           border: 1px solid var(--mt-form-border);
           border-radius: var(--mt-rounded-radius);
           color: var(--mt-form-color);
           z-index: 2;

           &:hover {
               border-color: #208194;
           }
       }

       & #whitelist-filter {
           position: sticky;
           align-self: start;
           top: 0;
           width: 100%;
           max-width: 400px;
           border: 1px solid var(--mt-form-border);
           border-radius: var(--mt-rounded-radius);
           color: var(--mt-form-color);
           z-index: 2;
       }

       & .views-row:not(:first-child) {
           display: none;
       }

       & .field-content {
            --b-rad:.75rem;
           display: flex;
           flex-direction: column;
           align-items: end;
           text-align: right;
           line-height: 2;
           height: 300px;
           border: 1px solid var(--mt-form-border);
           border-radius: var(--b-rad) var(--mt-rounded-radius) var(--mt-rounded-radius) var(--b-rad);
           color: var(--mt-form-color);
           background-color: var(--mt-color-default);
           padding: 1rem 2rem 1rem 1rem;
           overflow-y: scroll;

           & p {
               display: inline-flex;
               background: linear-gradient(45deg, transparent 10%, #fff 40%);
               border-radius: 1rem;
               margin: 0;
           }
       }

       & .whitelist-date {
           width: fit-content;
       }

       & span {
           display: inline-block;
           border: 3px solid var(--white-list-border);
           border-left-color: transparent;
           border-radius: 0 1rem 1rem 0;
           padding-right: 1rem;
       }

       & ul {
           position: relative;
           z-index: 3;

           &::before {
               content: "";
               position: absolute;
               inset: -3px;
               background: var(--white-list-border);
               border-radius: 19px;
               z-index: -1;
           }
       }


       & .whitelist-group {
           list-style: none;
           width: fit-content;
           margin-top: 0;
           padding-left: 0;

           &:not(:has(li:first-child + li)) li {
               border-radius: 1rem;
           }

           & li {
               background-color: #fff;
               margin-bottom: 0;
               padding-inline: 1rem;

               &:first-child {
                   border-radius: 1rem 1rem 0 0;
               }

               &:last-child {
                   border-radius: 0 0 1rem 1rem;
               }
           }
       }
   }

   /***************************
 * Results Section
 **************************/
   /* Brand base reference: #208194 = hsl(191, 64%, 32%) */

   /* ================= Dyslexia ================= */
   #trait-dyslexia,
   #dyslexia-results,
   #trait_container_dyslexia {
       --accent-color: hsl(191, 60%, 36%);
       --base-color: hsl(191, 45%, 85%);
       --doughnut: hsl(191, 45%, 85%);
       --text-bg: hsl(191, 40%, 92%);
   }

   /* ================= Dyspraxia ================= */
   #trait-dyspraxia,
   #dyspraxia-results,
   #trait_container_dyspraxia {
       --accent-color: hsl(183, 55%, 38%);
       --base-color: hsl(183, 40%, 86%);
       --doughnut: hsl(183, 40%, 86%);
       --text-bg: hsl(183, 35%, 93%);
   }

   /* ================= Dyscalculia ================= */
   #trait-dyscalculia,
   #dyscalculia-results,
   #trait_container_dyscalculia {
       --accent-color: hsl(198, 55%, 37%);
       --base-color: hsl(198, 42%, 84%);
       --doughnut: hsl(198, 42%, 84%);
       --text-bg: hsl(198, 38%, 92%);
   }

   /* ================= ADHD ================= */
   #trait-adhd,
   #adhd-results,
   #trait_container_adhd {
       --accent-color: hsl(205, 58%, 40%);
       --base-color: hsl(205, 45%, 86%);
       --doughnut: hsl(205, 45%, 86%);
       --text-bg: hsl(205, 40%, 93%);
   }

   /* ================= DLD ================= */
   #trait-dld,
   #dld-results,
   #trait_container_dld {
       --accent-color: hsl(176, 50%, 38%);
       --base-color: hsl(176, 38%, 87%);
       --doughnut: hsl(176, 38%, 87%);
       --text-bg: hsl(176, 34%, 94%);
   }

   /* ================= ASD ================= */
   #trait-asd,
   #asd-results,
   #trait_container_asd {
       --accent-color: hsl(210, 55%, 38%);
       --base-color: hsl(210, 42%, 85%);
       --doughnut: hsl(210, 42%, 85%);
       --text-bg: hsl(210, 38%, 93%);
   }


   #neurodiversity-screener-results {
       container: result / inline-size;

       &:has(.result_percentage:empty) {
        display: none;
       }

       h3,
       h4 {
           --unset-base-theme: unset;
           letter-spacing: var(--unset-base-theme);
           text-transform: var(--unset-base-theme);
           margin-top: 2rem;
           margin-bottom: 1rem;
           color: var(--text-color);
       }

       p,
       details {
           margin-block: 1rem;
           color: var(--text-color);
       }
   }

   .report-grid {
       --base-color: hsl(193, 35%, 90%);
       --accent-color: hsl(193, 36%, 35%);
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(min(300px), 1fr));
       background: linear-gradient(150deg, #fff 10%, var(--base-color) 70%);
       box-shadow: 1rem 1rem 0 var(--accent-color);
       border: 1px solid var(--accent-color);
       border-radius: 14px;
       padding: 2rem;
       margin-bottom: 80px;

       .report-grid-item .field {
           margin-bottom: 1rem;
       }
   }

   #screener-results-intro {
       display: none;
       padding: 1rem 1.5rem;
       margin: 0 0 2rem 0;
       background: linear-gradient(150deg, #fff 10%, var(--base-color) 70%);
       border: 1px solid var(--accent-color);
       border-radius: 14px;
   }

   #screener-results-intro .intro-block {
       display: none;
   }

   #screener-results-intro h3 {
       margin: 1rem 0 .5rem 0;
   }

   .trait_result {
       margin-bottom: 80px;
   }

   .trait_result_inner {
       position: relative;
       background: linear-gradient(150deg, #fff 10%, var(--base-color) 70%);
       box-shadow: 1rem 1rem 0 var(--accent-color);
       border: 1px solid var(--accent-color);
       border-radius: 14px;
       padding: 2rem;

       details {
           border: 0;
       }
   }

   .result_header {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       column-gap: 1rem;
   }


   .result_label {
       color: var(--accent-color);
       font-size: var(--font-large);
       font-weight: 600;
       text-transform: uppercase;
       display: flex;
       align-items: center;

       &>h2 {
           --title-spacing: -.05em;
           --unset-base-theme: unset;
           color: inherit;
           letter-spacing: var(--unset-base-theme);
       }

       &::after {
           font-size: .7rem;
           margin-left: 1rem;
           display: flex;
           flex-direction: column;
           flex-wrap: wrap;
       }
   }

   #adhd-results .result_label::after {
       content: "Attention-Deficit / Hyperactivity Disorder";
   }

   #dld-results .result_label::after {
       content: "Developmental Language Disorder";
   }

   #asd-results .result_label::after {
       content: "Autism Spectrum Disorder";
   }

   .result_container {
       display: grid;
       place-items: center;
       position: relative;
       width: 160px;
       aspect-ratio: 1;
       border-radius: 50%;

       &>div {
           grid-area: 1 / 1;
       }

       .doughnut-chart {
           position: relative;
           width: 160px;
           aspect-ratio: 1;
           background-color: hsl(220, 75%, 98%);
           border-radius: 50%;
           display: grid;
           place-items: center;
       }

       &::before {
           content: "";
           position: absolute;
           background-color: var(--accent-color);
           width: 104%;
           aspect-ratio: 1;
           border-radius: 50%;
           left: 0;
           top: 0;
           transform: translate(-1px, -1px);
       }

   }

   .result_percentage {
       position: relative;
       color: var(--accent-color);
       font-size: 2.5rem;
       font-weight: 600;
   }

   .node--type-neurodiversity-report .trait-percentage-hidden,
   .page-node-type-neurodiversity-report .trait-percentage-hidden {
       display: none;
   }

   .field--name-field-screener {
       --base-color: hsl(193, 35%, 90%);
       --accent-color: hsl(193, 36%, 35%);
       background: linear-gradient(150deg, #fff 10%, var(--base-color) 70%);
       box-shadow: 1rem 1rem 0 var(--accent-color);
       border: 1px solid var(--accent-color);
       border-radius: 14px;
       padding: 2rem;
       margin-bottom: 80px;
   }

   .field--name-field-screener .field__label {
       margin-bottom: .75rem;
   }

   .field--name-field-screener .field__item {
       display: grid;
       gap: .25rem;
   }

   .field--name-field-screener .field__item>p,
   .field--name-field-screener .field__item>div {
       margin: 0;
       padding: .25rem 0;
       border-bottom: 1px solid #e0e0e0;
   }

   .field--name-field-screener .screener-qa-row {
       display: grid;
       grid-template-columns: minmax(0, 1fr) minmax(14rem, 32rem);
       gap: .35rem 1rem;
       align-items: start;
       padding: .35rem 0;
       border-bottom: 1px solid #e0e0e0;
   }

   .field--name-field-screener .field__item>div {
       margin: 0;
       padding: .35rem 0;
       border-bottom: 1px solid #e0e0e0;
   }

   .field--name-field-screener .screener-question {
       font-weight: inherit;
       min-width: 0;
       max-inline-size: 100%;
       overflow-wrap: anywhere;
   }

   .field--name-field-screener .screener-answer {
       white-space: normal;
       font-weight: inherit;
       color: var(--text-color);
       text-decoration: none;
       min-width: 0;
       max-inline-size: 32rem;
       overflow-wrap: anywhere;
       justify-self: end;
   }

   @container result (max-width:700px) {
       .field--name-field-screener .screener-qa-row {
           grid-template-columns: 1fr;
       }

       .field--name-field-screener .screener-answer {
           justify-self: start;
           max-inline-size: 100%;
       }
   }