#access-panel .auth-pane[data-auth-pane="register"],
#access-panel .apps-entry-auth__status {
  position: relative;
}

#access-panel [data-registration-gate-main],
#access-panel [data-registration-gate-tail] {
  display: none;
}

#access-panel[data-registration-gate-enabled="true"][data-auth-mode="register"][data-registration-gate-state]:not([data-registration-gate-state="unlocked"]) [data-registration-gate-form-owner],
#access-panel[data-registration-gate-enabled="true"][data-auth-mode="register"][data-registration-gate-state]:not([data-registration-gate-state="unlocked"]) [data-registration-gate-legal-owner] {
  visibility: hidden;
  pointer-events: none;
}

#access-panel[data-registration-gate-enabled="true"][data-auth-mode="register"][data-registration-gate-state]:not([data-registration-gate-state="unlocked"]) [data-registration-gate-main] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  min-width: 0;
  overflow: auto;
  color: #fff8e5;
}

#access-panel[data-registration-gate-enabled="true"][data-auth-mode="register"][data-registration-gate-state]:not([data-registration-gate-state="unlocked"]) [data-registration-gate-tail] {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  min-width: 0;
  overflow: auto;
  color: #fff8e5;
}

#access-panel[data-registration-gate-enabled="true"][data-auth-mode="register"][data-registration-gate-state]:not([data-registration-gate-state="unlocked"]):not([data-registration-gate-state="unlocking"]) [data-registration-gate-main],
#access-panel[data-registration-gate-enabled="true"][data-auth-mode="register"][data-registration-gate-state]:not([data-registration-gate-state="unlocked"]):not([data-registration-gate-state="unlocking"]) [data-registration-gate-tail] {
  animation: registration-gate-appear 180ms ease-out both;
}

#access-panel [data-registration-gate-main] {
  align-content: safe center;
  justify-items: center;
  gap: 4px;
  padding: 4px 8px;
}

/* Owner decision 2026-08-19: the lock says nothing on a wrong code or a failure - it
   simply does not open. The node stays in the accessibility tree with its live region so
   a screen reader still hears the outcome, but it paints nothing and reserves no space. */
#access-panel [data-registration-gate-feedback] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* With no visible feedback line while the lock is closed, the status row must not hold a
   reserve either: that reserve was the empty band under the button. */
#access-panel[data-registration-gate-enabled="true"][data-auth-mode="register"][data-registration-gate-state]:not([data-registration-gate-state="unlocked"]) .apps-entry-auth__status {
  min-height: 0;
}

#access-panel [data-registration-gate-tail] {
  align-content: safe center;
  justify-items: center;
  gap: 0;
  padding: 0 10px;
  color: rgba(247, 241, 219, 0.86);
  text-align: center;
}

#access-panel .registration-code-gate__mechanism {
  display: grid;
  width: min(100%, 276px);
}

#access-panel .registration-code-gate__wheels {
  display: grid;
  grid-template-columns: repeat(4, minmax(36px, 1fr));
  gap: 5px;
  /* Room for the lower arrow's pointer target, which extends below its visible box.
     Without it the extended target would sit over the top of the unlock handle. */
  margin-bottom: 18px;
}

#access-panel .registration-code-gate__wheel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(241, 208, 113, 0.38);
  border-radius: 10px;
  background: linear-gradient(180deg, #4a3a1a, #c79a3f 30%, #8a6a2f 70%, #4a3a1a);
  touch-action: pinch-zoom;
}

#access-panel .registration-code-gate__wheel[data-registration-gate-selected="true"] {
  border-color: #fff2af;
  box-shadow: 0 0 0 1px rgba(255, 242, 175, 0.36);
}

#access-panel .registration-code-gate__wheel input,
#access-panel .registration-code-gate__handle {
  box-sizing: border-box;
  min-height: 44px;
  border: 0;
  color: inherit;
  font: inherit;
}

