/* Entry point for your PostCSS build */

/* Base */

:root {
  --spacing: var(--wa-space-m);
}

body {
  display: flex;
  flex-direction: column;
}

a.wa-button {
  text-decoration: none !important;
}

:where(section, header) {
  padding-inline: var(--spacing);
  padding-block-end: var(--spacing);
}

:where(section,header):not(:where(section,header) + :where(section,header)) {
    padding-block-start: var(--spacing);
  }

@media(min-width: 600px) {

:where(section, header) {
    --spacing: var(--wa-space-3xl)
  ;
}}

.status-grid {
  row-gap: var(--wa-space-2xl);
  -moz-column-gap: var(--wa-space-xl);
       column-gap: var(--wa-space-xl);
}

@media(min-width: 600px) {

.status-grid {
    row-gap: var(--wa-space-3xl);
}
  }

:root {
  --wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
  --wa-font-family-heading: var(--wa-font-family-body);
  --wa-font-family-code: ui-monospace, monospace;
  --wa-font-family-longform: ui-serif, serif;

  --wa-font-weight-light: 300;
  --wa-font-weight-normal: 400;
  --wa-font-weight-semibold: 500;
  --wa-font-weight-bold: 600;

  --wa-font-weight-body: var(--wa-font-weight-normal);
  --wa-font-weight-heading: var(--wa-font-weight-bold);
  --wa-font-weight-action: var(--wa-font-weight-semibold);

  --wa-line-height-condensed: 1.2;
  --wa-line-height-normal: 1.6;
  --wa-line-height-expanded: 2;

  --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
  --wa-link-decoration-hover: underline;
}

p {
  max-width: 62ch;
  color: var(--wa-color-text-quiet);
}

.is-hidden {
  display: none !important;
}

/* Components */

:is(details > summary)::after {
      transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
    }

.field_with_errors {
  display: contents;
}

.field-error {
  font-size: 0.875rem;
  color: var(--wa-color-danger-on-quiet);
  margin-block-start: var(--wa-space-xs);
}

div > :has(:user-invalid) > .field-error {
    display: block !important;
  }

.field-error  > wa-callout {
    margin-block-start: var(--wa-space-xs);
  }

.field_with_errors {
  display: contents;
}

.field_with_errors input {
    border-color: var(--wa-color-danger-border-normal) !important;
  }

.field_with_errors .field-error {
    display: block !important;
  }

.field-helper {
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
  margin-block-start: var(--wa-space-xs);
}

.referral-type-helpers .field-helper {
  display: none;
}

.referral-type:has(label:first-child > input:checked) + div .referral-type-helpers > .field-helper:first-child {
    display: block;
  }

.referral-type:has(label:nth-child(2) > input:checked) + div .referral-type-helpers > .field-helper:nth-child(2) {
    display: block;
  }

.referral-type:has(label:nth-child(3) > input:checked) + div .referral-type-helpers > .field-helper:nth-child(3) {
    display: block;
  }

header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wa-space-l);
}

@media(min-width: 600px) {

header {
    align-items: end;
}
  }

.logo {
  color: var(--wa-color-text);
}

.logo,.logo:hover {
    text-decoration: none;
  }

.logo h1 {
    font-size: clamp(1.25rem, 8vw, 2.8rem);
    white-space: pre;
    font-family: "Agbalumo", serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    color: var(--wa-color-text-link);
  }

:is(.logo h1)::after {
      content: "!";
    }

nav {
  display: flex;
  gap: var(--wa-space-m);
  margin-inline-start: auto;
  flex-wrap: wrap;
}

nav ul {
    display: flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    list-style-type: none;
    margin: 0;
    flex-wrap: wrap;
  }

:is(nav ul) li {
      margin-inline-start: initial;
    }

@media(min-width: 850px) {
    nav  > :is(.open-nav,.close-nav) {
      display: none !important;
    }
  }

nav.is-open {
    position: fixed;
    inset: 0;
    background-color: var(--wa-color-surface-raised);
    flex-direction: column;
    align-items: stretch;
    padding: var(--spacing);
    z-index: 9;
  }

nav.is-open ul {
      flex-direction: column;
      gap: var(--wa-space-m);
      justify-content: center;
      flex-grow: 1;
    }

:is(nav.is-open ul) :where(li,li > button) {
        width: 100%;
        text-align: center;
      }

:is(nav.is-open ul)  > li * {
        font-size: 1.25rem;
      }

nav.is-open  > .open-nav {
      display: none !important;
    }

nav.is-open  > .close-nav {
      order: -1;
      align-self: end;
    }

