/* Self-hosted font faces — replaces the render-blocking third-party
   fonts.googleapis.com stylesheet the layout used to load (two extra DNS+TLS
   handshakes before first paint, on a page that is one form).
   Inter ships as a single latin variable file covering 400-800 (the CSS uses
   800, which the old 400;500;600;700 request never loaded — it was synthesised).
   The Arabic faces keep their unicode-range, so an English page never fetches
   them; only Arabic content pulls those bytes. */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plexar-400.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plexar-500.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plexar-600.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/plexar-700.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* C-Hub brand palette — Compounds Hub mobile mockup.
   Keep in sync with angular design-tokens.css / design-tokens-no-preflight.css. */
:root {
  --chub-primary: #00a651;
  --chub-primary-dark: #008c44;
  --chub-accent-orange: #f39200;
  --chub-header: #0f7a45;
  --chub-header-deep: #0a5c34;
  --chub-navy-text: #1b2b34;
  --chub-surface: #ffffff;
  --chub-page: #ffffff;
  --chub-input-bg: #ffffff;
  --chub-input-border: #dce5e8;
  --chub-muted: #8a97a0;
  --chub-link: #00a651;
  --chub-error: #e74c3c;
  --chub-radius: 16px;
  --chub-radius-sm: 10px;
  --font-sans: "Inter", "IBM Plex Sans Arabic", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  color: var(--chub-navy-text);
  background: var(--chub-page);
  -webkit-font-smoothing: antialiased;
}

.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  background: var(--chub-surface);
}

.login-shell.login-container--wide {
  max-width: none;
}

/* Brand in green panel — desktop only */
.login-top-brand {
  display: none;
}

/* ---- Green header (mobile mockup) ---- */
.login-top {
  position: relative;
  flex: 0 0 auto;
  min-height: 150px;
  background: linear-gradient(165deg, var(--chub-header) 0%, var(--chub-header-deep) 55%, #084528 100%);
  border-radius: 0 0 50% 50% / 0 0 28px 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;
}

.login-logo-badge {
  position: absolute;
  inset-block-end: -40px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(10, 92, 52, 0.2);
  z-index: 2;
}

.login-top-art {
  display: none;
}

.login-logo-badge img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

/* ---- White sheet ---- */
.login-sheet {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 56px 28px 32px;
  background: var(--chub-surface);
}

.chub-card {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* C green + HUB orange — mobile brand colors */
.chub-brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.chub-brand-c {
  color: var(--chub-accent-orange);
}

.chub-brand-hub {
  color: #000;
}

.login-form {
  width: 100%;
}

.login-heading {
  text-align: center;
  margin-bottom: 28px;
}

.login-heading h1,
.chub-card > h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 6px;
  color: var(--chub-navy-text);
}

.login-heading .subtitle,
.chub-card > .subtitle {
  text-align: center;
  color: var(--chub-muted);
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
}

.form-field,
form > div:not(.validation-summary-errors) {
  margin-bottom: 16px;
}

.form-field--inline {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.forgot-password-link {
  font-size: 13px;
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--chub-muted);
}

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--chub-navy-text);
  margin-bottom: 7px;
}

.remember-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--chub-muted);
  cursor: pointer;
  margin-bottom: 0;
  font-size: 13px;
}

.remember-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--chub-primary);
  cursor: pointer;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
/* datetime-local/time were missing, so the permit update form's validity fields fell back to the
   raw browser control and looked nothing like the rest of the form. */
input[type="datetime-local"],
input[type="time"],
input:not([type]),
select,
textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--chub-input-bg);
  border: 1px solid var(--chub-input-border);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--chub-navy-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--chub-primary);
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.14);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A97A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-inline-end: 40px;
  cursor: pointer;
}

[dir="rtl"] select {
  background-position: left 14px center;
}

select:invalid,
select option[value=""] {
  color: var(--chub-muted);
}

input::placeholder {
  color: #a0abb3;
}

.password-field {
  position: relative;
  display: flex;
  align-items: center;
}

.password-field input {
  padding-inline-end: 44px;
}

.password-toggle {
  all: unset;
  position: absolute;
  inset-inline-end: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chub-muted);
  cursor: pointer;
  line-height: 0;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--chub-navy-text);
}

button[type="submit"] {
  width: 100%;
  padding: 15px 16px;
  margin-top: 12px;
  border: none;
  border-radius: 12px;
  background: var(--chub-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 166, 81, 0.28);
  transition: background 0.15s ease, transform 0.12s ease;
}

