@import "./reset.css" layer(reset);

@layer base {
  :root {
    --content-max-width: 60ch;
    --clr-text: black;
    --clr-gray: oklch(0.9 0 0);
    --clr-accent: oklch(0.54 0.17 285);
    --clr-success: oklch(0.9 0.05 150);
    --clr-danger: oklch(0.9 0.05 17);
    --clr-info: oklch(0.9 0.05 245);
    --b-radius: 0.5rem;
    --td: 175ms;
    --border: 1.5px solid var(--clr-gray);
    --bp-md: 48rem;

    font-family: "Sofia Sans", sans-serif;
    color-scheme: light dark;

    @media (prefers-color-scheme: dark) {
      & {
        --clr-text: white;
        --clr-gray: oklch(0.3 0 0);
        --clr-accent: oklch(0.7 0.2 285);
        --clr-success: oklch(0.3 0.05 150);
        --clr-danger: oklch(0.3 0.05 17);
        --clr-info: oklch(0.3 0.05 245);
      }
    }
  }

  * {
    --text-color: var(--clr-text);
    color: var(--text-color);
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 1.5rem 3rem;
  }

  main {
    display: grid;
    gap: 1.5rem;
    max-width: var(--content-max-width);
    width: 100%;
  }

  footer {
    max-width: var(--content-max-width);
    text-align: center;
    margin-top: auto;
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--text-color) 60%, transparent);
  }

  form {
    display: grid;
    gap: 1.5rem;

    & > button[type="submit"] {
      justify-self: center;
    }
  }

  fieldset {
    display: grid;
    gap: 0.75rem;
    border-radius: var(--b-radius);
    border: var(--border);
  }

  a {
    --text-color: var(--clr-accent);
  }

  button {
    --bg-color: var(--clr-gray);

    --b-width: 0px;
    --b-color: currentColor;
    --b-style: solid;
    --p-block: 0.75em;
    --p-inline: 1.5em;
    --f-size: 1rem;
    --f-weight: normal;

    border-radius: var(--b-radius);
    padding: var(--p-block) var(--p-inline);
    border: var(--b-width) var(--b-style) var(--b-color);
    cursor: pointer;
    transition: all ease-in-out var(--td);
    background-color: var(--bg-color);
    font-size: var(--f-size);
    font-weight: var(--f-weight);
    line-height: 1;

    &:hover {
      --bg-color: color-mix(in srgb, var(--clr-gray), white 10%);
    }

    &.danger {
      --bg-color: var(--clr-danger);
    }

    &.info {
      --bg-color: var(--clr-info);
    }

    &.success {
      --bg-color: var(--clr-success);
    }

    &.mini {
      --f-size: 0.825em;
      --p-block: 0.75em;
      --p-inline: 1em;
    }

    &.tag {
      --f-size: 0.75em;
      --p-block: 0.35em;
      --p-inline: 0.5em;
      --bg-color: transparent;
      --b-color: color-mix(in srgb, currentColor 50%, transparent);
      --b-width: 1.5px;

      &[aria-selected="true"] {
        --bg-color: var(--clr-text);
        --text-color: var(--clr-gray);
        --b-color: var(--bg-color);
        --f-weight: 600;
      }
    }
  }

  input {
    accent-color: var(--clr-accent);
    border-radius: var(--b-radius);
    padding: 0.25em 0.75em;
    border: var(--border);
  }

  select {
    border-radius: var(--b-radius);
    padding: 0.25em 0.75em;
    border: var(--border);
  }

  label {
    &::after {
      content: ":";
    }

    &:has(+ input:required)::before {
      content: "*";
      color: red;
    }
  }

  & blockquote {
    --bg-color: var(--clr-info);
    --p: 0.5em;
    --half-br: calc(var(--b-radius) / 2);

    position: relative;
    padding: var(--p) var(--p) var(--p) calc(var(--p) * 2);
    border-radius: var(--b-radius);
    border-top-left-radius: var(--half-br);
    border-bottom-left-radius: var(--half-br);
    background-color: color-mix(in srgb, var(--bg-color) 40%, transparent);

    &::before {
      --width: 0.3em;

      content: "";
      position: absolute;
      inset: 0 0 0 0;
      border-top-left-radius: var(--b-radius);
      border-bottom-left-radius: var(--b-radius);
      display: block;
      width: var(--width);
      background-color: color-mix(in srgb, var(--bg-color) 80%, black);
    }
  }

  table {
    margin-top: 2.5rem;
    border-collapse: collapse;

    > thead {
      border-bottom: 2px dashed var(--cclr-gray);
    }

    > tbody {
    }

    tr {
      > :is(th, td) {
        padding: 0.5rem 1rem;
      }
    }
  }
}

