/* "Continue with Oraqel Code" (oraqel-button.js). Apple's button anatomy in the Gathering's
   colours: Obsidian on light pages, Ivory on dark ones, Gold outline inside cards. 56px tall,
   the email button's width, a 20px Inter 500 label, the seal at 24px left of it. */
.oraqel-btn {
  --oraqel-obsidian: #07070A;
  --oraqel-obsidian-raised: #1A1820;
  --oraqel-ivory: #FAF8F2;
  --oraqel-ivory-label: #EDE7DA;
  --oraqel-gold: var(--gold, #9C6918);
  --oraqel-rim: #C9A75A;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 52px; min-height: 52px; padding: 0 24px; margin: 0;
  font-family: 'Inter', var(--sans, system-ui, sans-serif); font-weight: 500; font-size: 20px; line-height: 1; letter-spacing: 0;
  border-radius: 999px; border: 1.5px solid var(--oraqel-rim); cursor: pointer;
  /* The site's 3D pill: a lit top edge, a dark lip underneath and a soft drop that grows on the lift. */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 2px 0 #000, 0 8px 18px -8px rgb(7 7 10 / 45%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.oraqel-btn .oraqel-seal { flex: 0 0 24px; width: 24px; height: 24px; display: block; }
.oraqel-btn-label { white-space: nowrap; }
.oraqel-btn:hover { transform: translateY(-2px); border-color: #E8CF95;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 4px 0 #000, 0 16px 28px -10px rgb(7 7 10 / 50%), 0 0 0 3px rgb(201 167 90 / 18%); }
.oraqel-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 1px 0 #000, 0 4px 10px -6px rgb(7 7 10 / 45%); }
.oraqel-btn:focus-visible { outline: 2px solid var(--oraqel-gold); outline-offset: 3px; }
.oraqel-btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.oraqel-btn--obsidian, .oraqel-btn--auto { background: linear-gradient(180deg, #1F1C25 0%, var(--oraqel-obsidian) 100%); color: var(--oraqel-ivory-label); }
.oraqel-btn--obsidian:hover, .oraqel-btn--auto:hover { background: linear-gradient(180deg, #2A2631 0%, #0F0E13 100%); }
.oraqel-btn--ivory { background: var(--oraqel-ivory); color: var(--oraqel-obsidian); box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgb(91 72 36 / 45%), 0 8px 18px -8px rgb(7 7 10 / 30%); }
.oraqel-btn--outline { background: transparent; color: var(--ink, #201F1B); box-shadow: 0 2px 0 rgb(91 72 36 / 35%), 0 8px 18px -10px rgb(7 7 10 / 25%); }
.oraqel-btn--outline:hover { background: rgba(156, 105, 24, 0.06); }

/* On a dark page the default turns Ivory, as Apple's white button does. */
html[data-theme="dark"] .oraqel-btn--auto { background: var(--oraqel-ivory); color: var(--oraqel-obsidian); }
html[data-theme="dark"] .oraqel-btn--outline { color: var(--oraqel-ivory-label); }

.oraqel-btn--mark { width: 52px; min-width: 52px; padding: 0; flex: 0 0 52px; }

/* "or" between Oraqel and the email code. */
.oraqel-or { display: flex; align-items: center; gap: 14px; margin: 22px 0 6px; color: var(--ink-faint, #686257); font-size: 18px; line-height: 1.4; }
.oraqel-or::before, .oraqel-or::after { content: ""; flex: 1; height: 1px; background: var(--hair-deep, rgba(91, 72, 36, 0.3)); }

/* The page behind the window. */
.oraqel-scrim { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(7, 7, 10, 0.62); }
.oraqel-scrim-card { max-width: 440px; width: 100%; background: var(--parchment, #FFFFFF); color: var(--ink, #201F1B);
  border: 1.5px solid rgb(201 167 90 / 55%); border-radius: 22px; padding: 30px 26px 24px; text-align: center; box-shadow: 0 24px 60px -12px rgba(7, 7, 10, 0.45); }
.oraqel-scrim-card .oraqel-seal { display: block; margin: 0 auto 14px; }
.oraqel-scrim-text { font-size: 20px; line-height: 1.5; margin: 0 0 18px; }
.oraqel-scrim-cancel { font-family: inherit; font-size: 20px; font-weight: 500; color: var(--burgundy, #27251F); cursor: pointer;
  background: transparent; border: 1.5px solid rgb(91 72 36 / 35%); border-radius: 999px; padding: 10px 28px; min-height: 48px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.oraqel-scrim-cancel:hover { transform: translateY(-2px); border-color: var(--gold, #9C6918); box-shadow: 0 8px 18px -10px rgb(7 7 10 / 35%); }
.oraqel-scrim-cancel:focus-visible { outline: 2px solid var(--gold, #9C6918); outline-offset: 3px; }

/* "Signed in with Oraqel Code · Disconnect" on the account. */
.oraqel-linked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 18px; line-height: 1.5; color: var(--ink-soft, #49473F); }
.oraqel-linked .oraqel-seal { flex: 0 0 24px; }
/* Its buttons meet the 20px button floor; .link-btn elsewhere is unchanged. */
.oraqel-linked .link-btn.oraqel-action { font-size: 20px; min-height: 44px; }

.oraqel-btn[hidden], .oraqel-or[hidden], .oraqel-linked[hidden], .oraqel-scrim[hidden] { display: none; }

/* Inside the "Your Oraqel Code" card (account-family.js), the connection is the card's footer. */
.zgf-oraqel .oraqel-linked { margin: 0; padding-top: 14px; border-top: 1px solid var(--zg-line, var(--hair, rgba(91, 72, 36, 0.15))); color: var(--zg-muted, var(--ink-soft, #49473F)); }
.zgf-oraqel .msg { margin: 0; }

/* "Last used", like Apple's: on the way this browser last signed in. */
.oraqel-last { position: absolute; top: 0; right: 22px; z-index: 2; transform: translateY(-62%); pointer-events: none; white-space: nowrap;
  padding: 4px 14px; border-radius: 999px; font-size: 17px; line-height: 1.2; font-weight: 600; letter-spacing: 0.02em; color: #1A1406;
  background: linear-gradient(180deg, #F3DC98 0%, #DDB96B 55%, #C7A051 100%); border: 1px solid rgb(120 90 38 / 45%);
  box-shadow: inset 0 1px 0 rgb(255 248 226 / 70%), 0 4px 10px -4px rgb(7 7 10 / 40%); }
.oraqel-signin { position: relative; }

/* "Connect Oraqel Code" (mountConnect) and its one status line. */
.oraqel-connect-msg { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--zg-muted, var(--ink-soft, #49473F)); }
.oraqel-connect-msg[hidden], .oraqel-connect-btn[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .oraqel-btn, .oraqel-btn:hover { transition: none; transform: none; }
}