/* ═══════════════════════════════════════════════════════════════════
   Inkgility Auth Suite — the single sign-in / sign-up design system.

   Powers all four auth surfaces so a customer sees one card everywhere:
     • <x-auth-modal>            the site-wide tabbed popup
     • studio.blade.php          the Design Studio hard gate
     • auth/*.blade.php          the standalone /login, /register … pages
     • components/layouts/auth   the wrapper those pages sit in

   CONFLICT POLICY — this file is loaded next to public-site.css, home.css,
   portal.css, pdp.css and studio.css, several of which already own generic
   names like .card, .title, .field, .row, .orb, .submit and generic custom
   properties like --border, --muted, --accent. So, without exception:
     1. every class is prefixed `inkauth-`;
     2. every custom property is prefixed `--ia-`;
     3. tokens are declared on `.inkauth` (never :root), so nothing leaks
        out of the card and no host page can redefine them by accident;
     4. every visible element sets its own font-family, color and background
        rather than inheriting — `portal.css a{}` and `home.css body *{}`
        both reach inside this subtree otherwise.

   Light is the base; dark is `[data-theme="dark"]`, matching x-theme-boot,
   which REMOVES the attribute for light rather than setting data-theme=light.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────────────────── */

.inkauth {
  --ia-bg: #F1ECE2;
  --ia-bg2: #F8F5EE;
  --ia-card: #FFFFFF;
  --ia-field: #F8F5EE;
  --ia-text: #1A1218;
  --ia-muted: rgba(32, 26, 20, .58);
  --ia-border: rgba(32, 26, 20, .13);
  --ia-accent: #7C3AED;
  --ia-accent2: #A855F7;
  --ia-accent-soft: rgba(124, 58, 237, .10);
  --ia-ink: #100D18;
  --ia-ink2: #241A33;
  --ia-ok: #12A150;
  --ia-danger: #C0392B;
  --ia-danger-soft: rgba(192, 57, 43, .09);
  --ia-danger-border: rgba(192, 57, 43, .30);
  --ia-shadow: 0 30px 80px -20px rgba(40, 20, 70, .35);
  --ia-scrim: rgba(26, 18, 24, .55);

  --ia-sans: 'Inter', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ia-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --ia-mono: 'JetBrains Mono', 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-theme="dark"] .inkauth {
  --ia-bg: #08060D;
  --ia-bg2: #0A0810;
  --ia-card: #120E1C;
  --ia-field: #0C0914;
  --ia-text: #F8F5EE;
  --ia-muted: rgba(248, 245, 238, .60);
  --ia-border: rgba(248, 245, 238, .11);
  --ia-accent: #C58BEB;
  --ia-accent2: #A855F7;
  --ia-accent-soft: rgba(197, 139, 235, .12);
  --ia-ink: #0B0812;
  --ia-ink2: #1C1430;
  --ia-danger: #FCA5A5;
  --ia-danger-soft: rgba(220, 38, 38, .12);
  --ia-danger-border: rgba(220, 38, 38, .35);
  --ia-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
  --ia-scrim: rgba(6, 4, 10, .72);
}

/* ─── Shells: overlay (modal) and page (standalone) ──────────────── */

.inkauth-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--ia-scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.inkauth-overlay.is-open {
  display: flex;
}

/* The studio gate is a hard gate — always open, never dismissible. */
.inkauth-overlay.is-gate {
  z-index: 9999;
  display: flex;
}

.inkauth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 20px 56px;
  position: relative;
  z-index: 1;
}

.inkauth-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin: auto;
}

/* ─── Card ───────────────────────────────────────────────────────── */

.inkauth-card {
  background: var(--ia-card);
  border: 1px solid var(--ia-border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--ia-shadow);
  color: var(--ia-text);
  font-family: var(--ia-sans);
  text-align: left;
}

