/* Resayil Projects: sign-in / invitation / code screens.
 *
 * Scope: only pages that render Kaneo's shared <AuthPage> (sign-in, sign-up, verify-otp, check-email,
 * forgot/reset password, invitation accept, device, MCP authorize, workspace-restricted notice).
 * web-patch.js adds  data-rs-auth  to that <main>; every rule below hangs off it, so a stale or unpatched
 * page simply looks like stock Kaneo (the brand panel stays hidden).
 *
 * Palette: monochrome only. The form side reads Kaneo's own tokens (--background, --foreground, ...), so it
 * follows the user's theme (html.dark / html.light). The brand panel is always near-black. The only colour
 * is the orange of the Resayil mark inside the panel markup.
 * Motion: opacity + transform only, off when prefers-reduced-motion. Logical properties throughout (RTL safe).
 */

:root {
  --rs-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --rs-panel-w: clamp(440px, 46vw, 720px);
  --rs-bar-h: 60px;
}

/* ---------- brand panel (static markup from index.html; hidden unless an auth page is on screen) ---------- */
.rs-brand { display: none; }

body:has(main[data-rs-auth]) .rs-brand {
  display: flex;
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--rs-bar-h);
  z-index: 5;
  align-items: center;
  padding-inline: 20px;
  background: #0a0a0a;
  color: #fafafa;
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  animation: rs-fade 400ms var(--rs-ease) both;
}

.rs-brand__top { display: flex; align-items: center; gap: 12px; position: relative; }
.rs-brand__mark { width: 30px; height: auto; flex: none; display: block; }
.rs-brand__name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #fafafa; }
.rs-brand__grid, .rs-brand__glow, .rs-brand__ghost, .rs-brand__body, .rs-brand__foot { display: none; }

body:has(main[data-rs-auth]) main[data-rs-auth] {
  padding-block-start: var(--rs-bar-h);
}

/* ---------- desktop: split layout ---------- */
@media (min-width: 1024px) {
  body:has(main[data-rs-auth]) .rs-brand {
    inset-block: 0;
    inset-inline: auto;
    inset-inline-start: 0;
    width: var(--rs-panel-w);
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 44px clamp(40px, 4.4vw, 72px) 36px;
    border-block-end: 0;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
  }
  body:has(main[data-rs-auth]) main[data-rs-auth] {
    padding-block-start: 0;
    /* <main> is a flex item of Kaneo's root row: size it explicitly */
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    margin-inline-start: var(--rs-panel-w);
  }
  .rs-brand__mark { width: 36px; }
  .rs-brand__name { font-size: 16px; }

  .rs-brand__grid, .rs-brand__glow, .rs-brand__ghost { display: block; position: absolute; pointer-events: none; }
  .rs-brand__body { display: block; position: relative; margin-block-start: auto; margin-block-end: clamp(40px, 9vh, 96px); }
  .rs-brand__foot { display: flex; position: relative; }

  /* hairline blueprint grid that fades out from the upper left */
  .rs-brand__grid {
    inset: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 18% 28%, #000 8%, transparent 72%);
            mask-image: radial-gradient(ellipse 85% 70% at 18% 28%, #000 8%, transparent 72%);
  }
  /* very soft light that drifts slowly (transform only) */
  .rs-brand__glow {
    inset-block-start: -20%;
    inset-inline-start: -25%;
    width: 90%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.075), transparent);
    animation: rs-drift 28s ease-in-out infinite alternate;
  }
  /* the Resayil mark as a one-pixel outline, bleeding off the lower corner, drawn once on load */
  .rs-brand__ghost {
    inset-inline-end: -14%;
    inset-block-end: -12%;
    width: 78%;
    height: auto;
    opacity: 0.9;
  }
  .rs-brand__ghost path {
    stroke: rgba(255, 255, 255, 0.11);
    stroke-width: 1;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: rs-draw 2600ms var(--rs-ease) 250ms both;
  }

  .rs-brand__title {
    margin: 0;
    font-size: clamp(2.25rem, 3.5vw, 3.5rem);
    line-height: 1.04;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: #fafafa;
    text-wrap: balance;
    max-width: 13ch;
  }
  .rs-brand__dim { color: rgba(255, 255, 255, 0.52); }
  .rs-brand__lede {
    margin: 22px 0 0;
    max-width: 36ch;
    font-size: 16px;
    line-height: 1.6;
    color: #a3a3a3;
  }
  .rs-brand__foot {
    margin: 0;
    padding-block-start: 18px;
    border-block-start: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
    color: #8f8f8f;
  }

  .rs-brand__top   { animation: rs-rise 700ms var(--rs-ease) 60ms both; }
  .rs-brand__title { animation: rs-rise 800ms var(--rs-ease) 180ms both; }
  .rs-brand__lede  { animation: rs-rise 800ms var(--rs-ease) 300ms both; }
  .rs-brand__foot  { animation: rs-rise 700ms var(--rs-ease) 420ms both; }
}

