/* GapTalk auth: one illustrated canvas, one optical glass surface. */
body[data-gap-auth] #root {
  background: var(--gap-color-canvas) !important;
  isolation: isolate;
}

body[data-gap-auth] #root::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("./assets/login-world-v1.png") 36% center / cover no-repeat;
}

body[data-gap-auth] [data-gap-auth-layout] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--gap-layout-auth-card-min), var(--gap-layout-auth-card-width));
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: var(--gap-space-8);
  padding: var(--gap-space-8) var(--gap-layout-auth-gutter) var(--gap-space-12);
  min-height: 100%;
  overflow-y: auto;
  overflow-x: clip;
  background: transparent;
}

body[data-gap-auth] [data-gap-auth-nav] {
  grid-column: 1 / -1;
  grid-row: 1;
  height: var(--gap-space-12);
}

body[data-gap-auth] [data-gap-auth-nav] > div:first-child::before {
  content: "";
  display: block;
  width: var(--gap-layout-auth-nav-width);
  height: var(--gap-space-10);
  background: url("./assets/logo-on-dark.svg") left center / contain no-repeat;
}

body[data-gap-auth] [data-gap-auth-nav] button {
  width: var(--gap-space-10);
  height: var(--gap-space-10);
  color: var(--gap-paper);
  background: color-mix(in srgb, var(--gap-ink) 28%, transparent);
  border: var(--gap-border-width) solid color-mix(in srgb, var(--gap-white) 16%, transparent);
  box-shadow: inset 0 var(--gap-border-width) 0 color-mix(in srgb, var(--gap-white) 10%, transparent);
  backdrop-filter: var(--gap-material-chrome-filter);
  -webkit-backdrop-filter: var(--gap-material-chrome-filter);
}

body[data-gap-auth] [data-gap-auth-nav] button svg { color: var(--gap-paper); fill: currentColor; }
body[data-gap-auth] [data-gap-auth-vendor],
body[data-gap-auth] [data-gap-brand-wordmark] { display: none !important; }

body[data-gap-auth] [data-gap-auth-card] {
  position: relative;
  isolation: isolate;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  margin: 0 0 var(--gap-space-8);
  width: 100%;
  max-width: var(--gap-layout-auth-card-width);
  max-height: none;
  padding: var(--gap-space-9);
  gap: var(--gap-space-7);
  color: var(--gap-color-text);
  border: var(--gap-border-width) solid var(--gap-color-rim);
  border-radius: var(--gap-radius-auth);
  background: var(--gap-material-auth-sheen), var(--gap-material-auth-background) !important;
  box-shadow: var(--gap-material-auth-shadow);
  backdrop-filter: var(--gap-material-auth-filter);
  -webkit-backdrop-filter: var(--gap-material-auth-filter);
  font-weight: var(--gap-type-weight-body-ui);
  animation: gap-auth-appear var(--gap-motion-duration-enter) var(--gap-motion-easing-control) both;
}

@keyframes gap-auth-appear {
  from { opacity: 0; transform: translateY(var(--gap-space-1-5)); }
  to { opacity: 1; transform: none; }
}

body[data-gap-auth] [data-gap-auth-intro] { gap: var(--gap-space-8); }
body[data-gap-auth] [data-gap-auth-copy] { gap: var(--gap-space-4); }
body[data-gap-auth] [data-gap-auth-copy] > b { align-items: flex-start !important; text-align: left !important; }
body[data-gap-auth] [data-gap-auth-actions] { gap: var(--gap-space-3); }

body[data-gap-auth] [data-gap-brand-tagline] {
  display: block;
  font-size: var(--gap-type-size-auth-heading);
  font-weight: var(--gap-type-weight-heading-ui);
  line-height: var(--gap-type-leading-auth-heading);
  letter-spacing: var(--gap-type-tracking-heading);
}
body[data-gap-auth] [data-gap-brand-tagline] br { display: none; }
body[data-gap-auth] [data-gap-brand-description] {
  margin: 0;
  text-align: left !important;
  font-size: var(--gap-type-size-body);
  font-weight: var(--gap-type-weight-body-ui);
  line-height: var(--gap-type-leading-body);
  color: var(--gap-color-muted);
  opacity: 1 !important;
}