/* Dark brand band — stays dark in both themes; it hosts the white logo. */
.inkauth-brand {
  background: linear-gradient(135deg, var(--ia-ink) 0%, var(--ia-ink2) 100%);
  padding: 16px 30px 14px;
  text-align: center;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.inkauth-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 80% -20%, rgba(168, 85, 247, .35), transparent 55%);
  pointer-events: none;
}

.inkauth-brand-logo {
  height: 46px;
  width: auto;
  max-width: 78%;
  position: relative;
  z-index: 1;
  display: inline-block;
}

.inkauth-brand-tag {
  display: block;
  position: relative;
  z-index: 1;
  font-family: var(--ia-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(248, 245, 238, .6);
}

.inkauth-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  color: rgba(248, 245, 238, .8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  transition: background .2s, color .2s, border-color .2s;
}

.inkauth-close:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}

.inkauth-close svg {
  width: 15px;
  height: 15px;
}

.inkauth-body {
  padding: 26px 30px 28px;
}

/* ─── Headings ───────────────────────────────────────────────────── */

.inkauth-title {
  font-family: var(--ia-display);
  font-weight: 400;
  font-size: 1.95rem;
  line-height: 1.08;
  margin: 0 0 6px;
  letter-spacing: .005em;
  color: var(--ia-text);
}

.inkauth-sub {
  font-family: var(--ia-sans);
  font-size: .86rem;
  color: var(--ia-muted);
  margin: 0 0 20px;
  line-height: 1.45;
}

/* ─── Segmented tabs ─────────────────────────────────────────────── */

.inkauth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ia-field);
  border: 1px solid var(--ia-border);
  border-radius: 60px;
  padding: 4px;
  margin-bottom: 20px;
}

.inkauth-glide {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: var(--ia-card);
  border: 1px solid var(--ia-accent);
  border-radius: 60px;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 3px 10px rgba(124, 58, 237, .14);
  z-index: 0;
}

.inkauth[data-mode="signup"] .inkauth-glide {
  transform: translateX(100%);
}

.inkauth-tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  cursor: pointer;
  padding: .62rem 0;
  font-family: var(--ia-sans);
  font-size: .9rem;
  font-weight: 600;
  color: var(--ia-muted);
  transition: color .2s;
}

.inkauth-tab.is-on {
  color: var(--ia-accent);
}

/* ─── Federated sign-in ──────────────────────────────────────────── */

.inkauth-oauth {
  display: grid;
  gap: .5rem;
  margin-bottom: 14px;
}

.inkauth-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: .62rem 1rem;
  background: var(--ia-card);
  color: var(--ia-text);
  border: 1px solid var(--ia-border);
  border-radius: 60px;
  font-family: var(--ia-sans);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s, transform .12s, background .2s;
}

.inkauth-oauth-btn:hover {
  border-color: var(--ia-accent);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--ia-text);
}

.inkauth-oauth.is-mini {
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

.inkauth-oauth.is-mini .inkauth-oauth-btn {
  padding: .6rem;
  gap: 0;
}

.inkauth-oauth.is-mini .inkauth-oauth-btn span {
  display: none;
}

.inkauth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 14px 0;
  color: var(--ia-muted);
  font-family: var(--ia-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.inkauth-divider::before,
.inkauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ia-border);
}

/* ─── Fields ─────────────────────────────────────────────────────── */

.inkauth-field {
  margin-bottom: 12px;
}

.inkauth-label {
  display: block;
  font-family: var(--ia-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ia-muted);
  margin-bottom: .35rem;
}

.inkauth-wrap {
  position: relative;
}

.inkauth-input {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--ia-border);
  border-radius: 11px;
  font-family: var(--ia-sans);
  font-size: .92rem;
  color: var(--ia-text);
  background: var(--ia-field);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.inkauth-input::placeholder {
  color: var(--ia-muted);
  opacity: .75;
}

.inkauth-input:focus {
  border-color: var(--ia-accent);
  box-shadow: 0 0 0 3px var(--ia-accent-soft);
}

