/* Owner: Citadel frame, evaluator hub, persona doors and walkthrough. */
.demo-frame {
  background: #05080b;
  border-bottom: 0.2rem solid var(--rmh-cyan);
  color: var(--rmh-white);
  width: 100%;
}

.demo-frame__inner {
  align-items: center;
  display: grid;
  gap: var(--rmh-space-md);
  grid-template-columns: 14rem minmax(0, 1fr);
  padding-block: var(--rmh-space-sm);
}

.demo-frame__logo-crop {
  height: 4rem;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 14rem;
}

.demo-frame__logo-crop img {
  height: auto;
  max-width: none;
  position: absolute;
  transform: translateY(-2.65rem);
  width: 14rem;
}

.demo-frame p {
  color: var(--rmh-white);
  font-size: var(--rmh-type-2);
  line-height: 1.45;
  margin: 0;
  max-width: 78ch;
}

.demo-hub {
  padding-block: var(--rmh-space-lg) var(--rmh-space-8);
}

.demo-hub > * + * {
  border-top: 1px solid var(--rmh-line);
  margin-top: var(--rmh-space-8);
  padding-top: var(--rmh-space-8);
}

.demo-hub__heading,
.demo-hub__section-heading {
  max-width: 58rem;
}

.demo-hub__heading h1 {
  font-size: var(--rmh-heading-inner);
  margin-block: var(--rmh-space-xs);
}

.demo-hub__lede {
  color: var(--rmh-muted-ink);
  font-size: var(--rmh-type-4);
  line-height: 1.45;
  max-width: 54rem;
}

.demo-hub__section-heading h2,
.demo-hub__try h2,
.demo-hub__qualification h2,
.demo-access-form h2 {
  font-size: var(--rmh-heading-section);
}

.demo-hub__section-heading > p {
  color: var(--rmh-muted-ink);
}

.demo-access-form {
  display: grid;
  gap: var(--rmh-space-sm);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--rmh-space-md);
}

.demo-access-form > h2,
.demo-access-form > h2 + p,
.demo-access-form > .form-help,
.demo-access-form > a,
.demo-access-form > [data-demo-link-local] {
  grid-column: 1 / -1;
}

.demo-access-form > h2 {
  margin-bottom: 0;
}

.demo-access-form > h2 + p {
  color: var(--rmh-muted-ink);
  margin-top: calc(-1 * var(--rmh-space-xs));
}

.demo-access-form > .form-help,
.demo-access-form > [data-demo-link-local] {
  background: var(--rmh-surface);
  border-inline-start: 0.25rem solid var(--rmh-cyan);
  margin: 0;
  padding: var(--rmh-space-xs) var(--rmh-space-sm);
}

.demo-access-form__door {
  background: var(--rmh-white);
  border: 1px solid var(--rmh-line);
  border-radius: var(--rmh-radius-md);
  box-shadow: var(--rmh-shadow-sm);
  display: grid;
  gap: var(--rmh-space-xs);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(3.5rem, auto) 1fr auto;
  min-width: 0;
  padding: var(--rmh-space-md);
  transition: transform var(--rmh-duration-base) var(--rmh-ease-out), box-shadow var(--rmh-duration-base) var(--rmh-ease-out);
}

.demo-access-form__door > * {
  min-width: 0;
}

.demo-access-form__door:hover,
.demo-access-form__door:focus-within {
  box-shadow: var(--rmh-shadow-md);
  transform: translateY(-0.2rem);
}

.demo-access-form__door h3 {
  font-size: var(--rmh-type-5);
  margin: 0;
}

.demo-access-form__door p {
  color: var(--rmh-muted-ink);
  margin: 0;
}

.demo-access-form__door p strong {
  color: var(--rmh-ink);
}

.demo-access-form__icon,
.demo-hub__coverage-icon {
  background: currentColor;
  color: var(--rmh-cyan);
  display: block;
  height: 1.75rem;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 1.75rem;
}

.demo-access-form__door--resident .demo-access-form__icon {
  mask-image: var(--rmh-icon-resident);
}

.demo-access-form__door--administrator .demo-access-form__icon {
  mask-image: var(--rmh-icon-administrator);
}

.demo-access-form__door--editor .demo-access-form__icon {
  mask-image: var(--rmh-icon-editor);
}

.demo-access-form__door .form-actions {
  align-self: end;
  margin: 0;
  padding-top: var(--rmh-space-xs);
}

