/* Signing in: the intelligence panel on the left (always dark), the form on the right; on a phone, one screen that
   behaves like an app (the panel folds into a header, the form becomes a sheet, nothing scrolls sideways). */

.auth { min-height: calc(100 * var(--dvh)); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); background: var(--paper); }

/* ---------------------------------------------------------------- the panel */
.auth-art { --ink-on: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 36px 52px 32px; color: var(--ink-on);
  background: #070A1C; }
.auth-art::before { content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none; filter: blur(60px); opacity: .9;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(47, 91, 255, .55), transparent 70%),
    radial-gradient(30% 28% at 78% 30%, rgba(124, 92, 255, .45), transparent 70%),
    radial-gradient(34% 30% at 60% 82%, rgba(34, 211, 238, .28), transparent 70%),
    radial-gradient(26% 24% at 18% 78%, rgba(47, 181, 124, .22), transparent 70%);
  animation: auth-aurora 18s ease-in-out infinite alternate; }
.auth-art::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .18;
  background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%); }
.auth-art > * { position: relative; z-index: 1; }
@keyframes auth-aurora { from { transform: translate3d(-3%, -2%, 0) rotate(0deg); } to { transform: translate3d(3%, 3%, 0) rotate(6deg); } }

.auth-top { display: flex; align-items: center; gap: 14px; }
.auth-sign { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 10px 24px -10px rgba(10, 64, 180, .9); }
.auth-top .logo { height: 28px; width: auto; display: block; }
.auth-top .logo .logo-ink, .auth-top .logo .logo-mark { fill: #fff; }
.auth-product { font-size: var(--fs-md); font-weight: 750; letter-spacing: -0.01em; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .35); white-space: nowrap; line-height: 1; }

.auth-body { display: grid; gap: 0; max-width: 640px; }
.auth-kicker { color: #AEBBFF; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.auth-art h1 { font-size: clamp(32px, calc(3.4 * var(--vw)), 50px); font-weight: 760; line-height: 1.06; letter-spacing: -0.035em; max-width: 15ch; }
.lede-phone { display: none; }
.auth-art .lede { margin-top: 16px; max-width: 50ch; color: rgba(255, 255, 255, .74); font-size: var(--fs-md); line-height: 1.55; }

/* Aghaye Doctor at the centre: a slowly turning ring, two orbits, three signals floating round him */
.auth-orb-wrap { position: relative; width: 300px; height: 250px; margin: 0 0 22px -8px; }
.auth-orb { --fc-a: 0deg; position: absolute; left: 50%; top: 50%; width: 164px; height: 164px; transform: translate(-50%, -50%); display: grid; place-items: center; }
.auth-orb-ring { position: absolute; inset: 0; border-radius: 50%; padding: 3px; background: conic-gradient(from var(--fc-a), #22d3ee, #2dd4bf, #84cc16, #facc15, #fb923c, #f472b6, #a78bfa, #22d3ee);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fc-turn 7s linear infinite; }
.auth-orb::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1b2550, #0a0e26 70%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(47, 91, 255, .7); }
.auth-orb img { position: relative; width: 112px; height: 112px; border-radius: 50%; animation: auth-breathe 4s ease-in-out infinite; }
.auth-orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .16); transform: translate(-50%, -50%); }
.auth-orbit.o1 { width: 224px; height: 224px; animation: auth-spin 40s linear infinite; }
.auth-orbit.o2 { width: 292px; height: 292px; border-style: solid; border-color: rgba(255, 255, 255, .07); animation: auth-spin 70s linear infinite reverse; }
.auth-orbit::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #9CB2FF; box-shadow: 0 0 10px 2px rgba(156, 178, 255, .6); }
@keyframes fc-turn { to { --fc-a: 360deg; } }
@keyframes auth-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes auth-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes auth-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.auth-scope { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 30px 0 0; padding: 0; max-width: 640px; }
.auth-scope li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(8px); }
.auth-scope .icon { flex: none; width: 17px; height: 17px; margin-top: 2px; color: #C3CEF6; }
.auth-scope b { display: block; font-size: var(--fs-xs); }
.auth-scope small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .62); font-size: 11px; line-height: 1.4; }
.auth-foot { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .55); font-size: var(--fs-xs); }
.auth-dot { width: 8px; height: 8px; border-radius: 50%; background: #2FB57C; box-shadow: 0 0 0 4px rgba(47, 181, 124, .22); }

/* ---------------------------------------------------------------- the form */
.auth-main { position: relative; display: grid; place-items: center; padding: 40px 24px; background: radial-gradient(700px 420px at 50% -10%, rgba(108, 140, 255, .14), transparent 60%), var(--paper); }
.auth-card { position: relative; width: min(420px, 100%); display: grid; gap: 24px; padding: 32px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 90%, transparent); border: 1px solid var(--rule); box-shadow: var(--shadow-3); backdrop-filter: blur(14px); }
.auth-head { display: grid; gap: 6px; }
.auth-card h2 { font-size: var(--fs-2xl); letter-spacing: -0.02em; line-height: 1.15; }
.auth-card .sub { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; }
.auth-card form { display: grid; gap: 18px; }
.auth-card form[hidden] { display: none; }

