#campus-map {
  width: 100%;
  aspect-ratio: 1 / 1;
}

#project-map {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 100vh;
}

.qty {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  .mag {
    flex: 1 0 auto;
    text-align: end;
  }
  &.neg .mag {
    color: var(--color-red-shade-25);
  }
  .unit {
    opacity: 0.3;
  }
}

ul.login {
  list-style-type: none;
  text-transform: capitalize;
  margin-left: 1rem;
  padding: 0;
  li {
    margin: 0;
    padding: 0;
  }
}

.project-summary {
  width: 100%;
  margin: 1rem 0;
}

#project-form {
  h3 {
    margin: 0.5rem 0;
  }
  form {
    display: flex;
    gap: 1rem;
    input {
      margin-left: 0.5rem;
    }
    button {
      flex: 1 0 auto;
    }
  }
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-figure);
  padding-bottom:  1rem;
}

.surface-choice {
  --gutter: 0.75rem;
  &.unavailable {
    opacity: 0.5;
    &:hover {
      opacity: 1;
    }
  }
  display: flex;
  align-items: stretch;
  gap: var(--gutter);
  .swatch {
    flex: 0 0 0.5rem;
  }
  .swatch + div {
    /* the non-swatch side */
    flex: 1 1 auto;
    /* border: 1px solid red; */
  }
  & + & {
    margin-top: calc(var(--gutter) * 2);
  }

  .choice-group {
    & + & {
      margin-top: var(--gutter);
    }

    &.checkbox {
      display: flex;
      .choice {
        flex: 1 1 auto;
      }
    }
    &.radio {
      display: grid;
      border: 1px solid var(--color-gray-3);
      gap: var(--gutter);
      padding: var(--gutter);
      margin-bottom: var(--gutter);
    }
  }

  .choice {
    padding: var(--gutter);
    label {
    }
    border: 1px solid var(--color-gray-2);
    &.active {
      border: 1px solid var(--color-primary);
      background: var(--color-primary-tint-25);
      color: var(--color-primary-shade-60);
      label {
        /* font-weight: bold; */
      }
      .guidance {
        color: var(--color-primary-shade-25);
      }
    }
  }
}

#cost-benefit-balance-sheet {
  td {
    vertical-align: top;
  }
  tbody tr + tr td {
    border-top: 1px solid var(--color-gray-4);
  }
  tbody tr:hover {
    background: var(--color-yellow-tint-25);
  }
  tfoot td {
    border-top: 1px solid var(--color-figure);
    font-size: 1.25em;
    padding-top: 0.5rem;
  }
}

.floating-banner {
  z-index: 50;
  background: var(--color-figure);
  color: var(--color-ground);
  padding: 0.5rem;
}

.help {
  color: var(--color-green-2-shade-25);
  margin: 1rem 0;
}

#project-list {
  .qty .unit {
    font-size: 0.8em;
    display: none;
  }
  th {
    vertical-align: top;
  }
}

.hover-button {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  position: relative;
  color: var(--color-primary-shade-25);
  button {
    font-size: 0.8rem;
    font-weight: normal;
    display: none;
  }
  &:hover {
    color: var(--color-primary);
  }
  &:hover button {
    display: block;
  }
}