@layer utils {
  .inline-flex-group {
    --gap: 0.5rem;

    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--gap);
  }
}

.main-header {
  --mt: 1rem;

  display: grid;
  gap: 1rem;
  justify-items: center;
  margin-top: var(--mt);
  text-align: center;
  max-width: var(--content-max-width);

  @media screen and (min-width: 48rem) {
    --mt: 5rem;
  }
}

.summary {
  --bg-color: var(--clr-gray);

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;

  & > h2 {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 1rem;
  }

  & p {
    grid-column: 1 / -1;
    display: inline-flex;
    gap: 1ch;
    align-items: center;
    background-color: var(--bg-color);
    padding: 0.5em;
    border-radius: var(--b-radius);

    &[data-state="overperforming"] {
      --bg-color: var(--clr-success);

      & ~ blockquote {
        --bg-color: var(--clr-success);
      }
    }

    &[data-state="underperforming"] {
      --bg-color: var(--clr-danger);

      & ~ blockquote {
        --bg-color: var(--clr-danger);
      }
    }

    &[data-state="meeting-the-minimum"] {
      --bg-color: var(--clr-info);

      & ~ blockquote {
        --bg-color: var(--clr-info);
      }
    }

    & button {
      margin-left: auto;
    }
  }

  & > blockquote {
    grid-column: 1 / -1;
    margin-top: 2rem;
  }

  & > button {
    margin-top: 1rem;

    &:only-of-type {
      grid-column: 1 / -1;
      justify-self: center;
    }
  }
}

#calc-90frs-form {
  & > button[type="submit"] {
    --sticky-offset: 1rem;

    --clip-offset: var(--sticky-offset);
    --clip-width: 100vw;
    --clip-x-start: calc(-1 * var(--clip-width));
    --clip-y-start: calc(-1 * var(--clip-offset));
    --clip-x-end: calc(100% + var(--clip-width));
    --clip-y-end: calc(100% + var(--clip-offset));

    --backdrop-color: color-mix(in srgb, var(--clr-text) 0%, transparent);
    --backdrop-blur: blur(0.35rem);

    position: sticky;
    bottom: var(--sticky-offset);
    background-color: transparent;
    clip-path: polygon(
      var(--clip-x-start) var(--clip-y-start),
      var(--clip-x-end) var(--clip-y-start),
      var(--clip-x-end) var(--clip-y-end),
      var(--clip-x-start) var(--clip-y-end)
    );

    &::before {
      content: attr(aria-label);
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      z-index: -1;
      width: fit-content;
      height: fit-content;
      padding: inherit;
      border-radius: inherit;
      background-color: var(--bg-color);
    }

    &::after {
      content: "";
      position: fixed;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      z-index: -2;
      width: 100vw;
      height: calc(100% + var(--clip-offset));
      pointer-events: none;
      background-color: var(--backdrop-color);
      backdrop-filter: var(--backdrop-blur);
      -webkit-backdrop-filter: var(--backdrop-blur);
    }
  }
}

#calc-output {
  margin-top: 3rem;
}

.note {
  color: color-mix(in srgb, currentColor 60%, transparent);
}

.history[open] {
  --p: 1rem;

  position: fixed;
  inset: 0 0 0 auto;
  max-width: 90svw;
  max-height: 100%;
  height: 100%;
  align-content: flex-start;
  margin: 0;
  padding: var(--p) var(--p) 0;
  border: 0;
  display: grid;

  &::backdrop {
    background-color: color-mix(in srgb, black 60%, transparent);
  }

  & > .history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;

    & > li {
      font-size: 0.875rem;
      padding: 0.5em;
      border: 1.5px solid var(--clr-gray);
      border-radius: var(--b-radius);
    }
  }

  & > .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    bottom: 0;
    padding-block: var(--p);
    background-color: inherit;
    order: 1;
  }

  @media screen and (min-width: 48rem) {
    & {
      padding: 0 var(--p) var(--p);
    }

    & > .history-header {
      bottom: auto;
      top: 0;
      order: initial;
    }
  }
}

body:has(.history[open]) {
  overflow: hidden;
}

.work-days-heading {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.note {
  font-size: 0.75em;
  opacity: 0.8;
}