/* ---------- form column ---------- */
main[data-rs-auth] {
  --rs-muted: color-mix(in srgb, var(--foreground) 66%, var(--background));
  --rs-line: color-mix(in srgb, var(--foreground) 54%, var(--background));
  --rs-hair: color-mix(in srgb, var(--foreground) 12%, var(--background));
}
html.dark main[data-rs-auth] {
  --rs-line: color-mix(in srgb, var(--foreground) 38%, var(--background));
  --rs-hair: color-mix(in srgb, var(--foreground) 11%, var(--background));
}

/* the 40px favicon tile is replaced by the brand panel / top bar */
main[data-rs-auth] img[src^="/favicon.svg"] { display: none; }

main[data-rs-auth] .max-w-\[360px\] { max-width: 384px; }
main[data-rs-auth] .max-w-\[360px\] > .pb-8 { padding-block-end: 28px; gap: 18px; }

main[data-rs-auth] h1 {
  font-size: clamp(1.625rem, 1.2rem + 1vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}
main[data-rs-auth] .text-muted-foreground { color: var(--rs-muted); }
main[data-rs-auth] h1 + p { font-size: 15px; line-height: 1.55; }

/* fields */
main[data-rs-auth] [data-slot="form-label"],
main[data-rs-auth] [data-slot="label"] {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--foreground);
}
main[data-rs-auth] [data-slot="input-control"] {
  border-radius: 10px;
  border-color: var(--rs-line);
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
  box-shadow: none;
  transition: border-color 150ms var(--rs-ease), box-shadow 150ms var(--rs-ease);
}
main[data-rs-auth] [data-slot="input-control"]::before { display: none; }
main[data-rs-auth] [data-slot="input-control"] input {
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  padding-inline: 14px;
}
main[data-rs-auth] [data-slot="input-control"] input::placeholder { color: var(--rs-muted); opacity: 1; }
main[data-rs-auth] [data-slot="input-control"]:hover { border-color: var(--foreground); }
main[data-rs-auth] [data-slot="input-control"]:has(input:focus-visible) {
  border-color: var(--foreground);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--foreground) 16%, transparent);
}
main[data-rs-auth] [data-slot="input-control"]:has(input[aria-invalid="true"]) { border-color: var(--destructive-foreground); }

/* six-digit code */
main[data-rs-auth] [data-input-otp-container] > div > div {
  height: 56px;
  border-radius: 10px;
  border-color: var(--rs-line);
  background: color-mix(in srgb, var(--foreground) 3%, var(--background));
  box-shadow: none;
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
main[data-rs-auth] [data-input-otp-container] > div > div.ring-1 {
  border-color: var(--foreground);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--foreground) 16%, transparent);
}

/* buttons (primary = Kaneo --primary: light button on dark, dark button on light) */
main[data-rs-auth] button[data-slot="button"] {
  height: 48px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
main[data-rs-auth] button[data-slot="button"]:focus-visible,
main[data-rs-auth] a:focus-visible,
main[data-rs-auth] button:not([data-slot]):focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 3px;
  box-shadow: none;
}

/* invitation / error notice */
main[data-rs-auth] [data-slot="alert"] {
  border-radius: 12px;
  border-color: var(--rs-hair);
  background: color-mix(in srgb, var(--foreground) 4%, var(--background));
  padding: 14px 16px;
}
main[data-rs-auth] [data-slot="alert-title"] { font-size: 14px; }
main[data-rs-auth] [data-slot="alert-description"] { font-size: 14px; line-height: 1.5; }

/* footer line under the form (invite-only hint, "Didn't get it?", "Already have an account?") */
main[data-rs-auth] .pt-8 {
  margin-block-start: 28px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--rs-hair);
  font-size: 14px;
  line-height: 1.55;
}

/* page padding: let the form breathe, keep it from touching the panel edge */
main[data-rs-auth] .grow.justify-center { padding-block: 40px; }
@media (min-width: 1024px) {
  main[data-rs-auth] .grow.justify-center { padding-inline: 48px; }
}
@media (max-width: 479px) {
  main[data-rs-auth] .grow.justify-center { padding-inline: 20px; padding-block: 32px 40px; justify-content: flex-start; }
}

/* ---------- entrance ---------- */
@keyframes rs-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rs-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(18%, 14%, 0); }
}

main[data-rs-auth] .max-w-\[360px\] > * { animation: rs-rise 560ms var(--rs-ease) both; }
main[data-rs-auth] .max-w-\[360px\] > :nth-child(2) { animation-delay: 90ms; }
main[data-rs-auth] .max-w-\[360px\] > :nth-child(3) { animation-delay: 170ms; }
main[data-rs-auth] .max-w-\[360px\] > :nth-child(4) { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .rs-brand, .rs-brand *, main[data-rs-auth] .max-w-\[360px\] > * {
    animation: none !important;
  }
  .rs-brand__ghost path { stroke-dashoffset: 0; }
}

/* ---------- very short windows: keep the panel from crowding the headline ---------- */
@media (min-width: 1024px) and (max-height: 640px) {
  .rs-brand__lede { display: none; }
  .rs-brand__body { margin-block-end: 24px; }
}