button[type="submit"]:hover {
  background: var(--chub-primary-dark);
}

button[type="submit"]:active {
  transform: scale(0.985);
}

button[type="submit"][value="cancel"] {
  background: transparent;
  color: var(--chub-muted);
  font-weight: 500;
  margin-top: 0;
  box-shadow: none;
}

.login-footer {
  text-align: center;
  margin-top: auto;
  padding-top: 28px;
  font-size: 13px;
  color: var(--chub-muted);
}

a {
  color: var(--chub-link);
  text-decoration: none;
  font-weight: 700;
}

a:hover {
  text-decoration: underline;
  color: var(--chub-primary-dark);
}

.chub-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  margin-top: 16px;
  border: none;
  border-radius: 12px;
  background: var(--chub-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 166, 81, 0.28);
  transition: background 0.15s ease;
}

.chub-button:hover {
  background: var(--chub-primary-dark);
  color: #fff;
  text-decoration: none;
}

/* Second, lower-emphasis option alongside a .chub-button primary CTA — the Login/Host choice
   screen's two buttons aren't a primary/cancel pair, just two equally valid paths, so this is an
   outline treatment rather than .chub-link-button's compact inline style. */
.chub-button--secondary {
  background: transparent;
  color: var(--chub-primary-dark);
  border: 1px solid var(--chub-input-border);
  box-shadow: none;
}

.chub-button--secondary:hover {
  background: rgba(0, 166, 81, 0.06);
  color: var(--chub-primary-dark);
}

.login-choice {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.validation-summary-errors ul {
  list-style: none;
  padding: 10px 12px;
  margin: 0 0 16px;
  background: rgba(231, 76, 60, 0.07);
  border: 1px solid rgba(231, 76, 60, 0.35);
  border-radius: 12px;
  color: var(--chub-error);
  font-size: 13px;
}

.field-validation-error {
  color: var(--chub-error);
  font-size: 12px;
}

.chub-section {
  margin: 26px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--chub-input-border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--chub-muted);
}

.chub-section:first-of-type {
  margin-top: 18px;
  padding-top: 0;
  border-top: none;
}

.chub-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

/* The native date/time picker indicator is near-invisible on the light input background and sits
   flush against the edge; nudge it inward and tint it to the muted text colour. */
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  padding: 2px;
  border-radius: 6px;
  transition: opacity 0.15s ease, background 0.15s ease;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: rgba(0, 166, 81, 0.10);
}

/* Reviewer's "more information needed" note, shown above the update forms. */
.chub-callout {
  margin: 4px 0 20px;
  padding: 14px 16px;
  background: rgba(0, 166, 81, 0.06);
  border: 1px solid rgba(0, 166, 81, 0.22);
  border-inline-start: 4px solid var(--chub-primary);
  border-radius: 12px;
}

.chub-callout strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--chub-primary-dark);
}

.chub-callout p {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--chub-navy-text);
}

/* Secondary, low-emphasis action (add/remove a repeated row) — deliberately not .chub-button,
   which is a full-width primary CTA. */
.chub-link-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  margin-top: 4px;
  background: transparent;
  border: 1px solid var(--chub-input-border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--chub-primary-dark);
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chub-link-button:hover {
  background: rgba(0, 166, 81, 0.08);
  border-color: var(--chub-primary);
}

.chub-link-button:focus-visible {
  outline: none;
  border-color: var(--chub-primary);
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.14);
}

/* Groups one visitor's fields so a multi-row list reads as separate cards rather than one long
   run of inputs. */
.chub-visitor-row {
  position: relative;
  padding: 16px;
  margin-bottom: 12px;
  /* Not var(--chub-input-bg): that resolves to #fff, which would make the card invisible against
     the card surface it sits on. */
  background: #f7f9fa;
  border: 1px solid var(--chub-input-border);
  border-radius: 14px;
}

.chub-visitor-row input {
  background: #fff;
}

.chub-visitor-row .chub-link-button {
  margin-top: 8px;
  border-color: rgba(231, 76, 60, 0.35);
  color: var(--chub-error);
}

.chub-visitor-row .chub-link-button:hover {
  background: rgba(231, 76, 60, 0.07);
  border-color: var(--chub-error);
}

.chub-help {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--chub-muted);
}

