:root {
  --ddc-details: color-mix(in hsl, var(--ddc-fingerlime) 40%, white);
  --ddc-verified: color-mix(in hsl, var(--ddc-rockorchid) 60%, var(--ddc-eucalyptus) 40%);
  --ddc-card-bg: color-mix(in hsl, var(--ddc-purpledaisy) 60%, white);
  --ddc-error: color-mix(in hsl, var(--ddc-grevillea) 80%, white);
  --ddc-primary-highlight: color-mix(in hsl, var(--ddc-eucalyptus) 60%, white);
  --ddc-button-dark: var(--color-primary);
  --ddc-button-darker: color-mix(in hsl, var(--ddc-button-dark) 90%, black);
  --ddc-button-light: white;
  --dd-border-radius: 1em;
  --dd-small-border-radius: 0.3em;
}
body {
  align-items: center;
}
.flow > * + * {
  margin-block-start: var(--flow-space, 1.2em);
  margin-block-end: 0;
}
header,
hgroup {
  text-align: center;
  p {
    margin-block-end: 0;
  }
}
header.dd-banner {
  text-align: end;
  width: 100vw;
  color: var(--color-lightest);
  background-color: var(--color-primary);
  font-size: var(--f-size-smaller);
  font-weight: var(--f-weight-body-light);
  font-family: var(--f-family-display);
  line-height: 5ex;
  font-variant-alternates: styleset(square-punctuation, square-quotes) character-variant(simplified-u, upper-i-serif, single-story-a);
  padding-inline: 1ch;
}
.max-w-prose {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

h1,
h2,
h3,
h4 {
  text-align: center;
}

li + li {
  margin-block-start: 0.5em;
}

select, input {
  padding: 0.5em;
  border-radius: var(--dd-small-border-radius);
}

.ee-btn-primary {
  background-color: var(--ddc-button-dark);
  color: white;
  font-weight: bold;
  border-radius: var(--dd-small-border-radius);
  padding: 0.2em 0.5em 0.2em 0.5em;
  cursor: pointer;
}

.ee-btn-primary:hover {
  background-color: var(--ddc-button-darker);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ee-btn-outline {
  background-color: white;
  color: var(--ddc-button-dark);
  border: 1px solid var(--ddc-button-dark);
}

.ee-btn-outline:hover {
  background-color: white;
}

.ee-button-flex-group {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;

  button {
    margin: 10px;
  }
}

.ee-details-content {
  background-color: var(--ddc-details);
  border-radius: var(--dd-small-border-radius);
  padding: 1em;
}

.ee-coach-question {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  background-color: var(--ddc-details);
  border-radius: var(--dd-border-radius);
  column-gap: 1em;
  padding: 1em 1em 1em 1em;
  margin-inline: auto;
  margin-top: 2em;
  margin-bottom: 2em;
}

.ee-coach-question[narrow] {
  width: 80%;
}

.ee-coach-question::before {
  content: "";
  background-image: url('../img/Boilerplate/logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 3em;
  height: 3em;
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}

.ee-coach-question-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.ee-coach-question-context {
  margin-top: 1em;
  grid-column: 1 / -1;
}

.ee-coach-answer {
  margin-top: 1em;
  background-color: var(--ddc-details);
  border-radius: var(--dd-border-radius);
  padding: 0.5em;
  grid-column: 1 / -1;
}

.ee-coach-answer-content {
  margin-top: 1em;
}