/* Product-local composition for the public FoundTag access screens.
   Green OS tokens and public hooks remain the source of component behavior. */

.j2l-access.gos-auth-layout {
  --j2l-access-telegram-start: #2AABEE;
  --j2l-access-telegram-end: #229ED9;
  display: flex;
  min-width: 0;
  min-height: 100dvh;
  flex-direction: column;
  padding: 0;
  overflow-x: hidden;
}

.j2l-access .gos-topbar {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  padding-inline: clamp(var(--gos-space-4), 5vw, var(--gos-space-8));
}

.j2l-access__brand {
  gap: var(--gos-space-2);
}

.j2l-access__brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.j2l-access__main {
  display: grid;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  place-items: center;
  padding: clamp(var(--gos-space-6), 7vw, var(--gos-space-12)) var(--gos-layout-page-padding);
}

.j2l-access-card {
  width: min(100%, 28rem);
  min-width: 0;
}

.j2l-access-card--activation,
.j2l-access-card--pin { width: min(100%, 28rem); }

.j2l-access-card > .gos-card__body {
  display: grid;
  min-width: 0;
  gap: var(--gos-space-5);
  padding: clamp(var(--gos-space-5), 4vw, var(--gos-space-8));
}

.j2l-access h1,
.j2l-access p { margin-block: 0; }

.j2l-access h1 {
  font-size: clamp(1.55rem, 4vw, 1.8rem);
  line-height: 1.16;
  font-weight: var(--gos-font-weight-semibold);
  letter-spacing: -0.03em;
}

.j2l-access__lead {
  max-width: 37rem;
}

.j2l-access__consent {
  max-width: 100%;
}

.j2l-access__consent a {
  text-underline-offset: 0.16em;
}

.j2l-access__actions {
  display: grid;
  min-width: 0;
  gap: var(--gos-space-3);
}

.j2l-access .gos-button.j2l-access__provider {
  width: 100%;
  min-width: 0;
  white-space: normal;
  text-align: center;
}

.j2l-access .j2l-access__provider--telegram {
  border-color: var(--j2l-access-telegram-end);
  background: linear-gradient(135deg, var(--j2l-access-telegram-start), var(--j2l-access-telegram-end));
  color: #fff;
}

.j2l-access .j2l-access__provider--telegram:hover {
  border-color: var(--j2l-access-telegram-end);
  filter: brightness(0.96);
}

.j2l-access .j2l-access__provider--telegram:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--gos-focus-width) color-mix(in srgb, var(--j2l-access-telegram-end) 28%, transparent);
}

.j2l-access .j2l-access__provider--max {
  border-color: #111111;
  background: #111111;
  color: #fff;
}

.j2l-access .j2l-access__provider--max:hover {
  border-color: #000;
  background: #000;
}

.j2l-access .j2l-access__provider:disabled,
.j2l-access .j2l-access__provider[aria-disabled="true"],
.j2l-access .j2l-access__provider.is-disabled {
  filter: none;
  opacity: 0.48;
  transform: none;
}

.j2l-access__provider-icon {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  place-items: center;
}

.j2l-access__provider-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.j2l-access__inline-alert {
  grid-template-columns: auto minmax(0, 1fr);
  margin: 0;
}

.j2l-access__alert-mark {
  display: grid;
  width: 1.125rem;
  height: 1.125rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--gos-radius-full);
  font-size: 0.7rem;
  line-height: 1;
  font-weight: var(--gos-font-weight-bold);
}

.j2l-access__code-row {
  width: 100%;
  min-width: 0;
}

.j2l-access .code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gos-space-3);
  user-select: none;
}

.j2l-access .code-box {
  display: flex;
  min-width: 0;
  gap: var(--gos-space-2);
}

.j2l-access .code-box .j2l-access__digit {
  width: clamp(1.75rem, 7vw, 3rem);
  min-width: 0;
  height: 3.25rem;
  padding: 0;
  text-align: center;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  line-height: 1;
  font-weight: var(--gos-font-weight-bold);
}

.j2l-access-card--activation .code-box .j2l-access__digit {
  width: clamp(1.75rem, 5vw, 2.2rem);
}

.j2l-access-card--pin .code-box .j2l-access__digit {
  width: clamp(2.2rem, 7vw, 3rem);
}