/* A field, kept quiet: the label above, a plain box, one action at its end. The box only speaks on focus or error. */
.af-wrap { --af-line: color-mix(in oklab, var(--ink) 12%, transparent); display: grid; gap: 7px; min-width: 0; }
.af-wrap[hidden] { display: none; }
.af-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.af-l { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.af { display: flex; align-items: center; height: 48px; border-radius: var(--r-md); border: 1px solid var(--af-line); background: color-mix(in oklab, var(--ink) 3%, transparent); cursor: text;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease); }
.af:hover { border-color: color-mix(in oklab, var(--ink) 22%, transparent); }
.af:focus-within { border-color: var(--brand); background: transparent; box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent); }
.af input { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0 14px; border: 0; outline: 0; border-radius: inherit; background: none; box-shadow: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; }
/* Autofill: the browser paints its own background on the input; hold that paint back so the field stays one colour */
.af input:-webkit-autofill, .af input:-webkit-autofill:hover, .af input:-webkit-autofill:focus, .af input:autofill { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); -webkit-box-shadow: none; box-shadow: none; background-color: transparent; transition: background-color 9999999s step-end, color 9999999s step-end; }
.af input::placeholder { color: var(--ink-4); font-weight: 400; }
.af-act { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 4px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-4); cursor: pointer; }
.af-act:hover { color: var(--ink-2); }
.af-act .icon { width: 18px; height: 18px; }
.af-clear { visibility: hidden; }
.af:has(input:not(:placeholder-shown)):focus-within .af-clear { visibility: visible; }
.af:has(input[readonly]) { background: transparent; cursor: default; box-shadow: none; border-color: var(--af-line); }
.af:has(input[readonly]) input { color: var(--ink-3); }
.af input.invalid { border: 0 !important; box-shadow: none !important; } /* the box shows the error, not the input */
.af:has(input.invalid) { border-color: var(--neg); box-shadow: 0 0 0 3px var(--neg-soft); }
.af-hint, .af-caps { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.45; }
.af-caps { display: inline-flex; align-items: center; gap: 6px; color: var(--warn, #E8A13A); font-weight: 600; } .af-caps[hidden] { display: none; }
.auth-card .fld-error { font-weight: 550; }

/* Keep me signed in */
.auth-remember { position: relative; display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 40px; cursor: pointer; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 550; line-height: 1.25; -webkit-tap-highlight-color: transparent; }
.auth-remember small { display: block; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 450; margin-top: 2px; }
.auth-remember input { position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin: -10px 0 0; opacity: 0; }
.auth-remember .cb { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-xs); border: 1px solid color-mix(in oklab, var(--ink) 24%, transparent); color: transparent; transition: background .15s, border-color .15s, color .15s; }
.auth-remember .cb .icon { width: 14px; height: 14px; stroke-width: 3; }
.auth-remember input:checked + .cb { background: var(--brand); border-color: var(--brand); color: #fff; }
.auth-remember input:focus-visible + .cb { box-shadow: var(--ring); }
.auth-link { border: 0; background: none; padding: 0; color: var(--brand-bright); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .auth-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
.auth-link.center { justify-self: center; padding: 10px; font-size: var(--fs-sm); }

/* The button: full width, a spinner while it works */
.auth-go { position: relative; height: 48px; border-radius: var(--r-md); font-weight: 650; font-size: var(--fs-md); gap: 8px; transition: transform .15s var(--ease), opacity .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.auth-go:active { transform: scale(.99); }
.auth-go .icon { transition: transform .2s var(--ease); } .auth-go:hover .icon { transform: translateX(3px); }
.auth-go.ghost { background: transparent; color: var(--ink); border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); }
.auth-go.busy { pointer-events: none; }
.auth-go.busy > * { visibility: hidden; }
.auth-go.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: auth-turn .7s linear infinite; }
@keyframes auth-turn { to { transform: rotate(360deg); } }
@keyframes auth-in { from { opacity: 0; transform: translateY(-4px); } }

.auth-card .links { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink-3); font-size: var(--fs-xs); text-align: center; }
.auth-card .links a { display: inline-flex; align-items: center; gap: 4px; }

/* Step two: back, the chip, six boxes for the code */
.auth-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: -8px 0 -10px -6px; padding: 0 8px 0 6px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-3); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.auth-back:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); } .auth-back[hidden] { display: none; }
.auth-back .icon { width: 17px; height: 17px; }
.auth-step { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 2px; color: var(--pos); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .01em; }
.auth-step[hidden] { display: none; }
.otp { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 8px repeat(3, minmax(0, 1fr)); gap: 8px; }
.otp-c:nth-of-type(4) { grid-column: 5; }
.otp input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; color: transparent; caret-color: transparent; background: none; }
.otp-c { display: grid; place-items: center; height: 54px; border-radius: var(--r-md); border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); background: color-mix(in oklab, var(--ink) 3%, transparent); font-family: var(--font-num); font-size: 24px; font-weight: 650; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.otp-c.on { border-color: color-mix(in oklab, var(--ink) 24%, transparent); }
.otp:focus-within .otp-c.cur { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent); }
.otp:focus-within .otp-c.cur:empty::after { content: ""; width: 1.5px; height: 24px; background: var(--brand-bright); animation: otp-blink 1s steps(1) infinite; }
.otp.bad .otp-c { border-color: var(--neg); }
.otp.bad { animation: otp-shake .36s var(--ease); }
.otp[hidden] { display: none; }
@keyframes otp-blink { 50% { opacity: 0; } }
@keyframes otp-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.otp-hint { color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; text-align: center; margin-top: -6px; }
.otp-hint[hidden] { display: none; }
.auth[data-step="code"] .auth-help { display: none; }