.demo-access-form__door input[type="submit"] {
  min-height: 3rem;
  white-space: normal;
  width: 100%;
}

.demo-hub__coverage-grid,
.demo-hub__guidance,
.demo-hub__boundary-grid {
  display: grid;
  gap: var(--rmh-space-sm);
  margin-top: var(--rmh-space-md);
}

.demo-hub__coverage-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.demo-hub__coverage-grid article {
  border: 1px solid var(--rmh-line);
  border-radius: var(--rmh-radius-md);
  min-width: 0;
  padding: var(--rmh-space-sm);
}

.demo-hub__coverage-grid article[data-coverage="complete"] {
  background: var(--rmh-light-blue);
  border-color: var(--rmh-dark);
}

.demo-hub__coverage-grid article[data-coverage="sample"],
.demo-hub__coverage-grid article[data-coverage="content"] {
  background: var(--rmh-surface);
}

.demo-hub__coverage-icon {
  color: var(--rmh-dark);
  mask-image: var(--rmh-icon-check);
}

.demo-hub__coverage-grid article[data-coverage="sample"] .demo-hub__coverage-icon {
  mask-image: var(--rmh-icon-business);
}

.demo-hub__coverage-grid article[data-coverage="content"] .demo-hub__coverage-icon {
  mask-image: var(--rmh-icon-visitor);
}

.demo-hub__coverage-grid h3,
.demo-hub__guidance h3,
.demo-hub__boundary-grid h3 {
  font-size: var(--rmh-type-4);
  margin-block: var(--rmh-space-xs);
}

.demo-hub__coverage-grid p,
.demo-hub__guidance p,
.demo-hub__boundary-grid p {
  overflow-wrap: normal;
  word-break: normal;
}

.demo-hub__guidance,
.demo-hub__boundary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.demo-hub__guidance .civic-card,
.demo-hub__boundary-grid .civic-card {
  border-top: 0.2rem solid var(--rmh-cyan);
}

.demo-hub__try {
  background: var(--rmh-light-blue);
  border-inline-start: 0.35rem solid var(--rmh-dark);
  border-radius: var(--rmh-radius-md);
  padding: var(--rmh-space-md);
}

.demo-hub__try code {
  font: inherit;
  font-weight: 800;
  margin-inline-start: var(--rmh-space-2xs);
}

.demo-hub__table-wrap {
  border: 1px solid var(--rmh-line);
  border-radius: var(--rmh-radius-md);
  margin-top: var(--rmh-space-md);
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.demo-hub__table-wrap table {
  margin: 0;
  min-width: 64rem;
  width: 100%;
}

.demo-hub__table-wrap th,
.demo-hub__table-wrap td {
  min-width: 8rem;
  padding: var(--rmh-space-sm);
  text-align: left;
  vertical-align: top;
}

.demo-hub__table-wrap th:first-child,
.demo-hub__table-wrap td:first-child {
  min-width: 12rem;
}

.demo-hub__table-wrap a {
  font-weight: 800;
}

.demo-hub__qualification {
  background: var(--rmh-surface);
  border-inline-start: 0.35rem solid var(--rmh-dark);
  margin-top: var(--rmh-space-md);
  padding: var(--rmh-space-md);
}

.demo-hub__hosting {
  border-inline-start: 0.2rem solid var(--rmh-cyan);
  margin-top: var(--rmh-space-md);
  max-width: none;
  padding-inline-start: var(--rmh-space-sm);
}

@media (max-width: 68rem) {
  .demo-hub__coverage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .demo-frame__inner,
  .demo-access-form,
  .demo-hub__coverage-grid,
  .demo-hub__guidance,
  .demo-hub__boundary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .demo-access-form > * {
    grid-column: 1;
  }

  .demo-hub__try .button {
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
  }

  .demo-hub__try code {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 35rem) {
  .demo-frame__logo-crop {
    height: 3.5rem;
    width: min(12rem, 100%);
  }

  .demo-frame__logo-crop img {
    transform: translateY(-2.25rem);
    width: 100%;
  }

  .demo-access-form__door {
    padding: clamp(0.5rem, 4vw, var(--rmh-space-md));
  }

  .demo-access-form__door h3 {
    font-size: clamp(1.15rem, 6vw, var(--rmh-type-5));
  }

  .demo-access-form__door input[type="submit"] {
    padding-inline: clamp(0.5rem, 3vw, var(--rmh-space-sm));
  }
}