.j2l-access .code-sep,
.j2l-access .sep {
  flex: 0 0 auto;
  color: var(--gos-color-text-tertiary);
  font-size: var(--gos-type-title-md-size);
  line-height: 1;
  font-weight: var(--gos-font-weight-semibold);
}

.j2l-access__form {
  display: grid;
  min-width: 0;
  gap: var(--gos-space-5);
}

.j2l-access__status {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  margin: 0;
}

.j2l-access__status:empty { display: none; }

.j2l-access__status.text-green {
  border-color: var(--gos-color-status-success-border);
  background: var(--gos-color-status-success-soft);
  color: var(--gos-color-status-success);
}

.j2l-access__status.text-red {
  border-color: var(--gos-color-status-danger);
  background: var(--gos-color-status-danger-soft);
  color: var(--gos-color-status-danger-strong);
}

.j2l-access__hint {
  color: var(--gos-color-text-secondary);
}

.j2l-access__provider-links {
  display: grid;
  min-width: 0;
  gap: var(--gos-space-3);
}

.j2l-access__provider-links > .gos-button {
  width: 100%;
}

.j2l-access__switch {
  color: var(--gos-color-text-link);
  font-size: var(--gos-type-body-sm-size);
  line-height: var(--gos-type-body-sm-line);
  text-underline-offset: 0.16em;
}

.j2l-access__wait,
.j2l-access__spinner {
  display: flex;
  align-items: center;
  gap: var(--gos-space-2);
  color: var(--gos-color-text-secondary);
}

.j2l-access__spinner { justify-content: center; }

.j2l-access__qr {
  min-width: 0;
  overflow-wrap: anywhere;
}

.j2l-access__qr .g-code-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gos-space-2);
  align-items: center;
}

/* Dynamic fallback controls are emitted by the existing login script. */
.j2l-access__qr .ui-btn,
.j2l-access__qr a:not(.gos-button) {
  display: inline-flex;
  min-height: var(--gos-component-height-sm);
  align-items: center;
  justify-content: center;
  padding-inline: var(--gos-space-3);
  border: var(--gos-border-width-default) solid var(--gos-color-border-strong);
  border-radius: var(--gos-component-radius-control);
  background: var(--gos-color-surface);
  color: var(--gos-color-text-primary);
  font-size: var(--gos-type-label-md-size);
  line-height: var(--gos-type-label-md-line);
  font-weight: var(--gos-font-weight-semibold);
  text-decoration: none;
}

.j2l-access__qr .ui-btn:hover,
.j2l-access__qr a:not(.gos-button):hover {
  border-color: var(--gos-color-brand-accent);
  background: var(--gos-color-action-primary-soft);
}

.j2l-access__qr #openMaxNow {
  border-color: #111111;
  background: #111111;
  color: #fff;
}

.j2l-access__qr #openMaxNow:hover {
  border-color: #000;
  background: #000;
}

.j2l-access__pin-status {
  grid-template-columns: minmax(0, 1fr);
}

.j2l-access__pin-status:empty { display: none; }

.j2l-access :where(button, a, input):focus-visible {
  outline-offset: var(--gos-focus-offset);
}

@media (max-width: 47.99rem) {
  .j2l-access__main {
    padding-inline: var(--gos-space-4);
  }

  .j2l-access .code-row {
    gap: var(--gos-space-1);
  }

  .j2l-access .code-box {
    gap: var(--gos-space-1);
  }

  .j2l-access .code-box .j2l-access__digit {
    width: clamp(1.5rem, calc((100vw - 120px) / 8), 2rem);
    height: 3rem;
  }

  .j2l-access-card--pin .code-box .j2l-access__digit {
    width: clamp(2.15rem, 10vw, 2.75rem);
  }

  .j2l-access-card > .gos-card__body {
    padding: var(--gos-space-5);
  }
}

@media (max-width: 22.5rem) {
  .j2l-access .code-box .j2l-access__digit {
    font-size: 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .j2l-access *,
  .j2l-access *::before,
  .j2l-access *::after {
    animation-duration: var(--gos-motion-duration-instant) !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: var(--gos-motion-duration-instant) !important;
  }
}