body[data-gap-auth] [data-gap-auth-heading] { gap: var(--gap-space-2); color: var(--gap-color-text); }
body[data-gap-auth] [data-gap-auth-heading] img { display: none; }
body[data-gap-auth] [data-gap-auth-title] {
  font-size: var(--gap-type-size-auth-heading-min);
  font-weight: var(--gap-type-weight-heading-ui);
  line-height: var(--gap-type-leading-heading);
  letter-spacing: var(--gap-type-tracking-heading);
}
body[data-gap-auth] [data-gap-auth-subtitle] {
  font-size: var(--gap-type-size-body);
  line-height: var(--gap-type-leading-body);
  font-weight: var(--gap-type-weight-body-ui);
  color: var(--gap-color-muted);
}

body[data-gap-auth] [data-gap-auth-fields] { gap: var(--gap-space-4); }
body[data-gap-auth] [data-gap-auth-utility] {
  gap: var(--gap-space-1);
  align-items: flex-start;
  margin: var(--gap-space-1) 0 var(--gap-space-2);
}
body[data-gap-auth] [data-gap-auth-utility] a { display: block; max-width: 100%; }
body[data-gap-auth] [data-gap-auth-card] button.gap-hui-button {
  min-height: var(--gap-control-height);
  height: auto;
  border-radius: var(--gap-radius-control);
  font-family: var(--fonts-primary);
  font-weight: var(--gap-type-weight-medium);
  font-size: var(--gap-type-size-body);
  line-height: var(--gap-type-leading-body);
}
body[data-gap-auth] [data-gap-auth-actions] button { width: 100%; }
body[data-gap-auth] [data-gap-auth-card] button svg { fill: currentColor; }
body[data-gap-auth] [data-gap-auth-utility] button.gap-hui-button {
  min-height: var(--gap-space-8);
  padding: 0;
  border: 0;
  border-radius: var(--gap-radius-item);
  background: transparent;
  box-shadow: none;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  color: var(--gap-color-link);
  font-size: var(--gap-type-size-small);
}
body[data-gap-auth] [data-gap-auth-submit-row]:not([data-gap-auth-fields]) {
  display: grid;
  grid-template-columns: var(--gap-control-height) minmax(0, 1fr);
  gap: var(--gap-space-3);
  width: 100%;
  margin-top: var(--gap-space-1);
}
body[data-gap-auth] [data-gap-auth-submit-row] > button[type="submit"] { width: 100%; }
body[data-gap-auth] [data-gap-auth-submit-row] > :only-child { grid-column: 1 / -1; }
body[data-gap-auth] button[data-gap-auth-back] {
  width: var(--gap-control-height);
  padding: 0;
  font-size: 0 !important;
  color: var(--gap-color-muted);
}
body[data-gap-auth] button[data-gap-auth-back] svg { width: var(--gap-space-5); height: var(--gap-space-5); font-size: var(--gap-space-5); }
body[data-gap-auth] [data-gap-auth-card] md-ripple { display: none; }

/* Real HeroUI TextField + Label + Input/InputGroup. Customisation changes tokens
   and dimensions, keeping the official single-line anatomy and state rules. */