/* The link that no longer works */
#welcome-ok, #welcome-gone { display: grid; gap: 22px; } #welcome-ok[hidden], #welcome-gone[hidden] { display: none; }
.auth-gone { display: grid; gap: 8px; justify-items: center; text-align: center; padding-top: 4px; }
.auth-gone-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: var(--r-md); background: color-mix(in oklab, var(--ink) 6%, transparent); color: var(--ink-3); }
.auth-gone-ic .icon { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) { .auth-art::before, .auth-orb-ring, .auth-orb img, .auth-orbit, .otp.bad, .auth-note { animation: none; } .auth-art .auth-collapse { transition: none; } }
@media (max-width: 1180px) { .auth-scope { grid-template-columns: 1fr 1fr; } .auth-art { padding: 32px 36px 28px; } }

/* ---------------------------------------------------------------- the phone: one screen, like an app
   Built for a 360-430px screen first. The panel becomes a short header; the form is a sheet that rises over it.
   Typing: 16px or more everywhere (iOS never zooms), every target at least 44px, and while a field is in use the
   header folds away so the field and the button stay above the keyboard. */
@media (max-width: 899px) {
  /* The sheet sits at the bottom, as tall as the form; the header takes the rest and centres itself in it. */
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(auto, 1fr) auto; min-height: calc(100 * var(--dvh)); background: #070A1C; }
  .auth-art { padding: calc(28px + env(safe-area-inset-top, 0px)) 24px 44px; gap: 0; justify-content: center; align-items: center; text-align: center; }
  .auth-art::after { background-size: 36px 36px; mask-image: radial-gradient(ellipse at 50% 20%, #000 10%, transparent 70%); }
  .auth-top, .auth-scope, .auth-foot { display: none; }
  .auth-body { justify-items: center; max-width: none; }
  .auth-art .auth-collapse { overflow: hidden; transition: max-height .3s var(--ease), opacity .2s var(--ease), margin .3s var(--ease); }
  .auth-orb-wrap { width: 112px; height: 112px; max-height: 112px; margin: 0 0 14px; }
  .auth-orb { width: 96px; height: 96px; } .auth-orb img { width: 64px; height: 64px; } .auth-orb::before { inset: 7px; }
  .auth-orbit.o1 { width: 112px; height: 112px; } .auth-orbit.o2 { display: none; }
  .auth-kicker { font-size: 11px; margin-bottom: 8px; }
  .auth-art h1 { font-size: clamp(24px, calc(6.6 * var(--vw)), 28px); line-height: 1.12; max-width: 18ch; } .auth-art h1 br { display: none; }
  .lede-desk { display: none; } .lede-phone { display: block; max-height: 80px; }
  .auth-art .lede { margin-top: 8px; font-size: 14.5px; line-height: 1.5; max-width: 30ch; color: rgba(255, 255, 255, .7); }

  .auth-main { display: block; padding: 0; margin-top: -16px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface); box-shadow: 0 -16px 32px -12px rgba(0, 0, 0, .55); }
  .auth-card { width: 100%; max-width: 520px; margin: 0 auto; align-content: start; gap: 22px; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; background: none;
    padding: 26px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .auth-card h2 { font-size: 24px; }
  .auth-card .sub { font-size: 15px; }
  .auth-card form { gap: 18px; }
  .af { height: 52px; }
  .af input { font-size: 17px; padding: 0 15px; }
  .af-l { font-size: 14px; }
  .af-act { width: 44px; height: 44px; }
  .af:has(input:not(:placeholder-shown)) .af-clear { visibility: visible; } /* on a phone the cross stays while there is text */
  .auth-link { font-size: 14px; padding: 6px 0; margin: -6px 0; }
  .auth-remember { font-size: 15px; min-height: 44px; }
  .auth-remember .cb { width: 22px; height: 22px; }
  .auth-go { height: 52px; font-size: 17px; }
  .auth-card .auth-help { display: none; }
  .otp { gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)) 6px repeat(3, minmax(0, 1fr)); }
  .otp-c { height: 58px; font-size: 26px; }

  /* A field in use: the header folds to its title */
  .auth:has(.auth-main input:focus) .auth-collapse { max-height: 0; opacity: 0; margin: 0; }
}
@media (max-width: 899px) and (max-height: 720px) { .auth-orb-wrap { display: none; } }
@media (max-width: 899px) and (max-height: 620px) { .auth-art .lede { display: none; } }
@media (max-width: 359px) { .auth-card { padding-left: 16px; padding-right: 16px; } .otp { gap: 4px; } .otp-c { height: 52px; font-size: 22px; } }

/* The sign-in page's fields write in Geist (kamyab, 1405/08/04: "یه چیز بهتر و جذاب تر"): what is typed and the
   placeholders. Persian falls back to Vazirmatn through the platform's own stack. The font is fetched only here. */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body[data-page="signin"] .af input { font-family: "Geist", var(--font); font-weight: 500; letter-spacing: .005em; }
body[data-page="signin"] .af input::placeholder { font-family: "Geist", var(--font); font-weight: 400; letter-spacing: .01em; }