.chub-required {
  color: var(--chub-error);
  margin-inline-start: 2px;
}

.chub-optional {
  font-weight: 500;
  color: var(--chub-muted);
  margin-inline-start: 4px;
}

input[type="file"] {
  width: 100%;
  padding: 12px 14px;
  background: #f7fbfc;
  border: 1px dashed var(--chub-input-border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--chub-muted);
  cursor: pointer;
}

input[type="file"]:hover {
  border-color: var(--chub-primary);
  background: var(--chub-surface);
}

input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--chub-primary);
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.14);
}

input[type="file"]::file-selector-button {
  margin-inline-end: 12px;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: var(--chub-navy-text);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: var(--chub-primary);
}

.chub-suggestions {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  max-height: 190px;
  overflow-y: auto;
  background: var(--chub-surface);
  border: 1px solid var(--chub-input-border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(11, 46, 61, 0.12);
}

.chub-autocomplete {
  position: relative;
}

.chub-suggestions li {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--chub-navy-text);
  cursor: pointer;
}

.chub-suggestions li:hover,
.chub-suggestions li.is-active {
  background: #eef8f1;
  color: var(--chub-primary-dark);
}

@media (max-width: 480px) {
  .chub-field-row {
    grid-template-columns: 1fr;
  }

  .login-sheet {
    padding: 52px 22px 28px;
  }
}

/* Desktop: split layout — green brand panel + form (no tall phone card / no scroll) */
@media (min-width: 900px) {
  body {
    background: var(--chub-surface);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .login-shell {
    max-width: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    flex-direction: row;
    margin: 0;
    box-shadow: none;
    overflow: hidden;
  }

  .login-shell.login-container--wide {
    max-width: none;
  }

  .login-top {
    flex: 0 0 44%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 0;
    overflow: hidden;
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
      linear-gradient(180deg, var(--chub-header) 0%, var(--chub-header-deep) 42%, #063822 100%);
  }

  .login-top-art {
    display: block;
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 60%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* Soft top edge so green + art read as one surface */
    mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 100%);
  }

  /* Painted as a background rather than an <img> on purpose: .login-top-art is
     display:none below 900px, and a background-image inside a display:none
     subtree is never fetched, whereas an <img> there is downloaded anyway.
     Phones — the majority of login traffic — now skip the art entirely. */
  .login-top-art-img {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.85;
    background-image: image-set(
      url("images/login/community-city.webp") type("image/webp"),
      url("images/login/community-city.png") type("image/png"));
    background-image: -webkit-image-set(
      url("images/login/community-city.webp") type("image/webp"),
      url("images/login/community-city.png") type("image/png"));
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
  }

  .login-top-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(10, 92, 52, 0.85) 0%,
      rgba(8, 69, 40, 0.45) 35%,
      rgba(6, 56, 34, 0.2) 65%,
      transparent 100%
    );
  }

  .login-logo-badge {
    position: static;
    transform: translateY(-6vh);
    width: 96px;
    height: 96px;
    margin: 0 0 20px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    z-index: 2;
  }

  .login-logo-badge img {
    width: 62px;
    height: 62px;
  }

  .login-top-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    transform: translateY(-6vh);
  }

  .login-top-wordmark {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
  }

  .login-top-brand .chub-brand-c {
    color: var(--chub-accent-orange);
  }

  .login-top-brand .chub-brand-hub {
    color: #fff;
  }

  .login-top-tagline {
    margin: 12px 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
  }

  .login-top-desc {
    position: relative;
    margin: 20px 0 0;
    padding-top: 16px;
    max-width: 320px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0.01em;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
  }

  .login-top-desc::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--chub-accent-orange);
    opacity: 0.85;
  }

  .chub-brand--sheet {
    display: none;
  }

  .login-sheet {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    justify-content: center;
    align-items: center;
    padding: 48px 56px;
    overflow-y: auto;
  }

  .chub-card {
    width: 100%;
    max-width: 400px;
    flex: 0 0 auto;
  }

  .login-heading {
    text-align: start;
    margin-bottom: 28px;
  }

  .login-heading h1,
  .chub-card > h1 {
    text-align: start;
    font-size: 30px;
  }

  .login-heading .subtitle,
  .chub-card > .subtitle {
    text-align: start;
  }

  .login-footer {
    margin-top: 24px;
    padding-top: 0;
    text-align: center;
  }
}