:root {
  --ui-control-height: 2.75rem;
  --ui-gap: .45rem;
  --ui-section-space: .6rem;
}

.ui-section {
  display: grid;
  gap: var(--ui-gap);
  padding: var(--ui-section-space);
  border: 1px solid var(--of-rule);
  background: color-mix(in srgb, var(--of-paper) 82%, transparent);
}

.ui-section-heading {
  display: flex;
  gap: .35rem .7rem;
  align-items: baseline;
  justify-content: space-between;
}

.ui-section-heading strong,
.ui-section-heading span {
  margin: 0;
}

.ui-section-heading strong {
  color: var(--of-primary);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ui-section-heading span {
  color: var(--of-ink-soft);
  font-size: .7rem;
}

.ui-field-grid,
.ui-action-grid {
  display: grid;
  gap: var(--ui-gap);
}

.ui-field-grid,
.ui-action-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

.ui-action-grid--four {
  grid-template-columns: repeat(4, 1fr);
}

.ui-action-grid button,
.ui-section > button {
  min-width: 0;
  min-height: var(--ui-control-height);
  height: var(--ui-control-height);
  display: grid;
  place-items: center;
  padding: .4rem .5rem;
  border: 1px solid var(--of-primary);
  border-radius: .2rem;
  background: transparent;
  color: var(--of-primary);
  font-size: .7rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.ui-action-grid .primary-button {
  background: var(--of-primary);
  color: #fff;
}

.ui-validation {
  color: #a12828;
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}

.ui-validation[hidden] {
  display: none;
}

.welcome-dialog {
  width: min(32rem, 100%);
  block-size: min(40rem, 92dvh);
  display: grid;
  gap: .55rem;
  padding: .65rem;
}

.welcome-dialog > *,
.welcome-heading > *,
.credential-note,
.beta-note {
  margin: 0;
}

.welcome-heading {
  display: grid;
  gap: .3rem;
}

.welcome-heading h2 {
  color: var(--of-primary);
  font-size: 1.45rem;
  line-height: 1.05;
}

.welcome-heading p,
.credential-note,
.beta-note {
  color: var(--of-ink-soft);
  font-size: .7rem;
  line-height: 1.4;
}

.access-note {
  margin: 0;
  padding: .4rem .55rem;
}

.identity-card {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.privacy-card,
.bypass-row,
.platform-login-block {
  margin: 0;
}

.bypass-row {
  grid-template-columns: 1fr;
  align-items: stretch;
  padding-top: var(--ui-section-space);
  border-top: 1px solid var(--of-rule);
}

.bypass-row > label,
.credential-form label {
  color: var(--of-ink-soft);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.bypass-controls {
  display: grid;
  grid-template-columns: 1fr 8rem;
  gap: var(--ui-gap);
}

.bypass-controls input,
.bypass-controls button {
  width: 100%;
  height: var(--ui-control-height);
}

.bypass-row > small {
  color: var(--of-ink-soft);
  font-size: .62rem;
  line-height: 1.3;
}

.platform-login-block {
  grid-column: auto;
  padding-top: var(--ui-section-space);
  border-top: 1px solid var(--of-rule);
}

.credential-form {
  display: grid;
  gap: var(--ui-gap);
}

.credential-form label {
  display: grid;
  gap: .25rem;
}

.credential-form input {
  min-width: 0;
  height: var(--ui-control-height);
}

.login-brand {
  grid-column: auto;
  padding-bottom: .35rem;
}

.login-status {
  min-height: 0;
}

.credential-note strong {
  color: var(--of-ink);
}

@media (width <= 34rem) {
  .ui-field-grid {
    grid-template-columns: 1fr;
  }

  .ui-action-grid--four {
    grid-template-columns: repeat(2, 1fr);
  }

  .bypass-controls {
    grid-template-columns: 1fr;
  }
}