/* Chrome paints autofilled fields its own pale yellow-white and ignores
   `background`, which leaves saved credentials sitting in two light boxes on
   the dark card — with a near-invisible reveal icon on top. The only lever
   that works is an inset shadow big enough to cover the field, plus
   text-fill-color for the value itself. The absurd transition delay is the
   standard trick to stop Chrome re-painting its own colour a frame later. */
.inkauth-input:-webkit-autofill,
.inkauth-input:-webkit-autofill:hover,
.inkauth-input:-webkit-autofill:focus,
.inkauth-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ia-text);
  -webkit-box-shadow: 0 0 0 100px var(--ia-field) inset;
  box-shadow: 0 0 0 100px var(--ia-field) inset;
  caret-color: var(--ia-text);
  transition: background-color 100000s ease-in-out 0s;
}

.inkauth-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--ia-field) inset, 0 0 0 3px var(--ia-accent-soft);
  box-shadow: 0 0 0 100px var(--ia-field) inset, 0 0 0 3px var(--ia-accent-soft);
}

/* Leave room for the reveal button so a long value never slides under it. */
.inkauth-wrap:has(> .inkauth-peek) .inkauth-input {
  padding-right: 2.4rem;
}

.inkauth-peek {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ia-muted);
  padding: 6px;
  line-height: 0;
  transition: color .2s;
}

.inkauth-peek:hover,
.inkauth-peek.is-on {
  color: var(--ia-accent);
}

.inkauth-peek svg {
  width: 17px;
  height: 17px;
}

.inkauth-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}

.inkauth-hint {
  font-family: var(--ia-sans);
  font-size: .72rem;
  margin-top: .35rem;
  color: var(--ia-muted);
}

.inkauth-hint.is-ok {
  color: var(--ia-ok);
}

.inkauth-hint.is-taken {
  color: var(--ia-danger);
}

/* ─── Row, remember, forgot, terms ───────────────────────────────── */

.inkauth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 2px 0 14px;
}

.inkauth-remember {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--ia-sans);
  font-size: .8rem;
  color: var(--ia-muted);
  cursor: pointer;
}

.inkauth-remember input {
  width: 15px;
  height: 15px;
  accent-color: var(--ia-accent);
  cursor: pointer;
  margin: 0;
}

.inkauth-forgot {
  font-family: var(--ia-mono);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ia-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color .2s;
}

.inkauth-forgot:hover {
  color: var(--ia-accent);
  text-decoration: none;
}

.inkauth-tos {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 4px 0 14px;
  font-family: var(--ia-sans);
  font-size: .78rem;
  color: var(--ia-muted);
  line-height: 1.42;
  cursor: pointer;
}

.inkauth-tos input {
  margin: 2px 0 0;
  width: 15px;
  height: 15px;
  accent-color: var(--ia-accent);
  flex-shrink: 0;
}

.inkauth-tos a {
  color: var(--ia-accent);
  text-decoration: none;
}

.inkauth-tos a:hover {
  text-decoration: underline;
}

/* ─── Bot check ────────────────────────────────────────────

   Turnstile in Cloudflare's invisible (interaction-only) mode. There is no
   status row of ours here any more — a bot check the visitor never sees is
   the whole point of invisible, and a row that mirrors a state we only learn
   about through callbacks is one more thing to get wrong.

   NEVER hide, zero-size or display:none the widget itself. Turnstile runs its
   silent challenge inside that iframe, and a widget with no layout box fails
   it — the visitor is left permanently unverified, able to get through only
   when an interactive challenge happens to appear. That was a real regression
   here; do not reintroduce it. Cloudflare collapses its own container to
   nothing on a silent pass, so we size nothing and only centre it. */

