:root {
  /* https://camo.githubusercontent.com/72015eab40bd7a696e2802810d7519480d51a2fba75f0f873dc23b990eb860f8/687474703a2f2f692e696d6775722e636f6d2f776136363678672e706e67 */
  --theme-gb-dm-bg0: #282828;
  --theme-gb-dm-bg0-hard: #1d2021;
  --theme-gb-dm-bg0-soft: #32302f;
  --theme-gb-dm-bg1: #3c3836;
  --theme-gb-dm-bg2: #504945;
  --theme-gb-dm-bg3: #665c54;
  --theme-gb-dm-bg4: #7c6f64;

  --theme-gb-dm-fg0: #fbf1c7;
  --theme-gb-dm-fg1: #ebdbb2;
  --theme-gb-dm-fg2: #d5c4a1;
  --theme-gb-dm-fg3: #bdae93;
  --theme-gb-dm-fg4: #a89984;

  --theme-gb-dm-dark-red: #cc241d;
  --theme-gb-dm-dark-green: #98971a;
  --theme-gb-dm-dark-yellow: #d79921;
  --theme-gb-dm-dark-blue: #458588;
  --theme-gb-dm-dark-purple: #b16286;
  --theme-gb-dm-dark-aqua: #689d6a;
  --theme-gb-dm-dark-orange: #d65d0e;
  --theme-gb-dm-dark-gray: #928374;

  --theme-gb-dm-light-red: #fb4934;
  --theme-gb-dm-light-green: #b8bb26;
  --theme-gb-dm-light-yellow: #fabd2f;
  --theme-gb-dm-light-blue: #83a598;
  --theme-gb-dm-light-purple: #d3869b;
  --theme-gb-dm-light-aqua: #8ec07c;
  --theme-gb-dm-light-orange: #f38019;
  --theme-gb-dm-light-gray: #a89984;
}

body {
  color: var(--theme-gb-dm-fg0);
  background-color: var(--theme-gb-dm-bg0);
  margin: 0;
  font-family: "Fira Sans", sans-serif;
}

.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  box-sizing: border-box;
}

.login-form {
  width: min(100%, 22rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.login-form h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 700;
}

.login-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--theme-gb-dm-fg3);
}

.login-form input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.7rem 0.8rem;
  font: inherit;
  color: var(--theme-gb-dm-fg0);
  background: var(--theme-gb-dm-bg0-soft);
  border: 1px solid var(--theme-gb-dm-bg3);
  border-radius: 0.4rem;
}

.login-form input:focus {
  outline: 2px solid var(--theme-gb-dm-fg2);
  outline-offset: 2px;
}

.login-form button {
  padding: 0.75rem 1rem;
  font: inherit;
  font-weight: 700;
  color: var(--theme-gb-dm-bg0-hard);
  background: var(--theme-gb-dm-light-green);
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
}

.login-error {
  margin: 0;
  color: var(--theme-gb-dm-light-red);
}

[hidden] {
  display: none;
}

job-board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  padding: 6rem;
  gap: 1rem;
  justify-content: center;
}

job-card {
  outline: none;
  border: 4px solid transparent;

  &:hover {
    border-color: var(--theme-gb-dm-fg4);
  }

  &:focus,
  &:focus-within,
  &.transitioning {
    border-color: var(--theme-gb-dm-fg2);
    view-transition-name: job-card;
    z-index: 1;
  }

  &.dragging {
    /*transition: scale .3s;*/
    /*scale: .4;*/
    /*display: none;*/
    /*visibility: hidden;*/
    /*opacity: .3;*/
    /*border: 3px solid red;*/
  }
}

@keyframes view-transition-job-card {
  25%,
  75% {
    scale: 110%;
  }
}

::view-transition-group(job-card) {
  animation-duration: 0.25s;
}

::view-transition-old(job-card) {
  animation-name: view-transition-job-card;
}

::view-transition-new(job-card) {
  display: none;
}

button.new-application {
  margin-top: auto;
  padding: 0.65em 1em;
  font: inherit;
  color: var(--theme-gb-dm-fg3);
  background: transparent;
  border: 1px dashed var(--theme-gb-dm-bg3);
  border-radius: 0.4rem;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
}

button.new-application:hover {
  color: var(--theme-gb-dm-fg0);
  background: var(--theme-gb-dm-bg1);
  border-color: var(--theme-gb-dm-fg4);
  border-style: solid;
}

button.new-application:focus-visible {
  outline: 2px solid var(--theme-gb-dm-fg2);
  outline-offset: 2px;
}

job-application-list {
  background: var(--theme-gb-dm-bg0-soft);
  padding: 1rem;
  border-radius: 0.5rem;
  display: block flex;
  flex-direction: column;
  gap: 1rem;
  border: 3px solid transparent;
  transition: border-color 0.1s;

  &.drop-target {
    border-color: var(--theme-gb-dm-fg4);
  }

  > header {
    text-transform: capitalize;
  }

  > div {
    display: block flex;
    flex-direction: column;
    gap: 1rem;
  }
}

dialog[open] {
  /*display: flex;*/
  /*border: none;*/
  padding: 1.5rem;
  outline: none;
  border: none;
  /*gap: .5em;*/
  /*background: transparent;*/
  &::backdrop {
    background-color: rgba(0, 0, 0, 0.3);
  }
}