body[data-gap-auth] {
  --gap-hui-field-background: var(--gap-color-field);
  --gap-hui-field-hover: var(--gap-color-field-hover);
  --gap-hui-field-focus: var(--gap-color-field);
  --gap-hui-field-border: var(--gap-color-field-border);
  --gap-hui-field-foreground: var(--gap-color-field-text);
  --gap-hui-field-placeholder: var(--gap-color-field-placeholder);
}
body[data-gap-auth] [data-gap-field-replaced] { display: none !important; }
body[data-gap-auth] [data-gap-auth-field-root] { min-width: 0; width: 100%; }
body[data-gap-auth] .gap-hui-textfield { gap: var(--gap-space-2); width: 100%; }
body[data-gap-auth] .gap-hui-label { font-family: var(--fonts-primary); font-size: var(--gap-type-size-small); line-height: var(--gap-space-5); }
body[data-gap-auth] :is(.gap-hui-input, .gap-hui-input-group) {
  width: 100%;
  min-width: 0;
  height: var(--gap-control-height);
  box-sizing: border-box;
}
body[data-gap-auth] :is(.gap-hui-input, .gap-hui-input-group__input) {
  min-width: 0;
  font-family: var(--fonts-primary);
  font-size: var(--gap-type-size-body);
  line-height: var(--gap-space-6);
  padding-inline: var(--gap-space-4);
  caret-color: var(--gap-color-action);
}
body[data-gap-auth] .gap-hui-input-group__suffix { border: 0; padding-inline: var(--gap-space-1); }
body[data-gap-auth] [data-gap-auth-field-root] button.gap-hui-button {
  width: var(--gap-space-9);
  min-width: var(--gap-space-9);
  height: var(--gap-space-9);
  min-height: var(--gap-space-9);
  padding: 0;
  border-radius: var(--gap-radius-item);
  color: var(--gap-color-muted);
}
body[data-gap-auth] [data-gap-auth-field-root] button svg { width: var(--gap-space-5); height: var(--gap-space-5); fill: none; }
body[data-gap-auth] [data-gap-auth-card] :is(a, button):focus-visible {
  outline: var(--gap-focus-width) solid var(--gap-color-focus);
  outline-offset: var(--gap-focus-offset);
}
@media (hover: hover) {
  body[data-gap-auth] [data-gap-auth-utility] button:hover { color: var(--gap-color-text); text-decoration: underline; text-underline-offset: var(--gap-space-1); }
}

@media (max-width: 959px) {
  body[data-gap-auth] #root::before {
    height: var(--gap-layout-auth-artwork-height-mobile);
    background-position: 22% top;
    background-size: auto var(--gap-layout-auth-artwork-height-mobile);
    mask-image: linear-gradient(to bottom, black 68%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black 68%, transparent);
  }
  body[data-gap-auth] [data-gap-auth-layout] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 0;
    padding: var(--gap-space-4) var(--gap-space-4) var(--gap-space-8);
  }
  body[data-gap-auth] [data-gap-auth-nav] { align-self: start; }
  body[data-gap-auth] [data-gap-auth-nav] > div:first-child::before { width: var(--gap-layout-auth-nav-width-mobile); }
  body[data-gap-auth] [data-gap-auth-card] {
    grid-column: 1;
    justify-self: center;
    align-self: start;
    margin-top: var(--gap-layout-auth-card-offset-mobile);
    margin-bottom: 0;
    padding: var(--gap-space-6);
    border-radius: var(--gap-radius-panel);
  }
  body[data-gap-auth] [data-gap-brand-tagline] { font-size: var(--gap-type-size-auth-heading-min); }
}

body[data-gap-auth][data-gap-blur="false"] [data-gap-auth-card] {
  background: var(--gap-color-panel-solid) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@supports not (backdrop-filter: blur(1px)) {
  body[data-gap-auth][data-gap-mode] [data-gap-auth-card] { background: var(--gap-color-panel-solid) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  body[data-gap-auth][data-gap-mode] [data-gap-auth-card] {
    background: var(--gap-color-panel-solid) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-gap-auth] [data-gap-auth-card] { animation: none; }
  body[data-gap-auth] :is(button, mdui-text-field)::part(container) { transition: none; }
  body[data-gap-auth] button { transition: none !important; transform: none !important; }
}