:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #24323a;
  --ink-soft: #5a6a70;
  --line: rgba(36, 50, 58, 0.16);
  --panel: #ffffff;
  --teal: #115958;
  --teal-dark: #0b4342;
  --wine: #7c3545;
  --cream: #f8f3e9;
  --shadow: 0 18px 50px rgba(17, 60, 60, 0.16);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #edf4f1;
}

button,
input {
  font: inherit;
}

.access-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  width: min(100% - 28px, 1040px);
  min-height: 620px;
  margin: clamp(18px, 5vw, 64px) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.access-intro {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 6vw, 72px);
  color: #ffffff;
  background: var(--teal-dark);
}

.access-intro h1 {
  max-width: 9ch;
  margin: 8px 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 7vw, 5.8rem);
  font-weight: 700;
  line-height: 0.96;
}

.access-intro p {
  max-width: 54ch;
  margin: 0;
  line-height: 1.7;
}

.access-intro__note {
  margin-top: 22px !important;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.92rem;
}

.eyebrow {
  margin: 0;
  color: inherit;
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.auth-panel {
  padding: clamp(22px, 5vw, 42px);
  background: var(--cream);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.auth-tab {
  padding: 12px 8px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.auth-tab.is-active {
  border-bottom-color: var(--wine);
  color: var(--wine);
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form h2 {
  margin: 5px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.85rem;
}

.auth-form label {
  display: grid;
  gap: 6px;
}

.auth-form label span {
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 800;
}

.auth-form input {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink);
  background: #ffffff;
}

.auth-form input:focus-visible {
  outline: 3px solid rgba(17, 89, 88, 0.18);
  border-color: var(--teal);
}

.primary-button {
  padding: 12px 15px;
  border: 1px solid var(--teal);
  border-radius: 5px;
  color: #ffffff;
  background: var(--teal);
  cursor: pointer;
  font-weight: 900;
}

.primary-button:hover {
  background: var(--teal-dark);
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.64;
}

.text-button {
  justify-self: start;
  padding: 3px 0;
  border: 0;
  color: var(--wine);
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.auth-status {
  min-height: 22px;
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.auth-status.is-error {
  color: #9c2c3d;
}

.auth-status.is-success {
  color: var(--teal);
}

@media (max-width: 760px) {
  .access-shell {
    grid-template-columns: 1fr;
    margin: 14px auto;
  }

  .access-intro {
    min-height: 290px;
  }

  .access-intro h1 {
    max-width: 12ch;
    font-size: clamp(2.8rem, 15vw, 4.5rem);
  }
}