/* src/frontend/css/question.css */
.page.question {
  display: flex;
  flex-direction: column;
  align-items:  center;
  gap: 2rem;
  width: calc(100% - 1rem);
  max-width: 60rem;
  margin: auto;
  padding: 1rem 0;

  & .prompt {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & blockquote {
      background-color: var(--bg-alt);
      padding: 1rem;
    }
  }

  & .framed {
    border: 2px dashed var(--accent);
    background-color: var(--bg-alt);
    margin: 1rem;
    padding: 3rem;
  }

  & .flag-section {
    display: flex;
    flex-direction: column;
    align-items:  center;
    gap: 1rem;
    width: 100%;
  }

  & .hint {
    display: flex;
    flex-direction: column;
    align-items:  start;
    width: 100%;

    & > button.hint-req {
      outline: none;
      color: var(--text);
      background-color: var(--hinting);
      border: none;
      border-radius: 1rem;
      width: 100%;
      padding: 1rem;
    }
  }

  & .guess {
    display: flex;
    overflow: hidden;
    border-radius: 1rem;
    flex-direction: row;
    gap: 0;
    width: 100%;

    &.correct {
      border: 2px solid var(--completion);
      justify-content: center;
    }

    & > * {
      outline: none;
      border: none;
      height: 100%;
      padding: .75rem;
      font-family: monospace;
      font-size: 125%;
    }

    & > input {
      text-align: right;
      background-color: var(--bg-alt);
      color: var(--text);
      flex-grow: 1;
    }

    & > button {
      width: 8rem;

      &:not(:disabled) {
        background-color: var(--accent);
        color: var(--text);
      }
    }
  }
}