.inkauth-verify {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inkauth-verify .cf-turnstile {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Cloudflare require their Privacy/Terms links to stay visible whenever the
   widget itself is hidden, which invisible mode does for almost every
   visitor. In the common case this line is the only thing the block draws. */
.inkauth-verify-note {
  font-family: var(--ia-sans);
  font-size: .62rem;
  line-height: 1.5;
  color: var(--ia-muted);
  text-align: center;
  margin: .5rem 0 16px;
}

.inkauth-verify-note a {
  color: var(--ia-muted);
  text-decoration: underline;
}


/* ─── Feedback ───────────────────────────────────────────────────── */

.inkauth-error {
  background: var(--ia-danger-soft);
  border: 1px solid var(--ia-danger-border);
  color: var(--ia-danger);
  padding: .7rem .9rem;
  border-radius: 11px;
  font-family: var(--ia-sans);
  font-size: .8rem;
  line-height: 1.45;
  margin-bottom: 14px;
  white-space: pre-line;
}

.inkauth-notice {
  background: var(--ia-accent-soft);
  border: 1px solid var(--ia-accent);
  color: var(--ia-text);
  padding: .7rem .9rem;
  border-radius: 11px;
  font-family: var(--ia-sans);
  font-size: .8rem;
  line-height: 1.45;
  margin-bottom: 14px;
}

/* ─── Submit ─────────────────────────────────────────────────────── */

.inkauth-submit {
  width: 100%;
  padding: .86rem 1.2rem;
  color: #fff;
  border: 0;
  border-radius: 60px;
  background: linear-gradient(135deg, var(--ia-accent), var(--ia-accent2));
  font-family: var(--ia-sans);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .005em;
  cursor: pointer;
  transition: transform .14s, box-shadow .2s, opacity .2s;
}

.inkauth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(124, 58, 237, .35);
}

.inkauth-submit:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

/* ─── Footers ────────────────────────────────────────────────────── */

.inkauth-foot {
  text-align: center;
  font-family: var(--ia-sans);
  font-size: .78rem;
  color: var(--ia-muted);
  margin-top: 16px;
}

.inkauth-foot button,
.inkauth-foot a {
  color: var(--ia-accent);
  font-weight: 600;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
}

.inkauth-foot button:hover,
.inkauth-foot a:hover {
  text-decoration: underline;
}

.inkauth-wizard {
  text-align: center;
  font-family: var(--ia-sans);
  font-size: .72rem;
  color: var(--ia-muted);
  margin-top: 10px;
}

.inkauth-wizard a {
  color: var(--ia-accent);
  text-decoration: none;
  font-weight: 500;
}

.inkauth-wizard a:hover {
  text-decoration: underline;
}

.inkauth-legal {
  margin-top: 22px;
  text-align: center;
  font-family: var(--ia-mono);
  font-size: .58rem;
  letter-spacing: .05em;
  color: var(--ia-muted);
}

.inkauth-legal a {
  color: var(--ia-muted);
  text-decoration: underline;
}

/* ─── Panes ──────────────────────────────────────────────────────── */

.inkauth-pane[hidden] {
  display: none;
}

/* No atmosphere rules here on purpose: the standalone auth pages render
   <x-page-atmosphere />, whose orbs already sit behind the card (portal.css
   .pa-static). A second set from this file would double the glow. */

/* ─── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .inkauth-body {
    padding: 22px 20px 24px;
  }

  .inkauth-brand {
    padding: 14px 20px 12px;
  }

  .inkauth-title {
    font-size: 1.7rem;
  }
}

@media (max-width: 380px) {
  .inkauth-two {
    grid-template-columns: 1fr;
  }
}

/* Short viewports: let the card scroll inside the overlay rather than
   clipping the submit button off the bottom. */
@media (max-height: 760px) {
  .inkauth-overlay {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inkauth-glide,
  .inkauth-tab,
  .inkauth-submit,
  .inkauth-oauth-btn,
  .inkauth-input {
    transition: none;
  }

  .inkauth-submit:hover:not(:disabled),
  .inkauth-oauth-btn:hover {
    transform: none;
  }
}