nav:not(.is-open)  > .close-nav {
      display: none !important;
    }

@media(max-width: 850px) {
      nav:not(.is-open)  > :not(:is(.open-nav,.close-nav)) {
        display: none !important;
      }
    }

section :where(p,h1,h2) {
    text-align: center;
  }

section.main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

section.main p {
    margin-inline: auto;
    font-size: var(--wa-font-size-m);
  }

@media(min-width: 600px) {

section.main p {
      font-size: var(--wa-font-size-l);
  }
    }

section.main h1 {
    font-size: 1.8rem;
    max-width: 30ch;
  }

@media(min-width: 600px) {

section.main h1 {
      font-size: 2.6rem;
  }
    }

@media(min-width: 850px) {

section.main h1 {
      font-size: 3.4rem;
  }
    }

@media(min-width: 1200px) {

section.main h1 {
      font-size: 4.5rem;
  }
    }

section:where(.constrain, .constrain-narrow) {
  width: 100%;
  align-self: center;
}

section.constrain {
  max-width: 1000px;
}

section.constrain-narrow {
  max-width: 750px;
}

.edit-status {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wa-border-radius-m);
}

.edit-status:hover {
    background-color: var(--wa-color-neutral-fill-quiet);
  }

:is(:is(.status-grid,.edit-status) wa-card) b[class*=level] {
      border-radius: var(--wa-border-radius-s);
      border-block-start-width: 0.1rem;
      border-block-end-width: 0.15rem;
      border-inline-width: 0.3rem;
      border-style: solid;
    }

:is(:is(.status-grid,.edit-status) wa-card) b.level-1 {
      color: var( --wa-color-warning-on-normal);
      background-color: var(--wa-color-warning-fill-quiet);
      border-color: var(--wa-color-warning-fill-quiet);

    }

:is(:is(.status-grid,.edit-status) wa-card) b.level-2 {
      color: var( --wa-color-danger-on-normal);
      background-color: var(--wa-color-danger-fill-normal);
      border-color: var(--wa-color-danger-fill-normal);
    }

.share-button::part(button) {
    min-width: 18.5ch;
    justify-content: center;
    font-size: var(--wa-font-size-s);
    font-family: inherit;
    font-weight: var(--wa-font-weight-action);
  }

.share-button::part(copy-icon),.share-button::part(error-icon),.share-button::part(success-icon) {
    align-items: center;
    display: flex;
    line-height: calc(var(--wa-form-control-height) - var(--border-width)* 2);
  }

.share-button::part(success-icon) {
    color: var(--wa-color-text);
  }

/* Web Awesome component mods */

wa-avatar {
  --size: 2.25rem;
  --background-color: var(--wa-color-surface-lowered);
  --text-color: var(--wa-color-shadow);
}

:is(.status-grid,.edit-status) wa-card {
    position: relative;
  }

:is(:is(.status-grid,.edit-status) wa-card)::part(body) {
      padding: var(--wa-space-l) var(--wa-space-xl);
    }

:is(:is(.status-grid,.edit-status) wa-card)::after {
      content: "";
      block-size: 1rem;
      inline-size: 1rem;
      position: absolute;
      inset-block-start: calc(100% + 1px);
      inset-inline-start: 1rem;
      filter: grayscale(1) brightness(1.025);
      background-color: var(--wa-color-surface-border);
      -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23ECECED%22%20d%3D%22M.75.75h15L3.5%2015.5.75.75Z%22%2F%3E%3C%2Fsvg%3E");
              mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%23ECECED%22%20d%3D%22M.75.75h15L3.5%2015.5.75.75Z%22%2F%3E%3C%2Fsvg%3E");
    }

html.wa-dark wa-card::after{
  filter: none;
}

wa-card.active-status {
  border-color: var(--wa-color-brand-border-quiet);
}

wa-card.active-status::after {
    filter: none;
    background-color: var(--wa-color-brand-border-quiet);
  }

wa-callout .close-button {
    width: 2.25rem;
    height: 2.25rem;
    margin-inline-start: auto;
  }

wa-callout.flash-message[variant="success"] {
      margin: var(--spacing);
      position: fixed;
      inset-block-end: 0;
      inset-inline-end: 0;
      z-index: 5;
      box-shadow: var(--wa-shadow-s);
    }

wa-callout.flash-message[variant="success"]::part(message) {
        display: flex;
        align-items: center;
        gap: var(--wa-space-m);
      }

@media(max-width: 600px) {

wa-callout.flash-message[variant="success"] {
        inset-inline: 0;
    }
      }