#access-panel .registration-code-gate__wheel input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border-radius: 9px;
  background: rgba(4, 5, 8, 0.48);
  color: #eae6da;
  text-align: center;
  font-size: 27px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-shadow: 0 0 5px rgba(234, 230, 218, 0.28);
  outline: none;
}

#access-panel .registration-code-gate__step {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 20px;
  min-height: 20px;
  min-width: 0;
  width: 100%;
  border: none;
  border-radius: 9px;
  color: rgba(35, 26, 10, 0.65);
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  transition: color 0.1s ease, transform 0.1s ease;
}

/* The visible arrow is compact so one wheel is not a tower, but the pointer target stays
   44px as APPS-AUTH-ENTRY-RECOVERY-008 requires. The missing height is taken OUTWARD,
   away from the digit, so the digit keeps its own full 44px clickable box. */
#access-panel .registration-code-gate__step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 44px;
}

#access-panel .registration-code-gate__step[data-registration-gate-step="up"]::after {
  bottom: 0;
}

#access-panel .registration-code-gate__step[data-registration-gate-step="down"]::after {
  top: 0;
}

#access-panel .registration-code-gate__step:hover {
  color: rgba(35, 26, 10, 0.95);
}

#access-panel .registration-code-gate__step:active {
  transform: scale(0.85);
}

#access-panel .registration-code-gate__handle {
  width: min(100%, 276px);
  min-height: 48px;
  border: 1px solid rgba(241, 208, 113, 0.5);
  border-radius: 999px;
  color: #3a2606;
  background: linear-gradient(180deg, #fce8ac, #e9bc58 55%, #c49735);
  font-weight: 900;
  animation: registration-gate-gold-pulse 3.8s ease-in-out infinite;
}

@keyframes registration-gate-gold-pulse {
  0% { box-shadow: -4px 3px 15px -4px rgba(241, 208, 113, .32); }
  50% { box-shadow: 4px 3px 15px -4px rgba(241, 208, 113, .48); }
  100% { box-shadow: -4px 3px 15px -4px rgba(241, 208, 113, .32); }
}

#access-panel .registration-code-gate :is(input, button):focus-visible {
  outline: 2px solid #fff2af;
  outline-offset: 2px;
}

#access-panel .registration-code-gate__eyebrow,
#access-panel .registration-code-gate__copy,
#access-panel .registration-code-gate__feedback {
  margin: 0;
}

#access-panel .registration-code-gate__eyebrow {
  color: rgba(241, 208, 113, 0.88);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#access-panel .registration-code-gate__copy,
#access-panel .registration-code-gate__feedback {
  font-size: 12px;
  line-height: 1.25;
}

#access-panel .registration-code-gate__feedback {
  min-height: 15px;
  color: #ffc8c8;
}

#access-panel[data-auth-mode="register"][data-registration-gate-state="unlocking"] [data-registration-gate-main],
#access-panel[data-auth-mode="register"][data-registration-gate-state="unlocking"] [data-registration-gate-tail] {
  animation: registration-gate-yield 180ms ease-out both;
}

@keyframes registration-gate-appear {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes registration-gate-yield {
  to { opacity: 0; transform: scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  #access-panel[data-auth-mode="register"][data-registration-gate-state="unlocking"] [data-registration-gate-main],
  #access-panel[data-auth-mode="register"][data-registration-gate-state="unlocking"] [data-registration-gate-tail],
  #access-panel[data-registration-gate-enabled="true"][data-auth-mode="register"][data-registration-gate-state]:not([data-registration-gate-state="unlocked"]):not([data-registration-gate-state="unlocking"]) [data-registration-gate-main],
  #access-panel[data-registration-gate-enabled="true"][data-auth-mode="register"][data-registration-gate-state]:not([data-registration-gate-state="unlocked"]):not([data-registration-gate-state="unlocking"]) [data-registration-gate-tail] { animation: none; }
  #access-panel .registration-code-gate__handle { animation: none; }
}